/* ==========================================================================
   The Care Web, "Cinema" for the whole site (v88.6.0).

   cinema.css draws the home page, Get started and the step pages. Every other
   page (Next actions, Bookings, Messages, Settings, the office dashboard,
   Pricing and the rest) was built for the classic light look; this file and
   cinema-skin.css carry the Cinema colours to them:

   - cinema-skin.css (generated by scripts/cinema-skin.js) repeats every colour
     rule of the site's stylesheets and style="" attributes with a --sk-* token;
   - this file defines those tokens for the dark and light themes, and adds the
     hand-made parts: type, buttons, fields, links and the page ground.

   Colours follow the device, or the Colours choice in the accessibility panel
   (html[data-cn-theme]). High contrast and print keep the site's own colours.
   ========================================================================== */

@media screen {

/* ---------- tokens: dark first ---------- */
html[data-look="cinema"]:not(.high-contrast) {
  --sk-ground: var(--cn-bg);
  --sk-surface: var(--cn-raise);
  --sk-surface-2: var(--cn-raise-2);
  --sk-sunk: var(--cn-sunk);
  --sk-ink: var(--cn-ink);
  --sk-ink-2: var(--cn-ink-2);
  --sk-ink-3: var(--cn-ink-3);
  --sk-accent: var(--cn-ink);
  --sk-line: var(--cn-line);
  --sk-line-2: var(--cn-line-2);
  /* v88.11.0: the edge of a field or a choice, 3:1 on every surface in both themes (cinema.css --cn-field) */
  --sk-field: var(--cn-field);
  --sk-line-strong: rgba(244, 239, 228, .5);
  --sk-link: var(--cn-link);
  --sk-focus: var(--cn-focus);
  --sk-focus-halo: rgba(247, 210, 122, .35);
  --sk-solid: #2B3C7E;
  --sk-solid-2: #222F66;
  --sk-solid-3: #1A2350;
  --sk-info-solid: #4A63B0;
  --sk-gold: #F1BE48;
  --sk-coral-solid: #C8462E;
  --sk-ok-solid: #1F7A4D;
  --sk-ok: #7ED9A5;   --sk-ok-bg: #12302A;   --sk-ok-line: rgba(126, 217, 165, .5);
  --sk-bad: #FF9E8C;  --sk-bad-bg: #3A1B22;  --sk-bad-line: rgba(255, 158, 140, .55);
  --sk-coral: #FF9F83; --sk-coral-line: rgba(255, 159, 131, .55);
  --sk-warn: #F1BE48; --sk-warn-bg: #2E2712; --sk-warn-line: rgba(241, 190, 72, .6);
  --sk-info: #A9C1F5; --sk-info-bg: #1A2455; --sk-info-line: rgba(169, 193, 245, .45);
  --sk-teal-bg: #10302E; --sk-teal-line: rgba(127, 214, 201, .45);
  --sk-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 32px -12px rgba(0, 0, 0, .55);
  --sk-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 64px -16px rgba(0, 0, 0, .65);

  /* the site's own variables, for scripts and style="" attributes that read them */
  --font-body: var(--cn-body);
  --font-head: var(--cn-body);
  --ink: var(--sk-ink); --ink-soft: var(--sk-ink-2);
  --text: var(--sk-ink); --text-soft: var(--sk-ink-2); --text-muted: var(--sk-ink-3);
  --cream: var(--sk-ground); --card: var(--sk-surface);
  --line: var(--sk-line); --field-border: var(--sk-field);
  --teal-tint: var(--sk-surface-2); --silver-tint: var(--sk-surface-2); --navy-tint: var(--sk-info-bg);
  --coral-tint: var(--sk-bad-bg); --amber-tint: var(--sk-warn-bg); --gold-tint: var(--sk-warn-bg);
  --shadow: var(--sk-shadow); --shadow-lg: var(--sk-shadow-lg);
  --focus-color: var(--sk-focus); --focus-halo-color: var(--sk-focus-halo);
}
@media (prefers-color-scheme: light) {
  html[data-look="cinema"]:not(.high-contrast):not([data-cn-theme="dark"]) {
    --sk-accent: #203566;
    --sk-line-strong: #203566;
    --sk-focus-halo: rgba(241, 190, 72, .8);
    --sk-solid: #203566; --sk-solid-2: #15264D; --sk-solid-3: #101C3B; --sk-info-solid: #4A66A8;
    --sk-ok: #1F7A4D;   --sk-ok-bg: #E1F3E7;   --sk-ok-line: #1F7A4D;
    --sk-bad: #9E2F1C;  --sk-bad-bg: #FCE9E3;  --sk-bad-line: #C8462E;
    --sk-coral: #A93B22; --sk-coral-line: #C8462E;
    --sk-warn: #7A5C00; --sk-warn-bg: #FDF3DC; --sk-warn-line: #E0B040;
    --sk-info: #174575; --sk-info-bg: #E9F1FC; --sk-info-line: #5F8DBC;
    --sk-teal-bg: #E2F1EE; --sk-teal-line: #0E6E63; --sk-link: #0B5D53;
    --sk-shadow: 0 1px 2px rgba(16, 23, 58, .05), 0 10px 28px -6px rgba(16, 23, 58, .10);
    --sk-shadow-lg: 0 2px 4px rgba(16, 23, 58, .05), 0 24px 60px -12px rgba(16, 23, 58, .18);
  }
}
html[data-look="cinema"][data-cn-theme="light"]:not(.high-contrast) {
  --sk-accent: #203566;
  --sk-line-strong: #203566;
  --sk-focus-halo: rgba(241, 190, 72, .8);
  --sk-solid: #203566; --sk-solid-2: #15264D; --sk-solid-3: #101C3B; --sk-info-solid: #4A66A8;
  --sk-ok: #1F7A4D;   --sk-ok-bg: #E1F3E7;   --sk-ok-line: #1F7A4D;
  --sk-bad: #9E2F1C;  --sk-bad-bg: #FCE9E3;  --sk-bad-line: #C8462E;
  --sk-coral: #A93B22; --sk-coral-line: #C8462E;
  --sk-warn: #7A5C00; --sk-warn-bg: #FDF3DC; --sk-warn-line: #E0B040;
  --sk-info: #174575; --sk-info-bg: #E9F1FC; --sk-info-line: #5F8DBC;
  --sk-teal-bg: #E2F1EE; --sk-teal-line: #0E6E63; --sk-link: #0B5D53;
  --sk-shadow: 0 1px 2px rgba(16, 23, 58, .05), 0 10px 28px -6px rgba(16, 23, 58, .10);
  --sk-shadow-lg: 0 2px 4px rgba(16, 23, 58, .05), 0 24px 60px -12px rgba(16, 23, 58, .18);
}

/* ---------- the page ---------- */
html[data-look="cinema"]:not(.high-contrast) body { background: var(--sk-ground); color: var(--sk-ink); }

/* type: Atkinson for reading, Fraunces for the page titles (as on the Cinema pages); an empty state's
   or a callout's title, and any .cw-card-title, reads as a card title, in Atkinson (v88.10.0; v88.11.0:
   one empty state, .empty-state; and the title straight inside a shared card is a card title too; v88.12.0: the
   small capital labels of System checks, .st-h, and the Forms register's section titles, .fr-sec, stay in Atkinson) */
html[data-look="cinema"]:not(.high-contrast) :is(h1, h2):not(:where(.cine *, .modal *, dialog *, .a11y-panel *, footer *, .empty-state *, .cw-callout *, .st-h, .fr-sec, .cw-card-title, .info-card > h2, .review-panel > h2, .flow-card > h2, .wp-card > h2)) {
  font-family: var(--cn-display); font-weight: 560; font-optical-sizing: auto; letter-spacing: -.018em;
}
html[data-look="cinema"]:not(.high-contrast) :is(h1, h2) em:not(:where(.cine *)) { font-style: italic; color: var(--cn-gold-text); }
/* the office's verification workspace names its own font (admin-verification.css) */
html[data-look="cinema"]:not(.high-contrast) .verify-app { font-family: var(--cn-body); }

/* links in running text */
html[data-look="cinema"]:not(.high-contrast) :is(main, .modal, dialog) :is(p, li, td, dd, small, span, label) > a:not([class]):not(:where(.cine *)) { color: var(--sk-link); }

/* ---------- the header (cinema.css draws it; these win over the recoloured site rules) ---------- */
html[data-look="cinema"]:not(.high-contrast) header.site { background: color-mix(in srgb, var(--cn-bg) 90%, transparent); border-bottom-color: var(--cn-line); }
html[data-look="cinema"]:not(.high-contrast) :is(.burger, .msg-btn) svg { stroke: var(--cn-ink); }
html[data-look="cinema"]:not(.high-contrast) :is(.msg-btn, .burger):hover { background: color-mix(in srgb, var(--cn-ink) 10%, transparent); }
html[data-look="cinema"]:not(.high-contrast) .nav-cta .btn-ghost { color: var(--cn-ink); background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--cn-line-2); }
html[data-look="cinema"]:not(.high-contrast) .nav-cta .btn-ghost:hover { background: color-mix(in srgb, var(--cn-ink) 10%, transparent); color: var(--cn-ink); }
html[data-look="cinema"]:not(.high-contrast) #btnGetStarted { background: var(--cn-gold); color: var(--cn-on-gold); box-shadow: 0 3px 0 0 var(--cn-gold-base); }
html[data-look="cinema"]:not(.high-contrast) .a11y-open { background: color-mix(in srgb, var(--cn-gold) 18%, transparent); border-color: transparent; color: var(--cn-gold-text); }
html[data-look="cinema"]:not(.high-contrast) .a11y-open:hover { background: color-mix(in srgb, var(--cn-gold) 30%, transparent); color: var(--cn-gold-text); }
html[data-look="cinema"]:not(.high-contrast) .acct-chip { background: var(--cn-raise); border-color: var(--cn-line-2); color: var(--cn-ink); }
html[data-look="cinema"]:not(.high-contrast) .acct-caret { color: var(--cn-ink); }
@media (min-width: 1021px) {
  html[data-look="cinema"]:not(.high-contrast) nav.main :is(a, button).nav-link { color: var(--cn-ink-2); }
  html[data-look="cinema"]:not(.high-contrast) nav.main :is(a, button).nav-link:hover,
  html[data-look="cinema"]:not(.high-contrast) nav.main a.nav-link[aria-current="page"] { color: var(--cn-ink); background: color-mix(in srgb, var(--cn-ink) 10%, transparent); }
}

/* ---------- buttons: the Cinema pills ---------- */
html[data-look="cinema"]:not(.high-contrast) .btn:not(:where(.cine *)) { font-family: var(--cn-body); }
html[data-look="cinema"]:not(.high-contrast) .btn-primary:not(:where(.cine *)) {
  background: var(--cn-gold); color: var(--cn-on-gold); border-color: transparent; box-shadow: 0 3px 0 0 var(--cn-gold-base);
}
html[data-look="cinema"]:not(.high-contrast) .btn-primary:not(:where(.cine *)):hover { background: var(--cn-gold-hi); color: var(--cn-on-gold); box-shadow: 0 5px 0 0 var(--cn-gold-base); }
html[data-look="cinema"]:not(.high-contrast) .btn-primary:not(:where(.cine *))::before { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent); }
html[data-look="cinema"]:not(.high-contrast) .btn-secondary:not(:where(.cine *)) {
  background: transparent; color: var(--sk-ink); border-color: var(--sk-line-2);
}
html[data-look="cinema"]:not(.high-contrast) .btn-secondary:not(:where(.cine *)):hover { background: color-mix(in srgb, var(--sk-ink) 9%, transparent); color: var(--sk-ink); border-color: var(--sk-ink-3); }
html[data-look="cinema"]:not(.high-contrast) .btn-ghost:not(:where(.cine *)) { color: var(--sk-ink); }
html[data-look="cinema"]:not(.high-contrast) .btn-ghost:not(:where(.cine *)):hover { background: color-mix(in srgb, var(--sk-ink) 9%, transparent); color: var(--sk-ink); }
html[data-look="cinema"]:not(.high-contrast) .banner .btn-primary:not(:where(.cine *)) { background: var(--cn-gold); color: var(--cn-on-gold); }
/* v88.12.0 (BP2): a Cinema pill that is a link outside the Cinema pages (the two ways in, in the header's menus, the
   phone menu's doors and the footer) keeps its own words colour, not the colour the skin gives every other link */
html[data-look="cinema"]:not(.high-contrast) a.cn-btn:not(:where(.cine *)) { color: var(--b-ink); }

/* ---------- the status badge (v88.11.0) ----------
   cinema-skin.css carries its colours to every page except the Cinema pages themselves (.cine, which the skin
   leaves alone); there it takes the same tokens from here */
html[data-look="cinema"]:not(.high-contrast) .cine .status-badge { border-color: var(--sk-line-2); background-color: var(--sk-surface-2); color: var(--sk-ink-2); }
html[data-look="cinema"]:not(.high-contrast) .cine .status-badge[data-kind="gap"] { border-color: var(--sk-bad-line); background-color: var(--sk-bad-bg); color: var(--sk-bad); }
html[data-look="cinema"]:not(.high-contrast) .cine .status-badge[data-kind="action"] { border-color: var(--sk-warn-line); background-color: var(--sk-warn-bg); color: var(--sk-warn); }
html[data-look="cinema"]:not(.high-contrast) .cine .status-badge[data-kind="waiting"] { border-color: var(--sk-info-line); background-color: var(--sk-info-bg); color: var(--sk-info); }
html[data-look="cinema"]:not(.high-contrast) .cine .status-badge[data-kind="done"] { border-color: var(--sk-ok-line); background-color: var(--sk-ok-bg); color: var(--sk-ok); }

/* the Forms register's grid (v88.15.0, BO3): the band across a form kept in each worker's Drive file is hatched in the
   line colour, so it shows in the dark and light looks alike (the skin gives a light stripe the pale amber wash) */
html[data-look="cinema"]:not(.high-contrast) :is(.fr-band, .fr-k.is-file) { background-image: repeating-linear-gradient(135deg, var(--sk-line) 0 1.5px, transparent 1.5px 8px); }
/* a form's name opens its details: a quiet underline in the line colour, in full ink while they are open */
html[data-look="cinema"]:not(.high-contrast) .fr-name { text-decoration-color: var(--sk-line-2); }
html[data-look="cinema"]:not(.high-contrast) .fr-name:is(:hover, [aria-expanded="true"]) { text-decoration-color: currentColor; }

/* Needs you now's items (v88.15.0, BO1): the edge in the status colour itself (amber for action, red for gaps, overdue
   and failing, blue-grey for waiting), as approved, instead of the paler line colour the skin gives a border */
html[data-look="cinema"]:not(.high-contrast) .ib-list .na-office-row { border-left-color: var(--sk-warn); }
html[data-look="cinema"]:not(.high-contrast) .ib-list .na-office-row[data-tone="urgent"] { border-left-color: var(--sk-bad); }
html[data-look="cinema"]:not(.high-contrast) .ib-list .na-office-row[data-tone="waiting"] { border-left-color: var(--sk-info); }

/* the checklist's Done rows (v88.14.0, BS4: Checks and training, My documents): a faint wash of the done colour on the
   surface in both themes, as approved (the skin carries one colour of a mix, not the mix itself) */
html[data-look="cinema"]:not(.high-contrast) .ck-row.is-done { background-color: color-mix(in srgb, var(--sk-ok) 7%, var(--sk-surface)); }

/* the office search's marked words (v88.12.0, O16; v88.15.0, BO4: in "Search the office"): the see-through gold of the
   approved after, which reads on the light and the dark surface alike (the skin's warn wash is too faint in the light
   look), in the full ink colour so a marked word in a grey line keeps 4.5:1 on the gold in the dark look; the chosen
   result has a light gold wash and a gold edge, as approved, and its marks a lighter gold so they keep 4.5:1 on it */
html[data-look="cinema"]:not(.high-contrast) .ca-cmd-dialog mark { background-color: color-mix(in srgb, var(--cn-gold) 40%, transparent); color: var(--sk-ink); }
html[data-look="cinema"]:not(.high-contrast) .ca-cmd-item[aria-selected="true"] { background-color: color-mix(in srgb, var(--cn-gold) 16%, var(--sk-surface)); box-shadow: inset 3px 0 0 var(--cn-gold); }
html[data-look="cinema"]:not(.high-contrast) .ca-cmd-item[aria-selected="true"] mark { background-color: color-mix(in srgb, var(--cn-gold) 30%, transparent); }

/* the open person's row in an office list (v88.15.0, BO2): a light wash of the gold with a gold edge, as approved, in
   both themes (the skin carries one colour, not a mix, and darkens an inset edge) */
html[data-look="cinema"]:not(.high-contrast) tr.ca-person-row-open > td { background-color: color-mix(in srgb, var(--cn-gold) 14%, var(--sk-surface)); }
html[data-look="cinema"]:not(.high-contrast) tr.ca-person-row-open > td:first-child { box-shadow: inset 4px 0 0 var(--cn-gold); }

/* ---------- fields ---------- */
/* dialogs the site leaves to the browser (the accept, travel and review dialogs): the raised
   surface, not the browser's near black. A dialog with its own colours keeps them (recoloured). */
html[data-look="cinema"]:not(.high-contrast) :where(dialog):not(:where(.cine *)) { background-color: var(--sk-surface); color: var(--sk-ink); }

/* fields the site leaves to the browser: the page's own ground, not the browser's dark grey */
html[data-look="cinema"]:not(.high-contrast) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea):not(:where(.cine *)) {
  background-color: var(--sk-ground); color: var(--sk-ink); border-color: var(--sk-field);
}

html[data-look="cinema"]:not(.high-contrast) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea):not(:where(.cine *))::placeholder { color: var(--sk-ink-3); opacity: 1; }
html[data-look="cinema"]:not(.high-contrast) :is(input[type="checkbox"], input[type="radio"]):not(:where(.cine *)) { accent-color: var(--cn-gold); }

/* ---------- decorations on the older pages: lighter lines on the dark ground ---------- */
html[data-look="cinema"]:not(.high-contrast):not([data-cn-theme="light"]) :is(.decor-figure, .decor-doodle) { color: rgba(244, 239, 228, .12) !important; }
@media (prefers-color-scheme: light) {
  html[data-look="cinema"]:not(.high-contrast):not([data-cn-theme="dark"]) :is(.decor-figure, .decor-doodle) { color: rgba(32, 53, 102, .2) !important; }
}

/* ---------- small readability fixes on the older pages ---------- */
/* days from the next or last month in the calendar: dimmed, but still readable */
html[data-look="cinema"]:not(.high-contrast) .bc-day.is-outside .bc-date { opacity: .72; }
/* onboarding stages with nobody in them (office, People, Onboarding progress): the same */
html[data-look="cinema"]:not(.high-contrast) .pipe-row.empty summary { opacity: .72; }

/* ---------- selection ---------- */
html[data-look="cinema"]:not(.high-contrast) ::selection { background: color-mix(in srgb, var(--cn-gold) 45%, transparent); color: var(--sk-ink); }

}

/* ---------- print: paper is white, so the Cinema tokens take their light values ---------- */
@media print {
  html[data-look="cinema"][data-look] {
    color-scheme: light;
    --cn-bg: #FFFFFF; --cn-raise: #FFFFFF; --cn-raise-2: #F6F7FA; --cn-sunk: #FFFFFF;
    --cn-ink: #10173A; --cn-ink-2: #3F4668; --cn-ink-3: #545A78;
    --cn-line: rgba(16, 23, 58, .13); --cn-line-2: rgba(16, 23, 58, .28); --cn-field: #80879B;
    --cn-gold-text: #8A5E00; --cn-link: #0E6E63;
  }
  html[data-look="cinema"] header.site .cw-brand > img.cn-rev { display: none !important; }
  html[data-look="cinema"] header.site .cw-brand > img:not(.cn-rev) { display: block !important; }
}