/* Style C on the Clean A roles (M-107): geometry, type, spacing and motion measured from the approved draft,
   docs/refs/design-c-2026-09-25/dashboard/tokens.css. Colour is the theme's (W6-UI-1): this file names the colour roles
   and theme.css, loaded after it, gives their values; what stays here is the same in every theme (Meta's own colours, the
   M-053 labels, shadows and scrims). M-045 roles, M-057 Axis geometry. Operate mode. No customer artwork is derived from tokens. */
@font-face {
  font-family: "Geist";
  src: url("/face/assets/fonts/geist-1.4.2/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
html { font-synthesis: none; }
:root {
  color-scheme: light;
  /* Colour roles. Their values are the theme's, in theme.css (W6-UI-1: one file per theme, loaded after this one;
     the client's approval page links a byte-identical copy). A theme gives every role below, light and dark, and
     nothing else; tests/w6-theme-ui.mjs holds the two lists equal.
     --palette           the theme's name, read by nothing; it says which file is loaded
     --ground            rail, topbar and workspace behind the panels; the client page's backdrop
     --page              every view's panel
     --sunk              quiet content ground; a drop area inside a raised card
     --hover             fine-pointer hover fill
     --press             pressed neutral fill
     --line              separators only; panels and controls carry no wire
     --field             field fill, edged by --line-2
     --off               client page: an unanswered tag's outline and quiet marks
     --seg               client page: an unanswered progress step
     --thumb-on          client page: the open ad's thumb ground
     --halo              client page: soft halo behind the open control
     --under             client page: underline under the name field
     --keep-off          client page: a held control's fill
     --row               client page: a receipt row's ground
     --raised            cards, folders and the feed post's frame
     --elevated          menus, dialogs and the floating layers
     --selected          focused or selected batch ground
     --ink               primary reading text
     --ink-2             supporting text
     --ink-3             metadata and field labels
     --line-2            accessible field, checkbox and radio edges (3:1)
     --primary-top       the one primary action's fill
     --primary-hover     the primary fill on hover
     --primary-press     the primary fill while pressed
     --primary-text      the label on the primary fill
     --ctl-fill          tonal pill: buttons, picker, avatar
     --ctl-hover         tonal pill hover and press
     --act-ink           the label of every tonal control and link: the signature in text
     --chosen            where you are and what is chosen: nav, tabs, segments, ticks
     --on-chosen         text and icons on --chosen
     --focus-ring        the one keyboard focus ring
     --focus-chrome      keyboard focus on the rail and topbar
     --selection         selected text background
     --yes               client page: the Yes fill
     --on-yes            client page: text and marks on the Yes fill
     --chosen-edge       the edge that marks a choice where its fill is pale (equals --chosen otherwise)
     --yes-mark          client page: the Yes edge where its fill is pale (equals --yes otherwise)
     --chrome            rail and topbar ground
     --chrome-ink        shell reading text
     --chrome-secondary  shell supporting text
     --dot               legacy canvas-dot colour
     --panel             client page: its panel
     --bar               client page: the bar, cards and the answer row
     --grey              client page: supporting text
     --muted             client page: metadata
     --steps             client page: the progress track
     --sent-bg           client page: a sent ad's ground
     --send-off-fill     client page: Send while it cannot send
     --on-ink            text and icons on an ink fill
     --yes-soft          client page: the quiet Yes ground
     --ok-tint           success background
     --bad-tint          refusal and error background
     --wait-tint         waiting background
     --ok                success text
     --bad               refusal and error text
     --wait              waiting text
     --icon-success      status icon: a recorded pass, approval or creation (3:1 on every surface)
     --icon-failure      status icon: a recorded failure or a No
     --icon-recheck      status icon: needs recheck
     --icon-neutral      status icon: every other state
     --icon-glyph        the mark cut into a filled status disc
     --spirit            the rare warm accent: welcome and reward moments only
     --on-spirit         text on --spirit
     --spirit-tint       a wash of --spirit
     --mark-upper        the S mark's upper lobe
     --mark-lower        the S mark's lower lobe
     --data-1            chart series 1 (reserved: no chart is drawn until asked)
     --data-2            chart series 2 (reserved)
     --data-3            chart series 3 (reserved)
     --data-4            chart series 4 (reserved)
     --data-5            chart series 5 (reserved)
     --data-6            chart series 6 (reserved)
  */

  /* Colours that are the same in every theme: Meta's own, shadows and scrims (depth, no hue). */
  --scrim:      rgba(20, 20, 22, 0.40); /* modal backdrop */
  --scrim-2:    rgba(255, 255, 255, 0.82); /* lightbox backdrop */
  --meta:      #0866FF; /* recognizable Meta glyph only */
  --primary-border: transparent; /* the primary pill carries no edge */

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* one local variable font with declared fallback */
  --font-mono: var(--font-sans); /* legacy numeric family alias; tabular numerals */
  --t-mark: 700 26px/32px var(--font-sans); /* Senditor wordmark */
  --track-mark: -.02em; /* wordmark tracking */
  --t-display: 550 28px/34px var(--font-sans); /* page heading (Axis 28/34 550) */
  --track-display: -.02em; /* page heading tracking */
  --t-title: 600 18px/24px var(--font-sans); /* panel and section heading (Axis 18/24) */
  --t-body: 400 14px/20px var(--font-sans); /* body and control copy (Axis 14/20) */
  --t-strong: 500 14px/20px var(--font-sans); /* control text */
  --t-row: 600 15px/20px var(--font-sans); /* row and item headings (Axis 15/20) */
  --t-field: 400 16px/24px var(--font-sans); /* touch-width field text: 16px keeps phones from zooming */
  --t-small: 400 13px/18px var(--font-sans); /* helper and metadata copy */
  --t-label: 600 11px/16px var(--font-sans); /* field, table and fact labels: the approval page's caption */
  --track-label: .14em; /* caption tracking; labels are set in capitals */
  --t-num: 600 24px/32px var(--font-mono); /* large factual counters */
  --t-mono: 400 13px/18px var(--font-mono); /* filenames and count metadata */

  --s-4:  4px; /* spacing step 4 */
  --s-8:  8px; /* spacing step 8 */
  --s-12: 12px; /* spacing step 12 */
  --s-16: 16px; /* spacing step 16 */
  --s-20: 20px; /* spacing step 20 */
  --s-24: 24px; /* spacing step 24 */
  --s-32: 32px; /* spacing step 32 */
  --s-48: 48px; /* spacing step 48 */

  --r-sm: 10px; /* media and focus-ring corners */
  --r-thumb: 6px; /* small list thumbnails */
  --r-pic: 8px; /* brand pictures at 28 and 32 px (W6-UI-2, 5B) */
  --r: 14px; /* fields, rows and menu items */
  --r-lg: 14px; /* cards and folders */
  --r-layer: 16px; /* floating menus and dialogs */
  --r-panel: 16px; /* inset split panels */
  --r-post: 12px; /* the feed post, as Facebook draws it */
  --r-tab: 999px; /* buttons, tabs and segmented controls are pills */
  --r-pill: 50%; /* avatars and numbered steps */

  --ctl: 44px; /* minimum control height */
  --fade-mask: linear-gradient(to bottom, black calc(100% - 40px), transparent); /* bottom fade on a list with more below */
  --seg-mask: repeating-linear-gradient(90deg, black 0 calc((100cqw - 16px) / 5), transparent 0 calc((100cqw + 4px) / 5)) 0 0 / 100cqw 100% no-repeat; /* Finish setup's meter cut into five parts, 4px apart (W6-UI-2, 4B) */
  --ctl-sm: 44px; /* compact controls retain touch height */
  --ctl-lg: 48px; /* tall controls */
  --chip: 40px; /* icon chips, brand marks and avatars: the incumbent 40px brand mark and approval avatar (Wave 5b) */
  --net-mark: 24px; /* a network's own mark (Meta, Google Ads, TikTok), one size everywhere, on its --chip tile (UI-HOME, 2026-10-03) */
  --dot-size: 8px; /* a brand card's count dot: the incumbent 8px dot, written once (F-082 item 1; --dot is a canvas colour) */

  --sh-input: none; /* inputs use a boundary, no shadow */
  --sh-primary: none; /* flat primary actions */
  --sh-float: 0 16px 40px rgba(0,0,0,.12); /* floating menus and layers */
  --post-lift: 0 10px 28px rgba(0,0,0,.07); /* the feed post lift */
  --card-edge: rgba(0,0,0,.07); /* hairline edge of the feed post and of a brand picture */
  --post: #FFFFFF; /* the feed post is Meta's surface: light in both themes, as the approval page's C post */
  --post-ink: #1B1B1B; /* text on the feed post */
  --post-grey: #626262; /* secondary text on the feed post */
  --post-cta: #EDEDED; /* the feed post's grey call-to-action button */
  --matte: #E9ECEF; /* behind the ad art, so art of any shape shows whole */
  --post-line: #E4E6EB; /* dividers inside the feed post */
  --sh-pop: var(--sh-float); /* floating layer shadow alias */
  --sh-focus: none; /* legacy shadow alias; focus uses outline */

  --sidebar: 72px; /* Axis icon rail, 44px targets (M-057; supersedes the 223px column) */
  --peek-x: 0px; /* the rail peek's left edge: app.js writes the Social accounts glyph's right edge when the peek opens */
  --peek-y: 0px; /* the rail peek's centre line: app.js writes the glyph's centre when the peek opens */
  --topbar: 56px; /* Axis breadcrumb bar (supersedes the 64px header) */
  --intake-canvas: 1360px; /* selected B: maximum panel width after the Axis rail, every view, held at the rail (D3) */
  --intake-preview: 500px; /* the feed post at Facebook's desktop feed width (founder, design handoff C) */
  --add-list: 304px; /* Add ads, the Ads pane (W6-UI-2, r3-add) */
  --add-form: 400px; /* Add ads, the ad's editor pane (W6-UI-2, r3-add) */
  --intake-control: 36px; /* desktop-only compact controls; touch stays 44px */
  --gap: 8px; /* gap between inset panels and around the workspace */
  --icon: 20px; /* the line icon's box (svg.i); a gap that clears an icon reads it */
  --box: 16px; /* the checkbox's box; a line that hangs under a checkbox's words reads it */
  --workspace-gutter: 20px; /* panel inset */
  --card-w:  240px; /* incumbent creative-card grid minimum */
  --grid:    24px; /* legacy canvas grid step */

  --ease:  cubic-bezier(.2, .7, .3, 1); /* opacity easing for floating layers */
  --e-out: cubic-bezier(.23, 1, .32, 1); /* strong ease-out for press feedback */
  --dur-1: 120ms; /* responsive control feedback duration */
  --dur-2: 160ms; /* maximum floating-layer opacity duration */
  --press-scale: .97; /* enabled press feedback only */
  --dur-press: 160ms; /* press and tonal colour feedback */
  /* Status labels (M-053). Exact founder-approved values, identical in light and dark: never
     re-themed, never tuned. Known limitation, recorded not adjusted: white on success is 2.54:1
     and on failure 3.62:1. Recheck has no consumer until the product serves that state. */
  --label-neutral: #6E6E73; /* draft, pending, unknown, disconnected, coming soon, passive */
  --label-success: #12B981; /* an explicit approved, created or delivered word only */
  --label-failure: #FD383C; /* changes requested, refused, failed check */
  --label-recheck: #4B5FD1; /* Needs recheck only */
  --label-ink: #FFFFFF; /* label text */
  --label-h: 22px; /* label height */
  --label-r: 5px; /* label corners */
  --label-font: 400 12px/16px var(--font-sans); /* label text */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --scrim: rgba(0,0,0,.55); /* dark scrim */
  --scrim-2: color-mix(in srgb, var(--ground) 94%, transparent); /* dark lightbox backdrop: the ground, nearly opaque */
  --post-lift: 0 14px 36px rgba(0,0,0,.24); /* dark post lift */
  --card-edge: rgba(255,255,255,.06); /* dark post edge */
  --sh-float: 0 16px 40px rgba(0,0,0,.34); /* dark floating layers */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --scrim: rgba(0,0,0,.55); /* dark scrim */
  --scrim-2: color-mix(in srgb, var(--ground) 94%, transparent); /* dark lightbox backdrop: the ground, nearly opaque */
  --post-lift: 0 14px 36px rgba(0,0,0,.24); /* dark post lift */
  --card-edge: rgba(255,255,255,.06); /* dark post edge */
  --sh-float: 0 16px 40px rgba(0,0,0,.34); /* dark floating layers */
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --press-scale: 1; --dur-press: 0ms; }
}
/* Add ads v3 tokens: start (V3-UI, 2026-10-03). The accepted Add ads screen's own sizes, type, depth and Meta colours,
   read by assets/add-ads.css and assets/add-ads.js, and by app.css's one button component (--ctl-dense, --step-tight and
   --t-action; UI-HOME round 2, #93) (tests/v3-add-system-ui.mjs holds the rules: named by role, one
   name per value, never a canon name, each read at least twice). The screen keeps the prototype's compact density inside
   the dashboard's panel; a value the canon above already names is read from the canon. Light first, then dark, then the
   phone, where a compact control grows to the canon's touch sizes. */
:root {
  --step-hair: 2px; /* the dense scale's hairline step: a tight gap or inset, a focus ring and its offset, an indicator bar */
  --step-tight: 6px; /* the dense scale's step between --s-4 and --s-8: an icon beside its words, compact padding */
  --r-xs: 4px; /* the smallest corner: a checkbox, a text link, editable words */
  --icon-sm: 14px; /* a small line icon beside 12 px words */
  --icon-dense: 18px; /* the screen's line icon, and the step number's disc */
  --label-h-sm: 18px; /* a small M-053 label, the shape chip, a picture-count chip */
  --row-xs: 28px; /* a short row: the head row, a count, a tree row */
  --row-nav: 40px; /* a 40 px row: the toast, a picker campaign, a group head, a phone step */
  --ctl-dense: 32px; /* the screen's control height on a desktop; the canon's touch height on a phone */
  --ctl-dense-sm: 28px; /* a compact control: segments, the view switch, small round buttons */
  --chip-dense: 24px; /* a small chip's least width, and a crumb row's height */
  --thumb-lg: 52px; /* the filmstrip's picture, and a phone list row's pictures */
  --dock: 112px; /* a phone bar's room at the foot of the page until the bar is measured (add-ads.js roomFor) */
  --tile-ad: 120px; /* a folder's ad tile: its column and its width */
  --sum-min: 120px; /* a Review row's summary column at its least, so the sums line up row to row */
  --fixed-col: 152px; /* the Upload module's fixed column: a folder card at its least, the List's picture and needs */
  --name-min: 152px; /* a name column at its least: Place's folder, a Review ad set under 1100 px */
  --measure-min: 200px; /* the least a column of served words gets: Place's Runs in, a Review ad set's name, a menu, a post */
  --measure: 320px; /* a short measure: the most a line of served words runs: Place's columns, a menu, the bar's reason */
  --measure-long: 480px; /* a long measure: the Create paused dialog, Place's Runs in on a wide screen */
  --names-col: 280px; /* a left column of names: the folder tree, the List's find field, a Review ad set's name at its most */
  --side-w: 320px; /* a side column: the Send summary, the ad view's panel */
  --side-narrow: 280px; /* a side column under 1240 px */
  --stage-min: 320px; /* a stage at its least height: the big drop zone, the client's page */
  --layer-w: 400px; /* a floating list's width: the picker, the list behind a count */
  --layer-h: 440px; /* a floating list's most height: the picker, the list behind a count */
  --layer-wide: 440px; /* a wide layer's most width: the skipped files, the path tooltip */
  --layer-h-sm: 320px; /* a short layer's most height: a menu, the skipped rules, the skipped files */
  --layer-room: 100vw; /* the room a floating layer has: the window's width, less its edges where it is read */
  --client-desk-w: 1440px; /* the client's page on a desktop, at its true size: its width */
  --client-desk-h: 740px; /* and its height */
  --client-phone-w: 390px; /* the client's page on a phone, at its true size: its width */
  --client-phone-h: 844px; /* and its height */
  --r-phone: 48px; /* a phone's body around the client's page */
  --ring-w: 1.5px; /* a checkbox's edge and the editing ring on a post's words */
  --screen-h: 100dvh; /* the window's height: the one-screen desktop and the dialog */
  --t-small-strong: 500 13px/18px var(--font-sans); /* names and the step's words */
  --t-caption: 400 12px/16px var(--font-sans); /* secondary words and counts */
  --t-caption-strong: 500 12px/16px var(--font-sans); /* labels and quiet links */
  --t-action: 500 13px/1 var(--font-sans); /* a sentence-case button label */
  --t-label-sm: 400 11px/14px var(--font-sans); /* a small M-053 label and the step number */
  --t-name: 600 13px/18px var(--font-sans); /* an ad set's or a pack's name, a group head */
  --t-tag: 500 12px/1 var(--font-sans); /* a segment and a chip */
  --t-ig-strong: 600 14px/18px var(--font-sans); /* a Story's button, in Instagram's strong type (Facebook and Instagram posts: assets/meta-post.css) */
  --t-story-name: 600 13px/16px var(--font-sans); /* Stories: the page name */
  --t-story-text: 500 14px/19px var(--font-sans); /* Stories: the words on the picture */
  --sh-hover: 0 6px 18px rgba(0,0,0,.08); /* a card or tile under the pointer */
  --sh-post: 0 2px 6px rgba(0,0,0,.04); /* the chosen segment, a pack's lift */
  --ed-wash: color-mix(in srgb, var(--meta) 7%, transparent); /* what you are editing on a post: the words you type, a button whose words you choose */
  --post-hover: color-mix(in srgb, var(--post-ink) 4.5%, transparent); /* a hover on the post's own white: the words you can edit, the Story's button */
  --tr-control: transform var(--dur-press) var(--e-out), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); /* a control: its press and its colours */
  --tr-fill: transform var(--dur-press) var(--e-out), background-color var(--dur-1) var(--ease); /* a row or quiet button: its press and its fill */
  --dur-fade: 120ms; /* the plain fade that stays under reduced motion, where the canon's durations are 0: new words, a new step, a count */
  --glass-fill: color-mix(in srgb, var(--raised) 72%, transparent); /* the floating bar's glass and the message above it: the raised ground, thin enough to take its colour from what is behind (landing v8) */
  --glass-blur: blur(var(--s-16)) saturate(1.8) brightness(1.06); /* what the glass does to what is behind it */
  --glass-catch: rgba(255,255,255,.9); /* light caught at the glass's corners */
  --sh-glass: inset 0 0 0 .5px rgba(255,255,255,.8), 0 0 0 .5px rgba(0,0,0,.08), 0 12px 32px -14px rgba(0,0,0,.25); /* the glass's hairline edge and its float (landing v8, in the canon's black) */
  --story-ink: var(--post); /* Stories write white words on the picture, in both themes */
  --story-scrim: rgba(0,0,0,.42); /* under a Story's words */
  --story-shade: rgba(0,0,0,.28); /* a Story's top shade, and its words under the pointer */
  --tile-matte: var(--matte); /* the letterbox around a fitted picture in the screen's own tiles */
  --picked: var(--ctl-fill); /* a picked row, tree node or ad: a soft fill, never an outline */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-hover: 0 6px 18px rgba(0,0,0,.28); /* dark: a deeper hover lift */
    --tile-matte: var(--sunk); /* dark: the letterbox is the sunk ground */
    --picked: var(--raised); /* dark: the raised neutral, not a tint of --chosen */
    --glass-catch: rgba(255,255,255,.46); /* dark: less light caught */
    --sh-glass: inset 0 0 0 .5px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 22px -20px rgba(255,255,255,.16), 0 14px 34px -16px rgba(0,0,0,.7), 0 2px 8px -3px rgba(0,0,0,.35); /* dark: a fainter edge, a glow inside the lower edge, a deeper float */
  }
}
:root[data-theme="dark"] {
  --sh-hover: 0 6px 18px rgba(0,0,0,.28); /* dark: a deeper hover lift */
  --tile-matte: var(--sunk); /* dark: the letterbox is the sunk ground */
  --picked: var(--raised); /* dark: the raised neutral, not a tint of --chosen */
  --glass-catch: rgba(255,255,255,.46); /* dark: less light caught */
  --sh-glass: inset 0 0 0 .5px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 22px -20px rgba(255,255,255,.16), 0 14px 34px -16px rgba(0,0,0,.7), 0 2px 8px -3px rgba(0,0,0,.35); /* dark: a fainter edge, a glow inside the lower edge, a deeper float */
}
@media (max-width: 600px) {
  /* a phone: compact controls take the canon's touch sizes */
  :root { --ctl-dense: var(--ctl); --ctl-dense-sm: var(--intake-control); --chip-dense: var(--s-32); }
}
/* Add ads v3 tokens: end */