/*
 * Showpath's look (2026-10-26: direction A of docs/DESIGN.md). Two themes on
 * the house layout (data-look="house", theme-grainpath.css), repainted:
 *
 * - Backstage, dark first: near-black panels, warm white text and one amber accent,
 *   like a console's channel lights, with a cool blue for "held". Made to be read on
 *   a phone in the wings.
 * - Front of house: the same menu and amber on daylight pages, for the office.
 *
 * Headings are Barlow Condensed, the text Inter, and asset tags and frequencies Plex
 * Mono (the Backstage font set). This file loads after theme-grainpath.css, so a rule
 * here replaces the house one it repeats; nothing in it applies to any other theme.
 */

/* ---------------------------------------------------------------- the colours */
html[data-theme="backstage"]{
  color-scheme:dark; accent-color:#F3A73B;
  --ink:#F1ECE3; --ink-soft:#C2BBAF; --text-muted:#958F85;
  --paper:#141416; --paper-raised:#1D1D21; --subtle-bg:#19191C;
  --line:#2C2C32; --line-strong:#3F3F47; --field-line:#6A696C; --focus-ring:#F3A73B;
  --mustard:#F3A73B; --mustard-soft:#3A2B14; --mustard-ink:#F7C77E;
  --sage:#7FC39A; --sage-soft:#1A2A21; --sage-ink:#B4DEC3;
  --brick:#F0806E; --brick-soft:#3A201C; --brick-ink:#F6B5AA;
  --blue:#6FAEE6; --blue-soft:#172634; --blue-ink:#B9D7F2;
  --violet:#A9A3F0; --violet-soft:#24223E; --violet-ink:#D3D0F7;
  --plum:#D094BE; --plum-soft:#321F2C; --plum-ink:#EAC6DE;
  --teal:#6CC6BA; --teal-soft:#152C29; --teal-ink:#ACE0D8;
  --green-dot:#7FD69A; --yellow-dot:#F3B54A;
  --radius:8px;
  --chart-a:#F3A73B; --chart-a-soft:#6E5228; --chart-b:#6FAEE6; --chart-c:#F1ECE3; --chart-d:#8A847A;
  --chart-bar-radius:4;
  --act-chart:area;
  --act-email:#6FAEE6; --act-call:#F3A73B; --act-visit:#7FC39A; --act-note:#5A5650;
  --loader-ink:#F3A73B;
  /* The house layout's own colours, Backstage's way. */
  --gp-bg:#0C0C0E;
  --gp-accent:#F3A73B; --gp-on-accent:#17130C;
  --gp-forest:#F3A73B; --gp-pill:#F3A73B;
  --gp-rail:#0E0E10;
  --gp-on-forest:#D9D3C8; --gp-on-forest-muted:#8C867C;
  --gp-card-shadow:0 0 0 1px rgba(255,255,255,0.035), 0 8px 24px rgba(0,0,0,0.38);
  --bs-field:#141416; --bs-field-line:#3A3A42; --bs-dock:#101012;
  --gp-tile:var(--paper-raised);
}
html[data-theme="frontofhouse"]{
  color-scheme:light; accent-color:#B5650A;
  --ink:#18181B; --ink-soft:#46464E; --text-muted:#73737B;
  --paper:#F6F5F2; --paper-raised:#FFFFFF; --subtle-bg:#FAF9F7;
  --line:#E4E2DD; --line-strong:#CFCCC4; --field-line:#8D8B87; --focus-ring:#9E5807;
  --mustard:#B5650A; --mustard-soft:#FBEBD3; --mustard-ink:#7A4206;
  --sage:#2F7D52; --sage-soft:#E1F0E6; --sage-ink:#1E5A39;
  --brick:#B8402E; --brick-soft:#F8E1DC; --brick-ink:#8C2E20;
  --blue:#2B6CB0; --blue-soft:#E1ECF8; --blue-ink:#1C4E86;
  --violet:#5B4FC4; --violet-soft:#ECEAFB; --violet-ink:#3F35A0;
  --plum:#9C3F7C; --plum-soft:#F6E6F0; --plum-ink:#7A2C5F;
  --teal:#1D7F74; --teal-soft:#DDF1EE; --teal-ink:#145E56;
  --green-dot:#2FA35F; --yellow-dot:#E09A1E;
  --radius:8px;
  --chart-a:#E08A12; --chart-a-soft:#F3CF98; --chart-b:#2B6CB0; --chart-c:#18181B; --chart-d:#9A9AA2;
  --chart-bar-radius:4;
  --act-chart:area;
  --act-email:#2B6CB0; --act-call:#E08A12; --act-visit:#2F7D52; --act-note:#C9C6BE;
  --loader-ink:#B5650A;
  --gp-bg:#E8E6E1;
  /* On the dark menu the amber is the console's; on a daylight page it is darker, to be read. */
  --gp-accent:#F3A73B; --gp-on-accent:#17130C;
  --gp-forest:#B5650A; --gp-pill:#F3A73B;
  --gp-rail:#111113;
  --gp-on-forest:#D9D3C8; --gp-on-forest-muted:#8C867C;
  --gp-card-shadow:0 1px 2px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.06);
  --bs-field:#FFFFFF; --bs-field-line:#D6D3CB; --bs-dock:#EFEDE8;
  --gp-tile:var(--paper-raised);
}
html:is([data-theme="backstage"],[data-theme="frontofhouse"])[data-blocks="framed"]{
  --panel-border:1px solid transparent; --panel-radius:12px; --panel-shadow:var(--gp-card-shadow);
}

/* The Backstage font set: condensed headings, Inter, a mono for tags and MHz. */
html[data-font="backstage"]{
  --font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-ui:'Inter', system-ui, sans-serif;
  /* One face for words and figures (GnomeWork: "why is a different font being used
     anywhere?"): table headings, menu counts and money line up by Inter's even
     figures. The mono stays for what the brief named, below. */
  --font-mono:'Inter', system-ui, sans-serif;
  --font-code:'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
}
html[data-font="backstage"] .page-title{font-weight:600;letter-spacing:0.005em;font-size:32px;}
html[data-font="backstage"] .section-title, html[data-font="backstage"] .modal h2{letter-spacing:0.01em;}

/* ------------------------------------------------------- the page behind */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) body{background-color:var(--gp-bg);background-image:none;}

/* Primary buttons wear the amber in Backstage; Front of house keeps near-black ones,
   which read best on a daylight page, and puts the amber on the menu and accents. */
html[data-theme="backstage"] .btn:not(.ghost):not(.danger){background:var(--gp-accent);border-color:var(--gp-accent);color:var(--gp-on-accent);}
html[data-theme="backstage"] .btn:not(.ghost):not(.danger):hover{background:#F7B95E;border-color:#F7B95E;}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .topbar-add{background:var(--gp-accent);color:var(--gp-on-accent);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .gs-box:focus-within{border-color:var(--mustard);box-shadow:0 0 0 3px var(--mustard-soft);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .list-tab.on{border-bottom-color:var(--mustard);}

/* --------------------------------------------------------------- the menu */
@media (min-width:821px){
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail{
    background-color:var(--gp-rail);
    background-image:radial-gradient(120% 40% at 0% 100%, rgba(243,167,59,0.10), transparent 70%);
    background-attachment:fixed; background-size:auto; background-position:0 0;
    border-right:1px solid rgba(255,255,255,0.04);
  }
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail > .brand{background:var(--gp-rail);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail .tab.active{background:var(--gp-pill);color:var(--gp-on-accent);font-weight:600;}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail .tab.active .count{color:rgba(23,19,12,0.7);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]).rail-collapsed .rail .tab .count{color:var(--gp-on-accent);border-color:var(--gp-rail);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail .acct-av{color:var(--gp-on-accent);}
}

/* --------------------------------------------------------------- the dock */
@media (min-width:1280px){
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock{background:var(--bs-dock);}
}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-edit,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-toggle{background:var(--paper-raised);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-edit:hover,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-toggle:hover{background:var(--subtle-bg);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-tile{border-color:var(--line);box-shadow:none;}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-tile:hover{box-shadow:0 0 0 1px var(--line-strong);filter:none;}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-badge{border-color:var(--paper);}
html[data-theme="backstage"] :is(.dock-badge, .rail-m-badge){color:#2A0F0A;}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-x,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-pin{background:var(--paper-raised);}
/* Each tile washed in its group's colour, flat, like a channel strip's scribble tape. */
html[data-theme="backstage"] .dock-cell[data-tint]{--bs-wash:16%;}
html[data-theme="frontofhouse"] .dock-cell[data-tint]{--bs-wash:11%;}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="sage"]{--gp-tile:color-mix(in srgb, var(--sage) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="mustard"]{--gp-tile:color-mix(in srgb, var(--mustard) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="violet"]{--gp-tile:color-mix(in srgb, var(--violet) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="blue"]{--gp-tile:color-mix(in srgb, var(--blue) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="brick"]{--gp-tile:color-mix(in srgb, var(--brick) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="plum"]{--gp-tile:color-mix(in srgb, var(--plum) var(--bs-wash), var(--paper-raised));}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dock-cell[data-tint="teal"]{--gp-tile:color-mix(in srgb, var(--teal) var(--bs-wash), var(--paper-raised));}

/* -------------------------------------------------------------- the phone */
@media (max-width:820px){
  /* Backstage's top bar is dark, so it carries the mark drawn for a dark ground, as the menu does. */
  html[data-theme="backstage"] .rail.menu-collapsed .brand:has(.brand-logo-on-dark) .brand-logo:not(.brand-logo-on-dark){display:none;}
  html[data-theme="backstage"] .rail.menu-collapsed .brand-logo-on-dark{display:inline-block;}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .tabbar{box-shadow:0 -1px 0 var(--line);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .tabbar-item.on{color:var(--mustard);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail:not(.menu-collapsed){
    background:var(--gp-rail) radial-gradient(120% 50% at 50% 110%, rgba(243,167,59,0.14), transparent 70%);
  }
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail:not(.menu-collapsed) .rail-m-quick-cell.active,
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail:not(.menu-collapsed) .tabs > .tab.active,
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail:not(.menu-collapsed) .nav-category-body .tab.active,
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .rail:not(.menu-collapsed) .tabs > .tab[data-view="dashboard"].active{color:var(--gp-on-accent);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .tabbar-wheel{background:var(--gp-accent);color:var(--gp-on-accent);box-shadow:0 4px 14px rgba(0,0,0,.35);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .tabbar-wheel.open{background:var(--ink);color:var(--paper);}
  html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .mmod-head{
    background:var(--gp-rail) radial-gradient(90% 120% at 100% 0%, rgba(243,167,59,0.18), transparent 65%);
  }
}

/* ------------------------------------------------------------- signing in */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .login-card{border-color:var(--line);box-shadow:0 24px 60px rgba(0,0,0,.28);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .login-card .btn{background:var(--gp-accent);border-color:var(--gp-accent);color:var(--gp-on-accent);}
/* A stage wash in place of the house contours: one warm light from above, a cooler fill.
   (Kept over a drawn rig with three beams, 2026-11-02.) */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .login-art{
  background:
    radial-gradient(60% 55% at 70% 0%, rgba(243,167,59,0.55), transparent 70%),
    radial-gradient(50% 45% at 15% 100%, rgba(111,174,230,0.25), transparent 70%),
    linear-gradient(180deg, #19191D, #0C0C0E);
}

/* ---------------------------------------------------------------- pop-ups */
html[data-theme="backstage"] .overlay{background:rgba(0,0,0,.62);}
html[data-theme="frontofhouse"] .overlay{background:rgba(17,17,19,.42);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal{
  background:var(--paper-raised); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12);
}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal.is-tall > .modal-actions{background:var(--paper-raised);}
/* The Grainpath node beside a pop-up's title is the platform's mark: an amber cue light instead. */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal > h2:first-child::before,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal > .modal-header-row:first-child > h2:first-child::before,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal > .form-grid:first-child > h2:first-child::before{
  width:10px; height:10px; border-radius:50%; background:var(--gp-accent); box-shadow:0 0 0 4px var(--mustard-soft), 0 0 14px rgba(243,167,59,.45);
}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .modal :is(input[type=text], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=email], input[type=tel], input[type=url], select:not([multiple]), .combo-input, .price-wrap, textarea),
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .num-step,
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .back-btn{background-color:var(--bs-field);border-color:var(--bs-field-line);color:var(--ink);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .num-step:focus-within{border-color:var(--mustard);box-shadow:0 0 0 3px var(--mustard-soft);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .num-step-btn{background:var(--subtle-bg);color:var(--ink);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .num-step-btn:hover{background:var(--line);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .back-btn:hover{background:var(--subtle-bg);border-color:var(--line-strong);}

/* Fields on a page (not only in pop-ups) on Backstage's darker well. */
/* Not a box's own inner input (search, the wheel's Find, a price), which takes its box's colour. */
html[data-theme="backstage"] :is(input[type=text], input[type=search], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=tel], input[type=url], input[type=password], select, textarea):not(.gs-input):not(.rail-m-search):not(.mmod-find input):not(.price-wrap input):not(.num-step input):not(.combo-input input){background-color:var(--bs-field);border-color:var(--bs-field-line);color:var(--ink);}
html[data-theme="backstage"] ::placeholder{color:#958F85;}

/* Asset tags, event numbers and frequencies in the mono. */
html[data-font="backstage"] :is(.asset-tag, .gear-tag, .ev-num, .rf-freq){font-family:var(--font-code);}

/* The theme picker's swatches. */
.theme-swatch[data-theme="backstage"]{--sw-paper:#141416;--sw-rail:#0E0E10;--sw-card:#1D1D21;--sw-line:#2C2C32;}
.theme-swatch[data-theme="frontofhouse"]{--sw-paper:#F6F5F2;--sw-rail:#111113;--sw-card:#FFFFFF;--sw-line:#E4E2DD;}

/* The sign-in card is dark in Backstage: the mark drawn for a dark ground. */
html[data-theme="backstage"] .login-head:has(.brand-logo-on-dark) .brand-logo:not(.brand-logo-on-dark){display:none !important;}
html[data-theme="backstage"] .login-head .brand-logo-on-dark{display:block;}

/* The accent is the amber, not the house green: the chosen theme and a stat's sparkline. */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .theme-card.selected{border-color:var(--gp-pill);}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .dash-stat-spark path{stroke:var(--chart-a);}

/* UI audit round 3 (2026-10-29). One amber action per screen: where the page has
   its own button, the round + beside it is an amber sign in a ring. The dashboard
   has no page action, so its + stays filled. */
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .page-head:has(.btn:not(.ghost)) .topbar-add{
  background:transparent; color:var(--mustard); box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
html:is([data-theme="backstage"],[data-theme="frontofhouse"]) .page-head:has(.btn:not(.ghost)) .topbar-add:hover{
  box-shadow:inset 0 0 0 1.5px var(--mustard);
}
/* Measured to WCAG AA. Front of house: muted text 4.84:1 on the page (was 4.31),
   amber text 5.00:1 (was 4.35), chart amber 3.62:1 for marks (was 2.69), field
   edges 3.18:1 against white (were 1.60). Backstage field edges 3.05:1 (were 1.63). */
html[data-theme="frontofhouse"]{ --text-muted:#6B6B73; --mustard:#9E5807; --chart-a:#C2740A; --bs-field-line:var(--field-line); }
html[data-theme="backstage"]{ --bs-field-line:var(--field-line); }/* Front of house: the dark menu on a daylight page faded to the page's cream at its
   foot, a pale haze over the menu (UI audit round 3). It fades into its own dark there. */
html[data-theme="frontofhouse"] .rail.has-more{-webkit-mask-image:none;mask-image:none;}
html[data-theme="frontofhouse"] .rail.has-more::after{content:"";position:sticky;bottom:0;display:block;height:36px;margin-top:-36px;
  background:linear-gradient(to bottom, transparent, var(--gp-rail));pointer-events:none;}