/* CPG Automate hub styles. One file for every hub screen (client and CPGA admin).
   Source of the values: Design System artifact "CPG Automate" version 7
   (claude.ai/artifact/8GhnX6h3z9Q395oznYXetx) and hub Design\design-system\tokens.json.
   The hub files are master; change values there first, then here. No colours typed in screens.
   App shell (navy sidebar, green selected pill, navy header band with green rule) from the
   Creator hub screens, Startup Platform\creator-admin-screens\. Buttons are AppButton. */

:root {
  /* colour */
  --navy: #10223f; --navy-2: #21324d; --navy-line: #2c3d58;
  --green: #57a645; --green-dark: #4a8c3f; --green-bright: #7dc873; --green-tint: #e8f4e8;
  --blue: #185fa5; --gray: #5f5e5a; --slate-light: #adb3bf; --white: #ffffff;
  --ink: #10223f; --ink-muted: #5f5e5a; --ink-on-navy-muted: #adb3bf; --ink-on-navy-faint: #8890a0;
  --line: #d3d1c7; --rule: #e3e1da; --lgray: #f4f3f0; --panel: #f4f6f8; --field: #ffffff;
  --accent: var(--green); --accent-hover: var(--green-dark);
  /* status colours: not in the design system yet (asked Design 2026-10-14) */
  --warn: #9a5b00; --warn-tint: #fff4e0; --warn-line: #e5c48a; --danger: #b3261e; --danger-tint: #fdecea;
  /* type: app scale (13px body, 9.75pt; Tom 2026-10-14) */
  --font: "Montserrat", sans-serif;
  --fs-title: 20px; --fs-h2: 15px; --fs-body: 13px; --fs-small: 12px; --fs-label: 11px;
  /* radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-pill: 20px;
  /* AppButton padding */
  --app-btn-lg: 10px 18px; --app-btn-md: 8px 14px; --app-btn-sm: 5px 10px; --app-btn-text: 5px 6px;
  --sidebar: 224px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; color: var(--ink); background: var(--lgray); }
a { color: var(--blue); } a:hover { color: var(--navy); }
code { font-size: 12px; background: var(--panel); border: 1px solid var(--rule); padding: 0 4px; border-radius: var(--radius-sm); }

/* shell */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--navy); color: var(--white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { padding: 16px; border-bottom: 1px solid var(--navy-line); }
.sidebar .brand img { display: block; width: 184px; height: auto; }
.sidebar .brand .sub, .sidebar .group { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-on-navy-faint); }
.sidebar .brand .sub { margin-top: 8px; }
.sidebar nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar .group { padding: 14px 12px 6px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 6px; color: #dfe4ec; font-size: 13px; font-weight: 500; text-decoration: none; }
.nav-item:hover { background: var(--navy-2); color: var(--white); }
.nav-item[aria-current="page"] { background: var(--green); color: var(--white); font-weight: 600; }
.sidebar .person { padding: 12px 16px; border-top: 1px solid var(--navy-line); font-size: 12px; line-height: 1.4; }
.sidebar .person .meta { font-size: 11px; color: var(--ink-on-navy-faint); }
.page { min-width: 0; display: flex; flex-direction: column; }
.page-head { background: var(--navy); color: var(--white); padding: 18px 28px 16px; border-bottom: 3px solid var(--green); }
.page-head .eyebrow { color: var(--green-bright); }
.page-head h1 { margin: 4px 0 2px; font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.page-head .meta, .page-head p { font-size: var(--fs-small); color: var(--ink-on-navy-muted); margin: 0; }
.page-body { padding: 20px 28px 48px; max-width: 1560px; width: 100%; }
.env-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warn-tint); color: var(--warn); margin-left: 8px; vertical-align: middle; }

/* text */
.eyebrow, .lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--green-dark); }
.lbl { letter-spacing: .08em; color: var(--ink-muted); }
.muted { color: var(--ink-muted); font-size: var(--fs-small); }
.err { color: var(--danger); } .ok { color: var(--green-dark); }
.msg { font-size: var(--fs-small); margin-top: 8px; min-height: 18px; }
h2 { margin: 0 0 8px; font-size: var(--fs-h2); font-weight: 700; color: var(--ink); }

/* cards */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); margin: -16px -18px 12px; }
.card-head h2 { margin: 0; }

/* AppButton: sentence case, 600, radius-sm. One primary per row or dialog. */
.btn { font-family: inherit; font-weight: 600; font-size: 13px; padding: var(--app-btn-md); line-height: 1; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; display: inline-block; text-decoration: none; }
.btn-lg { font-size: 14px; padding: var(--app-btn-lg); }
.btn-md { font-size: 13px; padding: var(--app-btn-md); }
.btn-sm { font-size: 12px; padding: var(--app-btn-sm); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--white); }
.btn-outline { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--lgray); }
.btn { transition: background-color .12s, border-color .12s, color .12s; }
.btn:active { transform: translateY(1px); }
.btn-on { background: var(--green-tint); border-color: var(--green); color: var(--green-dark); }
.btn-text { background: transparent; border-color: transparent; color: var(--green-dark); font-size: 12px; padding: var(--app-btn-text); }
.btn-text:hover { text-decoration: underline; background: var(--green-tint); }
.btn-on:hover { background: #d9eed6; }
.btn-on-navy { background: transparent; border-color: #58657a; color: var(--white); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, .nav-item:focus-visible, .tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* forms */
input, select, textarea { font-family: inherit; font-size: 13px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; }
textarea { width: 100%; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
input[type=checkbox], input[type=radio] { accent-color: var(--green); }

/* tables: dense, uppercase small heads, light rules */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
th { text-align: left; padding: 7px 10px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr.disabled td { color: #98a2ad; }

/* pills */
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--lgray); color: var(--ink-muted); }
.pill-done { background: var(--green-tint); color: var(--green-dark); }
.pill-wait { background: var(--warn-tint); color: var(--warn); }
.pill-off { background: #eceae4; color: var(--ink-muted); }
.pill-bad { background: var(--danger-tint); color: var(--danger); }

/* tabs (segmented step bar) */
.tabs { background: var(--white); border-bottom: 1px solid var(--line); padding: 0 20px; display: flex; flex-wrap: wrap; gap: 2px; position: sticky; top: 0; z-index: 2; }
.tab { font-family: inherit; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--green); }

/* fixed action bar (review confirm) */
.action-bar { position: sticky; bottom: 0; z-index: 3; background: var(--navy); color: var(--white); padding: 12px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 3px solid var(--green); }
.action-bar .note { color: var(--ink-on-navy-muted); font-size: var(--fs-small); }

.testbar { font-size: var(--fs-small); color: var(--ink-muted); margin: 0 0 12px; }

/* narrow screens: sidebar on top */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .page-head, .page-body { padding-left: 16px; padding-right: 16px; }
}

/* The hidden attribute always wins over display rules (nav items are display:flex). */
[hidden] { display: none !important; }

/* ---- SOP Check (Startup Hub v2 walkthrough, screen 4; D23 folder tabs, D25-D29) ---- */
/* status chips: one vocabulary everywhere (walkthrough D8) */
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; line-height: 1.4; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-need { background: var(--warn-tint); color: var(--warn); }
.s-prog { background: #e6eef8; color: var(--blue); }
.s-wait { background: #ecebe6; color: var(--ink-muted); }
.s-block { background: var(--danger-tint); color: var(--danger); }
.s-done { background: var(--green-tint); color: var(--green-dark); }
.sc-head { background: var(--navy); color: var(--white); padding: 18px 22px 16px; border-bottom: 3px solid var(--green); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.sc-head .eyebrow { color: var(--green-bright); }
.sc-head h2 { margin: 4px 0 2px; font-size: var(--fs-title); font-weight: 800; color: var(--white); }
.sc-head p { margin: 0; color: var(--ink-on-navy-muted); font-size: var(--fs-small); }
.sc-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 16px; }
.sc-body { padding: 14px 18px 18px; }
.sc-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.ftabs { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; border-bottom: 2px solid var(--navy); }
.ftab { font-family: inherit; border: 1px solid var(--line); border-bottom: 0; background: #ecebe6; border-radius: 8px 8px 0 0; padding: 7px 12px 6px; font-weight: 600; font-size: 12px; cursor: pointer; position: relative; top: 2px; color: var(--ink); }
.ftab:hover { background: var(--lgray); }
.ftab[aria-selected="true"] { background: var(--white); border: 2px solid var(--navy); border-bottom: 0; }
.ftab .k { font-size: 10.5px; color: var(--ink-muted); margin-left: 5px; font-weight: 600; }
.folder { border: 2px solid var(--navy); border-top: 0; border-radius: 0 0 8px 8px; padding: 10px 14px 12px; background: var(--white); }
.sc-row { display: grid; grid-template-columns: 52px 140px minmax(0, 1fr) 150px; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.sc-row.done { opacity: .78; }
.sc-row .no { font-weight: 700; }
.sc-row .who { font-weight: 600; font-size: 12px; }
.sc-row .who small { display: block; color: var(--warn); font-weight: 600; }
.sc-row .meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }
.sc-row .rv .hint { font-size: 11px; color: var(--ink-muted); margin-top: 4px; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; align-items: center; }
.ref { display: inline-block; font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; margin: 2px 3px 0 0; background: var(--lgray); cursor: help; }
.sc-panel { border: 1px solid var(--warn-line); background: var(--warn-tint); border-radius: 6px; padding: 10px 12px; margin-top: 8px; }
.sc-panel.ai { border-color: var(--line); background: var(--panel); }
.sc-panel.edit { border-color: var(--green); background: #fbfdfa; }
.sc-panel h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.sc-panel.ai h4, .sc-panel.edit h4 { color: var(--green-dark); }
.sc-panel input, .sc-panel textarea { font-family: inherit; font-size: 13px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 9px; background: var(--white); box-sizing: border-box; }
.sc-panel label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-muted); margin: 6px 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.vh { font-size: 12px; font-weight: 700; color: var(--navy); margin: 12px 0 2px; text-transform: uppercase; letter-spacing: .08em; }
.btn[disabled].btn-outline { background: var(--lgray); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
@media (max-width: 900px) { .sc-row { grid-template-columns: 40px minmax(0, 1fr); } .sc-row .who, .sc-row .rv { grid-column: 2; } }

/* ---- Hub shell screens (walkthrough 2 Home, 3 Upload & Process) ---- */
.view-off { display: none !important; }
.sidebar .subnav { margin: 1px 0 4px 14px; border-left: 1px solid var(--navy-line); padding-left: 6px; }
.sidebar .subnav .nav-item { font-size: 12px; padding: 5px 8px; color: #b8c6da; }
.sidebar .subnav .nav-item[aria-current="page"] { background: var(--navy-2); color: var(--white); box-shadow: inset 3px 0 0 var(--green); }
.nbadge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #ffc865; }
.two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .two { grid-template-columns: 1fr; } }
.tw { overflow-x: auto; }
.trk { display: flex; gap: 3px; align-items: center; min-width: 130px; }
.trk i { display: block; height: 5px; flex: 1; border-radius: 3px; background: #ecebe6; }
.trk i.g { background: var(--green); } .trk i.n { background: var(--navy); } .trk i.a { background: #e0a640; } .trk i.r { background: var(--danger); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--ink-muted); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 16px; height: 5px; border-radius: 3px; display: inline-block; }
.drop { display: grid; gap: 4px; border: 1.5px dashed var(--green); border-radius: 6px; padding: 16px; text-align: center; background: #fbfdfa; margin-bottom: 12px; cursor: pointer; }
.drop b { font-size: 13.5px; }
.drop input { justify-self: center; margin-top: 6px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.lab { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.inp { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; background: var(--white); color: var(--ink); }
.big { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; margin-top: 3px; }
ol.steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.sh h2 { margin: 0; } .sh p { margin: 0; font-size: 11.5px; color: var(--ink-muted); }
.stack { display: grid; gap: 8px; }
.task { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-left: 4px solid #e0a640; border-radius: 6px; padding: 10px 14px; }
.task.k { border-left-color: var(--danger); } .task.d { border-left-color: var(--green); }
.task .bd { flex: 1; min-width: 200px; } .task b { display: block; font-size: 13.5px; } .task .m { font-size: 12px; color: var(--ink-muted); }
.task .svc { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.strip .c { background: var(--white); padding: 10px 12px; display: grid; gap: 4px; color: var(--ink); text-decoration: none; justify-items: start; }
.strip a.c:hover { background: var(--lgray); }
.strip .n { font-weight: 700; font-size: 13px; } .strip .d { font-size: 11.5px; color: var(--ink-muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tile { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.tile .tp { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; width: 100%; }
.tile h3 { margin: 0; font-size: 14px; } .tile p { margin: 0; font-size: 12px; color: var(--ink-muted); flex: 1; }
.off { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.o-act { background: var(--green-tint); color: var(--green-dark); } .o-add { background: var(--navy); color: var(--white); }
.meta { font-size: 11.5px; color: var(--ink-muted); }
/* Marks wording that is not final (Legal or Sales still to set it). */
.ph { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; background: #fff1d6; color: #9a5b00; border: 1px dashed #d8a640; vertical-align: middle; margin-left: 6px; }
/* Live work in progress (reading, writing files): the working segment moves, a note says what is happening. */
.trk.live i.n { background: linear-gradient(90deg, var(--navy) 0%, var(--green-bright) 50%, var(--navy) 100%); background-size: 200% 100%; animation: trk-move 1.4s linear infinite; }
@keyframes trk-move { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.reading { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--blue); font-weight: 600; margin-top: 4px; }
.reading .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse 1.2s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .trk.live i.n, .reading .dot { animation: none; } }

/* Legal popups (Legal DRAFT 2 section 1) */
.lg-back { position: fixed; inset: 0; background: rgba(16,34,63,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.lg-box { background: var(--panel, #fff); border-radius: 8px; max-width: 560px; width: 100%; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-height: 90vh; overflow: auto; }
.lg-box h3 { margin: 0 0 8px; font-size: 18px; }
.lg-box p { margin: 0 0 10px; }
.lg-box label.ck { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-weight: 600; }

/* Checkout and receipt (Tom 2026-10-17: a seamless, branded purchase) */
.co-wrap { max-width: 920px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .co-grid { grid-template-columns: 1fr; } }
.co-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.co-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--green-tint); color: var(--green-dark); display: flex; align-items: center; justify-content: center; flex: none; }
.co-item h3 { margin: 0 0 2px; font-size: 16px; }
.co-line { display: flex; justify-content: space-between; padding: 6px 0; font-variant-numeric: tabular-nums; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 10px; }
.co-total b { font-size: 28px; color: var(--navy); font-variant-numeric: tabular-nums; }
.co-pay { width: 100%; justify-content: center; margin-top: 14px; }
.co-secure { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: var(--muted, #5f5e5a); }
.co-next { margin: 8px 0 0; padding-left: 18px; }
.co-next li { margin: 4px 0; }
.co-qty { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rc-card { text-align: center; padding: 32px 24px; }
.rc-check { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.rc-rows { max-width: 420px; margin: 16px auto 0; text-align: left; }
.rc-rows .co-line { border-bottom: 1px solid var(--rule); }
.rc-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* Home landing: Sales mockup hub-home-mockup-2026-10-14 (Tom 2026-10-18) */
.page-head { position: relative; }
.page-head .hm-up { position: absolute; right: 28px; bottom: 18px; text-decoration: none; }
.hm-cont { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.hm-eb { color: var(--green-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hm-cont-t { font-size: 15px; font-weight: 700; margin: 4px 0 10px; }
.hm-cred { text-align: right; min-width: 180px; }
.hm-cred .meta { margin: 8px 0 0; }
.hm-sec { margin-top: 26px; }
.hm-sec .sh h2 { font-size: var(--fs-h2); }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hm-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.hm-tile:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(16, 34, 63, .08); }
.hm-tile .top { display: flex; justify-content: space-between; align-items: flex-start; }
.hm-ic { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--green-tint); color: var(--green-dark); }
.hm-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.hp-active { background: var(--green-tint); color: var(--green-dark); }
.hp-start { background: var(--navy); color: var(--white); }
.hp-early { background: var(--warn-tint); color: var(--warn); }
.hp-talk { background: #e8eef7; color: var(--blue); }
.hp-soon { background: #ecebe6; color: var(--ink-muted); }
.hm-tile h3 { margin: 0; font-size: 15px; font-weight: 700; }
.hm-tile .txt { font-size: 12px; color: var(--ink-muted); }
.hm-tile .meta { font-size: 11px; }
.hm-tile .act { margin-top: auto; padding-top: 4px; }
.hm-soon .hm-tile { min-height: 0; opacity: .85; }
@media (max-width: 820px) { .page-head .hm-up { position: static; margin-top: 10px; display: inline-block; } .hm-cont { grid-template-columns: 1fr; } .hm-cred { text-align: left; } }

/* Upload box drag and drop (Tom 2026-10-19) */
label.drop.over { border-color: var(--green); background: var(--green-tint); }

/* Team activity log: fixed area that scrolls (Tom 2026-10-19) */
.act-log { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.act-log table { margin: 0; }
.act-log th { position: sticky; top: 0; background: var(--white); z-index: 1; }

/* SOP / SWP printed document setup (Tom 2026-10-19) */
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ps-f { margin-bottom: 12px; }
.ps-f textarea { width: 100%; resize: vertical; font-family: inherit; }
.ps-ro { padding: 6px 0; }
.ps-up { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-md); margin-bottom: 10px; }
.ps-up label.btn { cursor: pointer; flex: none; }
.ps-page { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 16px rgba(16, 34, 63, .08); padding: 18px 20px; aspect-ratio: 8.5 / 11; display: flex; flex-direction: column; gap: 12px; font-size: 11px; margin: 4px 0 10px; }
.ps-hd { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; font-weight: 600; }
.ps-logo { flex: none; width: 54px; height: 26px; border: 1px dashed var(--line); border-radius: 3px; display: grid; place-items: center; font-size: 9px; color: var(--ink-muted); font-weight: 500; }
.ps-title { font-weight: 800; font-size: 13px; } .ps-title span { display: block; font-weight: 500; font-size: 10px; color: var(--ink-muted); }
.ps-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ps-body i { display: block; height: 5px; background: #ecebe6; border-radius: 3px; width: 100%; }
.ps-body b { font-size: 10px; margin-top: 4px; }
.ps-sig { border-top: 1px solid var(--rule); padding-top: 8px; display: grid; gap: 8px; }
.ps-line { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr; gap: 8px; font-size: 10px; }
.ps-line span { border-bottom: 1px solid var(--ink); padding-bottom: 10px; color: var(--ink-muted); }
.ps-line span:first-child { color: var(--ink); font-weight: 600; }
.ps-ft { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--rule); padding-top: 6px; font-size: 9.5px; color: var(--ink-muted); }
.ps-tpl { position: absolute; inset: auto 12px 12px 12px; background: var(--green-tint); color: var(--green-dark); font-weight: 700; text-align: center; padding: 6px; border-radius: 4px; }
@media (max-width: 900px) { .ps-grid { grid-template-columns: 1fr; } }

/* Users table: controls the same height as the small buttons (Tom 2026-10-19) */
.inp.inp-sm { padding: 5px 8px; font-size: 12px; min-height: 0; height: 30px; width: auto; }
select.inp.inp-sm { padding-right: 24px; }
.ppl-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-logo.has { width: auto; max-width: 110px; border: 0; padding: 0; }
.ps-logo img { display: block; max-height: 30px; max-width: 110px; object-fit: contain; }

/* Sell pages (Tom 2026-10-19) */
.hm-more { font-size: 12px; font-weight: 700; color: var(--green-dark); margin-left: 10px; white-space: nowrap; }
.hm-tile .act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ln-head { display: flex; gap: 16px; align-items: flex-start; border-top: 4px solid var(--green); }
.ln-head .hm-ic { width: 52px; height: 52px; flex: none; }
.ln-lead { font-size: 15px; margin: 6px 0 0; }
.ln-h { font-size: 14px; margin: 18px 0 6px; }
.ln-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ln-note { border-left: 3px solid var(--line); padding-left: 10px; margin-top: 16px; }
.ln-needs { margin-top: 18px; background: var(--warn-tint); color: var(--warn); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; }
.ln-price { border-top: 4px solid var(--green); display: grid; gap: 6px; }
.ln-rel { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.ln-rel a { font-weight: 600; color: var(--green-dark); }

/* Help and Feedback tabs (Tom 2026-10-19): folder tabs mid screen on the right; the panel is fixed */
.hf-tabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; }
.hf-tab { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--navy); color: var(--white); border: 0; border-radius: 0 8px 8px 0; padding: 14px 8px; font: 700 12px/1 var(--font); letter-spacing: .08em; cursor: pointer; box-shadow: -2px 2px 8px rgba(16, 34, 63, .2); }
.hf-tab.hf-fb { background: var(--green); }
.hf-tab:hover, .hf-tab[aria-pressed="true"] { filter: brightness(1.15); }
.hf-tab:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.hf-panel { position: fixed; right: 40px; top: 72px; bottom: 16px; width: min(380px, calc(100vw - 56px)); z-index: 41; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 10px; box-shadow: 0 12px 36px rgba(16, 34, 63, .22); padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.hf-panel[hidden] { display: none; }
.hf-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.hf-log { flex: 1; min-height: 120px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.hf-q { align-self: flex-end; background: var(--navy); color: var(--white); border-radius: 10px 10px 2px 10px; padding: 8px 10px; max-width: 85%; font-size: 13px; }
.hf-a { align-self: flex-start; background: var(--lgray); border-radius: 10px 10px 10px 2px; padding: 8px 10px; max-width: 92%; font-size: 13px; white-space: pre-wrap; }
.hf-wait { color: var(--ink-muted); font-style: italic; }
.hf-ask { display: flex; gap: 6px; align-items: flex-end; } .hf-ask textarea { flex: 1; resize: none; font-family: inherit; }
.hf-human { border-top: 1px solid var(--rule); padding-top: 8px; } .hf-human summary { cursor: pointer; font-weight: 700; color: var(--green-dark); }
.hf-human textarea, .hf-panel textarea { width: 100%; font-family: inherit; }
.hf-stars { display: flex; gap: 4px; } .hf-stars button { background: none; border: 0; font-size: 28px; color: #d3d1c7; cursor: pointer; padding: 0 2px; } .hf-stars button.on { color: #e0a640; }
@media (max-width: 700px) { .hf-panel { right: 36px; top: 60px; } }

/* Billing and services (Tom 2026-10-19) */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.svc-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--white); }
.svc-card.on { border-left: 4px solid var(--green); }
.inv-grp { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 8px; }
.inv-grp summary { cursor: pointer; padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; }
.inv-grp .tw { padding: 0 12px 10px; }

/* Keep 5 px between the Help and Feedback tabs and the page (Tom 2026-10-19) */
body.hf-on .page-body { padding-right: 31px; }
.hf-tab { width: 28px; padding: 12px 6px; }
.hf-fu { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 8px; }
.hf-fu textarea { width: 100%; font-family: inherit; }

/* Home (Tom 2026-10-19 markups) */
.page-head { padding-right: 96px; }
.page-head .hd-bug { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; object-fit: contain; }
.sh .cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--green); color: var(--white); font-size: 11px; font-weight: 700; }
.task .bd b { overflow-wrap: anywhere; }
.task-act { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.strip .c-more { align-content: center; justify-items: center; font-weight: 700; color: var(--green-dark); }
@media (max-width: 820px) { .page-head { padding-right: 70px; } .page-head .hd-bug { right: 16px; width: 40px; height: 40px; } }

/* Status names used everywhere (Tom 2026-10-19) */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* Home service panels (Tom 2026-10-19) */
.svc-panel { border-left: 4px solid var(--green); }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sp-h { display: flex; align-items: center; gap: 8px; }
.sp-title { font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: none; }
.sp-title:hover { color: var(--green-dark); text-decoration: underline; }
.sp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sp-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.sp-t { overflow-wrap: anywhere; }
.sp-list .st { flex: none; }
.sp-foot { margin: 10px 0 0; }

/* Help and Feedback panels, branded and shorter (Tom 2026-10-19 mockup) */
.hf-panel { top: auto; bottom: 16px; max-height: min(560px, calc(100vh - 32px)); padding: 0; gap: 0; border-top: 0; overflow: hidden; }
.hf-head { background: var(--navy); color: var(--white); padding: 12px 14px; border-bottom: 3px solid var(--green); align-items: flex-start; }
.hf-head b { font-size: 15px; } .hf-sub { font-size: 12px; color: var(--ink-on-navy-muted); margin-top: 2px; }
.hf-close { background: var(--white); color: var(--navy); border: 0; border-radius: 4px; font: 700 12px/1 var(--font); padding: 7px 10px; cursor: pointer; flex: none; }
.hf-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.hf-log { flex: none; min-height: 0; max-height: 260px; }
.hf-q { background: var(--green-tint); color: var(--ink); border-radius: 10px 10px 2px 10px; }
.hf-a { background: var(--lgray); }
.hf-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hf-link { font-weight: 700; color: var(--green-dark); font-size: 13px; }
.hf-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-muted); }
/* bigger logo bug in the header */
.page-head { padding-right: 120px; }
.page-head .hd-bug { width: 72px; height: 72px; }
@media (max-width: 820px) { .page-head { padding-right: 76px; } .page-head .hd-bug { width: 48px; height: 48px; } }

/* Home service rows (Tom 2026-10-19) */
.svc-row .svc { text-decoration: none; display: block; }
.svc-row .sp-title { font-size: 15px; display: block; margin: 2px 0 4px; }
.svc-row .chip { display: inline-block; background: var(--lgray); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--ink-muted); }

/* Support requests (Tom 2026-10-19) */
.sup-detail { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 10px 12px; margin-top: -8px; background: var(--white); }

/* Sales landing copy 2026-10-20 */
.ln-hl { font-weight: 600; font-size: 1.05rem; margin: 6px 0 2px; color: var(--navy, #1b2a4a); }
.ln-ai { margin: 14px 2px 0; max-width: 820px; }

/* Support hours 2026-10-21 */
.sup-box { border: 1px solid var(--line, #e2e6ee); border-radius: 10px; padding: 12px; margin-top: 10px; background: #fff; }
.sup-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sup-bal { margin: 6px 0 10px; }
.sup-bal .big { font-size: 1.25rem; font-weight: 700; }

/* Work queue / System settings split 2026-10-21 */
#admin[data-mode="admin"] .card[data-grp="sys"] { display: none; }
#admin[data-mode="settings"] .card[data-grp="work"] { display: none; }
.sop-del { margin-left: 4px; }

/* Org chart draft 2026-10-22 */
.oc-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.oc-dept { border: 1px solid var(--rule, #dbe1e9); border-radius: 10px; padding: 12px; display: grid; gap: 6px; min-width: 0; }
.oc-dept .inp { max-width: none; }

/* AI Workspace onboarding pages 2026-10-22 */
.oc-dept { cursor: default; transition: border-color .15s, background .15s; }
.oc-dept.sel { border-color: var(--green, #4a8c3f); background: var(--green-soft, #e6f2e3); }
.wf-drop { display: grid; gap: 6px; border: 2px dashed var(--rule, #dbe1e9); border-radius: 10px; padding: 18px; cursor: pointer; }
.wf-drop:hover { border-color: var(--green, #4a8c3f); }
.wf-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 13px; }
.wf-steps span { color: var(--muted, #5b6878); }
.wf-steps .on { color: inherit; font-weight: 700; border-bottom: 2px solid var(--green, #4a8c3f); }
.wf-steps .done { color: var(--green, #4a8c3f); }
.wf-sys { border-left: 3px solid var(--rule, #dbe1e9); padding-left: 10px; margin: 6px 0; }
.wf-enh { border: 1px dashed var(--green, #4a8c3f); border-radius: 8px; padding: 10px 12px; margin-top: 6px; background: var(--surface, #fff); }
.wf-enh p { margin: 6px 0; }

/* AI Workspace onboarding steps (Tom 2026-10-22): progress bar in the header, step tiles stick to the top of the form. */
.wf-prog-host { margin-left: auto; flex: 0 1 260px; min-width: 180px; }
.wf-prog-t { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-small, 12px); color: var(--ink-muted); margin-bottom: 4px; }
.wf-prog-t b { color: var(--ink); }
.wf-bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.wf-bar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.wf-tiles { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px 0; margin: -6px 0 14px; background: var(--white); border-bottom: 1px solid var(--line); }
.wf-tile { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--white); cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.wf-tile:hover { border-color: var(--green); }
.wf-tile .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--rule); }
.wf-tile .t { font-size: var(--fs-body, 13px); font-weight: 600; line-height: 1.25; min-width: 0; }
.wf-tile small { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--fs-label, 11px); }
.wf-tile.done .n { background: var(--green); color: var(--white); }
.wf-tile.on { border-color: var(--green); background: var(--green-tint); }
.wf-tiles-m { display: none; }
.wf-tiles #wf-saved { grid-column: 1 / -1; text-align: right; font-size: var(--fs-label, 11px); }
.wf-tiles #wf-saved:empty { display: none; }
.wf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.wf-grid4 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.wf-q { padding: 18px 0; border-top: 1px solid var(--rule); }
.wf-ql { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.wf-qh { font-size: 12.5px; color: var(--ink-muted); margin: 4px 0 0; line-height: 1.5; max-width: 68ch; }
.wf-qa { margin-top: 10px; }
.wf-qa .inp + .inp, .wf-qa .row + .row { margin-top: 6px; }
.wf-qa .opts + .row, .wf-qa .opts + .inp { margin-top: 10px; }
.wf-q .opts { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.wf-q .opts .tgl { margin: 0 !important; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.wf-q .opts input { accent-color: var(--green); width: 15px; height: 15px; margin: 0; }
.wf-q .opts .tgl:has(input:checked) { font-weight: 700; }
.wf-q .req, .wf-grid .req, .wf-body .req { color: var(--warn); }
.wf-sum { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 12px 0; }
.wf-sum dt { font-weight: 600; } .wf-sum dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .wf-tile .t { display: none; } .wf-tile { justify-content: center; }
  .wf-tiles-m { display: block; grid-column: 1 / -1; font-size: var(--fs-body, 13px); font-weight: 600; }
  .wf-grid, .wf-grid4, .wf-sum { grid-template-columns: 1fr; }
  .wf-prog-host { flex-basis: 100%; margin-left: 0; }
}

/* Bookings embed dialog (Tom 2026-10-22) */
.lg-box.bk-box { max-width: 960px; height: min(820px, 90vh); max-height: 90vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.bk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bk-frame { flex: 1; width: 100%; border: 0; }

/* Step tiles: number over a one-word name, no wrapping (Tom 2026-10-22) */
.wf-tile { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 8px 4px; }
.wf-tile .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 12.5px; }

/* Checkout purchase terms and the agree tick (Tom 2026-10-22) */
.co-terms { margin-top: 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; }
.co-terms h3 { margin: 0 0 6px; font-size: 13px; }
.co-terms ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.co-agree { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.co-agree input { margin-top: 2px; accent-color: var(--green); width: 15px; height: 15px; flex: none; }

/* Home, Your services: small tiles (Tom 2026-10-22) */
.hm-tile.hm-mine { min-height: 0; text-decoration: none; color: inherit; }
.hm-mine .need { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.hm-mine .act { justify-content: flex-end; }

/* Onboarding: steps visited but not complete (Tom 2026-10-22) */
.wf-tile.part .n { background: var(--warn-tint); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.wf-miss { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--warn-line); background: var(--warn-tint); color: var(--warn); border-radius: 8px; font-size: 12.5px; line-height: 1.5; }

/* Payment dialog (Tom 2026-10-22) */
.lg-box.bk-box.pay-box { max-width: 620px; }

/* Feedback and help boxes stretch up and down only (walkthrough 2026-10-24) */
.hf-panel textarea, .hf-fu textarea, .hf-human textarea { resize: vertical; }

/* Sign out page (Tom 2026-10-24) */
.bye-card { max-width: 640px; }
.bye-card h2 { font-size: 22px; line-height: 1.3; }
.bye-card textarea { resize: vertical; margin-top: 10px; }
.bye-stars { margin: 6px 0 2px; }