/* * Tokens from the BarkleyOKRP Internal Design System. Fonts are the * system's settled Google Font equivalents (Figtree = Söhne, DM Mono = * Söhne Mono, Libre Baskerville = Self Modern), loaded from layout.php's * - the DS explicitly says not to swap in licensed Söhne binaries. */ :root { color-scheme: light; /* Primary palette - the whole UI */ --bokrp-black: #000000; --bokrp-cream: #FFF8EE; --bokrp-orange: #FF501C; --bokrp-juice: #FBB832; /* Neutrals derived from black on cream */ --gray-hairline: #E2DACE; --gray-rule: #CFC5B6; --gray-muted: #6E675E; --gray-faint: #F4ECE0; --gray-chrome-line: #2A2A2A; --gray-chrome-mute: #9A948C; /* Surfaces - depth is a tint change, never a shadow */ --surface-page: var(--bokrp-cream); --surface-raised: #FFFCF7; --surface-sunken: var(--gray-faint); --surface-chrome: var(--bokrp-black); --surface-field: #FFFFFF; --surface-selected: #FFE9D9; /* Data palette - tables/charts categorization only, never chrome, buttons or status */ --data-blue: #3E8CF0; --data-pink: #FFCBF6; --data-green: #A0A404; /* Typography */ --font-core: "Figtree", system-ui, sans-serif; --font-mono: "DM Mono", ui-monospace, monospace; --font-quote: "Libre Baskerville", Georgia, serif; --track-tight: -0.02em; --track-caps: 0.08em; --track-wide: 0.12em; /* Spacing / control metrics */ --gutter: 24px; --control-h: 36px; --control-h-sm: 28px; --chrome-h: 56px; /* Borders & radii - flat, small, structural */ --radius-1: 2px; --radius-2: 4px; /* Motion - minimal and functional */ --transition-control: background-color 90ms cubic-bezier(.2, 0, .2, 1), color 90ms cubic-bezier(.2, 0, .2, 1), border-color 90ms cubic-bezier(.2, 0, .2, 1); /* * Legacy aliases - the names the rest of this stylesheet grew up with, * now pointing at DS tokens. New rules should use the DS names above. * The old red/amber "danger/warning" pairs map into the DS's no-red * status model: errors are orange, warnings are juice, blocks are black. */ --color-bg: var(--surface-sunken); --color-surface: var(--surface-raised); --color-text: var(--bokrp-black); --color-text-muted: var(--gray-muted); --color-border: var(--gray-hairline); --color-border-strong: var(--gray-rule); --color-accent: var(--bokrp-orange); --color-accent-text: var(--bokrp-orange); --color-highlight: var(--bokrp-juice); --color-danger: var(--bokrp-orange); --color-danger-bg: var(--surface-selected); --color-danger-border: var(--bokrp-orange); --color-warning-bg: var(--bokrp-juice); --color-warning-text: var(--bokrp-black); --color-warning-strong-bg: var(--bokrp-orange); --color-warning-strong-text: var(--bokrp-black); --font-heading: var(--font-core); --font-body: var(--font-core); --font-emphasis: var(--font-quote); /* interaction */ --focus-ring: 2px solid var(--bokrp-orange); --transition-quick: 90ms cubic-bezier(.2, 0, .2, 1); } * { box-sizing: border-box; } /* The UA's [hidden] { display: none } loses to ANY author display rule (e.g. a display:flex overlay or notice), which is exactly how the comment panel could never visually close and the orphan-exclusions notice showed while hidden (UX audit B1). One blanket rule ends the whole bug class: the hidden attribute always wins. */ [hidden] { display: none !important; } html { -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-core); font-weight: 400; font-size: 14px; line-height: 1.45; background: var(--surface-page); color: var(--bokrp-black); text-wrap: pretty; } /* DS dense-UI scale: h1 30 / h2 24 / h3 19, ExtraBold, tight tracking. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-core); font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.15; } h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 19px; } /* Links are orange, underlined; hover shifts the text to black and keeps the orange underline (DS base.css). */ a { color: var(--bokrp-orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--transition-control); } a:hover { color: var(--bokrp-black); text-decoration-color: var(--bokrp-orange); } ::selection { background: var(--bokrp-juice); color: var(--bokrp-black); } /* Native checkboxes/radios take the DS's black checked state (Checkbox.jsx: black fill, cream check) instead of the browser-default blue. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--bokrp-black); } /* All figures, IDs and dates use mono with tabular figures so columns align. */ .num, td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* One visible keyboard-focus treatment for everything interactive: 2px orange ring, offset 1px (DS interaction states). */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--focus-ring); outline-offset: 1px; } /* * Chrome: black top bar carrying cream text (DS "chrome vs content"). * Cream is the content field below; the bar holds the BarkleyOKRP lockup, * a divider, the tool name as a mono label, then nav. */ .site-header { border-bottom: 1px solid var(--gray-chrome-line); background: var(--surface-chrome); color: var(--bokrp-cream); } .site-nav { min-height: var(--chrome-h); padding: 8px var(--gutter); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .site-nav a { color: var(--bokrp-cream); text-decoration: none; font-family: var(--font-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); transition: var(--transition-control); } .site-nav a:hover { color: var(--bokrp-juice); } .site-nav__brand { display: inline-flex; align-items: center; gap: 16px; margin-right: auto; } .site-nav__logo { height: 16px; width: auto; display: block; } .site-nav__divider { width: 1px; height: 20px; background: var(--gray-chrome-line); } .site-nav__tool { color: var(--bokrp-cream); } .site-nav__user { color: var(--gray-chrome-mute); } .site-nav a.site-nav__user:hover { color: var(--bokrp-cream); } .site-nav__logout { margin: 0; display: inline; } /* Content field: full width and left-aligned - no centered narrow column (DS layout rules). */ .site-main { padding: var(--gutter); } .flash { margin: 16px var(--gutter) 0; padding: 0.75rem 1rem; border-radius: var(--radius-2); border: 1px solid var(--gray-hairline); background: var(--surface-raised); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .flash__message { word-break: break-word; } .flash__copy { flex-shrink: 0; background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); padding: 0.3rem 0.7rem; font-size: 0.85rem; } /* No red/green pair in this system: errors are orange on the selected tint, success is reported neutrally in black ("state the fact"). */ .flash--error { background: var(--surface-selected); border-color: var(--bokrp-orange); color: var(--bokrp-black); } .flash--success { background: var(--surface-sunken); border-color: var(--gray-rule); color: var(--bokrp-black); } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 1.5rem; } .panel--error h1 { color: var(--color-danger); } /* * Buttons per the DS Button spec: mono, uppercase, tracked caps, 4px * radius, flat. Primary = orange fill with BLACK text (filled orange never * takes white/cream text); hover darkens the fill, press darkens further - * no lift, no shadow. */ .button, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); font-family: var(--font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-caps); background: var(--bokrp-orange); color: var(--bokrp-black); border: 1px solid var(--bokrp-orange); border-radius: var(--radius-2); padding: 0 14px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--transition-control); } /* :where() keeps these at zero specificity so any component's own button styling (transparent icon buttons, secondary buttons, …) wins over them. */ :where(.button, button):hover { background: #E8410F; border-color: #E8410F; color: var(--bokrp-black); } :where(.button, button):active { background: #D0380C; border-color: #D0380C; } .site-nav__logout button { background: transparent; color: var(--bokrp-cream); border: 1px solid var(--gray-chrome-line); min-height: var(--control-h-sm); padding: 0 10px; font-size: 11px; } .site-nav__logout button:hover { background: #141414; border-color: var(--gray-chrome-mute); color: var(--bokrp-cream); } /* * Text-like and glyph buttons: undo the mono-uppercase control treatment. * These render user content (field names, menu items) or a single glyph * (remove ×, collapse ▸), where uppercasing/tracking would mangle the text * and the 36px control height would inflate dense list rows. */ .builder__field-name, .actions-more__item, .builder__reorder-button, .builder__value-remove, .channel-row__collapse, .channel-row__remove, .format-row__remove, .comment-panel__close { font-family: var(--font-core); font-size: inherit; text-transform: none; letter-spacing: normal; min-height: 0; } .panel + .panel { margin-top: 1.5rem; } /* Outline variant: hairline black boundary, sunken cream on hover. */ .button--secondary { background: transparent; color: var(--bokrp-black); border: 1px solid var(--bokrp-black); } .button--secondary:hover { background: var(--surface-sunken); color: var(--bokrp-black); border-color: var(--bokrp-black); } .button--secondary:active { background: var(--gray-hairline); } .field { margin-bottom: 1rem; } /* Labels are nouns set as mono caps (DS Field spec). */ .field label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 6px; } /* Fields sit on white, bounded by the rule gray; focus darkens the border to black (the global focus-visible rule adds the orange ring). */ .field input[type="text"], .field input[type="date"], .field input[type="file"], .field select, .field textarea { width: 100%; max-width: 420px; padding: 0.5rem 10px; border: 1px solid var(--gray-rule); border-radius: var(--radius-2); font-family: var(--font-core); font-size: 13px; background: var(--surface-field); color: var(--bokrp-black); transition: var(--transition-control); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bokrp-black); } .field__error { color: var(--bokrp-orange); font-weight: 500; font-size: 12px; margin: 0.25rem 0 0; } .filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .filters .field { margin-bottom: 0; } .field--actions { display: flex; gap: 0.5rem; } .table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--gray-hairline); font-size: 13px; } /* Column heads are mono micro-labels over a rule-weight border (DS DataTable spec). */ .table th { font-family: var(--font-mono); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gray-muted); border-bottom-color: var(--gray-rule); } .table tbody tr { transition: var(--transition-control); } .table tbody tr:hover { background: var(--surface-sunken); } /* Numeric cells: right-aligned mono with tabular figures so columns align. */ .table__num { text-align: right; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } /* Action cells hold a link + a form (forms are block-level and would otherwise stack) - lay them out inline. */ .table__actions { white-space: nowrap; } .table__actions .actions__form { display: inline-block; margin-left: 0.4rem; } /* Wide tables scroll inside their own container instead of stretching the page (no page-level horizontal scroll on narrow screens). */ .table-wrap { overflow-x: auto; } .empty-state { color: var(--color-text-muted); background: var(--color-bg); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-2); padding: 1rem; } /* Dashboard-style heading row: page title + primary action side by side. */ .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-heading h1 { margin: 0; } /* * Badges per the DS Badge spec: 20px, 2px radius (not a pill), mono caps. * Status is built from primaries - orange = active/needs action, juice = * pending, black = done, hairline outline = idle/draft. The secondary * blue/pink/green palette never appears in status indicators. */ .badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-1); border: 1px solid var(--gray-hairline); font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); white-space: nowrap; background: var(--surface-sunken); color: var(--bokrp-black); } .badge--status-draft { background: transparent; border-color: var(--gray-rule); color: var(--gray-muted); } .badge--status-active { background: var(--bokrp-orange); border-color: var(--bokrp-orange); color: var(--bokrp-black); } .badge--status-in-review { background: var(--bokrp-juice); border-color: var(--bokrp-juice); color: var(--bokrp-black); } .badge--status-approved { background: var(--bokrp-black); border-color: var(--bokrp-black); color: var(--bokrp-cream); } .badge--status-archived { background: transparent; border-color: var(--gray-rule); color: var(--gray-muted); } .actions { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; margin-top: 1rem; } .actions__form { margin: 0; } /* Matrix header chrome (UX audit C15) - one compact meta line instead of a stack of

s, notes behind a disclosure, breadcrumb slightly muted. */ .matrix-breadcrumb { margin: 0 0 0.25rem; font-size: 0.9rem; } .matrix-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.25rem 0 0.75rem; font-size: 0.9rem; color: var(--color-text-muted); } .matrix-meta__item strong { color: var(--color-text); font-weight: 600; } .matrix-notes { margin: 0 0 0.75rem; font-size: 0.9rem; } .matrix-notes summary { cursor: pointer; font-weight: 600; color: var(--color-text-muted); } .matrix-notes p { margin: 0.4rem 0 0; } /* PRD §41's "editing will return the matrix to Draft" notice, shown on the Builder tab of an APPROVED matrix (UX audit F4). */ .approved-edit-warning { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-2); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: 0.9rem; } /* Save Version disclosure - the note input (PRD §32) lives behind the same summary-as-button pattern as Save as Template. */ .save-version { position: relative; } /* The

wrappers are flex containers so their "button" is a flex item like every real button in the row - as inline-block on a text baseline it rendered a few px higher than its siblings and lost the button's vertical label centering. Flex also drops the ::marker. */ .save-version, .actions-more { display: inline-flex; } .save-version summary, .actions-more > summary { list-style: none; user-select: none; } .save-version summary::-webkit-details-marker, .actions-more > summary::-webkit-details-marker { display: none; } .save-version__form { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 30; background: var(--surface-raised); border: 1px solid var(--bokrp-black); border-radius: var(--radius-2); padding: 0.9rem 1rem; display: flex; align-items: flex-end; gap: 0.6rem; min-width: 20rem; } .save-version__form label { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); flex: 1; } .save-version__form input[type="text"] { font-family: var(--font-core); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 0.4rem 0.5rem; border: 1px solid var(--gray-rule); border-radius: var(--radius-2); background: var(--surface-field); } .save-version__form button { white-space: nowrap; } /* "More ▾" overflow menu for the less-frequent matrix actions. */ .actions-more { position: relative; } .actions-more__menu { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 30; background: var(--surface-raised); border: 1px solid var(--bokrp-black); border-radius: var(--radius-2); padding: 0.4rem; min-width: 14rem; } .actions-more__item { display: block; width: 100%; text-align: left; background: transparent; color: var(--color-text); border: none; border-radius: var(--radius-2); padding: 0.5rem 0.6rem; font: inherit; cursor: pointer; } .actions-more__item:hover { background: var(--color-bg); color: var(--color-text); } .actions-more__item--danger { color: var(--color-danger); } .actions-more__item--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); } .actions-more .save-as-template { margin-top: 0; } .actions-more .save-as-template > summary { list-style: none; } .actions-more .save-as-template > summary::-webkit-details-marker { display: none; } .actions-more .save-as-template__form, .actions-more .save-as-template__hint { padding: 0 0.6rem 0.4rem; } .logo-upload { margin-top: 1rem; } /* Fixed-height slot for the client logo - the height attribute on the plus width:auto here keeps the aspect ratio without layout shift. */ .client-logo img { height: 80px; width: auto; } .pagination { display: flex; gap: 0.4rem; margin-top: 1rem; } .pagination__link { padding: 0.3rem 0.6rem; border: 1px solid var(--gray-rule); border-radius: var(--radius-2); text-decoration: none; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bokrp-black); transition: var(--transition-control); } .pagination__link:hover { background: var(--surface-sunken); border-color: var(--bokrp-black); color: var(--bokrp-black); } .pagination__link--current { background: var(--bokrp-black); color: var(--bokrp-cream); border-color: var(--bokrp-black); } .tabs { display: flex; gap: 1rem; margin: 1rem 0 1.25rem; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } .tabs__item { font-family: var(--font-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gray-muted); /* explicit color, not opacity - AA contrast */ text-decoration: none; padding: 0 0.1rem 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition-control); } .tabs__item:hover { color: var(--bokrp-black); } /* Active tab is black text over the 2px orange marker (DS Tabs). */ .tabs__item--active { color: var(--bokrp-black); border-bottom-color: var(--bokrp-orange); } /* Persistent counter panel (P5-01/02/03, PRD §23) */ .combo-counter { display: flex; gap: 1.5rem; margin: 1rem 0 0.25rem; padding: 0.75rem 1rem; background: var(--color-bg); border-radius: var(--radius-2); border: 1px solid var(--color-border); } .combo-counter__row { display: flex; flex-direction: column; gap: 0.15rem; } .combo-counter__label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--gray-muted); } .combo-counter__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 500; } .combo-counter__row--final .combo-counter__value { color: var(--color-accent-text); } .combo-impact { font-size: 0.85rem; opacity: 0.8; margin: 0.35rem 0 0; } .combo-guardrail { margin: 0.5rem 0 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-2); font-size: 0.9rem; font-weight: 600; } /* Guardrail escalation from the primaries, monotonic in ink weight: juice (pending) → orange (needs action) → black (hard stop). Filled juice/orange always take black text; the black block takes cream. */ .combo-guardrail--warn { background: var(--bokrp-juice); color: var(--bokrp-black); } .combo-guardrail--strong_warn { background: var(--bokrp-orange); color: var(--bokrp-black); } .combo-guardrail--block { background: var(--bokrp-black); color: var(--bokrp-cream); } .combo-orphan-notice { margin: 0.5rem 0 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-2); background: var(--color-warning-bg); color: var(--color-warning-text); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.9rem; } .builder__warning { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-2); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: 0.9rem; } /* * Compact sticky counter bar (added on top of P5-02). Rendered as the first * child of .site-main (see matrices/_header.php), so `position: sticky` uses * the whole page - not just this header panel - as its containing block and * stays visible for the entire scroll, through the Builder's field groups or * the Combinations table below. */ .sticky-counter { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.5rem; padding: 0.5rem 1rem; background: var(--surface-raised); border: 1px solid var(--gray-rule); border-radius: var(--radius-2); font-size: 13px; } .sticky-counter__group { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; } .sticky-counter__label { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 10px; color: var(--gray-muted); } .sticky-counter__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; } .sticky-counter__group--final .sticky-counter__value { color: var(--color-accent-text); } .sticky-counter__guardrail { margin-left: auto; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gray-rule); flex-shrink: 0; } .sticky-counter__guardrail--warn { background: var(--bokrp-juice); } .sticky-counter__guardrail--strong_warn { background: var(--bokrp-orange); } .sticky-counter__guardrail--block { background: var(--bokrp-black); } /* Combinations tab (Phase 5) */ .combinations__bulk-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.9rem; } .combinations__blocked { padding: 0.75rem 1rem; border-radius: var(--radius-2); background: var(--bokrp-black); color: var(--bokrp-cream); } .combinations__table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-2); } .combinations__table-wrap .table { margin: 0; } .combinations__table-wrap thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; } .combinations__row--excluded { opacity: 0.55; } .combinations__status-cell { text-align: center; width: 2.5rem; } .combinations__empty-cell { text-align: center; opacity: 0.7; padding: 2rem 1rem; } .combinations__pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: 0.9rem; } .combinations__page-size { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; } .field--pair-filter select { margin-right: 0.5rem; } /* Matrix Builder (Phase 2) */ .builder__saved-indicator { min-height: 1.2rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text); opacity: 0.7; text-align: right; margin: 0 0 0.5rem; } .builder__saved-indicator--saved { color: var(--color-accent-text); opacity: 1; } .builder__saved-indicator--error { color: var(--color-danger); opacity: 1; } .builder__group { margin-bottom: 2rem; } /* Section headings take the DS eyebrow treatment: orange mono caps over a juice rule (juice is fill/rule only, never text). */ .builder__group-heading { font-family: var(--font-mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--bokrp-orange); border-bottom: 2px solid var(--bokrp-juice); padding-bottom: 0.35rem; margin-bottom: 1rem; } .builder__field { border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); padding: 1rem; margin-bottom: 1rem; background: var(--color-bg); } .builder__field-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .builder__field-name { background: none; border: none; padding: 0; color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--color-border); } .builder__active-count { font-size: 0.85rem; opacity: 0.7; white-space: nowrap; } .builder__alias-editor { margin-top: 0.5rem; padding: 0.5rem 0; border-top: 1px dashed var(--color-border); } .builder__alias-editor input[type="text"] { max-width: 320px; } .builder__hint { font-size: 0.8rem; opacity: 0.65; margin: 0.25rem 0 0; } .builder__field--pair { background: var(--surface-selected); } /* Read-only definition rendering (Review Mode, version viewer) - visibly flatter than the editable Builder so the mode difference registers. */ .builder--readonly .builder__field { background: var(--color-surface); border-color: var(--color-border); } .builder--readonly .builder__value-text { cursor: default; } .format-inline--inactive { opacity: 0.5; text-decoration: line-through; } .builder__value-list { list-style: none; margin: 0.75rem 0; padding: 0; max-height: 360px; overflow-y: auto; } .builder__value-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.25rem; border-bottom: 1px solid var(--color-border); } .builder__value-row--dragging { opacity: 0.4; } .builder__value-row--inactive .builder__value-text { opacity: 0.5; text-decoration: line-through; } .builder__drag-handle { cursor: grab; opacity: 0.5; user-select: none; } .builder__reorder-buttons { display: flex; flex-direction: column; gap: 1px; } .builder__reorder-button { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-1); line-height: 1; padding: 0 0.25rem; font-size: 0.7rem; cursor: pointer; } .builder__value-text { flex: 1; border: 1px solid transparent; background: transparent; padding: 0.3rem 0.4rem; border-radius: var(--radius-2); font: inherit; } .builder__value-text:focus { border-color: var(--color-border-strong); background: var(--color-surface); } .builder__value-remove { background: transparent; color: var(--color-danger); border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .builder__value-add { display: flex; gap: 0.5rem; align-items: center; } .builder__value-add input[type="text"] { flex: 1; max-width: 320px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); font: inherit; } /* * Modal overlays. Paste Values, Import from File, and the comment panel are * one visual component - the selectors are grouped here (rather than three * near-identical blocks) so they can't drift apart again. The comment panel * keeps its slightly wider dialog treatment below. */ .paste-modal, .import-modal, .comment-panel { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; } /* Author rules above outrank the UA's [hidden] { display: none }, so every overlay needs this explicitly - the comment panel historically lacked it and could never visually close (UX audit B1). */ .paste-modal[hidden], .import-modal[hidden], .comment-panel[hidden] { display: none; } /* Dialogs are a cream sheet with a 1px black border on the scrim - flat, no shadow (DS surfaces). */ .paste-modal__dialog, .import-modal__dialog { background: var(--surface-page); border: 1px solid var(--bokrp-black); border-radius: var(--radius-2); padding: 1.5rem; width: min(520px, 92vw); max-height: 85vh; overflow-y: auto; } .paste-modal__dialog textarea { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-2); } .paste-modal__field-name, .import-modal__field-name { font-weight: 600; margin-top: -0.5rem; } .import-modal__hint { font-size: 0.85rem; opacity: 0.75; } .paste-modal__column-picker, .import-modal__sheet-picker, .import-modal__column-picker { margin-top: 0.75rem; padding: 0.75rem; background: var(--color-bg); border-radius: var(--radius-2); } .paste-modal__column-option, .import-modal__column-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; padding: 0.2rem 0; } .paste-modal__summary, .import-modal__summary { font-size: 0.85rem; opacity: 0.8; min-height: 1.2rem; } .paste-modal__actions, .import-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } /* Create Matrix wizard (P6-04) */ .wizard-source { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 0.75rem 1rem; margin: 1rem 0; } .wizard-source__option { display: block; padding: 0.35rem 0; } .wizard-source__picker { margin: 0.25rem 0 0.5rem 1.5rem; } .wizard-source__hint { font-size: 0.85rem; opacity: 0.75; } /* Save as Template (P6-03) */ .save-as-template { margin-top: 1rem; } .save-as-template__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .save-as-template__hint { font-size: 0.85rem; opacity: 0.75; } /* Client default template (P6-06) */ .default-template-form { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; } /* Channel Defaults admin screen (P4-02) */ .channel-default { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 1rem; margin-bottom: 1rem; background: var(--color-bg); } .channel-default--inactive { opacity: 0.55; } .channel-default__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .channel-default__rename-form, .channel-default__add-form { display: flex; gap: 0.5rem; align-items: center; margin: 0; } .channel-default__rename-form input[type="text"], .channel-default__add-form input[type="text"] { font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); } .channel-default__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .channel-default__actions form { margin: 0; } .channel-default__formats { list-style: none; margin: 0.75rem 0; padding: 0; padding-left: 1.5rem; border-left: 2px solid var(--color-border); } .channel-default__format { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.35rem 0; } /* Channels & Formats Builder editor (P4-06) */ .channels-editor { margin-top: 0.5rem; } .channels-editor__list { list-style: none; margin: 0; padding: 0; } .channel-row { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; background: var(--color-surface); } .channel-row--dragging { opacity: 0.4; } .channel-row--inactive .channel-row__name { opacity: 0.5; text-decoration: line-through; } .channel-row__header { display: flex; align-items: center; gap: 0.5rem; } .channel-row__collapse { background: transparent; border: none; font: inherit; cursor: pointer; padding: 0 0.25rem; } .channel-row__name { flex: 1; border: 1px solid transparent; background: transparent; padding: 0.3rem 0.4rem; border-radius: var(--radius-2); font: inherit; font-weight: 600; } .channel-row__name:focus { border-color: var(--color-border-strong); background: var(--color-surface); } .channel-row__count { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; } .channel-row__remove { background: transparent; color: var(--color-danger); border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .format-list { list-style: none; margin: 0.5rem 0 0.25rem; padding: 0 0 0 2rem; } .format-list[hidden] { display: none; } .format-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.25rem; border-bottom: 1px solid var(--color-border); } .format-row--dragging { opacity: 0.4; } .format-row--inactive .format-row__name { opacity: 0.5; text-decoration: line-through; } .format-row__name { flex: 1; border: 1px solid transparent; background: transparent; padding: 0.3rem 0.4rem; border-radius: var(--radius-2); font: inherit; } .format-row__name:focus { border-color: var(--color-border-strong); background: var(--color-surface); } .format-row__remove { background: transparent; color: var(--color-danger); border: none; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .channel-add-format, .channels-editor__add-channel { display: flex; gap: 0.5rem; align-items: center; padding-left: 2rem; margin-top: 0.4rem; } .channels-editor__add-channel { padding-left: 0; margin-top: 0.75rem; } .channel-add-format input[type="text"], .channels-editor__add-channel input[type="text"] { flex: 1; max-width: 320px; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); font: inherit; } /* * Editing lock banner (P7-04/05, PRD §35) - shown at the top of the * Builder/Combinations header when someone else holds the matrix's editing * lock. Same warning-toned box as .combo-orphan-notice/.builder__warning * above, kept visually distinct only by its own class since it's a * different concern rendered by matrices/_header.php rather than JS. */ .lock-banner { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-2); background: var(--color-warning-bg); color: var(--color-warning-text); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.9rem; } /* Version History (P7-08/09) */ .version-note { color: var(--color-text-muted); font-size: 0.85rem; } .version-restored-from { font-size: 0.8rem; color: var(--color-text-muted); } /* Comments + Review (P8-05/06) */ .comment-indicator { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 0.15rem 0.45rem; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--color-text-muted); line-height: 1.4; } /* Inline SVG icons (js/shared/icons.js, PHP icon()) inherit currentColor; keep them optically centered in their controls. */ .comment-indicator svg, .builder__reorder-button svg, .builder__value-remove svg, .channel-row__remove svg, .format-row__remove svg, .channel-row__collapse svg, .comment-panel__close svg, .combinations__status-cell svg, .actions-more > summary svg { display: inline-block; vertical-align: -2px; flex-shrink: 0; } .builder__drag-handle { display: inline-flex; align-items: center; } .builder__reorder-button { display: inline-flex; align-items: center; justify-content: center; } .comment-indicator--active { color: var(--color-accent-text); border-color: var(--color-accent); font-weight: 600; } /* .comment-panel's overlay treatment lives in the grouped modal block above. */ .comment-panel__dialog { background: var(--surface-page); border: 1px solid var(--bokrp-black); border-radius: var(--radius-2); width: min(560px, 92vw); max-height: 85vh; display: flex; flex-direction: column; padding: 1rem 1.25rem; } .comment-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; } .comment-panel__header h3 { margin: 0; font-size: 1rem; } .comment-panel__close { background: transparent; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--color-text); } .comment-panel__threads { overflow-y: auto; flex: 1; margin-bottom: 0.75rem; } .comment-panel__empty { color: var(--color-text-muted); font-size: 0.9rem; } .comment-panel__composer { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--color-border); padding-top: 0.75rem; } .comment-panel__composer textarea { width: 100%; resize: vertical; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); } .comment-thread { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; } .comment-thread--resolved { opacity: 0.6; } .comment-thread__replies { margin: 0.5rem 0 0.5rem 1.25rem; border-left: 2px solid var(--color-border); padding-left: 0.75rem; } .comment-thread__reply-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: flex-start; } .comment-thread__reply-form textarea { flex: 1; resize: vertical; font: inherit; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); } .comment { margin-bottom: 0.5rem; } .comment__meta { display: flex; gap: 0.6rem; font-size: 0.8rem; color: var(--color-text-muted); } .comment__author { font-weight: 600; } .comment__body { margin: 0.25rem 0; white-space: pre-wrap; word-break: break-word; } .comment__actions { display: flex; gap: 0.4rem; } .comment__edit-textarea { width: 100%; resize: vertical; font: inherit; padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); margin: 0.25rem 0; } /* Approval (P9-06) */ .approval-summary { background: var(--surface-selected); border: 1px solid var(--bokrp-orange); border-radius: var(--radius-2); padding: 0.5rem 0.75rem; font-size: 0.9rem; } .approval-summary__note { font-family: var(--font-emphasis); color: var(--color-text-muted); font-style: italic; } .approval-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.75rem 0; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-2); } .approval-actions__form { display: flex; align-items: flex-end; gap: 0.5rem; } .approval-actions__form label { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); } .approval-actions__form input[type="text"] { padding: 0.35rem 0.5rem; border: 1px solid var(--gray-rule); border-radius: var(--radius-2); font-family: var(--font-core); font-size: 13px; text-transform: none; letter-spacing: normal; background: var(--surface-field); min-width: 220px; } /* Export dialog (P10-06) */ .export-form { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; margin: 0.75rem 0; } .export-form fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: 0.6rem 0.9rem; } .export-form fieldset label { display: block; padding: 0.2rem 0; } .export-form__checkbox { display: flex; align-items: center; gap: 0.4rem; } /* Comment metadata rendered by shared/comment-panel.js */ .comment__timestamp { white-space: nowrap; } .comment--resolved { opacity: 0.6; } /* * Responsive adjustments (UX audit D1). Desktop-first: the app is a desktop * working tool, these keep it usable in a split-screen window or on a * tablet rather than restyling for phones. */ @media (max-width: 880px) { .site-main { padding: 1rem; } .panel { padding: 1rem; } .filters .field { flex: 1 1 12rem; } .actions { gap: 0.5rem; } .combo-counter { gap: 1rem; flex-wrap: wrap; } .sticky-counter { gap: 0.75rem; font-size: 0.8rem; overflow-x: auto; } } @media (max-width: 560px) { .site-nav { padding: 0.75rem 1rem; } .site-nav__user { display: none; /* the email is long and Profile is one tap away via Sign out's neighbor links */ } .filters { flex-direction: column; align-items: stretch; } .filters .field { flex: 1 1 auto; } .field input[type="text"], .field input[type="date"], .field input[type="file"], .field select, .field textarea { max-width: none; } .builder__value-add { flex-wrap: wrap; } .builder__value-add input[type="text"] { flex-basis: 100%; max-width: none; } .save-version__form { min-width: 0; width: min(20rem, 84vw); flex-wrap: wrap; } .approval-actions { flex-direction: column; gap: 0.75rem; } .combinations__pager { flex-wrap: wrap; } .combinations__page-size { margin-left: 0; } }