/* Bluesmith design tokens and components, matching docs/designs/. */
:root {
  --slate: #1F2933;
  --slate-active: #323F4B;
  --slate-card: #2B3843;
  --ground: #F3F2EE;
  --card: #FFFFFF;
  --border: #DEDCD5;
  --rule: #ECEAE4;
  --field-border: #D5D3CC;
  --ink: #1B1F24;
  --ink-2: #3D4550;
  --ink-3: #5B6470;
  --blue: #3B8EFF;
  --blue-light: #7FB2FF;
  --blue-tint: #E3EDFF;
  --link: #1A4FA8;
  --amber: #F5A524;
  --amber-tint: #FFF3DC;
  --amber-ink: #9A5B00;
  --good: #23633A;
  --good-tint: #E3EFE6;
  --critical: #A12B1E;
  --critical-tint: #FBE9E6;
  --progress: #1D4F8A;
  --progress-tint: #E3ECF7;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--ground);
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #123A7D; }
h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 17px; font-weight: 600; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell ------------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; align-items: flex-start; }
/* The sidebar stays in view: its links scroll inside it and the footer stays at the bottom */
.nav {
  flex: 0 0 240px; width: 240px; position: sticky; top: 0; z-index: 40; height: 100vh; height: 100dvh;
  background: var(--slate); color: #E6E8EB;
  padding: 20px 12px 10px; display: flex; flex-direction: column; gap: 4px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-width: 0; }
.logo {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  background: var(--blue); color: var(--ink); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { display: flex; flex-direction: column; }
.brand-name b { font-weight: 600; font-size: 15px; }
.brand-name span { font-size: 12px; color: #A9B1BA; }
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; min-height: 44px; border-radius: 6px;
  color: #D3D8DE; text-decoration: none; font-size: 14px;
}
.nav a > span { display: flex; align-items: center; gap: 12px; }
.nav a:hover { background: #2A3641; color: #fff; }
.nav a[aria-current="page"] { background: var(--slate-active); color: #fff; font-weight: 500; }
.nav .soon { font-size: 11px; color: #8D97A3; }
/* Features outside the plan: dimmed, with the plan that has them; the page opens view only */
.nav a.nav-off { color: #8D97A3; }
.nav a.nav-off svg { opacity: .55; }
.nav .plan-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #A9B3BE; border: 1px solid #4A5563; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.view-only-note { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.view-only-note > div { flex: 1 1 320px; }
form.view-only-form { opacity: .6; }
a.view-only-link { opacity: .45; pointer-events: none; cursor: default; }
/* Menu groups: a heading that opens to show its pages */
.nav-top { display: flex; align-items: center; gap: 2px; padding-bottom: 16px; }
.nav-top .nav-toggle { margin-left: auto; }
.nav-toggle { display: none; }
.nav-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-scroll { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4A5563 transparent; margin: 0 -4px; padding: 0 4px; }
.nav-fly-title { display: none; }
.nav-group summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; min-height: 44px; border-radius: 6px; color: #D3D8DE; font-size: 14px;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary > span:first-child { display: flex; align-items: center; gap: 12px; }
.nav-group summary:hover { background: #2A3641; color: #fff; }
.nav-group summary.here { color: #fff; font-weight: 500; }
.nav-group summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.nav-group .chev { width: 8px; height: 8px; border-right: 2px solid #8D97A3; border-bottom: 2px solid #8D97A3; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.nav-group[open] .chev { transform: rotate(45deg); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 21px; padding-left: 12px; border-left: 1px solid #323F4B; }
.nav .nav-sub a { min-height: 40px; padding: 8px 12px; font-size: 13.5px; }
.nav-foot { flex: none; margin-top: 8px; padding: 12px 12px 2px; border-top: 1px solid #323F4B; font-size: 13px; color: #A9B1BA; display: flex; flex-direction: column; gap: 6px; }
.nav-foot form { margin: 0; }
.nav-foot button { background: none; border: 0; color: var(--blue-light); font: inherit; font-size: 13px; padding: 0; cursor: pointer; text-decoration: underline; min-height: 24px; }

.main {
  flex: 1 1 0; min-width: 0;
  padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 640px) { .main { padding: 16px; } }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--field-border); border-radius: 8px; padding: 0 14px; min-height: 44px;
}
.search input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 14px; background: transparent; color: var(--ink); min-height: 40px; }
.search:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.avatar {
  width: 44px; height: 44px; border-radius: 22px; flex: none;
  background: var(--slate-active); color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.role-tag { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); border: 1px dashed #A3A099; border-radius: 12px; padding: 4px 10px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .title { display: flex; flex-direction: column; gap: 4px; }
.crumbs { font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--field-border); background: #fff; color: var(--ink);
}
.btn:hover { background: #F7F6F2; color: var(--ink); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.btn-primary:hover { background: #2F80F0; color: var(--ink); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn:focus-visible, .nav a:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* Cards and layout ------------------------------------------------------------ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-main { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; }
.fact { display: flex; flex-direction: column; gap: 4px; }
.fact-label { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fact-value { font-size: 15px; font-weight: 500; }
.empty { color: var(--ink-3); font-size: 14px; padding: 8px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.stat:hover { color: var(--ink); border-color: #C9C6BD; }
.stat-label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.stat-value { font-family: var(--mono); font-size: 28px; font-weight: 600; }
.stat-note { font-size: 13px; color: var(--ink-2); }

/* Tables ---------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; position: relative; } /* relative: keeps screen-reader-only labels inside the scroll area */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding: 8px; }
table.data td { padding: 12px 8px; border-top: 1px solid var(--rule); vertical-align: top; }
table.data th:first-child, table.data td:first-child { padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data .num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
table.data th.num { font-family: inherit; font-size: 12px; }
table.data .sub { color: var(--ink-3); font-size: 13px; }
table.data a.row-link { color: var(--ink); font-weight: 500; }

/* Status badges: always an icon and a word ----------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.badge svg { flex: none; }
.badge.good { color: var(--good); }
.badge.progress { color: var(--progress); }
.badge.attention { color: var(--amber-ink); }
.badge.critical { color: var(--critical); }
.badge.neutral { color: var(--ink-2); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 12px; padding: 4px 12px; }
.pill.progress { background: var(--progress-tint); color: var(--progress); }
.pill.attention { background: var(--amber-tint); color: #6B3F00; }
.pill.good { background: var(--good-tint); color: var(--good); }
.pill.neutral { background: #ECEAE4; color: var(--ink-2); }

/* Tabs used as filters -------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; background: #E6E4DD; border-radius: 8px; padding: 3px; gap: 2px; width: fit-content; }
.tabs a { min-height: 38px; padding: 0 14px; border-radius: 6px; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.tabs a[aria-current="true"] { background: #fff; color: var(--ink); font-weight: 600; }
.tabs .count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* Forms ------------------------------------------------------------------------- */
form.stack { display: flex; flex-direction: column; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--ink-3); }
input[type="text"], input:not([type]), input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--field-border); border-radius: 8px; background: #fff;
  min-height: 44px; padding: 8px 12px; width: 100%;
}
textarea { min-height: 96px; resize: vertical; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-row label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.radio-row input { accent-color: var(--blue); width: 18px; height: 18px; }
.form-section-title { font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.alert.attention { background: var(--amber-tint); border: 1.5px solid var(--amber); color: #6B3F00; }
.alert.good { background: var(--good-tint); border: 1px solid #8DB79A; color: var(--good); }
.field-error { font-size: 13px; color: var(--critical); font-weight: 600; }

/* Lists in side panels ------------------------------------------------------------- */
.list-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.list-row:first-of-type { border-top: 0; }
.list-row .main-line { font-weight: 600; font-size: 14px; }
.list-row .sub-line { font-size: 13px; color: var(--ink-2); }
.tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--ink-2); background: #ECEAE4; border-radius: 10px; padding: 2px 8px; }

/* Sign-in ----------------------------------------------------------------------------- */
.signin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.signin .who { display: flex; flex-direction: column; gap: 8px; }
.signin .who button {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 56px; padding: 10px 14px; border: 1px solid var(--field-border); border-radius: 10px; background: #fff;
  font: inherit; cursor: pointer; color: var(--ink);
}
.signin .who button:hover { border-color: var(--blue); background: #F7FAFF; }
.signin .who .avatar { width: 36px; height: 36px; font-size: 13px; }
.signin .who .person { display: flex; flex-direction: column; }
.signin .who .person b { font-weight: 600; }
.signin .who .person span { font-size: 13px; color: var(--ink-3); }

/* Phone: the menu folds up behind a Menu button */
@media (max-width: 640px) {
  .shell { flex-direction: column; align-items: stretch; }
  .nav { flex: none; width: auto; position: static; height: auto; padding: 8px 12px; gap: 0; }
  .nav-scroll { overflow: visible; flex: none; }
  .nav-collapse { display: none !important; }
  .nav-top { padding-bottom: 0; }
  .main { flex: none; }
  .brand { padding: 0; }
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 6px;
    background: #323F4B; color: #fff; border: 0; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .nav-list { display: none; padding-top: 10px; }
  .nav.open .nav-list { display: flex; }
  .nav-foot { margin-top: 10px; }
}

/* Progress track (quotes, jobs) ------------------------------------------------ */
.track { list-style: none; margin: 0; padding: 14px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.track li { display: flex; align-items: center; gap: 6px; }
.track li.done { color: var(--good); font-weight: 500; }
.track li.current { color: var(--ink); font-weight: 700; }
.track li.todo { color: var(--ink-3); }
.track .dot { width: 10px; height: 10px; border-radius: 5px; border: 1.5px solid #A3A099; display: inline-block; }
.track li.current .dot { width: 12px; height: 12px; border: 0; background: var(--blue); }

/* Totals block ------------------------------------------------------------------- */
.totals { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 14px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; }
.totals .grand { font-size: 16px; font-weight: 600; }

/* Answer form -------------------------------------------------------------------- */
.answer-row { border: 0; border-top: 1px solid var(--rule); padding: 12px 0 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.answer-row legend { font-weight: 600; font-size: 14px; padding: 0; float: left; width: 100%; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.answer-row .radio-row { clear: both; }
.radio-row label svg { flex: none; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink); }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
details.more { border-top: 1px solid var(--rule); padding-top: 12px; }
details.more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--link); text-decoration: underline; min-height: 32px; display: flex; align-items: center; }
.answer-wrap > summary { list-style: none; cursor: pointer; }
.answer-wrap > summary::-webkit-details-marker { display: none; }
.answer-wrap:not([open]) > summary h2 { color: var(--link); text-decoration: underline; font-size: 15px; }

/* Job page ------------------------------------------------------------------------ */
.add-row { border-top: 1px solid var(--rule); padding-top: 14px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 24px; }
.checklist li { display: flex; flex-direction: column; gap: 0; }
.checklist form { margin: 0; }
.check-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.check-btn:disabled { cursor: default; }
.check-btn .box { width: 20px; height: 20px; flex: none; border: 1.5px solid #8F8C84; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fff; }
.check-btn.done .box { background: var(--good); border-color: var(--good); color: #fff; }
.check-btn.done .label { color: var(--ink-2); }
.checklist .who { font-size: 12px; color: var(--ink-3); padding-left: 30px; margin-top: -6px; }
a.link-row { text-decoration: none; color: var(--ink); }
a.link-row:hover .main-line { text-decoration: underline; }
.use-form { display: flex; gap: 6px; align-items: center; }
.use-form select { min-height: 36px; padding: 4px 8px; font-size: 13px; width: auto; max-width: 140px; }
.alert svg { flex: none; margin-top: 2px; }

/* Inventory ----------------------------------------------------------------------- */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.loc-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.loc-card:hover { border-color: #C9C6BD; color: var(--ink); }
.loc-card:hover .loc-name { text-decoration: underline; }
.loc-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); }
.loc-kind { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.loc-name { font-size: 16px; font-weight: 600; }
.loc-sub { font-size: 13px; color: var(--ink-2); }
.refill-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.refill-from select { width: auto; min-width: 200px; }

/* Receivables and payables */
.meter { height: 8px; border-radius: 4px; background: var(--rule, #DEDCD5); overflow: hidden; }
.meter > span { display: block; height: 100%; background: #3B8EFF; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.check-row input { width: 20px; height: 20px; }
table.data tr.sub-row td { border-top: 0; padding-top: 4px; padding-bottom: 4px; background: #FAF9F6; }
table.data tr.total-row td { border-top: 2px solid #1B1F24; }
.nav .nav-foot a.nav-foot-link { padding: 0; min-height: 24px; color: var(--blue-light); text-decoration: underline; font-size: 13px; background: none; }

/* Business logo and settings */
.brand.has-logo { flex-direction: column; align-items: flex-start; gap: 8px; }
.logo.has-image { background: #fff; width: auto; max-width: 100%; height: 52px; padding: 6px 8px; }
.logo.has-image img { max-height: 40px; max-width: 184px; object-fit: contain; display: block; }
@media (max-width: 640px) { .brand.has-logo { flex-direction: row; } .logo.has-image { height: 40px; } .logo.has-image img { max-height: 28px; max-width: 110px; } }
.logo-box { width: 200px; height: 96px; border: 1px dashed var(--rule, #DEDCD5); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--rule, #DEDCD5); border-radius: 6px; background: #fff; font-size: 14px; cursor: pointer; }
.swatch .chip { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.swatch input[type=color] { width: 44px; height: 32px; padding: 0; border: 0; background: none; }
.doc-preview { border: 1px solid var(--rule, #DEDCD5); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: #fff; overflow: hidden; }
.doc-preview .doc-head { flex-direction: column; gap: 12px; }
.doc-preview .doc-head > div:last-child { text-align: left !important; }
.doc-preview .doc-from { flex-direction: column; }
.doc-preview .doc-contact { overflow-wrap: anywhere; }

.doc-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
.doc-org { font-size: 24px; font-weight: 700; }
.doc-num { font-size: 20px; font-weight: 600; }

/* The business's own header and footer */
.doc-from { display: flex; gap: 16px; align-items: flex-start; }
.doc-logo { max-height: 72px; max-width: 200px; object-fit: contain; }
.doc-contact { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.doc-kind { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.doc-foot { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
@media (max-width: 640px) { .doc-head { flex-direction: column; } .doc-head > div:last-child { text-align: left !important; } .doc-from { flex-direction: column; } }
@media print { .doc-head, .doc-foot, .doc-kind { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Business performance dashboard */
.perf .card-head { align-items: flex-start; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gauge-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.gauge-card h3 { font-size: 14px; font-weight: 600; margin: 0; }
.gauge { width: 100%; max-width: 200px; }
.kpi-big { font-size: 26px; font-weight: 600; }
.kpi-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.kpi-status.good { color: var(--good); }
.kpi-status.attention { color: #9A5B00; }
.kpi-status svg { flex: none; }
.chart { width: 100%; height: auto; font-family: var(--sans, 'IBM Plex Sans', sans-serif); }
.chart .axis { font-size: 11px; fill: #5B6470; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw-bar { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-line { width: 20px; height: 2px; display: inline-block; }
.type-row { display: flex; flex-direction: column; gap: 6px; }
.up { color: var(--good); }
.down { color: var(--critical); }
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kpi-tile { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi-value { font-size: 24px; font-weight: 600; }
.week-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--rule, #EEECE6); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule, #EEECE6); }

/* Customize dashboard */
.widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-row { border-top: 1px solid var(--rule, #EEECE6); padding: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.widget-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.widget-pos { width: 28px; height: 28px; border-radius: 6px; background: #F3F2EE; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.widget-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.widget-buttons form { margin: 0; }
.chip-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-nav a { font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center; }
.lib-group h3 { font-size: 15px; margin: 8px 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lib-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.lib-item select { margin-left: 6px; }
.chip-label { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E3ECF7; color: #1D4F8A; white-space: nowrap; }
section.card > svg.chart { max-width: 900px; align-self: center; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* Maps */
.qt-map { position: relative; height: 520px; border-radius: 8px; overflow: hidden; background: #E6E4DD; border: 1px solid var(--border); touch-action: none; user-select: none; cursor: grab; }
.qt-map:active { cursor: grabbing; }
.qt-map.small { height: 380px; }
.qt-tiles, .qt-markers { position: absolute; inset: 0; }
.qt-tiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; }
.qt-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.qt-marker { position: absolute; left: 0; top: 0; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.qt-marker::before { content: ""; position: absolute; inset: -10px; }   /* a 44px touch target around a small mark */
.qt-marker svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.qt-marker:focus-visible { outline: 3px solid #1B1F24; outline-offset: 2px; border-radius: 50%; }
.qt-controls { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.qt-zoom { min-width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 20px; font-weight: 600; cursor: pointer; }
.qt-zoom.qt-fit { font-size: 13px; }
.qt-credit { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.85); font-size: 11px; padding: 2px 6px; }
.qt-popup { position: absolute; width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 10px 32px 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; z-index: 2; cursor: default; }
.qt-pop-kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.qt-pop-title { font-weight: 600; font-size: 14px; }
.qt-pop-sub { color: var(--ink-2); }
.qt-pop-close { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; align-items: center; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-layers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.map-layers label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
.map-layers input { width: 18px; height: 18px; }
.qt-popup[hidden] { display: none; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.heat-legend i { width: 90px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(249,115,22,.35), #EA580C, #B91C1C); }
.id-chip { font-size: 13px; color: var(--ink-2); background: #F3F2EE; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }

/* Customer file: DBA line, documents ------------------------------------------ */
.dba-line { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.doc-link { color: var(--link); text-decoration: underline; overflow-wrap: anywhere; }
.doc-row details.doc-remove { margin-top: 4px; }
.doc-remove summary, .doc-removed summary { cursor: pointer; font-size: 13px; color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
.doc-remove form { padding: 8px 0; }
.doc-remove input, .doc-add input[type="text"], .doc-add input:not([type]), .doc-add select, .doc-add input[type="date"] { width: 100%; }
.doc-add summary { list-style: none; display: inline-flex; }
.doc-add summary::-webkit-details-marker { display: none; }
.doc-add .field { display: flex; flex-direction: column; gap: 4px; }
.doc-add .field label { font-size: 13px; font-weight: 600; }
.doc-add .hint { font-size: 12px; color: var(--ink-3); }

/* Customer snapshot and history ----------------------------------------------- */
.snap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 20px; }
.snap-tile { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 3px solid #E6E4DD; }
.snap-num { font-size: 22px; font-weight: 600; color: var(--ink); }
.delta-good { color: var(--good); font-weight: 600; }
.delta-bad { color: var(--critical); font-weight: 600; }
.snap-years { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #EEECE6; padding-top: 14px; }
.year-bars { display: flex; align-items: flex-end; gap: 14px; min-height: 112px; overflow-x: auto; }
.year-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; }
.year-fill { width: 36px; border-radius: 4px 4px 0 0; display: block; }
.year-amt, .year-lbl { font-size: 12px; color: var(--ink-2); }
.tabs-small a { min-height: 44px; font-size: 13px; }
.inline-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-filter select { min-height: 44px; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-day { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 14px 0 6px; }
.tl-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #F0EEE8; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink-3); }
.tl-work .tl-dot { background: #2563A8; }
.tl-quotes .tl-dot { background: #B45309; }
.tl-money .tl-dot { background: #23633A; }
.tl-documents .tl-dot { background: #7048A8; }
.tl-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tl-head { font-weight: 600; font-size: 14px; }
.tl-amt { font-size: 14px; white-space: nowrap; }
.tl-in { color: var(--good); font-weight: 600; }
.inline-filter label { display: inline; margin: 0; }
.inline-filter select { width: auto; max-width: 240px; }

/* Sales tax ------------------------------------------------------------------- */
.tax-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn.toggle { gap: 8px; }
.toggle-box { width: 18px; height: 18px; border: 2px solid var(--ink-2); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.btn.toggle.on { background: #3B8EFF; border-color: #3B8EFF; color: #1B1F24; }
.btn.toggle.on .toggle-box { border-color: #1B1F24; background: #fff; }
.sub-h { font-size: 15px; margin: 8px 0 0; }
.inline-filter select#tax-area, .field select#tax_home { max-width: 100%; }
#sales-tax table input { min-height: 44px; padding: 0 8px; border: 1px solid #DEDCD5; border-radius: 6px; font: inherit; }

/* Schedule board -------------------------------------------------------------- */
.sch-head .title h1 { margin-right: 6px; }
.btn-icon { min-width: 44px; padding: 0; justify-content: center; font-size: 20px; }
.sch-date { font-weight: 600; font-size: 16px; min-width: 150px; text-align: center; }
.sch-card { padding: 0; overflow: hidden; }
.sch-day { min-width: 900px; }
.sch-row { display: flex; border-bottom: 1px solid #EEECE6; }
.sch-who { flex: none; width: 168px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #EEECE6; }
.sch-name { font-weight: 600; font-size: 14px; }
.sch-sub { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-sub svg { flex: none; width: 13px; height: 13px; }
.sch-track { position: relative; flex: 1; min-height: 72px; }
.sch-hours { background: #FAFAF7; }
.sch-hours .sch-who, .sch-hours .sch-track { min-height: 0; padding-top: 10px; padding-bottom: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.sch-hour { position: absolute; top: 10px; padding-left: 6px; font-family: var(--mono); text-transform: none; letter-spacing: 0; font-weight: 500; }
.sch-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #F0EEE8; }
.sch-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #A12B1E; z-index: 2; pointer-events: none; }
.sch-block { position: absolute; height: 52px; box-sizing: border-box; border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--ink); border: 1px solid #C9C6BD; background: #fff; overflow: hidden; z-index: 1; min-width: 36px; }
.sch-block:hover, .sch-block:focus-visible { box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 3; }
.sch-block[data-drag] { cursor: grab; }
.sch-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-done { background: #E7F1EA; border-color: #A9CDB4; }
.sch-done .sch-sub { color: var(--good); }
.sch-progress { background: #E3ECF7; border-color: #9DB8DB; }
.sch-progress .sch-sub { color: #1D4F8A; }
.sch-planned { background: #fff; border-color: #C9C6BD; }
.sch-attention { background: #FFF3DC; border-color: #F5A524; }
.sch-attention .sch-sub { color: #9A5B00; font-weight: 600; }
.sch-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; border-top: 1px solid #EEECE6; font-size: 13px; color: var(--ink-2); align-items: center; }
.sch-legend i { display: inline-block; width: 14px; height: 12px; border-radius: 3px; border: 1px solid #C9C6BD; margin-right: 6px; vertical-align: -1px; }
.sch-legend i.sch-now-key { width: 2px; border: 0; background: #A12B1E; }
.sch-week { border-collapse: collapse; width: 100%; min-width: 980px; table-layout: fixed; }
.sch-week th, .sch-week td { border-bottom: 1px solid #EEECE6; border-right: 1px solid #F0EEE8; vertical-align: top; text-align: left; }
.sch-week thead th { padding: 10px 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: #FAFAF7; }
.sch-week thead th:first-child { width: 150px; }
.sch-week thead th.today { color: #1D4F8A; }
.sch-week tbody th { padding: 10px 12px; font-weight: 400; display: table-cell; }
.sch-week tbody th .sch-name, .sch-week tbody th .sch-sub { display: block; }
.sch-cell { padding: 6px; height: 64px; }
.sch-cell.today { background: #F6F9FD; }
.sch-cell .sch-block { position: static; height: auto; margin-bottom: 6px; padding: 5px 8px; }
.sch-cell .sch-title { font-size: 12px; }
.sch-over { outline: 2px dashed #3B8EFF; outline-offset: -2px; background: #EEF4FF !important; }
.sch-ghost { position: fixed; z-index: 50; pointer-events: none; opacity: .9; height: auto !important; box-shadow: 0 6px 18px rgba(0,0,0,.25); background: #fff; border: 1px solid #3B8EFF; border-radius: 6px; padding: 6px 10px; }
.sch-tip { position: fixed; z-index: 51; pointer-events: none; background: #1F2933; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.sch-dragging { opacity: .4; }
.sch-is-dragging, .sch-is-dragging * { cursor: grabbing !important; user-select: none; }
.sch-wait { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-top: 1px solid #EEECE6; cursor: grab; }
.sch-wait-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sch-wait-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sch-cols .col-main { min-width: 0; }
.check-line { display: flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; }
@media (max-width: 1180px) { .sch-cols .col-side { flex: 1 1 100%; } }
.sch-cols .col-main { flex: 1 1 640px; }
.sch-cols .col-side { flex: 0 1 300px; }
.sch-wait .main-line { font-weight: 600; font-size: 14px; }
.sch-wait .sub-line { font-size: 13px; color: var(--ink-2); }
.sch-day { min-width: 620px; }
.sch-week { min-width: 700px; }

/* Schedule map view ------------------------------------------------------------ */
.qt-map.dispatch { height: 440px; }
.dispatch-map { padding-bottom: 12px; }
.qt-marker.qt-stop { width: 30px; height: 30px; margin: -3px 0 0 -3px; }
.qt-marker.qt-stop[hidden], .qt-marker[hidden] { display: none; }
.qt-pop-note { color: var(--ink); font-weight: 600; margin-top: 2px; }
.qt-pop-action { margin-top: 6px; align-self: flex-start; text-decoration: none; }
.crew-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crew-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border: 1px solid #DEDCD5; border-radius: 22px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.crew-chip:first-child { padding-left: 12px; }
.crew-chip.on { border-color: #3B8EFF; background: #EEF4FF; font-weight: 600; }
.crew-dot { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sch-row.sch-dim { opacity: .35; }

/* Tech phone view ---------------------------------------------------------------- */
.tech-body { background: #F3F2EE; margin: 0; }
.tech-app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #F3F2EE; padding-bottom: calc(76px + env(safe-area-inset-bottom)); position: relative; }
.tech-head { background: #1F2933; color: #fff; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tech-head.slim { gap: 4px; }
.tech-head h1 { margin: 0; font-size: 22px; font-weight: 600; color: #fff; }
.tech-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.tech-date { font-size: 13px; color: #C3CAD2; }
.tech-left { font-size: 14px; color: #E4E7EB; }
.tech-back { color: #7FB2FF; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
.tech-clock { background: #323F4B; border-radius: 10px; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 10px; }
.tech-clock-text { flex: 1; font-size: 15px; display: flex; flex-direction: column; }
.tech-clock-sub { font-size: 12px; color: #C3CAD2; }
.tech-dot { width: 10px; height: 10px; border-radius: 50%; background: #8A93A0; flex: none; }
.tech-dot.on { background: #4ADE80; }
.tech-dot.brk { background: #F5A524; }
.tech-pad { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.tech-card { background: #fff; border: 1px solid #DEDCD5; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none; }
.tech-card h2 { margin: 0; font-size: 19px; font-weight: 600; }
.tech-card h2 a { color: var(--ink); text-decoration: none; }
.tech-now.attn { border-color: #F5A524; box-shadow: 0 0 0 1px #F5A524 inset; }
.tech-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1D4F8A; display: flex; gap: 6px; align-items: center; }
.tech-kicker.attn { color: #9A5B00; }
.tech-kicker svg { width: 14px; height: 14px; }
.tech-addr { margin: 0; color: var(--ink-2); font-size: 15px; }
.tech-sub { font-size: 13px; color: var(--ink-3); display: block; }
.tech-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tech-act { min-height: 52px; border: 1px solid #C9C6BD; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; background: #fff; }
.tech-act.off { color: var(--ink-3); border-style: dashed; }
.tech-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tech-tile { background: #F3F2EE; border-radius: 10px; padding: 12px; min-height: 64px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.tech-tile b { font-size: 15px; font-weight: 600; }
.tech-tile span { font-size: 13px; color: var(--ink-2); }
.tech-btn { min-height: 52px; border-radius: 10px; border: 1px solid #C9C6BD; background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tech-btn.primary { background: #3B8EFF; border-color: #3B8EFF; color: #1B1F24; }
.tech-btn.ghost { background: transparent; border-color: #5B6470; color: #fff; min-height: 44px; font-size: 14px; }
.tech-btn.wide { width: 100%; }
.tech-steps { display: flex; gap: 8px; }
.tech-steps .tech-btn { flex: 1; }
.tech-next { flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 15px; }
.tech-next b { font-weight: 600; }
.tech-next.muted { color: var(--ink-2); font-size: 14px; }
.tech-next.muted svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--good); }
.tech-link { color: #1A4FA8; text-decoration: underline; }
.tech-full { text-align: center; color: #1A4FA8; font-size: 14px; padding: 8px; }
.tech-tabs { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #fff; border-top: 1px solid #DEDCD5;
  display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.tech-tabs a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--ink-2); text-decoration: none; }
.tech-tabs a svg { width: 22px; height: 22px; }
.tech-tabs a[aria-current="page"] { color: #1A4FA8; font-weight: 600; }
.tech-check { margin: 0; }
.tech-checkbox { width: 100%; min-height: 52px; display: flex; gap: 12px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid #EEECE6; padding: 8px 0; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.tech-checkbox .box { width: 26px; height: 26px; flex: none; border: 2px solid #5B6470; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tech-checkbox.on .box { background: #23633A; border-color: #23633A; color: #fff; }
.tech-checkbox em { color: #9A5B00; font-style: normal; font-size: 13px; }
.tech-list { list-style: none; margin: 0; padding: 0; }
.tech-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEECE6; font-size: 15px; }
.tech-form { display: flex; flex-direction: column; gap: 8px; }
.tech-form label, .tech-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tech-form input, .tech-form select, .tech-form textarea { min-height: 48px; font: inherit; font-size: 16px; border: 1px solid #C9C6BD; border-radius: 8px; padding: 8px 12px; background: #fff; box-sizing: border-box; width: 100%; }
.tech-form input[type="file"] { padding: 10px; }
.tech-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tech-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: #E6E4DD; }
.tech-note { border-left: 3px solid #DEDCD5; padding-left: 10px; }
.tech-note p { margin: 0 0 2px; font-size: 15px; white-space: pre-line; }
.tech-sig { width: 100%; height: 180px; border: 1px dashed #5B6470; border-radius: 8px; touch-action: none; background: #fff; }
.tech-sig-done img { width: 100%; max-height: 180px; object-fit: contain; border: 1px solid #EEECE6; border-radius: 8px; background: #fff; }
.tech-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #EEECE6; color: var(--ink); text-decoration: none; font-size: 15px; min-height: 44px; }
.tech-row.static { grid-template-columns: 1fr 1fr auto; font-size: 14px; }
.tech-row-head { display: flex; justify-content: space-between; align-items: center; }
.tech-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tech-totals b { font-size: 24px; display: block; }
.tech-clock-text { min-width: 0; }
.tech-clock-text > :first-child, .tech-clock-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-next .mono { white-space: nowrap; }
.tech-btn.small { min-height: 44px; font-size: 14px; padding: 0 10px; }
.tech-part-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.field-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.field-photos a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.field-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #E6E4DD; }
.field-sig { display: flex; flex-direction: column; gap: 6px; }
.field-sig img { max-width: 360px; width: 100%; border: 1px solid #EEECE6; border-radius: 8px; background: #fff; }

/* Business Records */
.records-cols { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.records-nav { flex: 0 0 250px; display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.records-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.records-nav a:hover { background: var(--ground); }
.records-nav a[aria-current="page"] { background: var(--blue-tint); color: var(--ink); font-weight: 600; }
.records-nav .count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.records-nav .count.attn { background: var(--amber); color: var(--ink); border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.records-nav-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 12px 10px 4px; }
.records-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.records-search { display: flex; gap: 8px; }
.records-search input { flex: 1; min-height: 44px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 12px; font: inherit; }
.folder-row { display: grid; grid-template-columns: 2fr 1fr 1.4fr 60px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.folder-row input, .folder-row select { min-height: 40px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 14px; min-width: 0; }
@media (max-width: 760px) { .records-nav { flex: 1 1 100%; } .folder-row { grid-template-columns: 1fr 1fr; } }

/* People */
.person-cell { display: flex; gap: 10px; align-items: center; }
.avatar-sm, .avatar-lg { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--slate); color: var(--blue-light); font-weight: 600; flex: none; }
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.person-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.flag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bal-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.bal-line:last-child { border-bottom: 0; }
.me-form { display: flex; flex-direction: column; gap: 6px; }
.me-form label:not(.check-line):not(.stars-pick label) { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
.me-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .me-form select, .me-form textarea { min-height: 44px; border: 1px solid var(--field-border); border-radius: 6px; padding: 8px 10px; font: inherit; width: 100%; background: #fff; }
.me-form .btn { margin-top: 10px; align-self: flex-start; }
.me-two, .me-three { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.me-three { grid-template-columns: 2fr 1fr 1fr; }
.me-two > span, .me-three > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (max-width: 560px) { .me-two, .me-three { grid-template-columns: 1fr; } }
.me-fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px 12px; margin: 8px 0 0; }
.me-fieldset legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.me-fieldset.rating { padding: 6px 10px; }
.stars-pick { display: flex; gap: 4px; flex-wrap: wrap; }
.stars-pick label { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 40px; padding: 0 8px; border: 1px solid var(--field-border); border-radius: 6px; font-size: 14px; cursor: pointer; }
.stars-pick label:has(input:checked) { background: var(--blue); border-color: var(--blue); color: var(--ink); font-weight: 600; }
.req-list { display: flex; flex-direction: column; }
.req-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.req-row:last-child { border-bottom: 0; }
.req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.req-side { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.decide { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.decide details summary { list-style: none; }
.decide details summary::-webkit-details-marker { display: none; }
.req-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-ok, .chip-missing { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border-radius: 14px; }
.chip-ok { background: var(--good-tint); color: var(--good); }
.chip-missing { background: var(--amber-tint); color: var(--amber-ink); font-weight: 600; }
.doc-group { margin-bottom: 10px; }
.doc-group-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 0 2px; }
.review, .perf-note { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px; }
.review p, .perf-note p { margin: 6px 0; }
.review-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stars { color: var(--progress); letter-spacing: 2px; }
.ratings { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.perf-note.k-praise { border-left: 4px solid var(--good); }
.perf-note.k-coaching { border-left: 4px solid var(--progress); }
.perf-note.k-warning, .perf-note.k-write_up { border-left: 4px solid var(--amber); }
.set-row { display: grid; gap: 6px; align-items: center; padding: 6px 8px; }
.set-row input, .set-row select { min-height: 40px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 14px; min-width: 0; width: 100%; }
.set-9 { grid-template-columns: 1.6fr .8fr 1.4fr .8fr .8fr .9fr .7fr .6fr auto; }
.set-7 { grid-template-columns: 2fr 1.6fr .7fr .9fr 1.2fr .7fr auto; }
.set-crit { grid-template-columns: 1.2fr 2fr 1fr auto; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.off-cal { border-collapse: collapse; font-size: 12px; width: 100%; }
.off-cal th, .off-cal td { border: 1px solid var(--rule); text-align: center; padding: 0; height: 34px; min-width: 26px; }
.off-cal thead th { font-family: var(--mono); font-weight: 500; color: var(--ink-3); }
.off-cal thead th span { display: block; font-size: 10px; }
.off-cal tbody th { text-align: left; padding: 0 10px; white-space: nowrap; font-weight: 500; font-size: 13px; position: sticky; left: 0; background: #fff; }
.off-cal .wkend { background: #F7F6F2; }
.off-cal .today { box-shadow: inset 0 0 0 2px var(--blue); }
.off-cal td.off-approved { background: #8A867D; color: #fff; font-weight: 600; }
.off-cal td.off-pending { background: var(--amber-tint); color: var(--amber-ink); font-weight: 600; outline: 1px dashed var(--amber); outline-offset: -3px; }
.off-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.off-key.approved { background: #8A867D; }
.off-key.pending { background: var(--amber-tint); border: 1px dashed var(--amber); }
.person-cell .sub { display: block; }
.set-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; text-align: left; padding-top: 4px; padding-bottom: 4px; }
.col-side .me-three, .tech-app .me-three { grid-template-columns: 1fr 1fr; }
.col-side .me-three > span:first-child, .tech-app .me-three > span:first-child { grid-column: 1 / -1; }
.tech-head .tech-sub { color: #C9D1DA; }
.me-big { font-size: 20px; font-weight: 600; }
.req-main .sub-line { font-size: 13px; color: var(--ink-2); }
.tech-card details summary { min-height: 44px; display: flex; align-items: center; color: var(--link); text-decoration: underline; cursor: pointer; }
.tech-card .table-wrap { overflow-x: auto; }
.me-bal .tech-tile { background: #fff; border: 1px solid #DEDCD5; }
.sch-off { position: absolute; inset: 4px 0; background: repeating-linear-gradient(135deg, #E9E7E1 0 8px, #F3F2EE 8px 16px); border: 1px solid #C9C6BE; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 600; color: #4A4F57; pointer-events: none; }
.sch-off-cell { display: block; background: repeating-linear-gradient(135deg, #E9E7E1 0 8px, #F3F2EE 8px 16px); border: 1px solid #C9C6BE; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 600; color: #4A4F57; margin-bottom: 4px; }
.sch-legend .sch-off-key { background: repeating-linear-gradient(135deg, #D6D3CB 0 4px, #F3F2EE 4px 8px); border: 1px solid #C9C6BE; }
/* Time off on a date */
.on-date-form { display: flex; flex-direction: column; gap: 6px; }
.on-date-form label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.on-date-row { display: flex; gap: 8px; }
.on-date-row input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 10px; font: inherit; background: #fff; }
.on-date-result { margin-top: 8px; display: flex; flex-direction: column; }
.on-date-result .neg { color: var(--critical); }
.proj { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--good); margin-top: 4px; }
.proj svg { flex: none; margin-top: 2px; }
.proj.short { color: var(--amber-ink); background: var(--amber-tint); padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.to-proj { margin: 6px 0 0; font-size: 13px; min-height: 0; }
.to-proj.ok { color: var(--good); }
.to-proj.short { color: var(--amber-ink); background: var(--amber-tint); padding: 6px 8px; border-radius: 6px; font-weight: 600; }
.to-proj.short::before { content: "⚠ "; }
.tiers-in { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.tiers-in span { white-space: nowrap; font-weight: 600; }
.tiers-in input { flex: 1; }
.bal-line b { white-space: nowrap; }
/* Books */
.books-tabs { flex-wrap: wrap; }
.period-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.period-step { display: inline-flex; align-items: center; gap: 8px; }
.period-step b { min-width: 140px; text-align: center; }
.neg { color: var(--critical); }
.pl-table td.pl-acct { padding-left: 22px; }
.pl-table tr.pl-head th { background: var(--ground); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-top: 14px; }
.pl-table tr.pl-total th, .pl-table tr.pl-total td { font-weight: 600; border-top: 1px solid var(--border); }
.pl-table tr.pl-total.strong th, .pl-table tr.pl-total.strong td { font-size: 16px; border-top: 2px solid var(--ink); }
table.data tr.pl-total th { text-align: left; }
.attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.attn-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.attn-list li svg { color: var(--amber-ink); flex: none; margin-top: 3px; }
.attn-count { background: var(--amber); color: var(--ink); border-radius: 10px; padding: 0 7px; font-weight: 600; }
.acct-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.acct-row:last-child { border-bottom: 0; }
.acct-name { font-weight: 600; }
.acct-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-side b { font-size: 17px; }
.muted-row td { color: var(--ink-3); }
.link-like { color: var(--link); text-decoration: underline; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
details > summary.link-like { list-style: none; }
details > summary.link-like::-webkit-details-marker { display: none; }
.acct-edit summary { list-style: none; } .acct-edit summary::-webkit-details-marker { display: none; }
.acct-edit[open] { min-width: 260px; }
.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.facts-list dt { color: var(--ink-3); font-weight: 600; }
.facts-list dd { margin: 0; }
.receipt { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.receipt img { max-width: 100%; max-height: 520px; border: 1px solid var(--border); border-radius: 8px; object-fit: contain; background: #fff; }
.je { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.je-lines td { font-size: 13px; padding: 4px 6px; }
.je-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.je-grid > span { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
.je-grid select, .je-grid input { min-height: 40px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 13px; min-width: 0; width: 100%; background: #fff; }
.recon td:first-child { width: 90px; text-align: center; }
.recon input[type=checkbox] { width: 22px; height: 22px; }
.alert.neutral-note { background: var(--progress-tint); color: var(--progress); border: 1px solid #C9D9EE; }
@media print {
  .shell > .nav, .topbar, .books-tabs, .period-bar nav, .period-step a, .page-head .actions { display: none !important; }
  .shell { display: block !important; }
  .card { border: 0; box-shadow: none; }
}
table.data span.sub { display: block; }
.period-bar .inline-filter { flex-wrap: nowrap; }
.period-bar .inline-filter input { width: auto; }
.card-head .inline-filter input { min-height: 40px; width: 200px; }
.inline-filter input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: auto; flex: 1 1 160px; min-width: 0; }
.acct-row .sub-line, .req-main .sub-line { display: block; }
.records-search input[type="search"], .card-head input[type="search"] { font: inherit; font-size: 15px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; min-height: 44px; padding: 8px 12px; }
.card-head .inline-filter { flex-wrap: nowrap; }
/* Bank transactions */
.sub-tabs { margin-top: -4px; }
.sub-tabs a { font-size: 13px; min-height: 34px; }
.btx { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.btx-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.btx-head .sub-line { display: block; font-size: 13px; color: var(--ink-3); }
.btx-amt { font-size: 17px; white-space: nowrap; }
.btx-amt.in, td.num.in { color: var(--good); }
.btx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btx-row select, .btx-row input:not([type=checkbox]) { flex: 1 1 200px; min-width: 0; width: auto; min-height: 40px; font-size: 14px; }
.btx-row .check-line { min-height: 40px; flex: 0 1 auto; }
.btx-receipt { background: var(--good-tint); border-radius: 8px; padding: 8px 10px; }
.btx-receipt > span { flex: 1 1 100%; font-size: 14px; color: var(--good); display: flex; gap: 6px; align-items: center; }
.btx-more { display: flex; flex-wrap: wrap; gap: 16px; }
.btx-more details[open] { flex: 1 1 100%; }
.rule-row { display: grid; grid-template-columns: 1.4fr .9fr 1.3fr 1.2fr 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; }
.rule-row input, .rule-row select { min-height: 40px; font-size: 14px; min-width: 0; width: 100%; }
.rule-save { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.steps { padding-left: 18px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .rule-row { grid-template-columns: 1fr 1fr; } }
/* Reminders and customer answers */
.sch-flag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.sch-flag.ok { color: var(--good); }
.sch-flag.attn { color: var(--amber-ink); }
.sch-flag svg { width: 12px; height: 12px; }
.ans-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.ans-row:last-child { border-bottom: 0; }
.ans-row svg { color: var(--amber-ink); vertical-align: -2px; }
.ans-actions { display: flex; gap: 10px; align-items: center; }
.msg-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.msg-row:last-child { border-bottom: 0; }
.msg-main { flex: 1 1 420px; min-width: 0; }
.msg-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.msg-body { margin: 6px 0 0; background: var(--ground); border-radius: 10px; padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere; }
.msg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.rem-form { display: flex; flex-direction: column; gap: 8px; }
.rem-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rem-name { max-width: 280px; font-weight: 600; }
.rem-preview { background: var(--ground); border-radius: 8px; padding: 8px 12px; margin: 0; overflow-wrap: anywhere; }
.late-pick { width: 100%; }
.late-pick summary { list-style: none; } .late-pick summary::-webkit-details-marker { display: none; }
.late-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.late-btns .tech-btn { flex: 1 1 60px; }
.cust-body { background: var(--ground); margin: 0; font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--ink); }
.cust-page { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
.cust-card { display: flex; flex-direction: column; gap: 14px; }
.cust-card h1 { font-size: 22px; margin: 0; }
.cust-logo { max-height: 56px; max-width: 200px; object-fit: contain; align-self: flex-start; }
.cust-btn { width: 100%; min-height: 52px; font-size: 16px; }
.cust-more form { margin-top: 10px; }
.rem-form > .btn { align-self: flex-start; }
.rem-form .inline-filter input[type="time"] { width: auto; flex: 0 0 140px; }
.late-pick { margin-top: 8px; }
.late-pick summary.tech-btn { width: 100%; justify-content: center; }
.tech-card .late-pick summary.tech-btn.ghost, .tech-pad .late-pick summary.tech-btn.ghost { color: var(--ink); border-color: #C9C6BD; background: #fff; }
.gap-fits { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; } .gap-fits > span { flex: 1 1 100%; }
.hold-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hold-banner svg { vertical-align: -2px; }
.bill-hours { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.bill-hours > .small:first-child { color: var(--amber-ink); font-weight: 600; }
.time-list { margin-top: 8px; }
.time-list > div { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.getting-started ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.getting-started li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.getting-started li.done { color: var(--ink-3, #5B6470); }
.getting-started li.done span { color: #23633A; font-weight: 700; }
/* Sales and Leads board */
.lead-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.lead-col { background: #EAE8E2; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.lead-col h2 { font-size: 14px; margin: 0; display: flex; justify-content: space-between; align-items: center; }
.lead-col h2 .count { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-2, #3D4550); }
.lead-card { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--border, #DEDCD5); border-radius: 8px; padding: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.lead-card:hover { border-color: #3B8EFF; }
.lead-card.attn { border-left: 4px solid #F5A524; }
.lead-card .attn-text, .attn-text { color: #9A5B00; font-weight: 600; }
@media (max-width: 900px) { .lead-board { grid-template-columns: repeat(5, 240px); } }
/* Public request form */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cust-body.embed { background: transparent; }
.cust-body.embed .cust-page { padding: 0; }
/* Reports */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 24px; }
.report-list li { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.report-list li a { font-weight: 600; font-size: 16px; min-height: 28px; display: inline-flex; align-items: center; }
.report-table th a.sort-link { color: inherit; text-decoration: none; display: inline-block; padding: 6px 0; }
.report-table th a.sort-link:hover, .report-table th a.sort-link:focus-visible { text-decoration: underline; }
.print-only { display: none; }
@media print { .print-only { display: block; } .card-head form { display: none !important; } }
.report-table td.num, .report-table th.num { white-space: nowrap; }
.report-table td:first-child { min-width: 150px; }
.report-for { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.report-for-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.card-head-actions { display: inline-flex; gap: 14px; align-items: center; }
/* Service plans */
.plan-form { display: flex; flex-direction: column; gap: 20px; }
.plan-form [data-when] { margin-top: 12px; }
.stat-value.plan-stat { font-family: inherit; font-size: 20px; }
details.inline-more { border-top: 0; padding-top: 0; }
details.inline-more summary { min-height: 44px; }
details.inline-more form { margin-top: 6px; flex-wrap: nowrap; }
.plan-status-forms { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.plan-from { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.meter-form { margin-top: 6px; flex-wrap: nowrap; }
.meter-form input { width: 110px !important; flex: 0 0 110px !important; min-height: 40px; }
.bill-problems { margin: 6px 0 0; padding-left: 20px; }
.plan-form [data-when][hidden] { display: none !important; }
/* Customer approval pages */
.approve-page { max-width: 760px; }
.approve-card { display: flex; flex-direction: column; gap: 18px; }
.approve-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.approve-from { display: flex; gap: 14px; align-items: flex-start; }
.approve-kind { text-align: right; }
.approve-for { font-size: 15px; line-height: 1.5; }
.approve-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.approve-line { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.approve-line-main { display: flex; flex-direction: column; gap: 2px; }
.approve-desc { font-weight: 500; }
.approve-amt { text-align: right; }
.approve-choice { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.approve-choice label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: 8px; background: #fff; font-weight: 500; cursor: pointer; }
.approve-choice input { width: 18px; height: 18px; accent-color: var(--blue); }
.approve-said { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.approve-said.approved { color: var(--good); }
.approve-said.declined { color: var(--ink-3); }
.approve-totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 15px; }
.approve-totals dd { margin: 0; text-align: right; }
.approve-form { display: flex; flex-direction: column; gap: 14px; }
.approve-form input:not([type=radio]):not([type=checkbox]) { min-height: 44px; font: inherit; border: 1px solid var(--field-border); border-radius: 8px; padding: 0 12px; }
.approve-co-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.link-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-box input { flex: 1 1 260px; min-height: 40px; font-family: var(--mono); font-size: 13px; border: 1px solid var(--field-border); border-radius: 6px; padding: 0 10px; background: #fff; }
/* Close the Month */
ul.month-end { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.month-end li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
ul.month-end li:first-child { border-top: 0; }
.me-main { display: flex; flex-direction: column; gap: 2px; }
.me-link { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.month-step { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
@media (max-width: 640px) { ul.month-end li { grid-template-columns: 1fr; gap: 6px; } }

/* Windows (public/peek.js, pages/peek.tsx, pages/detail.tsx): float over the page, move by
   the top bar, resize from the corner, stay open across pages until X; the page behind scrolls. */
.qtwin {
  position: fixed; z-index: 900; display: flex; flex-direction: column; min-width: 300px; min-height: 160px;
  max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); resize: both; overflow: hidden;
  background: var(--ground); color: var(--ink); border: 1px solid #B9B6AD; border-radius: 10px;
  box-shadow: 0 14px 40px rgba(27, 31, 36, .28), 0 2px 6px rgba(27, 31, 36, .12);
}
.qtwin.front { box-shadow: 0 18px 48px rgba(27, 31, 36, .34), 0 2px 6px rgba(27, 31, 36, .14); border-color: var(--blue); }
.qtwin.min { resize: none; height: auto !important; min-height: 0; width: 300px !important; }
.qtwin.min .peek-content { display: none; }
.peek-bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; background: var(--slate); color: #fff; flex: none; cursor: move; user-select: none; touch-action: none; }
.peek-label { font-size: 13px; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-label small { color: var(--blue-light); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin-right: 6px; }
.peek-bar .peek-back { background: #323F4B; color: #fff; border-color: #323F4B; cursor: pointer; }
.peek-tool { width: 40px; height: 40px; border: 0; border-radius: 6px; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.peek-tool:hover, .peek-tool:focus-visible { background: #323F4B; }
.peek-close { font-size: 28px; }
.peek-content { overflow-y: auto; flex: 1; padding: 16px 16px 28px; overscroll-behavior: contain; }
html.qtwin-dragging, html.qtwin-dragging * { cursor: move !important; user-select: none !important; }
@media (max-width: 640px) {
  .qtwin:not(.min) { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; height: 72vh !important; max-width: 100%; border-radius: 12px 12px 0 0; resize: none; }
  .qtwin.min { left: 8px !important; right: auto !important; top: auto !important; }
  .peek-bar { cursor: default; }
}
@media print { .qtwin, .qt-tip { display: none !important; } }
.peek-loading { color: var(--ink-3); }
.peek-body { display: flex; flex-direction: column; gap: 16px; }
.peek-head { display: flex; flex-direction: column; gap: 4px; }
.peek-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.peek-head h2 { font-size: 21px; outline: none; }
.peek-sub { font-size: 14px; color: var(--ink-2); }
.peek-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.peek-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.peek-facts { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 4px 14px; }
.peek-fact { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid #EEECE6; }
.peek-fact:last-child { border-bottom: 0; }
.peek-fact > span { color: var(--ink-3); flex: none; }
.peek-fact > b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.peek-attn { color: #9A5B00; display: inline-flex; align-items: center; gap: 4px; }
.peek-section { display: flex; flex-direction: column; gap: 8px; }
.peek-section h3 { margin: 0; font-size: 14px; font-weight: 600; }
.peek-notes { margin: 0; font-size: 14px; color: var(--ink-2); white-space: pre-line; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.peek-list, .peek-lines { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.peek-list li { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-bottom: 1px solid #EEECE6; font-size: 14px; }
.peek-list li b { font-weight: 500; }
.peek-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #EEECE6; font-size: 14px; }
.peek-list li:last-child, .peek-lines li:last-child { border-bottom: 0; }
.peek-total { font-weight: 600; background: #FAF9F6; }
.peek-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peek-progress { height: 8px; border-radius: 4px; background: #E6E3DA; overflow: hidden; }
.peek-progress span { display: block; height: 100%; background: var(--blue); }
.peek-bar .peek-back[hidden] { display: none; }

/* Bins and shelves, labels and stock counts (pages/counts.tsx) ------------------ */
.choice-cards { border: 0; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.choice-cards legend { font-weight: 600; margin-bottom: 8px; }
.choice-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: #fff; }
.choice-card:has(input:checked) { border-color: var(--blue); background: #F4F8FF; }
.choice-card input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.choice-card > span { display: flex; flex-direction: column; gap: 4px; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; margin-left: 26px; background: #FCFBF8; }
.pick-list .check { min-height: 36px; }
.spot-table td { vertical-align: middle; }
.row-attn td { background: #FFF3DC; }
.row-done td { background: #F4FAF5; }
.row-muted td { color: var(--ink-3); }
.row-found td { outline: 2px solid var(--blue); outline-offset: -2px; }
.sub.attn, .attn-text { color: #9A5B00; display: flex; align-items: center; gap: 4px; }
.good-text { color: var(--good); display: inline-flex; align-items: center; gap: 4px; }
.count-find { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.count-find label { font-weight: 500; font-size: 14px; }
.count-find input { min-height: 48px; font-size: 17px; }
.count-find input[aria-invalid="true"] { border-color: #A12B1E; }
.count-cell { display: flex; gap: 8px; align-items: center; }
.count-input { width: 110px; min-height: 48px; font-size: 18px; font-family: var(--mono); text-align: right; }
.sticky-actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0; border-top: 1px solid var(--border); z-index: 2; }
.found-extra summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.bin-label { background: #fff; border: 1px dashed #B9B5AB; border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; break-inside: avoid; }
.bin-code { font-size: 26px; font-weight: 600; letter-spacing: .02em; color: #1B1F24; }
.bin-path { font-size: 12px; color: var(--ink-3); }
.bin-label .barcode { width: 100%; height: 46px; fill: #000; }
.bin-items { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-print table { width: 100%; }
.count-print td { height: 30px; }
@media print {
  .no-print { display: none !important; }
  .label-sheet { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .bin-label { border: 1px dashed #999; border-radius: 0; }
}
@media (max-width: 640px) { .pick-list { margin-left: 0; } .count-input { width: 90px; } }
.count-sheet td.mono { white-space: nowrap; }
@media (max-width: 640px) {
  .count-sheet th, .count-sheet td { padding-left: 6px; padding-right: 6px; }
  .count-sheet td.mono { font-size: 12px; }
  .count-sheet .count-input { width: 72px; font-size: 17px; }
  .count-sheet .count-cell { flex-wrap: wrap; justify-content: flex-end; }
  .sticky-actions { position: static; }
}
/* Type to find a part (public/pickfind.js) */
.pick-find { display: block; width: 100%; margin-bottom: 6px; min-height: 40px; }
.pick-find[aria-invalid="true"] { border-color: #A12B1E; }
/* Plan and Features (pages/plan_settings.tsx) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; }
.plan-card.here { border: 2px solid var(--blue); }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.plan-list li.no { color: var(--ink-3); }
.plan-list li span[aria-hidden] { display: inline-block; width: 18px; font-weight: 600; }
.plan-list li.yes span[aria-hidden] { color: var(--good); }
.feature-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.feature-row { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #EEECE6; }
.feature-row > span { display: flex; flex-direction: column; gap: 2px; }
.feature-row input { margin-top: 3px; }
/* Bring In a List (pages/imports.tsx) */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.import-table td, .import-table th { white-space: nowrap; }
.import-table td .sub { white-space: normal; max-width: 260px; }
.import-table td:nth-child(2) { min-width: 240px; white-space: normal; }
.plain-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
/* Sign in with Google / Microsoft */
.btn.sso-btn { width: 100%; justify-content: center; gap: 10px; background: #fff; min-height: 48px; }
.btn.sso-btn + .btn.sso-btn { margin-top: 10px; }
.sso-logo { flex: none; }
.or-line { display: flex; align-items: center; gap: 10px; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid #DEDCD5; }

/* Collapse to icons (Chad: "the ability to collapse the side menu and just view icons") ---------------- */
.nav-collapse { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -6px; border: 0; border-radius: 6px;
  background: none; color: #C9D0D7; cursor: pointer; }
.nav-collapse:hover { background: #2A3641; color: #fff; }
.nav-collapse:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.nav-burger { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-burger i { display: block; height: 2px; border-radius: 1px; background: currentColor; }
@media (min-width: 641px) {
  html.nav-icons .nav { flex-basis: 72px; width: 72px; padding: 16px 10px 10px; }
  html.nav-icons .brand { justify-content: center; padding: 0; }
  html.nav-icons .brand-name { display: none; }
  html.nav-icons .logo.has-image { height: 40px; padding: 4px; }
  html.nav-icons .logo.has-image img { max-width: 44px; max-height: 32px; }
  html.nav-icons .nav-scroll > a .nav-label, html.nav-icons .nav-group > summary .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.nav-icons .nav-scroll > a, html.nav-icons .nav-group > summary { justify-content: center; padding: 10px; }
  html.nav-icons .nav-scroll > a .soon, html.nav-icons .nav-scroll > a .plan-tag, html.nav-icons .nav-group .chev { display: none; }
  html.nav-icons .nav-group[open] > summary { background: var(--slate-active); color: #fff; }
  html.nav-icons .nav-group > .nav-sub { display: none; }
  html.nav-icons .nav-group[open] > .nav-sub::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
  html.nav-icons .nav-group[open] > .nav-sub { display: flex; position: fixed; left: 78px; top: var(--fly-top, 80px); z-index: 60; margin: 0; padding: 8px;
    min-width: 230px; background: var(--slate); border: 1px solid #3A4754; border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
  html.nav-icons .nav-fly-title { display: block; padding: 4px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #A9B1BA; }
  html.nav-icons .nav-foot { padding: 10px 0 2px; align-items: center; }
  html.nav-icons .nav-foot > .nav-foot-text, html.nav-icons .nav-foot > a { display: none; }
  html.nav-icons .nav-top { flex-direction: column; gap: 6px; }
  html.nav-icons .nav-collapse { margin-left: 0; }
}
/* No choice saved: icons between phone and laptop width */
@media (min-width: 641px) and (max-width: 1099px) {
  html[data-nav="auto"] .nav { flex-basis: 72px; width: 72px; padding: 16px 10px 10px; }
  html[data-nav="auto"] .brand { justify-content: center; padding: 0; }
  html[data-nav="auto"] .brand-name { display: none; }
  html[data-nav="auto"] .logo.has-image { height: 40px; padding: 4px; }
  html[data-nav="auto"] .logo.has-image img { max-width: 44px; max-height: 32px; }
  html[data-nav="auto"] .nav-scroll > a .nav-label, html[data-nav="auto"] .nav-group > summary .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-nav="auto"] .nav-scroll > a, html[data-nav="auto"] .nav-group > summary { justify-content: center; padding: 10px; }
  html[data-nav="auto"] .nav-scroll > a .soon, html[data-nav="auto"] .nav-scroll > a .plan-tag, html[data-nav="auto"] .nav-group .chev { display: none; }
  html[data-nav="auto"] .nav-group[open] > summary { background: var(--slate-active); color: #fff; }
  html[data-nav="auto"] .nav-group > .nav-sub { display: none; }
  html[data-nav="auto"] .nav-group[open] > .nav-sub::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
  html[data-nav="auto"] .nav-group[open] > .nav-sub { display: flex; position: fixed; left: 78px; top: var(--fly-top, 80px); z-index: 60; margin: 0; padding: 8px;
    min-width: 230px; background: var(--slate); border: 1px solid #3A4754; border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
  html[data-nav="auto"] .nav-fly-title { display: block; padding: 4px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #A9B1BA; }
  html[data-nav="auto"] .nav-foot { padding: 10px 0 2px; align-items: center; }
  html[data-nav="auto"] .nav-foot > .nav-foot-text, html[data-nav="auto"] .nav-foot > a { display: none; }
  html[data-nav="auto"] .nav-top { flex-direction: column; gap: 6px; }
  html[data-nav="auto"] .nav-collapse { margin-left: 0; }
}

/* The person's menu (top right): picture or initials, opens to their links -------------------------------- */
.user-menu { position: relative; flex: none; }
.user-menu > summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.user-menu > summary:hover .avatar { box-shadow: 0 0 0 3px #C9DDFB; }
.user-menu[open] > summary .avatar { box-shadow: 0 0 0 3px var(--blue); }
.avatar.has-photo, .avatar-lg.has-photo { overflow: hidden; padding: 0; background: #DEDCD5; }
.avatar.has-photo img, .avatar-lg.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 290px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(27, 31, 36, .18); padding: 8px;
  display: flex; flex-direction: column; }
.user-head { display: flex; gap: 12px; align-items: center; padding: 8px 10px 12px; }
.user-head b { font-weight: 600; font-size: 15px; }
.user-head .small { overflow-wrap: anywhere; }
.user-panel hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; width: 100%; }
.user-panel form { margin: 0; }
.user-panel a, .user-panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; text-align: left; cursor: pointer; }
.user-panel a:hover, .user-panel button:hover { background: var(--ground); }
@media print { .user-menu { display: none !important; } }

/* Your Picture */
.photo-edit { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.photo-preview { width: 128px; height: 128px; border-radius: 50%; flex: none; overflow: hidden; background: var(--slate-active); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 600; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Files on a time-off request */
.req-files { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: 13px; }
.req-files ul { margin: 0; }
.req-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.req-files details > summary { cursor: pointer; color: var(--link); text-decoration: underline; display: inline-block; min-height: 32px; line-height: 32px; }
.req-files details form { margin-top: 4px; }
.req-file-remove > summary { font-size: 12px; }

/* Standard kinds of time off to tick (Start a New Business, People Settings) */
fieldset.leave-pick { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.leave-pick legend { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.leave-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.leave-choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; min-height: 44px; cursor: pointer; font-size: 14px; }
.leave-choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.leave-choice .hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.leave-add { margin: 12px 0 8px; }
.leave-add > summary { list-style: none; display: inline-flex; }
.leave-add > summary::-webkit-details-marker { display: none; }
fieldset.leave-pick > .hint, .leave-add .hint { font-size: 12px; color: var(--ink-3); }

/* Titles and permissions */
.perm-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
fieldset.perm-area { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px 14px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
fieldset.perm-area legend { font-size: 15px; font-weight: 600; padding: 0 6px; color: var(--ink); }
.perm-quick { display: flex; gap: 6px; justify-content: flex-end; margin: -4px 0 4px; }
.perm-quick .btn-small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.perm-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 6px; min-height: 44px; cursor: pointer; font-size: 14px; }
.perm-row:hover { background: var(--ground); }
.perm-row input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.perm-row .hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.perm-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--ink-3); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; vertical-align: 1px; }
.perm-row.changed { background: #FFF3DC; }
.perm-tag.changed-tag { color: #9A5B00; border-color: #F5A524; }
.sticky-actions { position: sticky; bottom: 0; background: var(--ground); padding: 12px 0; z-index: 5; }
form.perm-off-form { opacity: .6; }
.btn.sso-btn ~ .or-line { margin-top: 12px; }

/* Put Bluesmith on Your Home Screen (phone Me tab) */
.install-card [hidden] { display: none !important; }
.install-card > div { display: grid; gap: 10px; }
.install-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* How It's Going (Program Admin): small 12-month bars, share bars, legend swatches */
.mini-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 120px; align-items: end; }
.mini-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.mini-bar-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.mini-bar { width: 40%; min-height: 1px; border-radius: 2px 2px 0 0; }
.mini-bar.now, .key-swatch.now { background: #2563A8; }
.mini-bar.cmp, .key-swatch.cmp { background: #8A867D; }
.mini-bar-label { font-size: 11px; color: var(--ink-3); }
.key-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.share-bar { display: inline-block; width: 60px; height: 8px; background: #EEECE6; border-radius: 4px; vertical-align: middle; overflow: hidden; }
.share-bar > span { display: block; height: 100%; background: #2563A8; }

/* Number pop-ups (public/tips.js) and the detail behind a number (pages/detail.tsx) ------ */
.qt-tip { position: fixed; z-index: 1000; max-width: 300px; min-width: 190px; background: #1F2933; color: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(27, 31, 36, .3); font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.qt-tip[hidden] { display: none; }
.qt-tip-title { font-weight: 600; font-size: 14px; }
.qt-tip dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; }
.qt-tip dt { color: #C8CDD3; }
.qt-tip dd { margin: 0; text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.qt-tip dd.up { color: #8FD6A4; } .qt-tip dd.down { color: #F2A99E; }
.qt-tip p { margin: 0; color: #C8CDD3; font-size: 12px; }
.qt-tip .qt-tip-all { align-self: flex-start; min-height: 36px; }
[data-tip] { cursor: help; }
[data-tip]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tip-target:focus { outline: none; }
.tip-target:hover rect:not([fill="transparent"]), .tip-target:focus rect:not([fill="transparent"]) { opacity: .82; }
.detail { display: flex; flex-direction: column; gap: 18px; }
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.detail-fact { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.detail-fact span { font-size: 12px; color: var(--ink-3); }
.detail-fact b { font-size: 18px; font-weight: 600; }
.detail-fact.big b { font-size: 24px; color: var(--this, #2563A8); }
.detail-fact em { font-style: normal; font-size: 13px; }
.detail-section { display: flex; flex-direction: column; gap: 8px; }
.detail-section h3 { margin: 0; font-size: 15px; }
.detail .chart { width: 100%; height: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.detail td .sub { font-size: 12px; color: var(--ink-3); }
.show-all { font-size: 13px; }
.qtwin .peek-head .peek-kind { display: none; }