{"version":3,"file":"review-page/style-index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;;EAAA;AAoBA;EACC;EACA;EACA;AAXD;AAcA;EACC;AAXD;AAcA;EACC;AAXD;AAiBA;EACC;AAdD;AAqBA;EACC;IACC;IACA;EAlBA;AACF;AAyBA;EACC;EACA;EACA;AAvBD;AA0BA;;;EAGC;AAvBD;AA0BA;EACC;IACC;EAvBA;AACF;AA8BA;EAIC;EACA;EACA;EACA;EACA;EACA;EAAA;EACA;EACA;EACA;EACA;EACA;EACA,gIC5DkB;ED6DlB,eC3DkB;ED4DlB,gBC3DkB;ED4DlB,cCvBoB;EDwBpB,mBCvBoB;EDwBpB;EACA;EACA,0BC3BoB;ED4BpB,kBCdc;EDed;EACA;OAAA;EACA;AA/BD;AAkCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA,cCzCoB;ADUrB;AAiCC;EACC;EACA;EACA;AA/BF;AAmCA;EACC;EACA;AAhCD;AAmCA;EACC;EACA;EACA;EACA;EACA;AAhCD;AAmCA;EACC;EACA;EACA;EACA;EACA;AAhCD;AAmCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhCD;AAkCC;EACC;AAhCF;AAmCC;EACC;EACA;AAjCF;AAqCA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cCzGoB;ED0GpB;EACA;EACA,kBC9Fc;ED+Fd;AAlCD;AAoCC;EACC;EACA;EACA;AAlCF;AAqCC;EACC;AAnCF;AAsCC;EACC;EACA;AApCF;AA4CA;EACC;EAGA;EACA;EACA;EACA;AA3CD;AA6CC;EACC;AA3CF;AA8CC;EACC;EACA;AA5CF;AA+CC;EACC;EACA;AA7CF;AA+CE;EACC;AA7CH;AAwDA;;;EAGC;AArDD;AAiEA;EACC;EACA;EACA;EACA;EACA;AA9DD;AAgEC;EACC;EACA;AA9DF;AAkEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/DD;AAiEC;EAEC;AAhEF;AAkEE;EACC;AAhEH;AAoEC;EACC;EACA;AAlEF;AAsEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnED,C","sources":["webpack://jumplinks-editorial-workflow/./src/review-page/style.scss","webpack://jumplinks-editorial-workflow/./src/review-page/_tokens.scss"],"sourcesContent":["/**\n * Flow Editorial Workflow — Review Page layout styles.\n * Imported by src/review-page/index.js; extracted to build/review-page/style-index.css.\n *\n * Only page-level layout rules live here — component styles live in\n * bar.scss and sidebar.scss, injected directly into their Shadow DOM roots.\n */\n\n@use './tokens' as *;\n\n// `--wp-admin-theme-color` (plus rgb / darker variants) is injected by\n// `Assets::get_admin_theme_inline_css()` based on the user's wp-admin\n// colour scheme. Individual rules use `var(... , #fallback)` so missing\n// vars still render — no `:root` declaration needed here.\n\n// Push content below the fixed bar. The comments sidebar lives on the\n// RIGHT and is open by default on desktop, so default margin-right is\n// reserved. The activity sidebar lives on the LEFT and is closed by\n// default, so default margin-left is 0; the `--activity-open` modifier\n// pushes content right when it slides in.\nbody.flow-review-page {\n\tpadding-top: $bar-height !important;\n\tmargin-right: $sidebar-width !important;\n\ttransition: margin-left 180ms ease, margin-right 180ms ease;\n}\n\nbody.flow-review-page--comments-closed {\n\tmargin-right: 0 !important;\n}\n\nbody.flow-review-page--activity-open {\n\tmargin-left: $activity-sidebar-width !important;\n}\n\n// Device preview mode (Pro): iframe is centered + clamped to a fixed\n// designed width, so the surrounding canvas needs a backdrop to make\n// the device frame readable.\nbody.flow-device-preview {\n\tbackground-color: #ddd;\n}\n\n// Mobile: both sidebars overlay content instead of pushing it, so the\n// iframe preview can use the full viewport width (matched in\n// ReviewBar.js iframe scaling, which treats sidebars as 0px below this\n// breakpoint).\n@media (max-width: $mobile-bp) {\n\tbody.flow-review-page {\n\t\tmargin-left: 0 !important;\n\t\tmargin-right: 0 !important;\n\t}\n}\n\n// Host element only — the popover itself is mounted into a Shadow DOM root\n// (see mount-in-shadow + popover.scss) so theme / page-builder CSS in the\n// parent document can't reach the popover button styles. The big light-DOM\n// button reset that used to live here is no longer needed.\n#flow-inline-popover-host {\n\tposition: relative;\n\tz-index: 100000;\n\tpointer-events: none;\n}\n\n#flow-bar-host,\n#flow-sidebar-host,\n#flow-activity-sidebar-host {\n\tdisplay: block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\tbody.flow-review-page {\n\t\ttransition: none;\n\t}\n}\n\n// =============================================================================\n// Inline comment help — Figma Alert / info (Frame 30).\n// =============================================================================\n\n.flow-review-info-notice {\n\t// Floats under the bar centered in the viewport — does not take up\n\t// layout space in the iframe / shell. Z-index sits above the iframe but\n\t// below the comment popover / sidebar shadow roots.\n\tposition: fixed;\n\ttop: $bar-height + 12px;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tz-index: 99999;\n\twidth: max-content;\n\tmax-width: min(720px, calc(100% - 32px));\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tpadding: 12px 16px;\n\tfont-family: $font-stack;\n\tfont-size: $font-size-base;\n\tline-height: $line-height-base;\n\tcolor: $notice-info-text;\n\tbackground: $notice-info-bg;\n\tborder: 1px solid $notice-info-border;\n\tborder-left-width: 4px;\n\tborder-left-color: $notice-info-text;\n\tborder-radius: $radius-sm;\n\tbox-shadow: none;\n\tuser-select: none;\n\t-webkit-user-select: none;\n}\n\n.flow-review-info-notice__icon {\n\tdisplay: flex;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tcolor: $notice-info-text;\n\n\tsvg {\n\t\tdisplay: block;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t}\n}\n\n.flow-review-info-notice__content {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n}\n\n.flow-review-info-notice__title {\n\tmargin: 0 0 2px;\n\tfont-size: inherit;\n\tfont-weight: 600;\n\tline-height: inherit;\n\tcolor: inherit;\n}\n\n.flow-review-info-notice__text {\n\tmargin: 0;\n\tfont-size: inherit;\n\tfont-weight: 400;\n\tline-height: inherit;\n\tcolor: inherit;\n}\n\n.flow-review-info-notice__link {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n\tfont: inherit;\n\tfont-weight: inherit;\n\tcolor: inherit;\n\ttext-decoration: underline;\n\ttext-underline-offset: 2px;\n\tbackground: none;\n\tborder: none;\n\tborder-radius: 0;\n\tcursor: pointer;\n\tvertical-align: baseline;\n\n\t&:hover {\n\t\tcolor: #0f6387;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid $notice-info-text;\n\t\toutline-offset: 2px;\n\t}\n}\n\n.flow-review-info-notice__dismiss {\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 36px;\n\theight: 36px;\n\tmargin: -8px -8px -8px 0;\n\tpadding: 0;\n\tcolor: $notice-info-text;\n\tbackground: transparent;\n\tborder: 0;\n\tborder-radius: $radius-sm;\n\tcursor: pointer;\n\n\tsvg {\n\t\tdisplay: block;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t}\n\n\t&:hover {\n\t\tbackground: rgba( $notice-info-text, 0.08 );\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid $notice-info-text;\n\t\toutline-offset: 1px;\n\t}\n}\n\n// =============================================================================\n// Inline comment highlights (light DOM — content area)\n// =============================================================================\n\n.flow-inline-highlight {\n\tbackground: rgba(255, 212, 59, 0.35);\n\t// box-shadow underline — same visual as border-bottom but doesn't push\n\t// the line box, so wrapping text doesn't reflow when a highlight lands.\n\tbox-shadow: inset 0 -2px 0 rgba(255, 183, 0, 0.6);\n\tcursor: pointer;\n\tborder-radius: 2px;\n\ttransition: background 0.2s ease, box-shadow 0.2s ease;\n\n\t&:hover {\n\t\tbackground: rgba(255, 212, 59, 0.55);\n\t}\n\n\t&--active {\n\t\tbackground: rgba(255, 183, 0, 0.55);\n\t\tbox-shadow: inset 0 -2px 0 #e69500;\n\t}\n\n\t&--resolved {\n\t\tbackground: rgba(130, 214, 142, 0.3);\n\t\tbox-shadow: inset 0 -2px 0 rgba(130, 214, 142, 0.5);\n\n\t\t&:hover {\n\t\t\tbackground: rgba(130, 214, 142, 0.45);\n\t\t}\n\t}\n}\n\n// The highlight ring on commented media renders as an inset outline on the\n// `.flow-embed-overlay` sibling (see init-embed-overlays.js for that CSS).\n// This unifies the look across wrapped media (figures), positioned media\n// (.wp-block-cover backgrounds, embed iframes in aspect-ratio wrappers),\n// where parent overflow:hidden clipping rules out a per-media outset\n// outline that matches everywhere.\nimg.flow-inline-highlight-media,\nvideo.flow-inline-highlight-media,\niframe.flow-inline-highlight-media {\n\tcursor: pointer;\n}\n\n// =============================================================================\n// Embed iframe overlay (YouTube, Vimeo, etc.)\n//\n// Each iframe is wrapped in `.flow-embed-wrap` so the overlay only covers\n// the iframe itself — never sibling content. `pointer-events: none` on the\n// iframe means the cross-origin player can't intercept clicks; the overlay\n// captures them and routes to the comment popover.\n// =============================================================================\n\n.flow-embed-wrap {\n\tdisplay: inline-block;\n\tline-height: 0;\n\tmax-width: 100%;\n\tposition: relative;\n\tvertical-align: top;\n\n\t> iframe {\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n}\n\n.flow-embed-overlay {\n\talign-items: center;\n\tbackground: transparent;\n\tborder: 0;\n\tcursor: pointer;\n\tdisplay: flex;\n\tinset: 0;\n\tjustify-content: center;\n\tposition: absolute;\n\ttransition: background-color 0.15s ease;\n\tz-index: 2;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground: rgba(0, 0, 0, 0.25);\n\n\t\t.flow-embed-overlay__hint {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--wp-admin-theme-color, #2271b1);\n\t\toutline-offset: -2px;\n\t}\n}\n\n.flow-embed-overlay__hint {\n\tbackground: rgba(0, 0, 0, 0.7);\n\tborder-radius: 4px;\n\tcolor: #ffffff;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tline-height: 1.2;\n\topacity: 0;\n\tpadding: 8px 14px;\n\tpointer-events: none;\n\ttransition: opacity 0.15s ease;\n}\n","// =============================================================================\n// Flow Editorial Workflow — Design tokens\n// Shared by bar.scss and sidebar.scss (both injected into Shadow DOM roots).\n// =============================================================================\n\n// ----- Layout ----------------------------------------------------------------\n$bar-height:    64px;\n$sidebar-width: 360px;\n// Activity sidebar (Pro) is the slim Gutenberg-style timeline strip; kept\n// distinct from the comments sidebar so the two can be tuned independently.\n$activity-sidebar-width: 260px;\n// Matches the JS-side mobile breakpoint in ReviewBar.js (iframe scaling and\n// default sidebar state). Aligned with wp-admin's 782px breakpoint.\n$mobile-bp:     782px;\n// Upper edge for the \"narrow\" bar layout — between $mobile-bp and this\n// width the bar trims itself: drops the \"Reviewing … · Post type\"\n// prefix/suffix, the snapshot meta label, the edit-content icon, and\n// shrinks the status badge. Set at 1400px so the trim kicks in well\n// before small-laptop widths get cramped. The name \"tablet-bp\" is\n// retained for continuity with earlier rules — the constant doubles as\n// both \"tablet\" and \"narrow laptop\" in practice.\n$tablet-bp:     1400px;\n\n// One step wider — at this width the centred freshness indicator gets\n// repositioned to the right side of the bar so it can't overlap a\n// long title in the centre. Other trims still wait until $tablet-bp.\n$wide-bp:       1600px;\n\n// ----- Z-index ---------------------------------------------------------------\n$z-bar:     999999;\n$z-sidebar: 999998;\n\n// ----- Typography ------------------------------------------------------------\n$font-stack:       -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n                   Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n$font-size-base:   13px;\n$line-height-base: 1.4;\n\n// ----- Colours ---------------------------------------------------------------\n$color-text:         #1e1e1e;\n$color-muted:        #757575;\n$color-placeholder:  #949494;\n$color-bg-white:     #fff;\n$color-bg-subtle:    #f6f7f7;\n$color-bg-header:    #f9f9f9;\n$color-border:       #e0e0e0;\n$color-border-input: #949494;\n// CSS custom property — resolved at paint time; inherits across shadow boundary.\n$color-accent: var(--wp-admin-theme-color, #007cba);\n\n// ----- Status badge colours --------------------------------------------------\n// Keep in sync with src/shared/status-themes.js and assets/css/status-themes.css.\n$badge-open-text:   #1579a5;\n$badge-open-bg:     #dff4ff;\n$badge-open-border: #b6e6ff;\n\n$badge-approved-text:   #458037;\n$badge-approved-bg:     #e7f5e4;\n$badge-approved-border: #cae8c4;\n\n$badge-review-text:   #957500;\n$badge-review-bg:     #fcf0ce;\n$badge-review-border: #f2dda4;\n\n$badge-changes-text:   #c92122;\n$badge-changes-bg:     #ffebea;\n$badge-changes-border: #ffd1d0;\n\n$badge-pending-text:   #5e777b;\n$badge-pending-bg:     #e6f3f5;\n$badge-pending-border: #cde3e7;\n\n// ----- Notice / error colours ------------------------------------------------\n$notice-info-text:   #1579a5;\n$notice-info-bg:     #dff4ff;\n$notice-info-border: #b6e6ff;\n\n$notice-success-text: #1a6b28;\n$notice-success-bg:   #edfaee;\n$notice-error-text:   #8a2424;\n$notice-error-bg:     #fbeaea;\n\n$error-text:   #cc1818;\n$error-bg:     #fcf0f1;\n$error-border: #cc1818;\n\n// ----- Radii -----------------------------------------------------------------\n$radius-sm:    2px;\n$radius-badge: 10px;\n\n// ----- Transitions -----------------------------------------------------------\n$transition-fast: 0.1s;\n"],"names":[],"sourceRoot":""}