/* ============================================================================
   Carbon: the Papaya Home look (chosen 2026-09-23 from seven candidates). Sober and square, IBM Carbon style:
   Papaya-orange top bar (navy in dark mode), grey canvas, no rounded corners, blue actions. Dark mode is blue.
   A layer over styles.css: every rule hangs off html[data-design='carbon'] (theme-init.js sets it before the
   first paint) so it outranks the base rules, including the base dark-mode ones.
   ========================================================================= */

/* ---------------------------------------------------------------- base overrides */
html[data-design='carbon'] :is(.input,.select,.textarea,.pl-row,.role-pill,.blk-edit,.rt-link-input,.like-btn,
  .doc-search input,.qa-ticket-select,.qa-link-input,.qa-status-select,.qa-pick){ font-family:var(--font-body); }
html[data-design='carbon'] .flow-num--blue{ background:var(--blue); }
html[data-design='carbon'] .flow-tag--blue{ background:var(--blue-soft); color:var(--blue); }

/* dark is blue: replace the brown surfaces styles.css hard-codes */
html[data-design='carbon'][data-theme='dark'] :is(.toast,.leaderboard,.rt-toolbar,.blk-edit,.like-btn,.sd-step-select,
  .sd-phases-save-bar,.sd-files-papaya-card,.sd-files-empty,.sd-log-item,.sd-logs-empty,.notif-panel,.apps-panel,
  .chip-input,.suggest){ background:var(--navy-2); }
html[data-design='carbon'][data-theme='dark'] :is(.subnav-btn.active,.filter-pill.active,.cat-pill.active,.sd-tab.active,
  .hs-page-btn.active,.role-pill.active,.sd-feed-filter-btn.active,.sd-log-filter-btn.active){
  background:var(--blue); border-color:var(--blue); color:#fff;
}
html[data-design='carbon'][data-theme='dark'] .flow-note{ background:var(--navy-2); color:var(--ink); }
html[data-design='carbon'][data-theme='dark'] .modal-backdrop{ background:rgba(3,8,20,0.7); }
html[data-design='carbon'][data-theme='dark'] .btn-google{ background:var(--ink); color:var(--paper); }
html[data-design='carbon'][data-theme='dark'] .btn-google:hover{ background:var(--primary); color:#fff; }
html[data-design='carbon'][data-theme='dark'] :is(.lesson-text,.meeting-notes){ color:var(--ink); }

/* #chrome only wraps the bar: without its own box the bar can stay stuck to the top while the page scrolls */
html[data-design='carbon'] #chrome{ display:contents; }

/* the user badge (chrome.js paints it into .member-badge) */
html[data-design='carbon'] .member-badge{
  display:inline-flex; align-items:center; gap:9px; text-transform:none; letter-spacing:0;
  padding:4px 12px 4px 4px; background:var(--white); color:var(--ink); border:1px solid var(--border);
}
html[data-design='carbon'] .member-badge .pl-av{ font-size:12px; }

/* the top bar (orange in light, navy in dark): light controls on it */
html[data-design='carbon'] .topbar{
  background:var(--chrome-bg); color:#fff; border-bottom-color:transparent; backdrop-filter:none;
}
html[data-design='carbon'] .topbar .brand small{ color:var(--chrome-muted); }
html[data-design='carbon'] .topbar .brand-seeds{ fill:#fff; }
html[data-design='carbon'] .topbar :is(.btn-logout,.lang-switch,.member-badge){
  background:transparent; border-color:var(--chrome-line); color:#fff;
}
html[data-design='carbon'] .topbar .btn-logout:hover{ background:var(--chrome-hover); border-color:var(--chrome-line); color:#fff; }
html[data-design='carbon'] .topbar .badge-name{ color:#fff; }
html[data-design='carbon'] .topbar .badge-position{ color:var(--chrome-muted); }
html[data-design='carbon'] .topbar .lang-btn.active{ background:var(--chrome-hover); }
html[data-design='carbon'] .topbar .nav-toggle{ background:transparent; border-color:var(--chrome-line); }
html[data-design='carbon'] .topbar .nav-toggle span{ background:#fff; }
html[data-design='carbon'] .topbar .tab-btn{ color:var(--chrome-muted); }
html[data-design='carbon'] .topbar .tab-btn .tab-time{ color:var(--chrome-muted); }
html[data-design='carbon'] .topbar .tab-btn:hover{ color:#fff; background:var(--chrome-hover); }
html[data-design='carbon'] .topbar .tab-btn.active{ color:#fff; }
html[data-design='carbon'] .topbar .tab-group-label{ color:var(--chrome-muted); opacity:1; }
html[data-design='carbon'] .topbar .tab-group--labeled{ border-left-color:var(--chrome-line); }
html[data-design='carbon'] .topbar .tabs{ border-top-color:var(--chrome-line); }


/* ======================================================================
   Tokens, chrome, page header and components.
   ====================================================================== */
html[data-design='carbon']{
  /* actions are Papaya orange in light mode (blue read as foreign next to the orange bar); dark mode keeps blue */
  --primary:#ec6512; --primary-dark:#c94c05; --primary-soft:rgba(236,101,18,0.12); --primary-tint:#fff3ea;
  --navy:#161616; --navy-2:#262626; --navy-soft:rgba(22,22,22,0.05);
  --ink:#161616; --muted:#525252; --paper:#f4f4f4; --white:#ffffff; --bar:#161616;
  --border:#e0e0e0; --brand:#ff7720; --brand-strong:#ec6512; --brand-text:#c94c05; --primary-tint-brand:#fff3ea;
  --blue:#0f62fe; --blue-soft:rgba(15,98,254,0.10);
  --green:#198038; --green-soft:rgba(25,128,56,0.10); --red:#da1e28; --red-soft:rgba(218,30,40,0.10);
  --chrome-bg:#161616; --chrome-muted:#c6c6c6; --chrome-line:#393939; --chrome-hover:#2c2c2c;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --font-display:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --page:1120px; --radius:0px;
  --shadow-sm:none; --shadow-md:0 2px 6px rgba(0,0,0,0.3);
}
html[data-design='carbon'][data-theme='dark']{
  --primary:#4589ff; --primary-dark:#78a9ff; --primary-soft:rgba(69,137,255,0.16); --primary-tint:rgba(69,137,255,0.12);
  --navy:#f4f4f4; --navy-2:#16223a; --navy-soft:rgba(160,180,220,0.08);
  --ink:#f2f4f8; --muted:#a6b0c3; --paper:#0b1322; --white:#121d33; --bar:#060c18;
  --border:#26334d;
  --blue:#4589ff; --blue-soft:rgba(69,137,255,0.16);
  --green:#42be65; --green-soft:rgba(66,190,101,0.15); --red:#ff8389; --red-soft:rgba(255,131,137,0.15);
  --chrome-bg:#060c18; --chrome-line:#26334d; --chrome-hover:#16223a;
  --brand-text:#ffab73; --primary-tint-brand:rgba(236,101,18,0.14);
}
html[data-design='carbon'] :is(h1,h2,h3,.h2){ letter-spacing:0; }
html[data-design='carbon'] .brand{ font-size:15px; font-weight:600; }
html[data-design='carbon'] .topbar :is(.btn-logout,.lang-switch,.member-badge){ border-radius:0; }
@media (min-width:761px){
  html[data-design='carbon'] .topbar-inner{ padding-top:10px; }
  html[data-design='carbon'] .tabs{ margin-top:6px; }
  html[data-design='carbon'] .tab-btn{ border-radius:0; padding:20px 11px 10px; font-weight:400; border-bottom-width:3px; }
  html[data-design='carbon'] .tab-btn .tab-time{ display:none; }
  html[data-design='carbon'] .topbar .tab-btn.active{ border-bottom-color:var(--brand); font-weight:600; background:#262626; }
  html[data-design='carbon'][data-theme='dark'] .topbar .tab-btn.active{ background:#16223a; }
}

/* page header: a white title band */
html[data-design='carbon'] .hero{ background:var(--white); border-bottom:1px solid var(--border); padding:40px 0 34px; }
html[data-design='carbon'] .eyebrow{ color:var(--muted); font-weight:400; letter-spacing:.02em; text-transform:none; font-size:12px; }
html[data-design='carbon'] .eyebrow .seed{ background:var(--brand); }
html[data-design='carbon'] .hero h1{ font-size:clamp(28px,3.4vw,40px); font-weight:300; letter-spacing:0; line-height:1.2; }
html[data-design='carbon'] .hero h1 span{ color:var(--ink); font-weight:600; }
html[data-design='carbon'] :is(.hero .hero-body,.hero .hero-body p){ font-size:15px; color:var(--muted); max-width:720px; }
html[data-design='carbon'] section.block{ padding:40px 0; border-bottom:none; }
html[data-design='carbon'] .kicker{ color:var(--muted); font-weight:400; text-transform:none; letter-spacing:.02em; font-size:12px; }
html[data-design='carbon'] .h2{ font-size:26px; font-weight:400; }
html[data-design='carbon'] .h2-sub{ font-size:14px; }
html[data-design='carbon'] :is(.rhythm-card-head h3,.flow-title,.nav-card-title){ font-weight:600; }

/* square everything */
html[data-design='carbon'] :is(.card,.week-card,.nav-card,.panel-form,.hs-kpi,.hs-table,.sl-table,.kpi-card,.doc-row,.link-card,
  .meeting-card,.lesson-card,.pl-list,.rl,.qa-table,.empty-panel,.modal,.login-card,.mission-callout,.flow-body,.flow-note,
  .btn,.input,.select,.textarea,.filter-pill,.subnav-btn,.cat-pill,.sd-tab,.nav-card-time,.kpi-md ul li,.toast,.blk-edit,
  .notif-panel,.apps-panel,.hs-page-btn){ border-radius:0; box-shadow:none; }
html[data-design='carbon'] .nav-card-grid:not(.quick-grid){ grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
html[data-design='carbon'] .nav-card{ border:none; padding:20px; min-height:140px; }
html[data-design='carbon'] .nav-card:hover{ transform:none; box-shadow:inset 0 -3px 0 var(--brand-strong); background:var(--primary-tint-brand); }
html[data-design='carbon'][data-theme='dark'] .nav-card:hover{ background:#16223a; }
html[data-design='carbon'] .nav-card-time{ background:transparent; color:var(--muted); padding:0; }
html[data-design='carbon'] .mission-callout{ background:var(--white); border-left:3px solid var(--brand); max-width:none; }
html[data-design='carbon'] .mission-callout > span{ color:var(--muted); }
html[data-design='carbon'] .rhythm-md ol li::before{ border-radius:0; background:var(--paper); color:var(--ink); }
html[data-design='carbon'] .week-card h4{ color:var(--ink); }
/* :where keeps this below the compact .btn variants in styles.css (.hs-actions .btn, .sd-mini…) */
:where(html[data-design='carbon']) .btn{ padding:11px 20px; font-weight:500; }
html[data-design='carbon'] .btn:hover{ transform:none; background:var(--primary-dark); }
html[data-design='carbon'] .btn-ghost{ color:var(--primary-dark); border-color:var(--primary); background:transparent; }
html[data-design='carbon'] .btn-ghost:hover{ background:var(--primary); color:#fff; }
html[data-design='carbon'] :is(.input,.select,.textarea){ background:var(--paper); border:none; border-bottom:1px solid #8d8d8d; }
html[data-design='carbon'][data-theme='dark'] :is(.input,.select,.textarea){ background:#16223a; border-bottom-color:#5b6b85; }
html[data-design='carbon'] :is(.input,.select,.textarea):focus{ box-shadow:inset 0 0 0 2px var(--primary); border-bottom-color:transparent; }
html[data-design='carbon'] :is(.filter-pill,.subnav-btn,.cat-pill,.sd-tab){ border-width:1px; }
html[data-design='carbon'] :is(.subnav-btn.active,.filter-pill.active,.cat-pill.active,.sd-tab.active,.hs-page-btn.active,
  .role-pill.active,.sd-feed-filter-btn.active,.sd-log-filter-btn.active,.lb-toggle button.active){
  background:var(--brand-strong); border-color:var(--brand-strong); color:#fff;
}
html[data-design='carbon'] :is(.subnav-btn,.filter-pill,.cat-pill,.sd-tab,.hs-page-btn,.sd-feed-filter-btn,.sd-log-filter-btn):hover:not(.active){
  border-color:var(--brand-strong); color:var(--brand-text); background:var(--primary-tint-brand);
}
html[data-design='carbon'] :is(.cat-pill,.filter-pill).active .count{ background:rgba(255,255,255,0.25); color:#fff; }
html[data-design='carbon'] .login-wrap{ background:var(--paper); }
html[data-design='carbon'] .login-card{ border:1px solid var(--border); }
html[data-design='carbon'] .btn-google{ background:var(--ink); }


/* ---------------------------------------------------------------- fixes from the page-by-page review (2026-09-23) */
/* the language buttons inherited dark text on the black bar */
html[data-design='carbon'] .topbar .lang-btn{ color:#fff; }
html[data-design='carbon'] .topbar .lang-btn:not(.active){ opacity:.6; }

/* the full tab row (with Admin) fits one line at every desktop width (the bar is capped at --page, so wide
   screens need the compact tabs as much as narrow ones) */
@media (min-width:761px){
  html[data-design='carbon'] .tab-btn{ padding:20px 8px 10px; font-size:13px; }
  html[data-design='carbon'] .tab-group--labeled{ margin-left:6px; padding-left:6px; }
  html[data-design='carbon'] .tab-btn--labeled{ padding-top:7px; }
}

/* the rest of the containers go square too; tags, chips and avatars keep their round shape */
html[data-design='carbon'] :is(.yesno-card,.list li,.md-list ul li,.leaderboard,.lb-toggle button,.posting-as,.cat-folder,
  .doc-row-icon,.link-card-icon,.hs-desc,.hs-list li,.hs-note,.hs-contact-opt,.hs-filters,.sc-fact,.sc-phase,.sc-pending li,.sc-next,
  .sd-preview-toggle,.sd-update-form,.kpi-table-wrap,.kpi-alert,.kpi-questions,.embed-frame,.weekly-best,.empty-note,.dup-warning,
  .rt-toolbar,.rt-editing,.rt-btn,.rt-link-input,.chip-input,.suggest,.sd-files-papaya-card,.sd-files-empty,.sd-log-item,.sd-logs-empty,
  .sd-feed-empty-filter,.sd-feed-modal,.sd-feed-modal-content,.sd-phases-save-bar,.sd-feed-filter-btn,.sd-log-filter-btn,
  .sd-feed-date-filter-wrap,.role-toggle,.role-pill,.icon-btn,.like-btn,.meeting-link,.meeting-chip,.pl-panel,.section-add,
  .hs-bar-row,.hs-owner-row,.qa-banner,.lang-switch,.lang-btn,.btn-logout,.member-badge,.flow-gate span){ border-radius:0; }
/* Top loggers: a white card like the rest, not the black block of the old look */
html[data-design='carbon']:not([data-theme='dark']) .leaderboard{ background:var(--white); color:var(--ink); border:1px solid var(--border); border-top:3px solid var(--brand-strong); }
html[data-design='carbon']:not([data-theme='dark']) .lb-row{ border-top-color:var(--border); }
html[data-design='carbon']:not([data-theme='dark']) .lb-rank:not(.gold):not(.silver):not(.bronze){ background:var(--paper); color:var(--ink); }
html[data-design='carbon']:not([data-theme='dark']) .lb-empty{ color:var(--muted); }
html[data-design='carbon']:not([data-theme='dark']) .lb-toggle button:not(.active){ border-color:var(--border); color:var(--muted); }
html[data-design='carbon'] .lb-count{ color:var(--brand-text); }

/* doc folders: the icon alone, no coloured square behind it */
html[data-design='carbon'] .cat-folder{ background:transparent; width:auto; height:auto; font-size:22px; }

/* Big No-Nos: red seeds, not the (blue) primary */
html[data-design='carbon'] .md-seeds--red ul li::before{ background:var(--red); }

/* inputs that are not .input: same field look (grey fill, bottom rule) */
html[data-design='carbon'] :is(.chip-input,.doc-search input){ background:var(--paper); border:none; border-bottom:1px solid #8d8d8d; border-radius:0; }
html[data-design='carbon'] :is(.chip-input:focus-within,.doc-search input:focus){ box-shadow:inset 0 0 0 2px var(--primary); border-bottom-color:transparent; }
html[data-design='carbon'][data-theme='dark'] :is(.chip-input,.doc-search input){ background:#16223a; border-bottom-color:#5b6b85; }
html[data-design='carbon'] .suggest{ box-shadow:var(--shadow-md); }

/* link buttons never underline; secondary buttons take a 1px rule */
html[data-design='carbon'] a.btn{ text-decoration:none; }
html[data-design='carbon'] .btn-ghost{ border-width:1px; }
/* the blue secondary style must not swallow the red of destructive buttons */
html[data-design='carbon'] .btn-danger{ color:var(--red); border-color:var(--red); }
html[data-design='carbon'] .btn-danger:hover{ background:var(--red); color:#fff; }

/* dialogs dim to neutral grey, not brown */
html[data-design='carbon'] .modal-backdrop{ background:rgba(22,22,22,0.5); backdrop-filter:none; }
html[data-design='carbon'] .modal{ border-top:3px solid var(--brand); }

/* dark mode painted every onboarding step dot grey (styles.css's dark rule outranked the status colours) */
html[data-design='carbon'][data-theme='dark'] .sc-step--done .sc-step-dot{ background:var(--green); }
html[data-design='carbon'][data-theme='dark'] .sc-step--progress .sc-step-dot{ background:var(--gold); }
html[data-design='carbon'][data-theme='dark'] .sc-step--blocked .sc-step-dot{ background:var(--red); }
html[data-design='carbon'][data-theme='dark'] .sc-step--info .sc-step-dot{ background:var(--primary); }
html[data-design='carbon'][data-theme='dark'] .sc-step--todo .sc-step-dot{ background:transparent; }
html[data-design='carbon'][data-theme='dark'] .sc-step--na .sc-step-dot{ background:var(--border); }

/* phone: square menu button, orange marker on the open tab, the badge on its own row above the controls */
html[data-design='carbon'] .nav-toggle{ border-radius:0; }
@media (max-width:760px){
  html[data-design='carbon'] .topbar .tab-btn.active{ border-left-color:var(--brand); border-bottom-color:transparent; background:#262626; }
  html[data-design='carbon'][data-theme='dark'] .topbar .tab-btn.active{ background:#16223a; }
}
@media (max-width:480px){
  html[data-design='carbon'] .topbar-actions{ gap:6px; }
  html[data-design='carbon'] .member-badge{ flex:1 1 100%; max-width:100%; }
  html[data-design='carbon'] #logoutBtn{ margin-left:auto; }
}

/* sign-in */
html[data-design='carbon'] .login-card{ border-top:3px solid var(--brand); }
html[data-design='carbon'] .login-card h1{ font-weight:400; font-size:28px; }


/* ---------------------------------------------------------------- orange top bar (light mode; dark keeps the navy bar)
   Papaya orange bar, white text; what is selected on it (active tab, language, avatar) is cream with orange text. */
html[data-design='carbon']:not([data-theme='dark']){
  --chrome-bg:#ec6512; --chrome-muted:rgba(255,255,255,0.86); --chrome-line:rgba(255,255,255,0.42); --chrome-hover:rgba(0,0,0,0.12);
  --bar-pick:#fff3ea; --bar-pick-fg:#c94c05;
}
html[data-design='carbon']:not([data-theme='dark']) .topbar .brand-mark g:not(.brand-seeds){ fill:#fff; }
html[data-design='carbon']:not([data-theme='dark']) .topbar .brand-seeds{ fill:#161616; }
html[data-design='carbon']:not([data-theme='dark']) .topbar .tab-btn{ color:#fff; font-weight:500; }
html[data-design='carbon']:not([data-theme='dark']) .topbar .tab-btn.active{
  background:var(--bar-pick); color:var(--bar-pick-fg); border-bottom-color:var(--bar-pick); border-left-color:var(--bar-pick);
}
html[data-design='carbon']:not([data-theme='dark']) .topbar .tab-btn:not(.active):hover{
  background:var(--primary-tint-brand); color:var(--brand-text); box-shadow:inset 0 0 0 1px var(--brand-strong);
}
html[data-design='carbon']:not([data-theme='dark']) .topbar .tab-btn:hover .tab-group-label,
html[data-design='carbon']:not([data-theme='dark']) .topbar .tab-btn.active .tab-group-label{ color:var(--bar-pick-fg); }
html[data-design='carbon']:not([data-theme='dark']) .topbar .lang-btn.active{ background:var(--bar-pick); color:var(--bar-pick-fg); }
html[data-design='carbon']:not([data-theme='dark']) .topbar .lang-btn:not(.active){ opacity:.8; }
html[data-design='carbon']:not([data-theme='dark']) .topbar .member-badge .pl-av{ background:var(--bar-pick); color:var(--bar-pick-fg); }



/* ---------------------------------------------------------------- narrow screens (last so it wins) */
@media (max-width:900px){ html[data-design='carbon'] .nav-card-grid:not(.quick-grid){ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ html[data-design='carbon'] .nav-card-grid:not(.quick-grid){ grid-template-columns:1fr; } }