/* FASTSIGNS Workshop — Apple-inspired UI. Light + dark, desktop sidebar + mobile tab bar. */

:root {
  /* v1.0 brand: deep blue header band, navy numbers, light-blue labels, orange dividers, square corners. */
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f6f9fd;
  --glass: rgba(255, 255, 255, 0.92);
  --text: #14284b;
  --text-2: #3b4d6b;
  --text-3: #55667f;
  --line: rgba(20, 70, 160, 0.16);
  --line-strong: rgba(20, 70, 160, 0.30);
  --fill: rgba(30, 90, 190, 0.10);
  --fill-2: rgba(30, 90, 190, 0.06);
  --accent: #1259c3;
  --accent-hover: #0d47a1;
  --accent-soft: rgba(18, 89, 195, 0.11);
  --brand: #e3262e;
  --navy: #14284b;
  --sky: #2196f3;
  --sky-text: #1a7fd4;
  --band: #0d47a1;
  --band-2: #1565d8;
  --band-text: #ffffff;
  --band-sky: #8fd0ff;
  --card-line: #1e5bb8;
  --rule: #f26522;
  --green: #1f8a3b;  --green-soft: rgba(31, 138, 59, 0.13);
  --orange: #c4490a; --orange-soft: rgba(242, 101, 34, 0.15);
  --red: #d1121b;    --red-soft: rgba(209, 18, 27, 0.10);
  --purple: #6a3fb5; --purple-soft: rgba(106, 63, 181, 0.12);
  --shadow: none;
  --shadow-lg: 0 10px 34px rgba(13, 40, 90, 0.22);
  --radius: 4px;
  --radius-sm: 3px;
  --radius-pill: 3px;
  --sidebar-w: 288px;
  --font: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --btn: #1259c3;
  --font-cond: "Roboto Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

/* Light is the default. Dark mode is opt-in: <html data-theme="dark"> is set from the
   choice on the Account page (or from the device setting when "Match device" is picked). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #07111f;
    --surface: #0e1c33;
    --surface-2: #12233f;
    --glass: rgba(14, 28, 51, 0.94);
    --text: #eef3fb;
    --text-2: #c3cfe2;
    --text-3: #a5b4cc;
    --line: rgba(110, 170, 255, 0.18);
    --line-strong: rgba(110, 170, 255, 0.32);
    --fill: rgba(110, 170, 255, 0.14);
    --fill-2: rgba(110, 170, 255, 0.08);
    --accent: #4aa3ff;
    --accent-hover: #74b8ff;
    --accent-soft: rgba(74, 163, 255, 0.18);
    --navy: #eef3fb;
    --btn: #1565d8;
    --sky: #6cbcff;
    --sky-text: #7cc4ff;
    --band: #0a3a85;
    --band-2: #0f55b8;
    --card-line: #3b7fe0;
    --rule: #f26522;
    --green: #4cd27a;  --green-soft: rgba(76, 210, 122, 0.16);
    --orange: #ff9a5c; --orange-soft: rgba(255, 154, 92, 0.16);
    --red: #ff5a5f;    --red-soft: rgba(255, 90, 95, 0.16);
    --purple: #b58cff; --purple-soft: rgba(181, 140, 255, 0.16);
    --shadow: none;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17.5px/1.47 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 22.5px; font-weight: 600; }
h3 { font-size: 18.5px; font-weight: 600; }
p { margin: 0 0 12px; }
.muted { color: var(--text-2); }
.small { font-size: 16px; }
.ic { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--line);
  padding: 18px 12px 12px; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 17px; letter-spacing: 0.02em; }
.brand-text span { font-size: 16px; color: var(--text-2); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-section { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 16px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; font-size: 17.5px;
}
.nav-item .ic { color: var(--accent); width: 22px; height: 22px; }
.nav-item:hover { background: var(--fill-2); text-decoration: none; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.active .ic { color: #fff; }

.sidebar-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.sidebar-foot form { margin: 0; }
.app-version { font-size: 14px; color: var(--text-3); text-align: center; padding-top: 8px; font-variant-numeric: tabular-nums; }
.bare .app-version { margin-top: 24px; }
.me { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); color: var(--text); min-width: 0; }
.me:hover, .me.active { background: var(--fill-2); text-decoration: none; }
.me-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.me-text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-text span { font-size: 15px; color: var(--text-2); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #8e8e93, #636366); color: #fff; font-size: 14px; font-weight: 600;
}

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 14px 32px; min-height: 64px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.topbar-title { font-size: 25.5px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 28px 32px 64px; } /* full width: use the whole screen */
.menu-btn { margin-left: -8px; }
.scrim { display: none; }
.tabbar { display: none; }

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 17px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: 500 17px var(--font); letter-spacing: -0.01em;
  white-space: nowrap; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn .ic { width: 18px; height: 18px; }
.btn-secondary { background: var(--fill); color: var(--text); }
.btn-secondary:hover { background: var(--line-strong); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-lg { height: 46px; padding: 0 24px; font-size: 17.5px; }
.btn-block { width: 100%; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 15px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text-2);
}
.icon-btn:hover { background: var(--fill); color: var(--text); }
.ic-sun { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.field > label, .field-label { font-size: 16px; font-weight: 500; color: var(--text-2); }
.field .hint { font-size: 15px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 17.5px var(--font); /* 16px stops iOS zoom-on-focus */
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 88px; resize: vertical; }
.select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-group { display: flex; align-items: stretch; }
.input-group .addon {
  display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--fill-2); font-weight: 700; font-size: 17.5px;
}
.input-group .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 12px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.span-2 { grid-column: span 2; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 20px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.form-actions .spacer { flex: 1; }

/* ------------------------------------------------------------- cards */
.card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); padding: 24px;
}
.card + .card { margin-top: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head p { margin: 2px 0 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .card-head { padding: 20px 24px 0; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 28px 0 10px; }

.hero { margin-bottom: 24px; }
.hero h2 { font-size: 31px; font-weight: 700; letter-spacing: -0.03em; }
.hero p { color: var(--text-2); font-size: 19.5px; margin: 4px 0 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); color: var(--text); display: block; }
a.stat:hover { text-decoration: none; border-color: var(--line-strong); }
.stat .stat-label { font-size: 16px; color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat .stat-value { font-size: 29px; font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: 15px; color: var(--text-3); }
.stat.tone-red .stat-value { color: var(--red); }
.stat.tone-orange .stat-value { color: var(--orange); }
.stat.tone-green .stat-value { color: var(--green); }

.actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.action-tile {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text);
  transition: transform .15s, box-shadow .15s;
}
.action-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.action-tile .tile-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; }
.action-tile .tile-icon .ic { width: 24px; height: 24px; }
.action-tile strong { display: block; font-size: 17px; }
.action-tile span.muted { font-size: 15px; }
.action-tile.primary { background: var(--accent); color: #fff; border-color: transparent; }
.action-tile.primary .muted { color: rgba(255,255,255,.8); }
.action-tile.primary .tile-icon { background: rgba(255,255,255,.2); color: #fff; }
.tone-blue   { background: var(--accent-soft); color: var(--accent); }
.tone-green  { background: var(--green-soft); color: var(--green); }
.tone-orange { background: var(--orange-soft); color: var(--orange); }
.tone-purple { background: var(--purple-soft); color: var(--purple); }

/* ------------------------------------------------------------- tables & lists */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; font-size: 17px; }
.table th {
  text-align: left; font-size: 14px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--fill-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table .strong { font-weight: 600; }
.table tr.clickable { cursor: pointer; }
.card.flush .table th:first-child, .card.flush .table td:first-child { padding-left: 24px; }
.card.flush .table th:last-child, .card.flush .table td:last-child { padding-right: 24px; }

.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; white-space: nowrap; }
.pill-gray   { background: var(--fill); color: var(--text-2); }
.pill-blue   { background: var(--accent-soft); color: var(--accent); }
.pill-green  { background: var(--green-soft); color: var(--green); }
.pill-orange { background: var(--orange-soft); color: var(--orange); }
.pill-red    { background: var(--red-soft); color: var(--red); }
.pill-purple { background: var(--purple-soft); color: var(--purple); }
.code-badge { font-weight: 800; font-variant-numeric: tabular-nums; }

.segmented { display: inline-flex; background: var(--fill); padding: 2px; border-radius: var(--radius-sm); gap: 2px; flex-wrap: wrap; }
.segmented a { padding: 7px 15px; border-radius: var(--radius-sm); color: var(--text); font-size: 16px; font-weight: 500; }
.segmented a:hover { text-decoration: none; background: var(--fill-2); }
.segmented .seg-btn { padding: 6px 14px; border-radius: var(--radius-sm); color: var(--text); font: 500 15px var(--font); background: none; border: 0; cursor: pointer; }
.segmented .seg-btn.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segmented a.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .input, .toolbar .select { width: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 17px; }
.toolbar .grow { flex: 1; min-width: 180px; }
.search { position: relative; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); }
.search .input { padding-left: 34px; width: 100%; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .title { font-weight: 600; }

.bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 12px; align-items: center; padding: 7px 0; font-size: 16px; }
.bar-track { height: 10px; background: var(--fill-2); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-sm); }

.empty { text-align: center; padding: 48px 24px; color: var(--text-2); }
.empty h2 { color: var(--text); margin-bottom: 6px; }
.empty .ic { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 8px; }

.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 500; }
.flash-success { background: var(--green-soft); color: var(--green); }
.flash-error { background: var(--red-soft); color: var(--red); }
.flash-info { background: var(--accent-soft); color: var(--accent); }
.notice { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--text); font-size: 16px; margin-bottom: 16px; }
.notice.notice-info { background: var(--fill-2); }

/* ------------------------------------------------------------- auth / installer */
.bare { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card.wide { max-width: 640px; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .brand-mark { width: 56px; height: 56px; border-radius: var(--radius); font-size: 21.5px; margin: 0 auto 14px; }
.auth-logo h1 { font-size: 27px; font-weight: 700; }
.auth-logo p { color: var(--text-2); margin: 4px 0 0; }
.checklist { list-style: none; padding: 0; margin: 0 0 16px; }
.checklist li { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 16px; }
.checklist .ok { color: var(--green); }
.checklist .bad { color: var(--red); }
.code-box { font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--fill-2); padding: 12px; border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all; }

/* ------------------------------------------------------------- label editor */
.label-editor { display: flex; flex-direction: column; gap: 24px; } /* preview on top: the label is short and wide */
.preview-pane { order: -1; }
.lbl-ph { color: #b8b8b8 !important; }
.preview-stage {
  background: repeating-conic-gradient(var(--fill-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
  border-radius: var(--radius); padding: 24px; display: flex; justify-content: center; border: 1px solid var(--line); overflow: hidden;
}
.preview-scaler { transform-origin: top left; }
.preview-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.preview-pager[hidden] { display: none; }
.preview-pager .icon-btn { background: var(--fill); color: var(--text); }
.preview-pager .icon-btn:disabled { opacity: .35; cursor: default; }
.ic.flip { transform: scaleX(-1); }
.preview-stage:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.preview-meta { font-size: 14px; color: var(--text-3); text-align: center; margin-top: 10px; }
.rep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); padding: 8px 14px; font: 500 16px var(--font); cursor: pointer; }
.rep-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.center-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.center-card { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 10px 12px; text-align: left; cursor: pointer; font-family: var(--font); }
.center-card strong { display: block; font-size: 21.5px; font-weight: 800; letter-spacing: -0.02em; }
.center-card span { font-size: 14px; color: var(--text-2); }
.center-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* The label itself is sized in real inches so it prints true to size. Pure black for thermal printers.
   Default is horizontal 5" x 2" (label_width_in / label_height_in in config.php).
   Three columns: center | order details | review QR. */
.label {
  --lw: 5in; --lh: 2in;
  width: var(--lw); height: var(--lh); background: #fff; color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0;
  padding: 0.1in 0.12in; display: flex; gap: 7pt; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); line-height: 1.15;
}
.lbl-k { font-size: 5.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6pt; }

/* Left: center */
.lbl-center { width: 1.22in; flex: none; display: flex; flex-direction: column; align-items: flex-start; padding-right: 7pt; border-right: 1.25pt solid #000; min-width: 0; }
.lbl-wordmark { font-weight: 900; font-size: 10.5pt; letter-spacing: -0.3pt; line-height: 1; }
.lbl-wordmark sup { font-size: 4.5pt; font-weight: 400; }
.lbl-code {
  font-weight: 900; font-size: 22pt; line-height: 0.95; border: 2pt solid #000; border-radius: 4pt;
  padding: 1pt 5pt; margin: 3pt 0; text-align: center; font-variant-numeric: tabular-nums;
  white-space: nowrap; /* the box always fits its number, e.g. 2450 */
}
.lbl-fulfill {
  align-self: stretch; margin-bottom: 3pt; padding: 2pt 3pt; background: #000; color: #fff; border-radius: 3pt;
  font-size: 13pt; font-weight: 900; text-transform: uppercase; text-align: center; letter-spacing: 0.3pt; line-height: 1.05;
  white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lbl-center-name { font-size: 6.5pt; font-weight: 700; overflow-wrap: anywhere; }
.lbl-addr { font-size: 5.8pt; margin-top: auto; line-height: 1.25; overflow-wrap: anywhere; }

/* Middle: order details */
.lbl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2pt; }
.lbl-order-no { font-size: 19pt; font-weight: 900; letter-spacing: -0.3pt; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbl-customer { font-size: 8pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-customer strong { font-weight: 800; }
.lbl-part { font-size: 8pt; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lbl-partno { font-weight: 900; font-size: 9pt; margin-right: 2pt; }
.lbl-notes { font-size: 6.5pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6pt; font-size: 6.5pt; border-top: 0.75pt solid #000; padding-top: 2pt; }
.lbl-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lbl-meta strong { font-weight: 800; }
.lbl-date { flex: none; }

/* Right: part count + review QR */
.lbl-side { width: 0.92in; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.lbl-pkg { font-size: 6.5pt; font-weight: 800; text-transform: uppercase; border: 1.25pt solid #000; border-radius: 3pt; padding: 0 4pt; white-space: nowrap; }
.lbl-pkg b { font-size: 10pt; font-weight: 900; }
.lbl-qr { width: 0.92in; height: 0.92in; flex: none; margin-top: auto; }
.lbl-qr svg { width: 100%; height: 100%; display: block; }
.lbl-cta { font-size: 6.5pt; font-weight: 800; line-height: 1.1; margin-top: 2pt; }
[data-wrap].is-empty { display: none; }

/* Parts list in the label form */
.parts-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.part-row { display: flex; align-items: center; gap: 8px; }
.part-row .input { flex: 1; min-width: 0; }
.part-row .input.part-ref { flex: 0 0 76px; text-align: center; }
.part-no { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fill); font-size: 15px; font-weight: 700; }
.part-row.previewing .part-no { background: var(--accent); color: #fff; }

#print-area { display: none; }

@media print {
  @page { margin: 0; }
  html, body { background: #fff !important; margin: 0; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  #print-area .label { box-shadow: none; page-break-after: always; break-after: page; }
  #print-area .label:last-child { page-break-after: auto; break-after: auto; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); background: var(--surface); padding-top: calc(18px + env(safe-area-inset-top)); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 35; }
  .main { margin-left: 0; }
  .menu-btn { display: grid; margin-left: -8px; }
  .topbar { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); min-height: 56px; }
  .topbar-title { font-size: 19.5px; text-align: left; }
  .topbar .btn { height: 32px; padding: 0 12px; font-size: 15px; }
  .content { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .card { padding: 18px; border-radius: var(--radius); }
  .card.flush .card-head { padding: 16px 18px 0; }
  .hero h2 { font-size: 27px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 14px 16px; }
  .stat .stat-value { font-size: 23.5px; }
  .actions-grid { grid-template-columns: 1fr; gap: 10px; }
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .form-actions .btn { flex: 1; }
  .table .hide-sm { display: none; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
    color: var(--text-3); font: 500 12px var(--font); background: none; border: 0; cursor: pointer;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar .ic { width: 24px; height: 24px; }
  .tabbar a.active { color: var(--accent); }
  .tabbar .tab-primary { justify-content: center; }
  .tab-plus { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,113,227,.4); margin-top: -14px; }
  .preview-stage { padding: 14px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--accent); }
.center-card { position: relative; }

/* Pick up / Install / Delivery / Ship choice on the label form */
.choice-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choice-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 16px; text-align: center; }
.choice-card .ic { color: var(--accent); }
.choice-card.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.choice-card.active .ic { color: #fff; }
.choice-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-soft); }
@media (max-width: 480px) { .choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Type-ahead suggestions (customer directory) */
.suggest-field { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% - 10px); z-index: 20; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px;
}
.suggest[hidden] { display: none; }
.suggest-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: 17.5px var(--font); cursor: pointer; }
.suggest-item small { color: var(--text-2); font-size: 14px; }
.suggest-item:hover, .suggest-item.active { background: var(--accent-soft); }
.suggest-item mark { background: none; color: inherit; font-weight: 700; }
.suggest-wrap { position: relative; display: block; flex: 1; min-width: 0; }
.suggest-wrap > .suggest { top: calc(100% + 4px); }

/* Quick-fill chips (most used values) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.chips[hidden] { display: none; }
.chips-label { font-size: 14px; color: var(--text-3); font-weight: 600; margin-right: 2px; }
.chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); padding: 4px 11px; font: 500 15px var(--font); cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* "You have an unsaved draft" bar */
.draft-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 18px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 16px; font-weight: 500; }
.draft-banner span { flex: 1; min-width: 180px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--red); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.nav-item.active .nav-badge { background: #fff; color: var(--accent); }
.demo-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 18px; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--text); font-size: 17px; }
.demo-banner .ic { color: var(--orange); }

.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.plain-fieldset[disabled] .input, .plain-fieldset[disabled] .select, .plain-fieldset[disabled] .textarea { background: var(--fill-2); color: var(--text-2); cursor: not-allowed; }

/* Pop-up dialogs (e.g. Mark paid) */
.modal { border: 0; padding: 0; background: transparent; max-width: min(620px, calc(100vw - 32px)); width: 100%; color: var(--text); }
.modal::backdrop { background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; border: 1px solid var(--line); }
.modal-card h2 { margin-bottom: 4px; }

.modal-sm { max-width: min(420px, calc(100vw - 32px)); }
.confirm-text { font-size: 17.5px; margin: 0 0 8px; }
.form-error { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red); font-weight: 500; margin-bottom: 14px; }
.form-error[hidden] { display: none; }

/* Toast messages (bottom center; above the phone tab bar) */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; padding: 12px 18px; border-radius: var(--radius); font-weight: 600; font-size: 17px; box-shadow: var(--shadow-lg); background: var(--text); color: var(--bg); animation: toast-in .2s ease; transition: opacity .3s, transform .3s; }
.toast-error { background: var(--red); color: #fff; }
.toast.hide { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.fade-out { opacity: 0; transition: opacity .25s; }
@media (max-width: 860px) { .toasts { bottom: calc(90px + env(safe-area-inset-bottom)); } }

/* Desktop: collapsible sidebar (menu button in the top bar) */
@media (min-width: 861px) {
  .sidebar, .main { transition: transform .22s ease, margin-left .22s ease; }
  .sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .sidebar-collapsed .main { margin-left: 0; }
}

/* Footer: all centers */
.site-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; padding: 18px 32px 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.site-footer strong { font-weight: 600; color: var(--text); }
.site-footer a { color: var(--text-2); }
@media (max-width: 860px) { .site-footer { padding: 16px 16px calc(100px + env(safe-area-inset-bottom)); flex-direction: column; align-items: center; text-align: center; } .content { padding-bottom: 24px; } }

.activity-details { margin-top: 4px; font-size: 15px; color: var(--text-2); }
.activity-details summary { cursor: pointer; color: var(--accent); width: max-content; }
.activity-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; }
.activity-details dt { font-weight: 600; text-transform: capitalize; }
.activity-details dd { margin: 0; overflow-wrap: anywhere; }
/* Activity log: rows open the entry; the entry page shows before → after for each changed record. */
.act-row { cursor: pointer; }
.act-row:hover td { background: var(--accent-soft, rgba(20, 70, 160, 0.05)); }
.act-count { display: inline-block; margin-left: 8px; font-size: 15px; color: var(--text-3); white-space: nowrap; }
.act-head { display: flex; align-items: flex-start; gap: 12px; }
.act-head-main { flex: 1; min-width: 0; }
.act-head h2 { margin: 0 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.act-head p { margin: 0; }
.act-head .btn { white-space: nowrap; }
.act-h { margin: 18px 0 8px; font-size: 18px; }
.act-record { margin-bottom: 12px; }
.act-record-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.act-open { margin-left: auto; white-space: nowrap; }
.act-diff th[scope="row"] { font-weight: 600; color: var(--text-2); width: 26%; text-transform: none; letter-spacing: 0; font-size: 16px; background: none; }
.act-diff td { vertical-align: top; overflow-wrap: anywhere; }
.act-diff thead th:nth-child(2), .act-diff thead th:nth-child(3) { width: 37%; }
.act-old { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgba(209, 18, 27, 0.45); background: var(--red-soft); }
.act-old .muted { display: inline-block; text-decoration: none; }
.act-new { font-weight: 600; background: var(--green-soft, rgba(20, 150, 80, 0.10)); }
.act-raw { margin: 0; overflow-wrap: anywhere; font-size: 15px; color: var(--text-2); }
.ic-flip { transform: scaleX(-1); }
@media (max-width: 640px) {
  .act-diff th[scope="row"] { width: auto; }
  .act-diff th, .act-diff td { padding: 10px; }
}

/* Center switcher pop-up */
.switch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.switch-option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 17px var(--font); cursor: pointer; text-align: left; }
.switch-option strong { font-size: 19.5px; }
.switch-option span { font-size: 15px; color: var(--text-2); }
.switch-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Call list */
.fu-list { display: flex; flex-direction: column; gap: 12px; }
.fu-card { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; }
.card + .fu-card, .fu-card + .fu-card { margin-top: 0; }
.fu-main { flex: 1; min-width: 260px; }
.fu-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.radio-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.radio-row small { margin-left: auto; }
.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* Quote checker */
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.quote-grid > div { background: var(--fill-2); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.quote-grid span { font-size: 15px; color: var(--text-2); font-weight: 500; }
.quote-grid strong { font-size: 21.5px; letter-spacing: -0.02em; }
.quote-grid small { font-size: 14px; color: var(--text-3); }
.quote-grid .warn { background: var(--red-soft); }
.quote-grid .warn strong { color: var(--red); }
.quote-grid .good { background: var(--green-soft); }
.quote-grid .good strong { color: var(--green); }

.rate { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rate .bar-track { width: 70px; }
.card-head h2 .ic { color: var(--orange); vertical-align: -3px; }

/* Sidebar footer: name on top, then [center switcher] ... [theme] [sign out] */
.sidebar-foot { flex-wrap: wrap; row-gap: 4px; }
.sidebar-foot .me { flex: 1 1 100%; }
.foot-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 136px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font: 500 15px var(--font); cursor: pointer; }
.foot-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-chip .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }
.foot-chip .chev-down { transform: rotate(90deg); color: var(--text-3); width: 14px; height: 14px; }
.foot-chip:hover { border-color: var(--accent); }
.foot-spacer { flex: 1; }

.sidebar-foot .icon-btn { width: 32px; height: 32px; }
.sidebar-foot .foot-chip { max-width: 140px; padding: 0 9px; }
.rate .bar-track { width: 120px; }

/* Install the app */
.install-card { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); margin-bottom: 20px; }
.install-card h2 { margin: 0; }
.steps { padding-left: 20px; margin: 10px 0; line-height: 1.7; }
[data-install-app][hidden] { display: none !important; }

/* Settings: label layout choice */
.layout-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.layout-option { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.layout-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.layout-option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-soft); }

/* ===== Epson 4" x 1.5" order tag (Settings → Label layout) =====
   Columns: [vertical FASTSIGNS] | [center · QR codes · sales consultant] || [invoice # / product # / sign maker] [fulfillment band]
   Sizes are in inches/points so it prints true to size. */
.label.lbl-epson {
  position: relative; padding: 0.085in 0.09in; gap: 0; display: flex; align-items: stretch;
  font-family: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif; line-height: 1.05;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Black border with a white margin all round, like the sample */
.lbl-epson::after { content: ""; position: absolute; inset: 0.045in; border: 1.2pt solid #000; border-radius: 2pt; pointer-events: none; z-index: 2; }
.lbl-epson > :not(.ep-quotes) { position: relative; z-index: 1; }
/* Faded FASTSIGNS quote marks behind everything */
.ep-quotes { position: absolute; inset: 0.05in; width: calc(100% - 0.1in); height: calc(100% - 0.1in); fill: #000; opacity: 0.07; z-index: 0; }

.ep-brand { width: 0.29in; flex: none; display: flex; align-items: stretch; justify-content: center; padding: 1pt 2.5pt 1pt 0; border-right: 3pt solid #000; }
.ep-logo { width: 100%; height: 100%; display: block; }
.ep-logo text { font-family: Barlow, "Arial Black", Arial, sans-serif; font-weight: 900; font-style: italic; font-size: 64px; fill: #000; letter-spacing: -1px; }
.ep-logo .ep-logo-r { font-family: Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 13px; letter-spacing: 0; }

.ep-info { width: 1.42in; flex: none; display: flex; flex-direction: column; padding: 0 4pt; border-right: 4pt solid #000; min-width: 0; }
.ep-center { padding-bottom: 1.5pt; border-bottom: 0.75pt solid #000; }
.ep-center-name { font-weight: 700; font-size: 8.5pt; white-space: nowrap; overflow: hidden; }
.ep-addr { font-size: 6.8pt; white-space: nowrap; overflow: hidden; }
.ep-qrs { flex: 1; display: flex; align-items: center; gap: 1.5pt; padding: 2.5pt 0; border-bottom: 0.75pt solid #000; min-height: 0; }
.ep-qr { width: 0.47in; height: 0.47in; flex: none; }
.ep-qr svg { width: 100%; height: 100%; display: block; }
.ep-qr-k { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 6.4pt; letter-spacing: 0.4pt; line-height: 1; align-self: flex-end; margin-bottom: 3pt; }
.ep-qrs > :nth-child(2) { margin-right: auto; } /* REVIEW: low, next to the left QR, reading up */
.ep-qrs > :nth-child(3) { transform: none; align-self: flex-start; margin: 3pt 0 0; } /* EMAIL: high, next to the right QR, reading down */
.ep-rep { padding-top: 1.5pt; font-size: 6.8pt; }
.ep-rep > div { white-space: nowrap; overflow: hidden; }
.ep-rep-k { font-weight: 700; font-size: 8pt; }

.ep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3pt; padding: 0 4pt; }
.ep-box { border: 1.25pt solid #000; position: relative; min-width: 0; }
.ep-k { position: absolute; top: 1pt; right: 3pt; font-weight: 500; font-size: 5.8pt; letter-spacing: 0.3pt; line-height: 1; }
.ep-invoice { flex: 1.1; display: flex; align-items: center; padding: 6pt 4pt 0; }
.ep-invoice-no { width: 100%; font-weight: 500; font-size: 31pt; line-height: 0.95; white-space: nowrap; overflow: hidden; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.3pt; }
.ep-row { flex: 1; display: flex; gap: 3pt; min-height: 0; }
.ep-product { width: 1.02in; flex: none; display: flex; }
.ep-p { width: 0.3in; flex: none; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26pt; }
.ep-product-body { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; padding: 6pt 2pt 0; }
.ep-product-no { width: 100%; text-align: center; font-weight: 500; font-size: 29pt; line-height: 0.95; white-space: nowrap; overflow: hidden; }
.ep-maker { flex: 1; display: flex; align-items: center; padding: 6pt 3pt 0; }
.ep-maker-name { width: 100%; text-align: center; font-weight: 500; font-size: 21pt; line-height: 1; white-space: nowrap; overflow: hidden; }
.ep-band { width: 0.33in; flex: none; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ep-band span { display: block; height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-weight: 800; font-style: italic; font-size: 25pt; letter-spacing: 0.2pt; white-space: nowrap; overflow: hidden; line-height: 0.33in; }
.lbl-epson .lbl-ph { color: #b8b8b8 !important; }

/* Tall condensed face for the big values, like the sample (Antonio; falls back to the label font) */
.ep-invoice-no, .ep-product-no, .ep-maker-name, .ep-p { font-family: Antonio, "Barlow Condensed", "Arial Narrow", sans-serif; }
.ep-invoice-no { font-weight: 600; font-size: 36pt; letter-spacing: -0.6pt; line-height: 1; }
.ep-invoice { padding-left: 2pt; padding-right: 2pt; }
.ep-product-no { font-weight: 600; font-size: 34pt; line-height: 1; }
.ep-maker-name { font-weight: 500; font-size: 27pt; line-height: 1.05; }
.ep-p { font-weight: 700; font-size: 32pt; }
.ep-band span { font-size: 25.5pt; letter-spacing: 0.3pt; } /* bold italic Barlow Condensed, like the sample's slanted DELIVERY */

/* v0.5.2 tweaks */
/* Product #: smaller so it sits clear of the box's bottom edge */
.ep-product-no { font-size: 27pt; line-height: 1; }
.ep-product-body { padding: 7pt 2pt 2pt; }
/* Fulfillment band: lighter and less bulky */
.ep-band span { font-weight: 700; font-size: 19pt; letter-spacing: 0.8pt; }
/* Notes inside the invoice box: thin line, small "NOTES:" title. Only shown when there are notes. */
.ep-invoice { flex-direction: column; justify-content: center; align-items: stretch; }
.ep-notes { border-top: 0.5pt solid #000; margin-top: 1.5pt; padding: 1pt 1pt 1.5pt; font-size: 7pt; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ep-notes-k { font-weight: 700; font-size: 5.8pt; letter-spacing: 0.4pt; }
.ep-invoice:has(.ep-notes:not(.is-empty)) .ep-invoice-no { font-size: 27pt; }

/* Label form: products list (Epson) */
.products-list .part-row { max-width: 320px; }
.product-p { width: 30px; height: 44px; flex: none; display: grid; place-items: center; background: #000; color: #fff; font-weight: 800; border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-right: -9px; }
.products-list .input.part-ref { flex: 1; text-align: left; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-variant-numeric: tabular-nums; }

/* v0.5.3 */
/* PRODUCT #: centered in the box (the small caption sits in the corner, out of the way) */
.ep-product-body { align-items: center; justify-content: center; padding: 3pt 2pt; }
.ep-product-no { font-size: 25pt; line-height: 1; padding-top: 3pt; }
/* QR codes take the room available, so a two-line center name never squeezes them onto the lines */
.ep-qrs { align-items: stretch; padding: 3pt 0; }
.ep-qr { width: auto; height: auto; max-height: 0.47in; aspect-ratio: 1 / 1; align-self: center; flex: none; }
.ep-qrs { --qr: min(0.47in, 100%); }
.ep-qr { height: min(0.47in, 100%); }
/* Products stepper on the form */
.stepper { display: flex; align-items: stretch; width: max-content; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.stepper .input { width: 72px; border: 0; border-radius: 0; text-align: center; font-size: 19.5px; font-weight: 700; -moz-appearance: textfield; }
.stepper .input::-webkit-outer-spin-button, .stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn { width: 48px; border: 0; background: var(--fill); color: var(--text); font: 600 23.5px var(--font); cursor: pointer; }
.stepper-btn:hover { background: var(--accent-soft); color: var(--accent); }

/* Save & Print: tag image status + saved files */
.tag-save-status { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--fill-2); font-size: 16px; line-height: 1.6; }
.tag-save-status[hidden], .saved-tags[hidden] { display: none; }
.tag-save-status .err { color: var(--red); }
.saved-tags { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.label.for-export { box-shadow: none; }

/* Sent to the printer: green alert */
.tag-save-status.is-success { background: var(--green-soft); color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.tag-save-status.is-success::before { content: "✓"; font-size: 19.5px; }

/* ============================================================= v0.6: employee portal */
.grow { flex: 1; }
.ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumbs { font-size: 16px; color: var(--text-2); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile-icon.tone-red { background: var(--red-soft); color: var(--red); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head .section-title { margin-bottom: 10px; }
.avatar.has-photo { padding: 0; overflow: hidden; background: var(--fill); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 48px; height: 48px; font-size: 18.5px; }
.avatar-xl { width: 72px; height: 72px; font-size: 25.5px; }
.select-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 16px; }
.narrow-card { max-width: 860px; }
.modal-lg { max-width: min(980px, calc(100vw - 32px)); }

/* ---- slideshow */
.carousel { position: relative; display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-lg); background: #111; }
.carousel-track { position: relative; aspect-ratio: 16 / 6; }
.carousel-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.carousel-slide.active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.slide { position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.carousel-empty { aspect-ratio: 16 / 5; text-decoration: none !important; }
.carousel-empty .slide { opacity: .92; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.has-img.has-text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,0) 80%); }
.slide-text { position: relative; z-index: 1; padding: clamp(20px, 4.5vw, 56px); max-width: 720px; }
.slide-text h2 { font-size: clamp(24px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.18); }
.slide-text p { font-size: clamp(15px, 1.5vw, 20px); margin: 10px 0 0; opacity: .95; }
.slide-btn { display: inline-block; margin-top: 16px; background: #fff; color: #1d1d1f; font-weight: 600; font-size: 17px; padding: 10px 20px; border-radius: var(--radius-pill); }
.slide-btn:hover { text-decoration: none; transform: translateY(-1px); }
.slide-cover-link { position: absolute; inset: 0; z-index: 2; }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.8); color: #1d1d1f; cursor: pointer; opacity: 0; transition: opacity .2s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.carousel:hover .carousel-nav, .carousel-nav:focus-visible { opacity: 1; }
.carousel-nav.prev { left: 14px; } .carousel-nav.prev .ic { transform: rotate(180deg); }
.carousel-nav.next { right: 14px; }
.carousel-dots { position: absolute; z-index: 3; bottom: 14px; right: 20px; display: flex; gap: 7px; }
.carousel-dots button { width: 8px; height: 8px; border-radius: var(--radius-pill); border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s, background .3s; }
.carousel-dots button.active { width: 26px; background: #fff; }
.carousel-edit { position: absolute; z-index: 3; top: 14px; right: 14px; display: inline-flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: var(--radius-pill); opacity: 0; transition: opacity .2s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.carousel-edit .ic { width: 15px; height: 15px; }
.carousel:hover .carousel-edit { opacity: 1; }
.carousel-edit:hover { text-decoration: none; }

.home-greeting { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 6px 0 18px; }
.home-greeting h2 { font-size: 29px; font-weight: 700; letter-spacing: -0.03em; }
.home-greeting p { color: var(--text-2); margin: 2px 0 0; }
.notice-ack { display: flex; align-items: center; gap: 12px; color: var(--text); background: var(--orange-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.notice-ack > .ic:first-child { color: var(--orange); }
.notice-ack > .ic:last-child { margin-left: auto; color: var(--text-3); }
a.notice-ack:hover { text-decoration: none; filter: brightness(.98); }
.empty-inline { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 17px; }
a.empty-inline:hover { text-decoration: none; border-color: var(--accent); }

/* ---- shout-outs */
.shoutouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; }
.shout { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.shout-top { position: relative; height: 112px; display: flex; align-items: center; justify-content: center; }
.shout-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shout-img + .shout-emoji { position: absolute; left: 14px; bottom: 10px; font-size: 33px; }
.shout-emoji { font-size: 52px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); position: relative; }
.shout-avatar { position: absolute; right: 14px; bottom: -22px; width: 54px; height: 54px; font-size: 19.5px; border: 3px solid var(--surface); box-shadow: var(--shadow); z-index: 1; background: var(--accent); color: #fff; }
.shout-kind { position: absolute; left: 14px; top: 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.18); padding: 3px 9px; border-radius: var(--radius-pill); }
.shout-body { padding: 16px 18px 8px; flex: 1; }
.shout-body h3 { font-size: 19.5px; line-height: 1.25; padding-right: 50px; }
.shout-body p { color: var(--text-2); font-size: 17px; margin: 6px 0 0; }
.shout-foot { display: flex; align-items: center; gap: 10px; padding: 10px 18px 16px; }
.cheer { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-pill); padding: 6px 14px; font: 600 16px var(--font); cursor: pointer; flex: none; }
.cheer:hover { border-color: var(--accent); }
.cheer.cheered { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.cheer-emoji { display: inline-block; }
.cheer.pop .cheer-emoji { animation: cheerpop .6s ease; }
@keyframes cheerpop { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1); } }
.cheer-count:empty { display: none; }
.cheer-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- knowledge & HR */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cat-tile { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); }
.cat-tile:hover { text-decoration: none; border-color: var(--line-strong); }
.cat-tile.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cat-tile strong { display: block; font-size: 17px; }
.cat-tile .tile-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.article-grid-home { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 8px; }
.article-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.article-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.article-card .cover { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.cover img, .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-art { display: flex; align-items: flex-end; color: #fff; }
.cover-art span { padding: 16px 18px; font-weight: 800; font-size: 23.5px; line-height: 1.1; letter-spacing: -0.02em; opacity: .95; }
.article-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.article-card-body h3 { font-size: 19.5px; line-height: 1.25; }
.article-card-body p { font-size: 17px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta { display: flex; gap: 6px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .article-grid > .article-card.featured { grid-column: span 2; flex-direction: row; }
  .article-card.featured .cover { flex: 1.3; aspect-ratio: auto; min-height: 260px; }
  .article-card.featured .article-card-body { flex: 1; justify-content: center; padding: 28px; }
  .article-card.featured h3 { font-size: 27px; }
}

.article { max-width: 780px; margin: 0 auto; }
.article-hero { aspect-ratio: 21 / 8; border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.article-hero.cover-art span { font-size: clamp(26px, 4vw, 40px); padding: 28px; }
.article-head h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.article-summary { font-size: 21.5px; color: var(--text-2); margin: 10px 0 8px; line-height: 1.4; }
.article-head { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.article-body { font-size: 19.5px; line-height: 1.65; }
.article-body > * + * { margin-top: 20px; }
.ab-heading { font-size: 29px; font-weight: 700; letter-spacing: -0.025em; margin-top: 36px !important; line-height: 1.2; }
h3.ab-heading { font-size: 23.5px; margin-top: 28px !important; }
.ab-text p, .ab-callout p { margin: 0 0 12px; }
.ab-text p:last-child, .ab-callout p:last-child { margin-bottom: 0; }
.ab-text ul, .ab-text ol, .ab-callout ul { padding-left: 24px; margin: 8px 0; }
.ab-image img, .ab-gallery img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.ab-image.size-normal { max-width: 520px; margin-left: auto; margin-right: auto; }
.ab-image.size-full { margin-left: calc(50% - min(50vw - 40px, 640px)); margin-right: calc(50% - min(50vw - 40px, 640px)); }
figure { margin: 0; }
figcaption { font-size: 16px; color: var(--text-2); text-align: center; margin-top: 8px; }
.ab-gallery-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.ab-gallery.n1 .ab-gallery-grid { grid-template-columns: 1fr; }
.ab-gallery.n2 .ab-gallery-grid, .ab-gallery.n4 .ab-gallery-grid { grid-template-columns: repeat(2, 1fr); }
.ab-gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
.ab-callout { border-radius: var(--radius); padding: 16px 18px; font-size: 18.5px; border-left: 4px solid currentColor; }
.ab-callout > strong { display: block; margin-bottom: 4px; }
.ab-callout > div { color: var(--text); }
.ab-callout.tone-info, .callout-edit.tone-info { background: var(--accent-soft); color: var(--accent); }
.ab-callout.tone-success, .callout-edit.tone-success { background: var(--green-soft); color: var(--green); }
.ab-callout.tone-warning, .callout-edit.tone-warning { background: var(--orange-soft); color: var(--orange); }
.ab-callout.tone-danger, .callout-edit.tone-danger { background: var(--red-soft); color: var(--red); }
.ab-checklist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.ab-checklist ul { list-style: none; padding: 0; margin: 6px 0 0; }
.ab-checklist li { position: relative; padding: 6px 0 6px 32px; border-top: 1px solid var(--line); }
.ab-checklist li:first-child { border-top: 0; }
.ab-checklist li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.ab-quote { margin: 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--brand); font-size: 23.5px; font-weight: 500; letter-spacing: -0.015em; }
.ab-quote p { margin: 0; }
.ab-quote cite { display: block; margin-top: 8px; font-size: 17px; font-style: normal; color: var(--text-2); }
.ab-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.ab-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ab-video-frame[hidden] { display: none; }
.ab-button { text-align: center; }
.ab-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); background: var(--surface); }
.ab-file:hover { text-decoration: none; border-color: var(--accent); }
.ab-file > .ic { width: 30px; height: 30px; color: var(--accent); }
.ab-file > span:nth-child(2), .eblock .ab-file > span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; font-size: 17.5px; }
.ab-file-dl { font-weight: 600; color: var(--accent); font-size: 17px; }
.ab-divider { border: 0; height: 1px; background: var(--line-strong); margin: 32px 0 !important; }
.ack-box { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; margin-top: 34px; }
.ack-box > .ic { color: var(--green); width: 28px; height: 28px; }
.ack-box form { margin: 0; }
.article-readers { max-width: 780px; margin: 24px auto 0; }

/* ---- article editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.editor-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.editor-side .card + .card { margin-top: 0; }
.editor-main { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0 40px; min-height: 70vh; box-shadow: var(--shadow); }
.editor-main.drop-on { border-color: var(--accent); }
.cover-picker { position: relative; aspect-ratio: 21 / 6; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.cover-picker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-picker.over, [data-picture-drop].over { outline: 3px dashed var(--accent); outline-offset: -6px; }
.cover-picker.busy::after { content: "Uploading…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; font-weight: 600; }
.cover-tools, .slide-preview-tools { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.cover-btn { background: rgba(255,255,255,.88) !important; color: #1d1d1f !important; cursor: pointer; }
.cover-hint { position: absolute; left: 18px; bottom: 16px; color: rgba(255,255,255,.75); font-size: 15px; font-weight: 500; pointer-events: none; }
.cover-picker img:not([hidden]) ~ .cover-hint { display: none; }
.title-input { display: block; width: 100%; border: 0; background: none; color: var(--text); font: 800 clamp(26px, 3vw, 38px)/1.15 var(--font); letter-spacing: -0.03em; padding: 26px 32px 6px; }
.summary-input { display: block; width: 100%; border: 0; background: none; color: var(--text-2); font: 20.5px/1.4 var(--font); padding: 4px 32px 16px; resize: none; overflow: hidden; }
.title-input:focus, .summary-input:focus { outline: none; }
.block-palette { position: sticky; top: 60px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 24px; margin-bottom: 8px; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.palette-label { font-size: 14px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.palette-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 500 15px var(--font); cursor: grab; }
.palette-item:hover { border-color: var(--accent); color: var(--accent); }
.palette-item .glyph { width: 18px; text-align: center; font-weight: 700; color: var(--accent); }
.blocks { padding: 0 24px; min-height: 20px; }
.blocks-empty { margin: 8px 24px; border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-2); }
.blocks-empty .ic { width: 34px; height: 34px; color: var(--text-3); }
.blocks-empty[hidden] { display: none; }
.eblock { position: relative; border: 1px solid transparent; border-radius: var(--radius); padding: 6px 10px 10px; margin: 4px 0; }
.eblock:hover, .eblock:focus-within { border-color: var(--line-strong); background: var(--surface-2); }
.eblock.dragging { opacity: .4; }
.eblock-bar { display: flex; align-items: center; gap: 4px; height: 26px; opacity: 0; transition: opacity .15s; }
.eblock:hover .eblock-bar, .eblock:focus-within .eblock-bar { opacity: 1; }
.eblock-bar button { border: 0; background: none; color: var(--text-2); width: 28px; height: 26px; border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; }
.eblock-bar button:hover { background: var(--fill); color: var(--text); }
.eblock-bar button.danger:hover { background: var(--red-soft); color: var(--red); }
.eblock-handle { cursor: grab; color: var(--text-3); font-size: 17px; letter-spacing: -3px; padding: 0 8px 0 2px; user-select: none; }
.eblock-type { font-size: 14px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.eblock-body { display: flex; flex-direction: column; gap: 10px; }
.eblock-body.callout-edit { border-radius: var(--radius-sm); padding: 12px; border-left: 4px solid currentColor; }
.eblock-body.callout-edit .rt, .eblock-body.callout-edit .input { color: var(--text); }
.drop-indicator { height: 4px; border-radius: 4px; background: var(--accent); margin: 2px 0; box-shadow: 0 0 0 3px var(--accent-soft); }
.rt-bar { display: none; gap: 2px; flex-wrap: wrap; }
.eblock:focus-within .rt-bar { display: flex; }
.rt-bar button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 3px 9px; font: 15px var(--font); cursor: pointer; }
.rt-bar button:hover { border-color: var(--accent); }
.rt { min-height: 30px; font-size: 19.5px; line-height: 1.6; outline: none; padding: 4px 2px; }
.rt:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.rt p, .rt div { margin: 0 0 10px; }
.rt ul, .rt ol { padding-left: 24px; }
.heading-input { border: 0 !important; background: none !important; box-shadow: none !important; padding-left: 2px !important; font-weight: 700; letter-spacing: -0.02em; }
.heading-input.h2 { font-size: 27px; } .heading-input.h3 { font-size: 22.5px; }
.quote-input { font-size: 21.5px; }
.seg-sm .seg-btn { padding: 4px 10px; font-size: 14px; }
.segmented.seg-sm { align-self: flex-start; }
.block-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 28px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--fill-2); color: var(--text-2); font: 17px var(--font); cursor: pointer; }
.block-drop strong { color: var(--text); }
.block-drop:hover, .block-drop.over { border-color: var(--accent); color: var(--accent); }
.img-preview img { width: 100%; border-radius: var(--radius-sm); display: block; }
.img-preview.size-normal { max-width: 420px; }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; border-radius: var(--radius-sm); }
.gallery-edit.over { outline: 3px dashed var(--accent); }
.thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--fill); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 17.5px; line-height: 1; }
.thumb-add { border: 2px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-2); font: 15px var(--font); cursor: pointer; }
.thumb-add strong { font-size: 25.5px; color: var(--accent); }
.uploading { padding: 24px; text-align: center; color: var(--text-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.swatch input { position: absolute; opacity: 0; }
.swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1100px) { .editor-layout { grid-template-columns: 1fr; } .editor-side { position: static; } }
@media (max-width: 860px) {
  .title-input { padding: 20px 16px 4px; } .summary-input { padding: 4px 16px 12px; }
  .blocks { padding: 0 8px; } .block-palette { padding: 8px 12px; top: 56px; }
  .eblock-bar { opacity: 1; }
  .palette-label { display: none; }
}

/* ---- call lists */
.list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.list-card { color: var(--text); display: flex; flex-direction: column; gap: 14px; transition: transform .15s, box-shadow .15s; }
.list-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card + .list-card, .list-card + .list-card { margin-top: 0; }
.ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#34c759 calc(var(--p) * 1%), var(--fill) 0); }
.ring span { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.list-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.list-card-stats div { background: var(--fill-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.list-card-stats strong { display: block; font-size: 21.5px; font-variant-numeric: tabular-nums; }
.list-card-stats span { font-size: 14px; color: var(--text-2); }
.list-card-stats .is-due strong { color: var(--orange); }
.list-card-stats .is-won strong { color: var(--green); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpis .stat { padding: 16px 18px; }
.mini-bar { height: 6px; background: var(--fill); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 4px; }
.mini-bar span { display: block; height: 100%; background: #34c759; border-radius: var(--radius-sm); }
.status-bar-wrap { padding: 16px 18px; margin-bottom: 16px; }
.status-bar { display: flex; height: 12px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; background: var(--fill); }
.status-bar .seg { height: 100%; }
.status-legend { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; color: var(--text-2); font: 16px var(--font); padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer; }
.legend-item strong { color: var(--text); }
.legend-item:hover { background: var(--fill-2); }
.legend-item.active { border-color: var(--accent); background: var(--accent-soft); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.seg.tone-gray, .dot.tone-gray { background: #a1a1a6; }
.seg.tone-blue, .dot.tone-blue { background: #0a84ff; }
.seg.tone-orange, .dot.tone-orange { background: #ff9f0a; }
.seg.tone-purple, .dot.tone-purple { background: #af52de; }
.seg.tone-green, .dot.tone-green { background: #34c759; }
.seg.tone-red, .dot.tone-red { background: #ff3b30; }
.grid-toolbar .select { max-width: 200px; }
.sheet-wrap { overflow: hidden; }
.sheet-scroll { overflow: auto; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); -webkit-overflow-scrolling: touch; }
table.sheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 16px; }
.sheet th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
  padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; user-select: none; }
.sheet th[data-sort] { cursor: pointer; }
.sheet th[data-sort]:hover { color: var(--text); }
.sheet th.sorted::after { content: " ▲"; font-size: 11px; color: var(--accent); }
.sheet th.sorted.desc::after { content: " ▼"; }
.sheet td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; background: var(--surface); }
.sheet tbody tr:hover td { background: var(--surface-2); }
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet .nowrap { white-space: nowrap; }
.sheet .sticky-col { position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 280px; box-shadow: 1px 0 0 var(--line); }
.sheet th.sticky-col { z-index: 3; }
.sheet .clip { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .notes-col { min-width: 240px; }
.sheet tr.is-closed td { opacity: .72; }
.sheet tr.is-due td.sticky-col { box-shadow: inset 3px 0 0 #ff9f0a, 1px 0 0 var(--line); }
.acct-link { font-weight: 600; text-align: left; color: var(--text); white-space: normal; }
.acct-link:hover { color: var(--accent); text-decoration: underline; }
.prio { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--fill); color: var(--text-2); }
.prio-high { background: var(--red-soft); color: var(--red); }
.prio-medium { background: var(--orange-soft); color: var(--orange); }
.prio-low { background: var(--accent-soft); color: var(--accent); }
.cell-select, .cell-date, .cell-input { font: 16px var(--font); color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 8px; min-height: 32px; }
.cell-select { font-weight: 600; cursor: pointer; padding-right: 4px; }
.cell-select:hover, .cell-date:hover, .cell-input:hover { border-color: var(--line-strong); }
.cell-select:focus, .cell-date:focus, .cell-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.cell-select.tone-gray { background: var(--fill); color: var(--text-2); }
.cell-select.tone-blue { background: var(--accent-soft); color: var(--accent); }
.cell-select.tone-orange { background: var(--orange-soft); color: var(--orange); }
.cell-select.tone-purple { background: var(--purple-soft); color: var(--purple); }
.cell-select.tone-green { background: var(--green-soft); color: var(--green); }
.cell-select.tone-red { background: var(--red-soft); color: var(--red); }
.cell-date.is-due { color: var(--orange); font-weight: 600; }
.cell-input { width: 100%; }
.cell-input[readonly] { cursor: pointer; }
.saving { opacity: .5; }
.saved { box-shadow: 0 0 0 3px var(--green-soft) !important; border-color: var(--green) !important; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line); }
.empty-row { text-align: center; padding: 40px !important; color: var(--text-2); }

.modal.drawer { margin: 0 0 0 auto; height: 100vh; height: 100dvh; max-height: none; max-width: min(560px, 100vw); }
.modal.drawer .modal-card { height: 100%; overflow-y: auto; border-radius: var(--radius) 0 0 var(--radius); }
.modal.drawer[open] { animation: drawerin .22s ease; }
@keyframes drawerin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.drawer-h { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 22px 0 10px; }
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.acct-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.acct-facts div { background: var(--surface); padding: 8px 12px; display: flex; flex-direction: column; min-width: 0; }
.acct-facts span { font-size: 14px; color: var(--text-2); }
.acct-facts strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.peer-list { display: flex; flex-direction: column; gap: 6px; }
.peer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pill" "title pill"; align-items: center; column-gap: 10px;
  text-align: left; background: var(--fill-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); cursor: pointer; font: inherit; }
.peer:hover { border-color: var(--accent); }
.peer strong { grid-area: name; font-size: 16px; }
.peer .muted { grid-area: title; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer .pill { grid-area: pill; }
.outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.outcome { border: 1.5px solid transparent; border-radius: var(--radius-pill); padding: 7px 13px; font: 600 16px var(--font); cursor: pointer; }
.outcome.tone-red { background: var(--red-soft); color: var(--red); }
.outcome.active { border-color: currentColor; box-shadow: 0 0 0 3px var(--accent-soft); }
.history { display: flex; flex-direction: column; gap: 10px; }
.history-item { display: flex; gap: 10px; align-items: flex-start; }
.playbook { padding-left: 22px; margin: 12px 0 0; }
.playbook li { margin-bottom: 14px; }
.playbook p { margin: 4px 0 0; color: var(--text-2); font-size: 17px; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--fill-2); text-align: center; cursor: pointer; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone.over, .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-icon .ic { width: 36px; height: 36px; color: var(--accent); }
.map-table td { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 860px) {
  .list-cards { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sheet-scroll { max-height: none; }
  .grid-toolbar .segmented { order: 3; }
  .modal.drawer .modal-card { border-radius: 0; }
}

/* ---- home page manager */
.slide-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.slide-admin-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: grab; box-shadow: var(--shadow); }
.slide-admin-item.dragging { opacity: .4; }
.slide-thumb { position: relative; aspect-ratio: 16 / 6; container-type: inline-size; }
.slide-thumb .slide-text { padding: 14px 18px; }
.slide-thumb .slide-text h2 { font-size: 7cqw; }
.slide-thumb .slide-text p { font-size: 3.6cqw; margin-top: 4px; }
.slide-thumb .slide-btn { font-size: 3cqw; padding: 4px 10px; margin-top: 6px; }
.slide-admin-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.slide-preview-wrap { position: relative; border-radius: var(--radius); overflow: hidden; }
.slide-preview { position: relative; aspect-ratio: 16 / 6; container-type: inline-size; }
.slide-preview .slide-text h2 { font-size: clamp(18px, 5cqw, 46px); }
.slide-preview .slide-text p { font-size: clamp(13px, 2cqw, 20px); }
.slide-preview .slide-text { padding: 4cqw; }
.slide-preview-wrap .cover-hint { top: 14px; bottom: auto; }
.kind-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.kind-option { position: relative; cursor: pointer; }
.kind-option input { position: absolute; opacity: 0; }
.kind-option span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: 15px; font-weight: 600; text-align: center; }
.kind-option b { font-size: 27px; font-weight: 400; }
.kind-option input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kind-option input:focus-visible + span { outline: 2px solid var(--accent); }
.shout-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.shout-thumb[hidden] { display: none; }
.auto-card { margin-bottom: 16px; }
.switch { position: relative; display: inline-block; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--fill); border-radius: var(--radius); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + span { background: #34c759; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-soft); }
@media (max-width: 860px) { .kind-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- team */
.celebrate-strip { margin-bottom: 20px; background: linear-gradient(135deg, rgba(255,179,71,.16), rgba(194,24,91,.10)), var(--surface); }
.celebrate-strip h2 { margin-bottom: 12px; }
.celebrate-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.celebrate-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; flex: none; }
.celebrate-item.today { border-color: #ff9f0a; box-shadow: 0 0 0 3px var(--orange-soft); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.person-card { display: flex; gap: 14px; align-items: flex-start; }
.card + .person-card, .person-card + .person-card { margin-top: 0; }
.person-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.person-tags { margin: 2px 0; }
.person-contact { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.person-contact a { display: flex; align-items: center; gap: 6px; min-width: 0; }
.person-contact .ic { width: 15px; height: 15px; flex: none; }

@media (max-width: 860px) {
  .carousel { border-radius: var(--radius); margin: -4px 0 18px; }
  .carousel-track { aspect-ratio: 4 / 3; }
  .slide.has-img.has-text::after { background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 85%); }
  .carousel-nav { display: none; }
  .carousel-dots { left: 0; right: 0; justify-content: center; bottom: 10px; }
  .carousel-edit { opacity: 1; }
  .home-greeting h2 { font-size: 25.5px; }
  .shoutouts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .shout { scroll-snap-align: start; }
  .article-hero { aspect-ratio: 16 / 9; }
  .article-body { font-size: 18.5px; }
}

/* ---- academy */
.academy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.academy-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.academy-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.academy-card .cover { aspect-ratio: 16 / 7; position: relative; overflow: hidden; }
.progress-line { margin-top: auto; padding-top: 6px; }
.progress-line .mini-bar { margin: 0 0 4px; }
.cert-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.cert-badge { display: flex; align-items: center; gap: 12px; flex: none; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px 12px 12px; color: var(--text); box-shadow: var(--shadow); }
.cert-badge:hover { text-decoration: none; border-color: var(--accent); }
.cert-badge > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cert-badge.is-pending { opacity: .8; border-style: dashed; }
.cert-medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); }

.academy-hero { position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; margin-bottom: 22px; min-height: 220px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.academy-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.academy-hero img + .academy-hero-text { background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0)); }
.academy-hero-text { position: relative; padding: clamp(20px, 4vw, 40px); width: 100%; }
.academy-hero h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; }
.academy-hero p { font-size: 19.5px; opacity: .92; margin: 6px 0 0; max-width: 680px; }
.academy-hero-progress { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.academy-hero-progress .slide-btn { margin: 0 0 0 auto; }
.ring-light { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.25) 0); }
.ring-light span { background: rgba(0,0,0,.25); color: #fff; }

.level-path { list-style: none; padding: 0; margin: 0; position: relative; }
.level-path::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 3px; background: var(--fill); border-radius: 3px; }
.level { position: relative; display: flex; gap: 16px; margin-bottom: 18px; }
.level-marker { position: relative; z-index: 1; width: 45px; height: 45px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 18.5px;
  background: var(--surface); border: 3px solid var(--accent); color: var(--accent); }
.level-earned .level-marker { background: #34c759; border-color: #34c759; color: #fff; font-size: 21.5px; }
.level-pending .level-marker { border-color: #ff9f0a; color: #ff9f0a; }
.level-locked .level-marker { border-color: var(--line-strong); color: var(--text-3); font-size: 17.5px; }
.level-card { flex: 1; min-width: 0; }
.level-locked .level-card { opacity: .7; }
.level-card h2 { font-size: 22.5px; }
.level-card > .mini-bar { margin-top: 14px; }
.level-cert { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; max-width: 260px; }
.lesson-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--text); }
a.lesson-row:hover { text-decoration: none; background: var(--fill); }
.lesson-row > .ic { color: var(--text-3); margin-left: auto; }
.lesson-row.locked { opacity: .6; }
.lesson-row.current { box-shadow: inset 0 0 0 2px var(--accent); }
.lesson-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--accent); }
.lesson-check .ic { width: 16px; height: 16px; }
.lesson-row.done .lesson-check { background: #34c759; color: #fff; }
.lesson-title { display: flex; flex-direction: column; min-width: 0; flex: 1; color: var(--text); }
a.lesson-title:hover { text-decoration: none; }
.lesson-title strong { font-weight: 600; font-size: 17px; }
.lesson-list.compact .lesson-row { padding: 7px 8px; }
.lesson-list.compact .lesson-check { width: 24px; height: 24px; }
.add-lesson { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.lesson-row form .icon-btn, .level-edit .icon-btn { width: 30px; height: 30px; font-size: 16px; }
.icon-btn[disabled] { opacity: .3; cursor: default; }

.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.lesson-main { max-width: 820px; margin: 0; width: 100%; justify-self: center; }
.lesson-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; font-weight: 500; }
.lesson-done { margin-top: 30px; }
.quiz { margin-top: 30px; }
.quiz-q { border: 1px solid var(--line); margin: 14px 0 0; padding: 18px 20px; }
.quiz-q legend { font-weight: 600; font-size: 18.5px; padding: 0; float: left; width: 100%; margin-bottom: 10px; }
.quiz-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 16px; margin-right: 6px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-top: 6px; cursor: pointer; clear: both; font-size: 17.5px; }
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt input { width: 18px; height: 18px; accent-color: var(--accent); }
.quiz-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.quiz-q.right { border-color: #34c759; box-shadow: 0 0 0 3px var(--green-soft); }
.quiz-q.wrong { border-color: #ff3b30; box-shadow: 0 0 0 3px var(--red-soft); }
.quiz-result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius); margin-top: 18px; }
.quiz-result strong { font-size: 29px; }
.quiz-result span { flex: 1; min-width: 200px; }
.quiz-result.passed { background: var(--green-soft); }
.quiz-result.failed { background: var(--orange-soft); }
.quiz-builder { margin: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.quiz-builder[hidden] { display: none; }
.quiz-edit { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.quiz-opts { display: flex; flex-direction: column; gap: 6px; }
.quiz-opt-edit { display: flex; align-items: center; gap: 8px; }
.quiz-opt-edit input[type=radio] { width: 20px; height: 20px; accent-color: #34c759; flex: none; }

.academy-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.academy-edit > aside { position: sticky; top: 76px; }
.level-edit + .level-edit { margin-top: 16px; }
.level-num { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.cert-review + .cert-review { margin-top: 12px; }

.training-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.training-card { display: flex; align-items: center; gap: 14px; color: var(--text); }
.training-card:hover { text-decoration: none; border-color: var(--accent); }
.card + .training-card, .training-card + .training-card { margin-top: 0; }
.training-icon { width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center; color: #fff; flex: none; }
.training-icon .ic { width: 26px; height: 26px; }
.training-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.training-info .mini-bar { margin: 6px 0 2px; }

.certificate { max-width: 900px; margin: 0 auto; background: #fff; color: #1d1d1f; padding: 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); aspect-ratio: 11 / 8.5; }
.cert-inner { height: 100%; border: 3px solid #c8102e; outline: 1px solid #c8102e; outline-offset: -10px; padding: 5% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cert-brand { font-weight: 900; font-size: 22px; letter-spacing: .04em; color: #c8102e; }
.cert-brand span { color: #1d1d1f; font-weight: 600; letter-spacing: .02em; }
.cert-kicker { margin-top: 3%; font-size: clamp(22px, 3.6vw, 38px); font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; }
.cert-small { margin: 2.5% 0 0; font-size: clamp(13px, 1.6vw, 17px); color: #555; max-width: 600px; }
.cert-name { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(30px, 5.4vw, 56px); margin-top: 1%; border-bottom: 1px solid #ccc; padding: 0 30px 4px; }
.cert-title { margin-top: 2%; font-size: clamp(18px, 2.6vw, 28px); font-weight: 800; color: #c8102e; letter-spacing: -0.01em; }
.cert-foot { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-top: auto; gap: 20px; }
.cert-foot > div:not(.cert-seal) { display: flex; flex-direction: column; font-size: 13px; color: #666; min-width: 30%; }
.cert-line { border-bottom: 1px solid #999; padding-bottom: 4px; margin-bottom: 4px; color: #1d1d1f; font-size: 16px; }
.cert-seal { font-size: 54px; line-height: 1; }
@media print {
  .page-certificate .sidebar, .page-certificate .topbar, .page-certificate .tabbar, .page-certificate .site-footer, .page-certificate .demo-banner, .page-certificate .content > p { display: none !important; }
  .page-certificate .main { margin: 0 !important; }
  .page-certificate .content { padding: 0 !important; }
  .page-certificate .certificate { box-shadow: none; max-width: none; width: 100%; }
  @page { size: letter landscape; margin: 0.4in; }
}
@media (max-width: 1100px) { .lesson-layout, .academy-edit { grid-template-columns: 1fr; } .lesson-side, .academy-edit > aside { position: static; } }
@media (max-width: 860px) {
  .level-path::before { left: 17px; }
  .level { gap: 10px; }
  .level-marker { width: 37px; height: 37px; font-size: 17px; }
  .level-cert { align-items: flex-start; text-align: left; }
  .academy-hero-progress .slide-btn { margin-left: 0; }
}

[hidden] { display: none !important; }
.article-hero.cover-art { aspect-ratio: auto; height: 120px; }
.article-hero.cover-art span { display: none; }
.eblock-heading .seg-sm, .eblock-image .seg-sm, .eblock-callout .seg-sm { opacity: 0; transition: opacity .15s; }
.eblock:hover .seg-sm, .eblock:focus-within .seg-sm { opacity: 1; }
@media (max-width: 860px) { .carousel .slide-text { padding-bottom: 36px; } }
.slide-preview-wrap:has(.slide.has-img) .cover-hint { display: none; }
.slide-thumb .slide-text h2 { font-size: 6cqw; }
.slide-thumb .slide-text p { font-size: 3.2cqw; }
@media (max-width: 860px) { .topbar .hide-sm { display: none; } .topbar .btn { padding: 0 10px; } .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }

/* ---- Google reviews */
.google-connect { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.g-badge { width: 52px; height: 52px; border-radius: var(--radius); flex: none; display: grid; place-items: center; font: 800 29px var(--font); color: #fff;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.g-centers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.g-center { margin-top: 0 !important; display: flex; flex-direction: column; gap: 4px; }
.g-rating { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.g-up { color: var(--green); font-weight: 600; }
.g-status { margin: 10px 0 18px; }
.g-err { color: var(--red); display: block; }
.stars { position: relative; display: inline-block; font-size: 21.5px; line-height: 1; letter-spacing: 2px; color: var(--fill); }
.stars::before { content: "★★★★★"; }
.stars > span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #fbbc05; }
.stars > span::before { content: "★★★★★"; }
.stars-sm { font-size: 15px; letter-spacing: 1px; vertical-align: -1px; }
.g-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.g-side { display: flex; flex-direction: column; gap: 16px; }
.g-side .card + .card { margin-top: 0; }
.g-feed-head { flex-wrap: wrap; }
.g-reviews { display: flex; flex-direction: column; }
.g-review { padding: 16px 24px; border-top: 1px solid var(--line); }
.g-review.is-low { box-shadow: inset 3px 0 0 #ff9f0a; }
.g-review p { margin: 8px 0 6px; font-size: 17px; white-space: normal; }
.g-review-head { display: flex; align-items: center; gap: 10px; }
.g-review-head .avatar { width: 38px; height: 38px; }
.g-results { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-height: 50vh; overflow-y: auto; }
.g-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 17px var(--font); cursor: pointer; }
.g-result:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 1100px) { .g-layout { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .g-centers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .google-connect { flex-direction: column; } .g-review { padding: 14px 18px; } }

/* ---- person editor */
.role-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.role-option { position: relative; cursor: pointer; }
.role-option input { position: absolute; opacity: 0; }
.role-option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.role-option small { color: var(--text-2); font-size: 15px; line-height: 1.35; }
.role-option input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.role-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.temp-pw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); margin: 8px 0; }
.temp-pw > div { flex: 1; min-width: 200px; }
.temp-pw-value { font: 600 18.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; background: var(--surface); padding: 6px 12px; border-radius: var(--radius-sm); }
@media (max-width: 860px) { .role-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- search everywhere */
.topbar-search { position: relative; display: flex; align-items: center; margin-left: auto; width: min(380px, 34vw); }
.topbar-search > .ic { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.topbar-search input { width: 100%; height: 36px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--fill); color: var(--text); font: 17px var(--font); padding: 0 34px 0 36px; }
.topbar-search input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.topbar-search input::-webkit-search-cancel-button { display: none; }
.search-kbd { position: absolute; right: 10px; font: 600 14px var(--font); color: var(--text-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 6px; pointer-events: none; }
.topbar-search input:focus ~ .search-kbd { display: none; }
.topbar-search + .search-mobile { display: none; }
.topbar .topbar-search ~ .btn, .topbar .topbar-search ~ form { margin-left: 8px; }
.search-pop { position: absolute; top: calc(100% + 6px); right: 0; width: min(480px, 92vw); max-height: 70vh; overflow-y: auto; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; }
.search-group { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 10px 10px 4px; }
.search-pop a { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); }
.search-pop a:hover, .search-pop a.active { background: var(--accent-soft); text-decoration: none; }
.search-pop a strong { font-size: 16px; font-weight: 600; }
.search-pop a span { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-pop .search-all { color: var(--accent); font-weight: 600; font-size: 16px; border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.search-empty { padding: 14px 10px; color: var(--text-2); font-size: 16px; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.search-results .card { margin-top: 0 !important; }
kbd { font: 600 14px var(--font); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 1px 6px; }
@media (max-width: 860px) { .topbar-search { display: none; } .topbar-search + .search-mobile { display: grid; margin-left: auto; } }

/* ---- vendors */
.vendor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vendor-card { margin-top: 0 !important; display: flex; flex-direction: column; gap: 10px; color: var(--text); transition: transform .15s, box-shadow .15s; }
.vendor-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.vendor-mark { width: 44px; height: 44px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; font-weight: 800; font-size: 17.5px; color: #fff; background: linear-gradient(135deg, #5b5b60, #1d1d1f); }
.vendor-mark-lg { width: 64px; height: 64px; font-size: 23.5px; border-radius: var(--radius); }
.vendor-card h3 { font-size: 18.5px; }
.vendor-tags { display: flex; flex-wrap: wrap; gap: 6px; }
a.pill:hover { text-decoration: none; filter: brightness(.95); }
.vendor-contact { display: flex; flex-direction: column; gap: 3px; color: var(--text-2); }
.vendor-contact span { display: flex; align-items: center; gap: 6px; }
.vendor-contact .ic { width: 15px; height: 15px; }
.vendor-money { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--text-2); }
.vendor-money strong { color: var(--text); }
.vendor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.vendor-layout > div > .card + .card { margin-top: 20px; }
.vendor-side { display: flex; flex-direction: column; gap: 16px; }
.vendor-side .card + .card { margin-top: 0; }
.vendor-hero { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.vendor-hero h2 { font-size: 25.5px; margin-bottom: 8px; }
.vendor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 16px; }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.vendor-notes { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--fill-2); }
.better-price { color: var(--green); font-weight: 600; }
.big-num { font-size: 23.5px; letter-spacing: -0.02em; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin: 14px 0 8px; }
.spark span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.spark i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--accent); opacity: .85; }
.spark b { font-size: 12px; font-weight: 500; color: var(--text-3); }
@media (max-width: 1100px) { .vendor-layout { grid-template-columns: 1fr; } }
.topbar-title { flex: 1 1 auto; min-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search { flex: 0 1 340px; width: auto; min-width: 170px; margin-left: 12px; }
@media (max-width: 1150px) { .topbar-search .search-kbd { display: none; } }

/* Slides without a picture: centered text, and a shorter slideshow when none of the slides have pictures. */
.slide:not(.has-img) { align-items: center; justify-content: center; text-align: center; }
.slide:not(.has-img) .slide-text { max-width: 860px; margin: 0 auto; padding: clamp(18px, 3vw, 36px) clamp(20px, 4vw, 48px); }
.carousel-text-only .carousel-track { aspect-ratio: auto; height: clamp(170px, 19vw, 250px); }
.carousel-text-only .slide-text h2 { font-size: clamp(22px, 2.8vw, 36px); }
.carousel-text-only .slide-text p { font-size: clamp(14px, 1.3vw, 18px); margin-top: 8px; }
.carousel-text-only .slide-btn { margin-top: 12px; padding: 8px 18px; font-size: 16px; }
.carousel-text-only .carousel-dots { left: 0; right: 0; justify-content: center; bottom: 10px; }
.carousel-empty { aspect-ratio: auto; height: clamp(160px, 17vw, 220px); }
@media (max-width: 860px) {
  .carousel-text-only .carousel-track { height: 220px; }
  .slide:not(.has-img) .slide-text { padding-bottom: 34px; }
}
@media (max-width: 860px) { .carousel:has(.carousel-edit) .slide:not(.has-img) .slide-text { padding-top: 46px; } }
.nav-demo-note { display: flex; gap: 8px; align-items: flex-start; margin: 2px 4px 6px 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--text); font-size: 14px; line-height: 1.35; }
.nav-demo-note:hover { text-decoration: none; filter: brightness(.97); }
.nav-demo-note .ic { width: 15px; height: 15px; color: var(--orange); flex: none; margin-top: 1px; }
.price-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid rgba(0, 113, 227, .18); }
.price-note > .ic { width: 26px; height: 26px; color: var(--accent); flex: none; margin-top: 2px; }
.price-note strong { display: block; font-size: 17.5px; }
.price-note p { margin: 4px 0 0; color: var(--text-2); font-size: 17px; }

.rush-options { align-self: flex-start; }
.quote-grid .rush { background: var(--orange-soft); }
.quote-grid .rush strong { color: var(--orange); }
.price-note strong.inline { display: inline; font-size: inherit; color: var(--text); }
input[data-caps]::placeholder { text-transform: none; }

/* ---- reports */
.report-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.report-tab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 16px; }
.report-tab:hover { text-decoration: none; border-color: var(--line-strong); }
.report-tab .ic { color: var(--accent); }
.report-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.report-tab.active .ic { color: #fff; }
.report-filters .select { max-width: 220px; }
.report-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-card { margin-top: 0 !important; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h2 { font-size: 18.5px; margin-bottom: 12px; }
.chart { min-height: 120px; position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis, .donut .axis { fill: var(--text-3); font: 13px var(--font); }
.chart-svg rect, .chart-svg circle, .donut path { cursor: default; transition: opacity .15s; }
.chart-svg rect:hover, .donut path:hover { opacity: .8; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 15px; color: var(--text-2); }
.chart-legend i, .donut-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart-empty { display: grid; place-items: center; height: 160px; color: var(--text-3); font-size: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.chart-tip { position: fixed; z-index: 100; pointer-events: none; background: #1d1d1f; color: #fff; font-size: 15px; line-height: 1.4; padding: 7px 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: 260px; }
.chart-tip span { opacity: .7; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 16px; }
.hbar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.hbar-track { display: flex; height: 16px; border-radius: var(--radius-sm); background: var(--fill-2); overflow: hidden; }
.hbar-track span { height: 100%; }
.hbar-val { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { width: 180px; height: 180px; flex: none; }
.donut-total { fill: var(--text); font: 700 23.5px var(--font); }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.donut-legend div { display: grid; grid-template-columns: auto 1fr auto 44px; align-items: center; gap: 6px; }
.donut-legend span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend small { color: var(--text-3); text-align: right; }
.print-only { display: none; }
@media (max-width: 1000px) { .chart-grid { grid-template-columns: 1fr; } }
@media print {
  .page-reports .sidebar, .page-reports .topbar, .page-reports .tabbar, .page-reports .site-footer, .page-reports .report-tabs, .page-reports .report-filters, .page-reports .no-print { display: none !important; }
  .page-reports .main { margin: 0 !important; }
  .page-reports .content { padding: 0 !important; }
  .page-reports .print-only { display: block; margin-bottom: 12px; }
  .page-reports .card { box-shadow: none; break-inside: avoid; }
  .page-reports .chart-grid { grid-template-columns: 1fr 1fr; }
}

/* Per-product notes on the label form; side band text never touches the ends */
.product-notes { gap: 8px; }
.product-note-list { display: flex; flex-direction: column; gap: 6px; }
.product-note-list[hidden], .product-note-row[hidden] { display: none; }
.product-note-row { display: flex; align-items: center; gap: 8px; }
.product-note-row .input { flex: 1; }
.ep-band span { padding: 4pt 0; box-sizing: border-box; }
/* Footer row: center chip, then Settings / light-dark / sign out, always on one line */
.sidebar-foot { column-gap: 2px; }
.sidebar-foot .foot-chip { flex: 0 1 auto; min-width: 0; max-width: 118px; }
.sidebar-foot .foot-spacer { flex: 1 1 0; min-width: 0; }
.sidebar-foot .icon-btn { width: 32px; height: 32px; flex: none; }
.sidebar-foot a.icon-btn.active { background: var(--fill); color: var(--accent); }

/* One note per product, each with its own quick-fill buttons (scroll sideways on phones) */
.product-note-list { gap: 12px; }
.product-note-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--radius-sm); background: var(--fill-2); }
.product-note-row:focus-within { box-shadow: 0 0 0 2px var(--accent-soft); }
.pn-line { display: flex; align-items: center; gap: 8px; }
.pn-line .input { flex: 1; min-width: 0; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-chips[hidden] { display: none; }
@media (max-width: 860px) {
  .pn-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; scroll-snap-type: x proximity; }
  .pn-chips::-webkit-scrollbar { display: none; }
  .pn-chips .chip { flex: none; max-width: none; padding: 8px 14px; font-size: 16px; scroll-snap-align: start; }
  .pn-line .input { min-height: 46px; font-size: 17.5px; }
  .product-note-row { padding: 10px; }
}
.label-editor > form, .product-notes, .product-note-list, .product-note-row, .pn-chips { min-width: 0; max-width: 100%; }
@media (max-width: 860px) { .topbar { gap: 6px; } .topbar > .btn, .topbar > a.btn { flex: none; } .main { min-width: 0; overflow-x: clip; } }

/* Product notes: label above, box and quick fills flush left */
.product-note-row { align-items: stretch; text-align: left; }
.pn-label { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 0; }
.product-note-row > .input { width: 100%; margin: 0; }
.pn-chips { justify-content: flex-start; }
@media (max-width: 860px) { .product-note-row > .input { min-height: 46px; font-size: 17.5px; } }
.product-note-row > .suggest-wrap { display: block; width: 100%; }
.product-note-row > .suggest-wrap > .input { width: 100%; }
@media (max-width: 860px) { .hide-sm { display: none; } }
.typed-notes li form { margin: 0; }

/* ---- View as (admins) */
.view-as-bar { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: #5b2a9e; color: #fff; font-size: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.va-eye { font-size: 19.5px; }
.va-text { flex: 1; min-width: 180px; }
.va-sub { opacity: .8; margin-left: 6px; }
.view-as-bar form { margin: 0; }
.va-switch select { max-width: 280px; height: 32px; border-radius: var(--radius-sm); border: 0; padding: 0 8px; font: 16px var(--font); background: rgba(255,255,255,.95); color: #1d1d1f; }
.va-exit { height: 32px; padding: 0 16px; border-radius: var(--radius-pill); border: 0; background: #fff; color: #5b2a9e; font: 600 16px var(--font); cursor: pointer; }
body.is-viewing-as .sidebar { top: 48px; }
body.is-viewing-as .topbar { top: 48px; }
.va-start { margin: 0 0 0 auto; }
@media (max-width: 860px) { .va-sub { display: block; margin: 0; } .va-switch { flex: 1; } .va-switch select { width: 100%; max-width: none; } body.is-viewing-as .sidebar { top: 0; } }

/* ---- admin view switcher */
.view-switch { margin: 0; display: flex; align-items: center; gap: 8px; }
.view-switch-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.nav-view-switch { padding: 0 6px 12px; flex-wrap: wrap; }
.nav-view-switch .segmented { flex-wrap: nowrap; width: 100%; }
.nav-view-switch .seg-btn { flex: 1 1 auto; min-width: 0; padding: 5px 3px; font-size: 13px; }
.va-switch .view-switch-label { color: rgba(255,255,255,.8); }
.va-switch .segmented { background: rgba(255,255,255,.18); }
.va-switch .seg-btn { color: #fff; }
.va-switch .seg-btn.active { background: #fff; color: #5b2a9e; }
.overdue-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.overdue-person { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--text); background: var(--surface); }
.overdue-person:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.overdue-person .small:last-child { color: var(--accent); font-weight: 600; margin-top: 4px; }
.recog-link { display: flex; align-items: center; gap: 14px; color: var(--text); margin-bottom: 16px; }
.recog-link:hover { text-decoration: none; border-color: var(--accent); }
.recog-link > .ic:first-child { width: 28px; height: 28px; color: var(--accent); }
.fillers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.fillers .fillers-label { font-size: 14px; color: var(--text-3); font-weight: 600; margin-right: 2px; }
.fillers [data-fill] { border: 1px dashed var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: var(--radius-pill); padding: 4px 11px; font: 500 15px var(--font); cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fillers [data-fill]:hover { border-color: var(--accent); color: var(--accent); }
.fillers [data-fill].picked { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
@media (max-width: 860px) { .fillers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .fillers::-webkit-scrollbar { display: none; } .fillers [data-fill] { flex: none; padding: 7px 13px; } }

.template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.template-option { position: relative; cursor: pointer; }
.template-option input { position: absolute; opacity: 0; }
.template-option span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.template-option i { width: 28px; height: 6px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.template-option small { font-size: 14px; line-height: 1.35; }
.template-option input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.template-option input:focus-visible + span { outline: 2px solid var(--accent); }
.lesson-title-fillers { padding: 0 32px 10px; }
@media (max-width: 860px) { .lesson-title-fillers { padding: 0 16px 10px; } .template-picker { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- FASTFLOW brand */
.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo .brand-text strong { letter-spacing: 0.04em; font-weight: 800; }
.brand-logo .brand-text strong em { font-style: normal; color: var(--brand); }
:root[data-theme="dark"] .brand-logo .brand-text strong em { color: #ff5a6e; }
.brand:has(.brand-logo.has-image) { padding: 0 2px 14px; display: block; }
.brand-logo.has-image { display: block; width: 100%; }
.brand-logo.has-image img { width: 100%; height: auto; max-width: none; object-fit: contain; }
.sidebar-collapsed .brand-logo.has-image img { width: 100%; }
.brand-logo .logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo .logo-light { display: none; }
:root[data-theme="dark"] .brand-logo .logo-dark { display: block; }

/* ------------------------------------------------------------- notifications bell */
.bell-btn { position: relative; }
.bell-dot { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--red); color: #fff;
  font: 700 13px/17px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li + li { border-top: 1px solid var(--line); }
.notif-item { display: flex; gap: 12px; padding: 14px 20px; color: var(--text); align-items: flex-start; }
.notif-item:hover { background: var(--fill-2); text-decoration: none; }
.notif-item .notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.notif-item.is-read .notif-dot { background: transparent; }
.notif-item.is-read strong { font-weight: 500; }
.notif-item span { display: block; }

/* ------------------------------------------------------------- request forms */
.tone-blue { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tone-green { --tone: var(--green); --tone-soft: var(--green-soft); }
.tone-orange { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.tone-purple { --tone: var(--purple); --tone-soft: var(--purple-soft); }
.tone-red { --tone: var(--red); --tone-soft: var(--red-soft); }
.tone-gray { --tone: var(--text-2); --tone-soft: var(--fill); }
.form-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.form-tile { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--text); transition: transform .12s ease, border-color .12s ease; }
.form-tile:hover { text-decoration: none; border-color: var(--tone); transform: translateY(-1px); }
.form-tile .ft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-tile .nav-badge { position: absolute; top: 12px; right: 12px; }
.rf-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 23.5px; background: var(--tone-soft); color: var(--tone); flex: none; }
.request-form { max-width: 820px; }
.request-form-head { display: flex; gap: 16px; align-items: center; border-top: 5px solid var(--tone); }
.request-form-head h2 { margin-bottom: 2px; }
.request-form-head p { margin: 0; }
.request-form .card + .card, .request-form .notice { margin-top: 16px; }
.form-section { font-size: 17px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 14px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-section[hidden], .field[hidden] { display: none; }
.req { color: var(--red); }
.choice-list { display: flex; flex-direction: column; gap: 2px; }
.choice-list.choice-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 17px; min-width: 0; }
.choice:hover { background: var(--fill-2); }
.choice input[type=radio], .choice input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--accent); flex: none; margin: 0; }
.choice-row .choice { border: 1px solid var(--line-strong); padding: 8px 14px; }
.choice-row .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-other .input { flex: 1; min-width: 0; }
.input-sm { min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 16px; }
.file-drop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer; font-weight: 500; }
.file-drop:hover { border-color: var(--accent); color: var(--accent); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop span { display: inline-flex; align-items: center; gap: 8px; }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--fill); color: var(--text); font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .ic { width: 15px; height: 15px; }
.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.request-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.request-layout aside .card + .card, .request-layout aside form + .card, .request-layout aside .card + form { margin-top: 16px; }
.request-layout .request-form-head { margin-bottom: 16px; }
.answers { margin: 0; display: grid; gap: 0; }
.answer { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 16px; }
.answer:last-child { border-bottom: 0; }
.answer dt { color: var(--text-2); font-size: 16px; }
.answer dd { margin: 0; overflow-wrap: anywhere; }
.answer-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.answer-files { display: flex; flex-wrap: wrap; gap: 8px; }
.answer-files img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
@media (max-width: 900px) {
  .request-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .answer { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .request-form-head { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- job board */
.kind-blue { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.kind-green { --tone: var(--green); --tone-soft: var(--green-soft); }
.kind-orange { --tone: var(--orange); --tone-soft: var(--orange-soft); }
.kind-purple { --tone: var(--purple); --tone-soft: var(--purple-soft); }
.kind-red { --tone: var(--red); --tone-soft: var(--red-soft); }
.kind-gray { --tone: var(--text-3); --tone-soft: var(--fill); }
.ic.flip { transform: scaleX(-1); }
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: inline; } }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.board-heading { font-size: 21.5px; margin-left: 6px; white-space: nowrap; }
.board-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 12px; font-size: 15px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; background: var(--tone); }
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: stretch; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.board-col { flex: 1 0 196px; min-width: 196px; background: var(--fill-2); border-radius: var(--radius); display: flex; flex-direction: column; scroll-snap-align: start; }
.board-col.is-weekend { flex: 0 0 150px; min-width: 150px; }
.board-col header strong, .board-col header .col-date { white-space: nowrap; }
.board-toolbar .select { width: auto; max-width: 200px; }
.board-toolbar form { flex-wrap: nowrap; }
.board-col.col-unscheduled { background: var(--orange-soft); }
.board-col.is-today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.board-col.is-past:not(.is-today) header { opacity: .6; }
.board-col header { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 12px; font-size: 16px; }
.board-col header .col-date { color: var(--text-2); }
.board-col header .col-count { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text-2); background: var(--surface); border-radius: var(--radius-sm); padding: 1px 7px; }
.board-col header .icon-btn { width: 28px; height: 28px; }
.board-col header .icon-btn .ic { width: 17px; height: 17px; }
.board-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 12px; min-height: 90px; border-radius: var(--radius-sm); transition: background .12s; }
.board-list.drop-hover { background: var(--fill); }
.job-card { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 9px 13px; background: var(--surface); border-radius: var(--radius-sm); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.03); border: 1px solid var(--line); border-left: 4px solid var(--tone);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; font-size: 16px; position: relative; }
.job-card:hover { text-decoration: none; border-color: var(--line-strong); border-left-color: var(--tone); box-shadow: var(--shadow); }
.job-card .jc-top { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tone); }
.job-card .jc-time { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.job-card .jc-title { font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.job-card .jc-sub, .job-card .jc-meta { font-size: 15px; color: var(--text-2); line-height: 1.3; overflow-wrap: anywhere; }
.job-card .jc-foot { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-height: 4px; }
.job-card .jc-foot .pill { height: 20px; font-size: 13px; padding: 0 7px; margin-right: auto; }
.job-card .jc-who { width: 24px; height: 24px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.job-card.is-done { opacity: .62; }
.job-card.is-done .jc-title { text-decoration: line-through; text-decoration-color: var(--text-3); }
.job-card.is-compact { padding: 5px 8px 5px 9px; gap: 1px; font-size: 14px; border-radius: var(--radius-sm); border-left-width: 3px; }
.job-card.is-compact .jc-top { font-size: 13px; }
.job-card.is-compact .jc-kind { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card.is-compact .jc-title { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-card.is-compact .jc-foot { display: none; }
.job-card.is-dragging { opacity: .35; }
.job-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; box-shadow: 0 16px 40px rgba(0,0,0,.25); opacity: .95; }
body.is-board-dragging, body.is-board-dragging * { cursor: grabbing !important; }
/* month */
.month-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line); gap: 1px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.month-dow { background: var(--surface-2); padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.month-cell { background: var(--surface); min-height: 118px; display: flex; flex-direction: column; min-width: 0; }
.month-cell.is-out { background: var(--surface-2); }
.month-cell.is-out .month-day a { color: var(--text-3); }
.month-cell.is-today .month-day a { background: var(--accent); color: #fff; }
.month-day { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0 6px; }
.month-day a { font-size: 15px; font-weight: 600; color: var(--text); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.month-day .icon-btn { width: 24px; height: 24px; opacity: 0; }
.month-cell:hover .month-day .icon-btn { opacity: 1; }
.month-day .icon-btn .ic { width: 15px; height: 15px; }
.month-cell .board-list { gap: 4px; padding: 2px 4px 6px; min-height: 60px; }
.month-side { position: sticky; top: 76px; max-height: calc(100vh - 100px); }
.month-side .board-list { overflow-y: auto; }
/* job details (panel + page) */
.drawer-close { position: absolute; top: 14px; right: 14px; }
.drawer-loading { padding: 40px; text-align: center; color: var(--text-2); }
#jobDrawerBody { position: relative; }
.job-head h2 { font-size: 25.5px; margin: 10px 0 2px; overflow-wrap: anywhere; }
.job-when { display: flex; align-items: center; gap: 6px; color: var(--text-2); margin: 8px 0 0; font-weight: 500; }
.job-when .ic { width: 17px; height: 17px; }
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.job-actions form { margin: 0; }
.job-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.job-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.job-facts dt { color: var(--text-2); font-size: 16px; }
.job-facts dd { margin: 0; overflow-wrap: anywhere; }
.job-notes { margin-top: 14px; padding: 12px 14px; background: var(--fill-2); border-radius: var(--radius-sm); font-size: 17px; }
.pod-box { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--green-soft); }
.pod-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.pod-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.pod-sig { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pod-sig img { width: 180px; max-width: 100%; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.pod-send { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kind-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.kind-option { cursor: pointer; }
.kind-option input { position: absolute; opacity: 0; pointer-events: none; }
.kind-option span { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 16px; font-weight: 500; }
.kind-option input:checked + span { background: var(--tone-soft); border-color: var(--tone); color: var(--tone); }
.kind-option input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.job-edit-compact .grid-2 { grid-template-columns: minmax(0, 1fr); }
.job-edit-compact .span-2 { grid-column: auto; }
@media (max-width: 1100px) { .month-wrap { grid-template-columns: minmax(0, 1fr); } .month-side { position: static; max-height: none; } }
@media (max-width: 860px) {
  .board-col, .board-col.is-weekend { flex: 0 0 78vw; min-width: 0; }
  .hide-sm { display: none; }
  .month-cell { min-height: 84px; }
  .month .job-card.is-compact .jc-top { display: none; }
  .job-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ------------------------------------------------------------- routes */
.routes-board .board-col { flex: 1 0 230px; min-width: 230px; }
.board-list.numbered { counter-reset: stop; }
.board-list.numbered .job-card { padding-left: 36px; }
.board-list.numbered .job-card::before { counter-increment: stop; content: counter(stop); position: absolute; left: 9px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tone); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.jc-who-lg { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.route-link { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 10px 12px; font-size: 16px; font-weight: 500; }
.route-link .ic { width: 17px; height: 17px; }
.route-go { margin-bottom: 14px; height: 50px; font-size: 17.5px; }
.stop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.stop { display: flex; gap: 14px; background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); border-left: 5px solid var(--tone); }
.stop.is-done { opacity: .6; }
.stop-num { width: 32px; height: 32px; border-radius: 50%; background: var(--tone); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stop-title { font-size: 19.5px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.stop-notes summary { cursor: pointer; font-size: 16px; color: var(--accent); margin-top: 4px; }
.stop-notes div { font-size: 16px; padding: 8px 10px; background: var(--fill-2); border-radius: var(--radius-sm); margin-top: 6px; }
.stop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.stop-actions form { margin: 0; }
@media (max-width: 640px) {
  .stop { padding: 14px 12px; gap: 10px; }
  .stop-actions .btn { height: 40px; padding: 0 14px; font-size: 16px; flex: 1 0 auto; }
  .routes-board .board-col { flex: 0 0 82vw; }
}

/* ------------------------------------------------------------- complete a job (phone) */
.complete-form { max-width: 640px; }
.complete-head { border-left: 5px solid var(--tone); }
.complete-head h2 { margin: 8px 0 2px; font-size: 23.5px; }
.complete-form .card + .card { margin-top: 14px; }
.seg-block { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.seg-block label { cursor: pointer; }
.seg-block input { position: absolute; opacity: 0; pointer-events: none; }
.seg-block span { display: block; text-align: center; padding: 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: 17px; }
.seg-block input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.photo-add { aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; padding: 6px; }
.photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-add .ic { width: 28px; height: 28px; }
.photo-thumb { position: relative; aspect-ratio: 1; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 14px; }
.sig-pad { position: relative; height: 190px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sig-pad canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sig-hint { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: #b0b0b5; pointer-events: none; border-top: 1px dashed #d2d2d7; margin: 0 24px; padding-top: 6px; font-size: 16px; }
.sig-hint[hidden] { display: none; }
#sigField[hidden], #signerField[hidden] { display: none; }

/* ------------------------------------------------------------- site surveys */
.survey-list { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.survey-list .card + .card { margin-top: 0; }
.survey-card { display: flex; gap: 16px; align-items: flex-start; border-left: 5px solid var(--purple); }
.survey-card.needs-rep { border-left-color: var(--orange); }
.survey-main { flex: 1; min-width: 0; }
.survey-main h3 { margin: 8px 0 2px; font-size: 19.5px; }
.survey-main h3 a { color: var(--text); }
.survey-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--text-2); }
.survey-about { margin: 8px 0 0; font-size: 16px; color: var(--text-2); }
.survey-side { display: flex; flex-direction: column; gap: 8px; flex: none; }
@media (max-width: 640px) { .survey-card { flex-direction: column; } .survey-side { flex-direction: row; flex-wrap: wrap; } }

/* ------------------------------------------------------------- people picker */
.people-picker { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px; background: var(--surface); }
.pp-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 26px; align-items: center; }
.pp-picked { border: 0; background: var(--accent); color: #fff; border-radius: var(--radius-pill); padding: 4px 11px; font: 600 15px var(--font); cursor: pointer; }
.pp-search { width: 100%; margin-bottom: 6px; }
.pp-groups { max-height: 210px; overflow-y: auto; }
.pp-group[hidden], .pp-chip[hidden] { display: none; }
.pp-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 8px 0 4px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pp-chip span { display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; }
.pp-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pp-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.job-card .jc-more { background: var(--fill); color: var(--text-2); }
.job-card .jc-foot { gap: 3px; }

/* ------------------------------------------------------------- live tracking */
.track-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; max-width: 720px; }
.track-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.track-tip { color: var(--text-3); display: none; }
.track-card.is-on .track-tip { display: block; }
.track-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); flex: none; }
.track-card[data-state="live"] .track-dot { background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: livepulse 1.8s infinite; }
.track-card[data-state="wait"] .track-dot { background: var(--orange); }
.track-card[data-state="warn"] .track-dot { background: var(--red); }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 70% { box-shadow: 0 0 0 12px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
.live-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; margin-bottom: 18px; min-height: 360px; }
#liveMap { min-height: 360px; z-index: 0; }
.live-side { padding: 16px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.live-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 300px; }
.live-row { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: none; border: 0; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text); }
.live-row:hover { background: var(--fill-2); }
.live-row > span:last-child { display: flex; flex-direction: column; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; }
.live-dot.is-stale { opacity: .35; }
.live-pin-wrap { background: none; border: 0; }
.live-pin { width: 36px; height: 36px; border-radius: 50%; background: var(--pin); color: #fff; font: 700 14px/32px var(--font); text-align: center; display: block; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.live-pin.is-stale { filter: grayscale(.8); opacity: .7; }
.leaflet-popup-content { font: 16px/1.45 var(--font); }
@media (max-width: 860px) { .live-wrap { grid-template-columns: minmax(0, 1fr); } .live-side { border-left: 0; border-top: 1px solid var(--line); } #liveMap { min-height: 300px; } }
@media (max-width: 640px) { .track-card { flex-wrap: wrap; } .track-card .btn { width: 100%; } }
#liveMap.map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }

/* ------------------------------------------------------------- survey pipeline */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pipe-step { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); border-top: 4px solid var(--tone); }
.pipe-step:hover { text-decoration: none; border-color: var(--tone); }
.pipe-step.is-active { background: var(--tone-soft); border-color: var(--tone); }
.pipe-step strong { font-size: 25.5px; line-height: 1.1; letter-spacing: -.02em; }
.pipe-step span { font-size: 15px; color: var(--text-2); }
.survey-toolbar .select { max-width: 210px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; white-space: nowrap; }
.survey-count { margin: 4px 0 10px; }
.survey-table td { vertical-align: top; }
.survey-table .sv-client { max-width: 320px; }
.survey-table .sv-note { max-width: 300px; }
.text-red { color: var(--red); font-weight: 600; }
.show-md { display: none; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; }
.survey-head h2 { font-size: 27px; margin: 10px 0 6px; }
.survey-addr { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.survey-addr .ic, .survey-contact .ic { width: 16px; height: 16px; }
.survey-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 17px; }
.survey-contact > * { display: inline-flex; align-items: center; gap: 6px; }
.pipe-steps { list-style: none; display: flex; margin: 18px 0 0; padding: 0; }
.pipe-steps li { flex: 1; text-align: center; font-size: 14px; color: var(--text-3); position: relative; }
.pipe-steps li span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--fill); margin: 0 auto 6px; position: relative; z-index: 1; }
.pipe-steps li::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 3px; background: var(--fill); }
.pipe-steps li:first-child::before { display: none; }
.pipe-steps li.done span, .pipe-steps li.done::before { background: var(--accent); }
.pipe-steps li.done { color: var(--text-2); }
.pipe-steps li.current { color: var(--text); font-weight: 700; }
.pipe-steps li.current span { box-shadow: 0 0 0 4px var(--accent-soft); }
.note-form { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.note-form .fillers { margin-top: 8px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.tl-body { margin-top: 2px; overflow-wrap: anywhere; }
.inline-form { display: inline; margin-left: 6px; }
.stage-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stage-option { cursor: pointer; }
.stage-option input { position: absolute; opacity: 0; pointer-events: none; }
.stage-option span { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 16px; font-weight: 500; }
.stage-option input:checked + span { background: var(--tone-soft); border-color: var(--tone); color: var(--tone); }
@media (max-width: 860px) { .hide-md { display: none; } .show-md { display: block; } .survey-toolbar .select { max-width: none; flex: 1 1 140px; } }
.auth-brand { display: flex; justify-content: center; margin: 0 auto 14px; }
.auth-brand .brand-text { display: none; }
.auth-brand .brand-mark { width: 56px; height: 56px; border-radius: var(--radius); font-size: 21.5px; }
.auth-brand.has-image { width: 100%; }
.auth-brand.has-image img { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.auth-brand.has-image + h1 { display: none; }
.auth-brand .logo-dark { display: none; }
:root[data-theme="dark"] .auth-brand .logo-light { display: none; }
:root[data-theme="dark"] .auth-brand .logo-dark { display: block; }
.auth-brand.has-image .logo-light { display: block; }

/* ------------------------------------------------------------- temporary password alert (Settings) */
.pw-alert { position: relative; max-width: 720px; margin-bottom: 24px; border: 2px solid var(--red); background: linear-gradient(180deg, var(--red-soft), var(--surface) 140px);
  animation: pw-in .5s cubic-bezier(.2, .9, .3, 1.3) both, pw-pulse 2.2s ease-in-out .6s infinite; }
.pw-alert-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.pw-alert-head h2 { font-size: 23.5px; margin-bottom: 2px; }
.pw-alert-head p { margin: 0; color: var(--text-2); }
.pw-alert-icon { width: 54px; height: 54px; border-radius: var(--radius); background: var(--red); color: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 18px rgba(215, 0, 21, .35); animation: pw-wobble 2.2s ease-in-out .6s infinite; transform-origin: 50% 20%; }
.pw-alert-icon svg { width: 30px; height: 30px; }
.pw-alert .btn-lg { width: 100%; }
.pw-alert .form-actions { margin-top: 4px; }
@keyframes pw-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pw-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 0, 21, .35); } 50% { box-shadow: 0 0 0 10px rgba(215, 0, 21, 0); } }
@keyframes pw-wobble { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-12deg); } 74% { transform: rotate(10deg); } 82% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .pw-alert, .pw-alert-icon { animation: none; } }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 70px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--fill); color: var(--text-2); border-radius: var(--radius-sm); padding: 5px 10px; font: 600 14px var(--font); cursor: pointer; }
.pw-eye:hover { color: var(--accent); }
.pw-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--text-3); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--green); }
.pw-rules li.ok::before { content: "✓ "; font-weight: 700; }
@media (min-width: 861px) { .pw-alert .pw-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .pw-alert .pw-fields .field:first-child { grid-column: span 2; } }

/* ------------------------------------------------------------- locked until the temporary password is changed */
.nav-lock-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.is-locked .nav, .is-locked .nav-view-switch, .is-locked .topbar-search, .is-locked .search-mobile, .is-locked .bell-btn, .is-locked .foot-chip, .is-locked .tabbar {
  filter: grayscale(1) blur(.4px); opacity: .32; pointer-events: none; user-select: none; transition: opacity .3s; }
.is-locked .nav-view-switch { display: none; }
.nav-lock { position: absolute; z-index: 2; left: 6px; right: 6px; top: 34px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 18px 14px; border-radius: var(--radius); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); color: var(--text); animation: pw-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.nav-lock:hover { text-decoration: none; border-color: var(--red); }
.nav-lock strong { font-size: 17px; }
.nav-lock span:last-child { font-size: 15px; color: var(--text-2); line-height: 1.35; }
.nav-lock-icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--text-3); color: #fff; display: grid; place-items: center; margin-bottom: 4px; animation: pw-wobble 2.2s ease-in-out .6s infinite; transform-origin: 50% 20%; }
.nav-lock-icon svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .nav-lock, .nav-lock-icon { animation: none; } }
.is-locked .nav-lock-wrap::before { content: ""; position: absolute; inset: 0 -4px; z-index: 1; border-radius: var(--radius); background: rgba(120, 120, 128, .14); pointer-events: none; }

/* ------------------------------------------------------------- Epson tag, 4" x 2" (v0.9.4) */
/* Taller boxes: bigger QR codes, product # and sign maker centered with room above (for the little caption) and below. */
.ep-qr { width: 0.6in; height: 0.6in; max-height: 0.6in; }
.ep-qrs { --qr: min(0.6in, 100%); }
.ep-row { flex: 1.15; }
.ep-product-body { padding: 8pt 3pt 3pt; align-items: center; }
.ep-product-no { font-size: 40pt; line-height: 1.15; padding: 0; }
.ep-maker { padding: 8pt 3pt 3pt; align-items: center; }
.ep-maker-name { font-size: 26pt; line-height: 1.15; text-align: center; overflow-wrap: normal; }
.ep-maker-name[style*="white-space: normal"] { line-height: 1.02; }
.ep-p { font-size: 40pt; }
.ep-invoice-no { font-size: 44pt; line-height: 1.15; }
.ep-invoice:has(.ep-notes:not(.is-empty)) .ep-invoice-no { font-size: 34pt; }
.ep-notes { font-size: 8pt; }
/* The side band: wider, and the word grows to fill it (sized by the label script). */
.ep-band { width: 0.42in; }
.ep-band span { padding: 3pt 0; line-height: 0.86; font-size: 30pt; letter-spacing: 0.4pt; display: flex; align-items: center; justify-content: center; width: 100%; }
/* The official FASTSIGNS logo (assets/fastsigns-logo.svg / .png), turned to run up the side and printed black. */
.ep-logo-img { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; }
.ep-logo-img img { position: absolute; left: 50%; top: 50%; width: calc(var(--lh) - 0.2in); height: auto; max-height: 0.27in; object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg); filter: brightness(0); }
.ep-logo-img img { width: calc(var(--lh) - 0.14in); max-height: 0.3in; }

/* ------------------------------------------------------------- Google sign-in */
.google-card { text-align: center; }
.google-btn { display: flex; justify-content: center; min-height: 44px; }
.google-msg { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 16px; background: var(--fill); }
.google-msg.is-error { background: var(--red-soft); color: var(--red); font-weight: 500; }
.google-msg.is-pending { background: var(--green-soft); color: var(--text); }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 15px; margin: 16px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

/* ------------------------------------------------------------- people: bulk add + sign-ups */
.import-table td { vertical-align: top; padding: 8px 6px !important; }
.import-table .input-sm, .import-table .select-sm { min-width: 96px; }
.import-table tr.is-existing { background: var(--fill-2); }
.import-table code, #resultsTable code { font-size: 15px; }
.signup-card { border: 2px solid var(--orange); margin-bottom: 20px; }
.signup-card .list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.signup-card .list { list-style: none; margin: 0; padding: 0; }
.signup-card form { margin: 0; }

/* Epson tag 4.5" x 2" (v0.9.5): the extra half inch goes to the info column so both QR codes fit beside their captions. */
.ep-info { width: 1.85in; }
.ep-qrs { justify-content: space-between; gap: 3pt; }
.ep-qr { width: 0.62in; height: 0.62in; max-height: 0.62in; }
.temp-pw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--orange-soft); font-size: 15px; }
.temp-pw-chip code { font-size: 15px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
tr.is-off td { opacity: .55; }
.person-center { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: var(--text); }
.person-center .ic { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.person-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* On hold column */
.board-col.col-hold { background: repeating-linear-gradient(135deg, var(--fill-2) 0 10px, transparent 10px 20px), var(--purple-soft); }
.board-col.col-hold header strong::before { content: "⏸ "; }
.month-side > header + .board-list + header { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.col-hint { margin: 8px 4px; font-size: 15px; color: var(--text-3); text-align: center; }
.board-list.drop-hover .col-hint { display: none; }

/* ------------------------------------------------------------- job preview pictures */
.job-card .jc-preview { display: block; margin: -2px -4px 4px -6px; border-radius: var(--radius-sm); overflow: hidden; background: var(--fill-2); aspect-ratio: 16 / 9; }
.job-card .jc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.job-preview { margin: 14px 0 4px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 12px; transition: border-color .15s, background .15s; }
.job-preview.has-image { border-style: solid; border-color: var(--line); padding: 8px; }
.job-preview img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--radius-sm); background: var(--fill-2); }
.job-preview-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.job-preview:not(.has-image) .job-preview-bar { margin-top: 0; justify-content: center; }
.job-preview-bar [data-preview-text] { display: inline-flex; align-items: center; gap: 6px; }
.job-preview-bar .ic { width: 16px; height: 16px; }
.job-preview.is-over, .preview-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.job-preview.is-busy { opacity: .6; pointer-events: none; }
.preview-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-2); font-size: 16px; text-align: center; }
.preview-drop:hover { border-color: var(--accent); color: var(--accent); }
.preview-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.preview-drop img { max-width: 100%; max-height: 180px; border-radius: var(--radius-sm); display: block; }
.preview-drop span { display: inline-flex; align-items: center; gap: 6px; }
.preview-drop .ic { width: 16px; height: 16px; }
/* the job pop-up (centered, instead of a side panel) */
.modal.job-modal { max-width: min(760px, calc(100vw - 32px)); }
.job-modal .modal-card { position: relative; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 26px 28px; }
.job-modal[open] { animation: pw-in .25s ease both; }

/* ------------------------------------------------------------- company phones */
.route-phone { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 8px 6px 12px; margin: 0; }
.route-phone .select-sm { min-height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: 15px; max-width: 100%; flex: 1; min-width: 0; }
.phone-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line-strong); font-size: 15px; white-space: nowrap; }
.phone-chip strong { font-variant-numeric: tabular-nums; }
.phone-today { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; max-width: 720px; padding: 12px 16px; }

/* ------------------------------------------------------------- labels list */
.labels-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.labels-new { height: 56px; padding: 0 30px; font-size: 19.5px; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 113, 227, .25); }
.labels-new .ic { width: 22px; height: 22px; }
.page-big-title { font-size: 31px; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 640px) { .labels-new { width: 100%; justify-content: center; } .page-big-title { font-size: 27px; } }

/* ------------------------------------------------------------- FASTFLOW apps (/a/<app>/) */
.app-mode .main { margin-left: 0; width: 100%; }
.app-mode .shell { display: block; }
.app-topbar { gap: 10px; }
.app-brand { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.app-brand:hover { text-decoration: none; }
.app-logo.has-image img { height: 44px; width: auto; display: block; }
.app-logo.has-image img.logo-dark { display: none; }
:root[data-theme="dark"] .app-logo.has-image img.logo-light { display: none; }
:root[data-theme="dark"] .app-logo.has-image img.logo-dark { display: block; }
.app-logo:not(.has-image) .brand-text span { display: none; }
.app-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 19.5px; letter-spacing: -.01em; padding-left: 12px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.app-name .ic { width: 20px; height: 20px; color: var(--accent); }
.app-spacer { flex: 1; }
.app-switch { width: auto; max-width: 170px; }
.avatar-sm { width: 28px; height: 28px; font-size: 13px; }
.app-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 10px 32px 0; }
.app-tabs a.app-tab { padding: 7px 14px; border-radius: var(--radius-pill); color: var(--text-2); font-weight: 600; font-size: 16px; }
.app-tabs a.app-tab:hover { background: var(--fill); text-decoration: none; }
.app-tabs a.app-tab.active { background: var(--accent); color: #fff; }
.app-tabs-title { display: none; }
.app-footer { justify-content: center; }
.app-mode .content { padding-top: 18px; }
@media (max-width: 860px) {
  .app-logo.has-image img { height: 34px; }
  .app-name { font-size: 17.5px; padding-left: 8px; }
  .app-tabs { padding: 8px 14px 0; }
  .app-mode .content { padding-bottom: 40px; }
  .app-topbar .app-switch { max-width: 110px; }
}
@media (max-width: 480px) { .app-logo.has-image img { height: 28px; } .app-name .ic { display: none; } }
/* Admin → Apps */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.apps-grid .card + .card { margin-top: 0; }
.app-card-head { display: flex; gap: 14px; align-items: flex-start; }
.app-card-head h3 { margin-bottom: 2px; }
.app-card-head p { margin: 0; }
.app-card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.app-card-body { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.app-qr { width: 104px; height: 104px; flex: none; background: #fff; border-radius: var(--radius-sm); padding: 4px; border: 1px solid var(--line); }
.app-qr svg { width: 100%; height: 100%; display: block; }
.app-card-links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.app-link { font-size: 14.5px; overflow-wrap: anywhere; background: var(--fill-2); padding: 4px 8px; border-radius: var(--radius-sm); }
/* Staff → App access */
.app-mode-pick { max-width: 420px; }
.app-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.app-pick[hidden] { display: none; }
/* Page access on Staff → edit (v1.0.97) */
.page-pick { display: grid; gap: 10px; margin-top: 10px; }
.page-pick[hidden] { display: none; }
.page-pick-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 4px; }
.page-pick-tools { display: flex; gap: 6px; }

/* ------------------------------------------------------------- Epson tag, new design (v0.9.16) */
.label.lbl-ep2 {
  position: relative; padding: 0.085in 0.09in; gap: 0; display: flex; align-items: stretch;
  font-family: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif; line-height: 1.05; color: #000;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lbl-ep2::after { content: ""; position: absolute; inset: 0.045in; border: 1.2pt solid #000; border-radius: 3pt; pointer-events: none; z-index: 3; }
.lbl-ep2 > :not(.e2-quotes) { position: relative; z-index: 1; }
.lbl-ep2 .lbl-ph { color: #b8b8b8 !important; }
.e2-quotes { position: absolute; inset: 0.05in; width: calc(100% - 0.1in); height: calc(100% - 0.1in); fill: #000; opacity: 0.1; z-index: 0; }

/* left: the logo running up, then a rule */
.e2-brand { width: 0.33in; flex: none; position: relative; border-right: 2pt solid #000; margin-right: 4pt; }
.e2-logo { position: absolute; inset: 0; display: block; overflow: hidden; }
.e2-logo img { position: absolute; left: 50%; top: 50%; width: calc(var(--lh) - 0.2in); height: auto; max-height: 0.31in; object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg); filter: brightness(0); }
.e2-logo-text { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-family: Barlow, "Arial Black", Arial, sans-serif;
  font-weight: 900; font-style: italic; font-size: 26pt; line-height: 0.33in; }

/* middle: center, thank you, QR codes, sales consultant */
.e2-info { width: 1.78in; flex: none; display: flex; flex-direction: column; padding-right: 5pt; margin-right: 5pt; border-right: 4pt solid #000; min-width: 0; }
.e2-center { padding-bottom: 2pt; border-bottom: 1pt solid #000; }
.e2-center-name { font-weight: 700; font-size: 11pt; line-height: 1.02; white-space: nowrap; overflow: hidden; }
.e2-addr { font-size: 8.4pt; line-height: 1.05; white-space: nowrap; overflow: hidden; }
.e2-thanks { font-family: "Kaushan Script", "Brush Script MT", cursive; font-size: 15pt; line-height: 1.15; padding: 2pt 0 0 1pt; white-space: nowrap; }
.e2-qrs { flex: 1; min-height: 0; display: flex; align-items: center; gap: 2pt; padding: 1pt 0 3pt; border-bottom: 1pt solid #000; }
.e2-qr { width: 0.62in; height: 0.62in; flex: none; }
.e2-qr svg { width: 100%; height: 100%; display: block; }
.e2-qr-k { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; font-size: 6.6pt; letter-spacing: 0.5pt; line-height: 1; }
.e2-qr-k-review { align-self: flex-end; margin: 0 auto 2pt 0; }      /* low, beside the review QR, reading up */
.e2-qr-k-email { transform: none; align-self: flex-start; margin-top: 2pt; } /* high, beside the email QR, reading down */
.e2-qrs .is-empty { visibility: hidden; }
.e2-rep { padding-top: 2pt; font-size: 8.6pt; line-height: 1.08; }
.e2-rep > div { white-space: nowrap; overflow: hidden; }
.e2-rep-k { font-weight: 700; font-size: 9.6pt; }

/* right: invoice + notes, product # and sign maker, the black band */
.e2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4pt; }
.e2-box { border: 1.5pt solid #000; position: relative; min-width: 0; }
.e2-k { position: absolute; top: 1.5pt; right: 3pt; font-weight: 500; font-size: 6.2pt; letter-spacing: 0.3pt; line-height: 1; z-index: 1; }
.e2-invoice { flex: 1.15; display: flex; flex-direction: column; padding: 8pt 4pt 0; min-height: 0; }
.e2-invoice-no { flex: 1; display: flex; align-items: center; justify-content: center; font-family: Antonio, "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600; font-size: 40pt; line-height: 1.12; white-space: nowrap; overflow: hidden; letter-spacing: -0.4pt; font-variant-numeric: tabular-nums; }
.e2-notes { border-top: 1pt solid #000; padding: 1.5pt 1pt 2pt; font-size: 7.4pt; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e2-notes-k { font-weight: 500; font-size: 6.2pt; letter-spacing: 0.4pt; }
.e2-row { flex: 1.2; display: flex; gap: 4pt; min-height: 0; }
.e2-product { flex: 1.25; display: flex; }
.e2-p { width: 0.42in; flex: none; background: #000; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: Antonio, "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 38pt; line-height: 1; }
.e2-product-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7pt 2pt 1pt; }
.e2-product-no { font-family: Antonio, "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: 38pt; line-height: 1.12; white-space: nowrap; overflow: hidden; max-width: 100%; }
.e2-product-of { font-size: 8pt; line-height: 1; margin-top: -2pt; }
.e2-product-of:empty { display: none; }
.e2-maker { flex: 1; display: flex; align-items: center; padding: 8pt 4pt 2pt; }
.e2-maker-name { width: 100%; font-size: 20pt; line-height: 1.08; text-align: left; white-space: nowrap; overflow: hidden; }
.e2-maker-name[style*="white-space: normal"] { line-height: 1.02; }
.e2-band { height: 0.38in; flex: none; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 5pt; }
.e2-band span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: Barlow, "Arial Black", Arial, sans-serif;
  font-weight: 800; font-style: italic; letter-spacing: 1.2pt; line-height: 1; white-space: nowrap; overflow: hidden; font-size: 26pt; }
.lbl-ep2 .e2-band .lbl-ph { color: #777 !important; }

/* fit tweaks: the product # and invoice number size to their box's height too */
.e2-product-body { justify-content: stretch; }
.e2-product-no { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.e2-invoice-no { min-height: 0; }
.e2-qr { width: 0.57in; height: 0.57in; }
.e2-thanks { font-size: 14pt; line-height: 1.1; padding-top: 1.5pt; }

/* long center names wrap to two lines; the QR codes give up a little room when they do */
.e2-center-name[style*="white-space: normal"] { line-height: 1.04; white-space: normal; }
.e2-qrs { align-items: stretch; }
.e2-qr { width: auto; height: 100%; max-height: 0.57in; aspect-ratio: 1 / 1; align-self: center; }

/* ------------------------------------------------------------- reviews scoreboard */
.center-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.center-scores .card + .card { margin-top: 0; }
.center-score.is-leader { border: 2px solid #d4a017; box-shadow: 0 6px 24px rgba(212, 160, 23, .18); }
.cs-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; min-height: 36px; }
.cs-big { font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-grid > div { background: var(--fill-2); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.cs-grid strong { font-size: 19.5px; line-height: 1.1; }
.cs-grid span { font-size: 14px; color: var(--text-2); }
.cs-grid .cs-wide { grid-column: span 3; }
.text-green { color: var(--green); font-weight: 600; }
tr.is-me td { background: var(--accent-soft); }

/* ------------------------------------------------------------- leaderboard + contests */
.contest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 8px; }
.contest-grid .card + .card { margin-top: 0; }
.contest-card { color: var(--text); display: flex; flex-direction: column; gap: 4px; }
a.contest-card:hover { text-decoration: none; border-color: var(--accent); }
.contest-card h3 { font-size: 19.5px; margin-top: 8px; }
.contest-card.is-running { border-top: 4px solid var(--green); }
.contest-card.is-awarded { border-top: 4px solid #d4a017; }
.contest-prize { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(212,160,23,.18), rgba(200,16,46,.08)); font-weight: 600; font-size: 16px; }
.podium-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.podium-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--fill-2); font-size: 16px; }
.podium-list li.is-me { background: var(--accent-soft); }
.podium-list .medal { font-size: 19.5px; }
.podium-list .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.award-form .select-sm { flex: 1; min-width: 140px; }
.contest-empty { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.contest-empty p { margin: 4px 0 0; max-width: 620px; }
.metric-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.metric-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--text); font-size: 15px; font-weight: 600; background: var(--surface); }
.metric-chip .ic { width: 15px; height: 15px; }
.metric-chip:hover { text-decoration: none; border-color: var(--accent); }
.metric-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 6px 0 18px; }
.podium-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; text-align: center; }
.podium-spot strong { font-size: 17px; }
.podium-value { font-size: 23.5px; font-weight: 800; letter-spacing: -.02em; }
.podium-block { width: 100%; border-radius: var(--radius) var(--radius) 4px 4px; display: grid; place-items: center; font-size: 31px; color: #fff; margin-top: 6px; }
.place-1 .podium-block { height: 110px; background: linear-gradient(180deg, #f6d365, #d4a017); }
.place-2 .podium-block { height: 80px; background: linear-gradient(180deg, #d8dde3, #9aa3ad); }
.place-3 .podium-block { height: 60px; background: linear-gradient(180deg, #f0b27a, #c06c2b); }
.weights-card summary { cursor: pointer; }
.weights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; }
.weights-head { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 16px 0 8px; }
.weights-head:first-of-type { margin-top: 0; }
@media (max-width: 640px) { .podium-spot { width: 31%; } .podium-value { font-size: 18.5px; } .podium-spot .avatar-xl { width: 52px; height: 52px; } }

/* ------------------------------------------------------------- Fast menu (phone bottom bar) */
.tabbar a { position: relative; }
.tabbar a span:not(.tab-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-badge { position: absolute; top: 2px; left: 54%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
.fast-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
/* My account: the Fast Menu picker only shows where the bottom bar shows (phones, 860px and narrower) */
@media (min-width: 861px) { .fast-menu-card { display: none; } }

/* reviews: the side panel runs down the right of the whole page */
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.rv-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; }
.rv-side .card + .card { margin-top: 0; }
.rv-side .card { margin: 0; }
.rv-main .g-feed { margin-top: 8px; }
@media (max-width: 1100px) { .rv-layout { grid-template-columns: minmax(0, 1fr); } .rv-side { position: static; } }

.g-more { display: flex; align-items: center; gap: 12px; padding: 4px 24px 12px; }

/* ------------------------------------------------------------- notification bell dropdown */
.bell-pop { position: absolute; z-index: 200; width: 360px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; animation: pw-in .18s ease both; }
.bell-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bell-pop-list { max-height: 380px; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; padding: 11px 16px; color: var(--text); border-bottom: 1px solid var(--line); }
.bell-item:hover { background: var(--fill-2); text-decoration: none; }
.bell-item-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.bell-item.is-unread .bell-item-dot { background: var(--accent); }
.bell-item:not(.is-unread) strong { font-weight: 500; }
.bell-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 16px; }
.bell-item-text span { color: var(--text-2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell-item-text small { color: var(--text-3); font-size: 14px; }
.bell-empty { padding: 22px 16px; margin: 0; text-align: center; color: var(--text-2); }
.bell-pop-all { display: block; text-align: center; padding: 11px; font-weight: 600; font-size: 16px; }
@media (max-width: 600px) { .bell-pop { left: 12px; right: 12px; width: auto; } }

/* Named in reviews: its own time filter */
.named-range { margin: 0 16px 10px; display: flex; }
.named-range a { padding: 5px 10px; font-size: 14.5px; flex: 1 1 auto; text-align: center; }
.named-range a.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Reviews: who a review names (admins) */
.g-review-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.g-who-list { max-height: 320px; overflow-y: auto; margin: 10px 0 4px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px; }
.g-who-list .check { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.g-who-list .check[hidden] { display: none; }

/* "Thank you!" tilts up a little, like the hand-lettered sample */
.e2-thanks { transform: rotate(-4deg) translateY(1.5pt); transform-origin: 40% 50%; padding-left: 3pt; }

/* Picture popup for article and lesson images (app.js, a.ab-zoom) */
.ab-zoom { cursor: zoom-in; }
.zoom-pop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 56px 72px; background: rgba(0, 0, 0, .86); }
.zoom-pop.open { display: flex; }
.zoom-pop figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.zoom-pop img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: var(--radius-sm); background: #fff; cursor: default; }
.zoom-pop figcaption { color: rgba(255, 255, 255, .88); font-size: 17px; text-align: center; max-width: 720px; }
.zoom-x, .zoom-nav { position: absolute; border: 0; color: #fff; background: rgba(255, 255, 255, .14); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zoom-x { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 31px; line-height: 1; }
.zoom-nav { top: 50%; width: 48px; height: 48px; margin-top: -24px; font-size: 37px; line-height: 1; }
.zoom-prev { left: 12px; } .zoom-next { right: 12px; }
.zoom-x:hover, .zoom-nav:hover { background: rgba(255, 255, 255, .26); }
.zoom-pop.single .zoom-nav { display: none; }
html.zoom-lock { overflow: hidden; }
@media (max-width: 640px) { .zoom-pop { padding: 56px 8px 24px; } .zoom-nav { top: auto; bottom: 14px; margin-top: 0; } .zoom-prev { left: calc(50% - 60px); } .zoom-next { right: calc(50% - 60px); } }

/* Sub-pages under a menu item (Knowledge & HR categories, academies, reports) */
.nav-group { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav-group > .nav-item { padding-right: 44px; }
.nav-caret {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer;
}
.nav-caret .ic { width: 18px; height: 18px; transition: transform .15s ease; }
.nav-caret:hover { background: var(--fill-2); color: var(--text); }
.nav-group > .nav-item.active ~ .nav-caret { color: #fff; }
.nav-group > .nav-item.active ~ .nav-caret:hover { background: rgba(255,255,255,.18); }
.nav-group.open .nav-caret .ic { transform: rotate(90deg); }
.nav-sub { display: none; flex-direction: column; gap: 1px; margin: 0 0 4px 22px; padding-left: 12px; border-left: 2px solid var(--line); }
.nav-group.open .nav-sub { display: flex; }
.nav-subitem { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 17px; font-weight: 500; line-height: 1.25; }
.nav-subitem:hover { background: var(--fill-2); color: var(--text); text-decoration: none; }
.nav-subitem.active { color: var(--accent); background: var(--fill-2); font-weight: 600; }

/* ---------- My day + Estimates ---------- */
.today-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-bottom: 8px; }
.today-grid .card + .card { margin-top: 0; }
.today-progress { height: 8px; border-radius: var(--radius-sm); background: var(--fill); overflow: hidden; margin: 0 0 14px; }
.today-progress span { display: block; height: 100%; background: var(--green); border-radius: var(--radius-sm); transition: width .25s ease; }
.today-progress.sm { height: 6px; margin: 4px 0 2px; max-width: 140px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task-check { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.task-check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--green); }
.task-box { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--green); cursor: pointer; align-self: flex-start; margin-top: 1px; }
.task-link { flex: 1; color: var(--text); text-decoration: none; }
.task-link:hover { text-decoration: none; }
.task-link:hover strong { color: var(--accent); }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.task-meta .pill { height: 20px; font-size: 13.5px; padding: 0 8px; }
.task.is-done .task-meta .pill { opacity: .6; }
.todo-list .task { align-items: flex-start; }
.todo-list .est-go { margin-top: 4px; }
.task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-text strong { font-weight: 600; }
.task.is-done .task-text strong { text-decoration: line-through; color: var(--text-3); font-weight: 500; }
.task .icon-btn { width: 32px; height: 32px; }
.todo-add { display: flex; gap: 8px; margin-bottom: 4px; }
.todo-add .input { flex: 1; min-width: 0; }
.todo-add .todo-date { flex: 0 0 150px; }
.est-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.card.est-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text); text-decoration: none; margin: 0; }
.card.est-row:hover { border-color: var(--line-strong); text-decoration: none; }
.est-row.is-overdue { box-shadow: inset 3px 0 0 var(--red); }
.est-src { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--fill); color: var(--text-2); display: grid; place-items: center; flex: none; }
.est-src .ic { width: 18px; height: 18px; }
.est-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.est-title { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.est-go { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.est-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.est-link:hover { text-decoration: none; }
.est-link:hover strong { color: var(--accent); }
.est-bar { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; padding-left: 50px; }
.todo-list .est-bar { padding-left: 34px; margin-top: 2px; }
.stage-steps.sm { margin-top: 0; gap: 5px; }
.stage-steps.sm .stage-step { padding: 4px 11px; font-size: 14.5px; }
.est-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.est-acts .btn-sm { height: 28px; padding: 0 10px; font-size: 14.5px; }
.est-acts .btn-sm .ic { width: 15px; height: 15px; }
.est-acts [hidden] { display: none; }
.est-acts .est-del { margin-left: auto; color: var(--red); }
.todo-del { color: var(--red); flex: none; }
.todo-del .ic { width: 15px; height: 15px; }
.card.est-row { flex-wrap: wrap; }
.todo-list .task-estimate { flex-wrap: wrap; }
.est-row.is-done .est-link, .task-estimate.is-done .task-link { opacity: .6; }
.q-sep { border-top: 1px solid var(--line); margin: 16px 0; }
.est-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin-top: 20px; }
.est-grid > .card, .est-grid > div > .card + .card { margin-top: 0; }
.est-grid > div { display: flex; flex-direction: column; gap: 20px; }
.stage-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.stage-step { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); border-radius: var(--radius-pill); padding: 6px 14px; font: 500 15px var(--font); cursor: pointer; }
.stage-step:hover { border-color: var(--accent); color: var(--accent); }
.stage-step.is-end { border-style: dashed; }
.stage-step.active { color: #fff; border-color: transparent; border-style: solid; }
.stage-step.tone-blue { background: var(--accent); }
.stage-step.tone-purple { background: var(--purple); }
.stage-step.tone-orange { background: var(--orange); }
.stage-step.tone-green { background: var(--green); }
.stage-step.tone-gray { background: var(--text-3); }
.chip-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick label { position: relative; }
.chip-pick input { position: absolute; opacity: 0; pointer-events: none; }
/* Choice chips: a soft tint when not picked, the deeper solid color when picked (blue by default; green / orange / red for Easy / Medium / Hard). */
.chip-pick span { display: inline-block; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: 16px; font-weight: 500; cursor: pointer; background: var(--accent-soft); color: var(--accent); transition: background .15s, color .15s; }
.chip-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-pick .tone-green span { background: var(--green-soft); color: var(--green); }
.chip-pick .tone-green input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.chip-pick .tone-orange span { background: var(--orange-soft); color: var(--orange); }
.chip-pick .tone-orange input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; }
.chip-pick .tone-red span { background: var(--red-soft); color: var(--red); }
.chip-pick .tone-red input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.chip-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.timeline li { padding: 10px 0 10px 16px; border-left: 2px solid var(--line-strong); margin-left: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.timeline li.tl-help, .timeline li.tl-transfer { border-left-color: var(--orange); }
.timeline li.tl-stage { border-left-color: var(--accent); }
.day-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick label { position: relative; }
.day-pick input { position: absolute; opacity: 0; }
.day-pick span { display: inline-block; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font-size: 16px; cursor: pointer; }
.day-pick input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.table tr.is-muted td { opacity: .55; }
.home-today { display: flex; align-items: center; gap: 16px; color: var(--text); text-decoration: none; margin-bottom: 20px; }
.home-today:hover { text-decoration: none; border-color: var(--line-strong); }
.home-today .today-progress { margin: 6px 0 0; }
.home-today-main { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .today-grid, .est-grid { grid-template-columns: 1fr; }
  .card.est-row { flex-wrap: wrap; }
  .est-flags { justify-content: flex-start; width: 100%; padding-left: 50px; }
  .est-bar, .todo-list .est-bar { padding-left: 0; }
  .est-go { display: none; }
  .todo-add { flex-wrap: wrap; }
  .todo-add input[name="title"] { flex-basis: 100%; }
  .todo-add .todo-date { flex: 1 1 130px; }
}
.nav-badge[hidden], .tab-badge[hidden] { display: none; }
.reminder-card { margin-bottom: 20px; }
.task.is-auto .task-box { cursor: default; opacity: .85; }
.auto-bar { display: inline-block; width: 90px; vertical-align: middle; margin: 0 0 0 4px; }
.text-green { color: var(--green); font-weight: 600; }
.notice-slow { display: flex; gap: 10px; align-items: flex-start; background: var(--purple-soft); }
.notice-slow .ic { color: var(--purple); flex: none; margin-top: 2px; }
.slow-card { margin-bottom: 20px; }
.slow-card summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.slow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 14px; }
.slow-center { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.slow-center > div { display: flex; flex-direction: column; gap: 2px; }
.slow-center.is-quiet { border-color: var(--orange); background: var(--orange-soft); }
.slow-center.is-on { border-color: var(--purple); background: var(--purple-soft); }
.slow-center .btn { align-self: flex-start; }
.reminder-row { padding: 10px 0; border-top: 1px solid var(--line); }
.task-list .task { animation: taskin .2s ease; }
@keyframes taskin { from { opacity: .3; } to { opacity: 1; } }
.auto-why { display: flex; gap: 5px; align-items: flex-start; color: var(--green); margin-top: 2px; }
.auto-why .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.auto-why.is-open { color: var(--text-3); }
.task.is-done .auto-why span { text-decoration: none; }
.task.is-na { opacity: .55; }
.task.is-na .task-box { visibility: hidden; }
.task.is-na .task-text strong { text-decoration: none; }
.auto-why.is-na { color: var(--text-3); }
.done-area { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.done-area[hidden] { display: none; }
.done-area summary { cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.done-area summary .ic { width: 16px; height: 16px; color: var(--green); }
.todo-done .task { opacity: .75; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green); filter: brightness(1.08); }
/* My day: the To-do add button turns green once something is typed in the box. */
.todo-add:has(input[name="title"]:not(:placeholder-shown)) .todo-add-btn { background: var(--green); color: #fff; }
.todo-add:has(input[name="title"]:not(:placeholder-shown)) .todo-add-btn:hover { filter: brightness(1.08); }
.reminder-alert { display: flex; gap: 16px; align-items: flex-start; background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; }
.reminder-alert h2 { margin: 0 0 6px; font-size: 21.5px; color: var(--green); }
.reminder-alert p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text); }
.reminder-alert-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.reminder-alert-icon .ic { width: 24px; height: 24px; }
.reminder-alert-body { flex: 1; min-width: 0; }
.reminder-alert-close { flex: none; }
.person-task-state { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--text-3); }
.task.is-done .person-task-state { color: var(--green); }
.person-task-state .ic { width: 18px; height: 18px; }
/* Close (x) button added to every pop-up by app.js */
.modal-card { position: relative; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fill); color: var(--text-2); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.modal-x:hover { background: var(--line-strong); color: var(--text); }
.modal-x svg { width: 16px; height: 16px; }
.modal-card > h2:first-of-type, .modal-card > .confirm-text { padding-right: 40px; }
/* "How hard does it feel?": a scale from light green (Easy) to deeper green (Medium) to red (Hard).
   Soft tint when not picked, the deeper solid shade when picked. */
.chip-pick .diff-1 span { background: rgba(52, 199, 89, 0.12); color: #2f9e4f; }
.chip-pick .diff-1 input:checked + span { background: #34c759; border-color: #34c759; color: #fff; }
.chip-pick .diff-2 span { background: rgba(29, 107, 51, 0.14); color: #1d6b33; }
.chip-pick .diff-2 input:checked + span { background: #1d6b33; border-color: #1d6b33; color: #fff; }
.chip-pick .diff-3 span { background: var(--red-soft); color: var(--red); }
.chip-pick .diff-3 input:checked + span { background: #a8001a; border-color: #a8001a; color: #fff; }
:root[data-theme="dark"] .chip-pick .diff-1 span { color: #6ee08f; }
:root[data-theme="dark"] .chip-pick .diff-2 span { background: rgba(48, 209, 88, 0.2); color: #3fc56a; }
:root[data-theme="dark"] .chip-pick .diff-2 input:checked + span { background: #248a3d; border-color: #248a3d; color: #fff; }
/* My day: the Daily checklist is the focus while 2 or more tasks are left. */
.checklist-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.checklist-card h2 .ic { width: 22px; height: 22px; color: var(--accent); }
.checklist-left[hidden] { display: none; }
.checklist-card.is-focus { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 120px); }
.checklist-card.is-focus .checklist-left { background: var(--accent); color: #fff; }
.todo-pop .todo-add-btn { background: var(--fill); color: var(--text); }
.todo-pop:has(input[name="title"]:not(:placeholder-shown)) .todo-add-btn { background: var(--green); color: #fff; }
/* A field just filled from what FASTFLOW already knows (after picking a customer). */
.input.was-filled { background: var(--green-soft); transition: background 2s ease; }
/* "What to do" box at the top of a page opened from a notification. */
.notice-box .notice-todo { margin-top: 8px; }
.notice-box p.muted { color: var(--text-2); }
/* Admins looking at a team member's My day */
.viewing-bar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--purple-soft); color: var(--text); margin-bottom: 14px; font-size: 17px; }
.viewing-bar .ic { color: var(--purple); flex: none; }
.viewing-pick { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin: -4px 0 12px; flex-wrap: wrap; }
.viewing-pick .select { width: auto; min-width: 200px; }
.slow-btn .slow-count { background: var(--purple); color: #fff; border-radius: var(--radius-pill); padding: 0 7px; font-size: 13px; line-height: 18px; margin-left: 2px; }
.slow-btn .slow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; margin-left: 2px; }
/* Pages opened in a pop-up (?embed=1): no menu, header or footer. */
.is-embed .sidebar, .is-embed .topbar, .is-embed .app-topbar, .is-embed .app-tabs, .is-embed .tabbar, .is-embed .site-footer,
.is-embed .scrim, .is-embed .page-back, .is-embed .view-as-bar { display: none !important; }
.is-embed .main { margin-left: 0 !important; }
.is-embed .content { padding: 20px 22px 28px; }
.is-embed { background: var(--bg); }
/* The pop-up that holds a page */
.modal.modal-page { max-width: min(1100px, calc(100vw - 32px)); width: 100%; }
.modal-page .modal-card { padding: 0; overflow: hidden; height: min(86vh, 900px); }
.modal-page iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.modal-page .modal-x { top: 10px; right: 14px; }
@media (max-width: 860px) {
  .modal.modal-page { max-width: 100vw; margin: 0; height: 100dvh; max-height: none; }
  .modal-page .modal-card { height: 100dvh; border-radius: 0; }
}
/* Stages: Internal review (teal) and Estimate built (indigo) */
.pill-teal { background: rgba(48, 176, 199, 0.15); color: #0e7c8f; }
.pill-indigo { background: rgba(88, 86, 214, 0.14); color: #4b49c4; }
:root[data-theme="dark"] .pill-teal { color: #64d2e6; }
:root[data-theme="dark"] .pill-indigo { color: #8e8cf5; }
.stage-step.tone-teal { background: #0e9bb0; }
.stage-step.tone-indigo { background: #5856d6; }
/* Notes & history: admins can remove an entry */
.timeline li { position: relative; padding-right: 36px; }
.timeline .tl-del { position: absolute; top: 6px; right: 0; }
.timeline .tl-del .icon-btn { width: 28px; height: 28px; opacity: .5; }
.timeline li:hover .tl-del .icon-btn { opacity: 1; }
.est-context { display: block; margin-top: 3px; color: var(--text); background: var(--fill-2); border-radius: var(--radius-sm); padding: 4px 8px; }
/* Easier reading everywhere: normal letter spacing, slightly bigger small text and small buttons, a bit more line height. */
.small { font-size: 16.5px; line-height: 1.45; }
.btn-sm { font-size: 16px; }
.field > label, .field-label { font-size: 17px; color: var(--text); }
.task-text .muted.small, .card-head p.muted.small { line-height: 1.45; }
/* Manager view tabs */
.mv-tabs { display: flex; flex-wrap: wrap; margin: 4px 0 16px; }
.mv-panel[hidden] { display: none; }
.stat.is-link { cursor: pointer; }
.stat.is-link:hover { border-color: var(--line-strong); }
.stat.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-tabs .seg-btn { font-size: 16px; padding: 7px 14px; }

/* My day to-do box with a link: the to-do on its own line, then due date, link and the buttons. */
.todo-add:has(.todo-link) { flex-wrap: wrap; }
.todo-add:has(.todo-link) > input[name="title"], .todo-add:has(.todo-link) > .suggest-wrap { flex: 1 1 100%; }
.todo-add .todo-date { flex: 0 0 150px; }
.todo-add .todo-link { flex: 1 1 160px; }
.todo-acts { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.link-btn-open .ic { width: 15px; height: 15px; }
.todo-link-edit .ic { width: 15px; height: 15px; }

/* ---------- Ranked call playbooks (Apollo lists with talking points) ---------- */
.tier { display: inline-block; min-width: 22px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.5; background: var(--fill); color: var(--text-2); }
.tier-a { background: var(--green-soft); color: var(--green); }
.tier-b { background: var(--accent-soft); color: var(--accent); }
.tier-c { background: var(--fill); color: var(--text-2); }
.tier-bench { background: var(--fill-2); color: var(--text-3); font-weight: 600; }
.tier-partner { background: var(--purple-soft); color: var(--purple); font-weight: 600; }
.pb-howto { padding: 14px 18px; margin-bottom: 16px; }
.pb-howto-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 16px; color: var(--text-2); }
.pb-howto-steps strong { color: var(--text); }
.pb-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; margin-right: 8px; vertical-align: 1px; }
.pb-import-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.pb-import-stats div { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px; display: flex; flex-direction: column; min-width: 96px; }
.pb-import-stats strong { font-size: 23.5px; font-weight: 700; }
.pb-import-stats span { font-size: 14px; color: var(--text-2); }
.talk-col { min-width: 260px; max-width: 360px; }
.talk-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: var(--text-2); line-height: 1.35; white-space: normal; }
.modal.drawer.drawer-wide { max-width: min(700px, 100vw); }
.acct-nav { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; }
.acct-nav #acctPos { flex: 1; text-align: center; }
.pb-guide { margin: 16px 0 4px; }
.pb-tabs { margin-bottom: 12px; }
.pb-panel > .acct-facts { margin-top: 4px; }
.pb-section-h { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 18px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.pb-section-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pb-panel > .pb-section-h:first-child { margin-top: 4px; }
.pb-block { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; }
.pb-block.pb-key { background: rgba(255, 204, 0, 0.13); border-color: rgba(255, 170, 0, 0.35); }
.pb-label { font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.pb-text { font-size: 16.5px; line-height: 1.45; }
.pb-src { display: inline-block; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--fill); padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 4px; vertical-align: 1px; }
.pb-tip { font-size: 15px; color: var(--text-2); padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 10px 0; }
.pb-steps { list-style: none; counter-reset: pbs; padding: 0; margin: 0; }
.pb-steps > li { counter-increment: pbs; position: relative; padding: 0 0 12px 34px; }
.pb-steps > li::before { content: counter(pbs); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pb-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 26px; bottom: 2px; width: 1px; background: var(--line-strong); }
.pb-say { font-size: 17px; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.pb-say.pb-close { border-color: var(--green); background: var(--green-soft); }
.cue { font-size: 14px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.pb-more { margin: 0; padding-left: 18px; font-size: 16.5px; line-height: 1.45; }
.pb-more li { margin-bottom: 4px; }
.pb-copybox { white-space: normal; user-select: text; }
.pb-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 8px 0 4px; }
.pb-email { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.pb-bench { font-size: 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--fill-2); border: 1px dashed var(--line-strong); }
.pb-objection { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface); }
.pb-objection summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 16.5px; list-style-position: inside; }
.pb-objection[open] summary { border-bottom: 1px solid var(--line); }
.pb-objection p { margin: 0; padding: 10px 12px; font-size: 16.5px; line-height: 1.5; }
.pb-dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; margin: 0; font-size: 16px; }
.pb-dl dt { font-weight: 600; }
.pb-dl dd { margin: 0; color: var(--text-2); }
@media (max-width: 760px) {
  .pb-howto-steps { grid-template-columns: 1fr; gap: 8px; }
  .pb-dl { grid-template-columns: 1fr; gap: 2px; }
  .pb-dl dd { margin-bottom: 8px; }
  .talk-col { min-width: 200px; }
}
.acct-nav { padding-right: 44px; }
#acctDialog .drawer-head > .icon-btn { display: none; }
/* Call guide: acronyms with a meaning on hover / tap */
abbr.gl { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; position: relative; }
abbr.gl:focus { outline: none; }
abbr.gl:focus::after { content: attr(title); position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: max-content; max-width: min(320px, 70vw);
  background: var(--text); color: var(--surface); font-size: 15px; font-weight: 400; line-height: 1.4; padding: 8px 10px; border-radius: var(--radius-sm); white-space: normal; text-transform: none; letter-spacing: 0; }
.pb-glossary dt { white-space: nowrap; }

/* Site areas (Admin → Site areas): areas switched off while they're being finished */
.nav-off { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.nav-off + .nav-badge { margin-left: 6px; }
.nav-item.active .nav-off { background: rgba(255,255,255,.25); color: #fff; }
.area-list { padding: 0; }
.area-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); margin: 0; }
.area-row:first-child { border-top: 0; }
.area-row.is-off strong { color: var(--text-2); }
.app-card.is-off { opacity: .7; }

/* ================================================================== v1.0 brand style
   One look across the company's platforms: a slim deep-blue header with the page title
   in big condensed type, white cards with thin blue borders, big navy numbers with
   light-blue labels and solid blue bars between sections. Sizes stay at the v0.9.84 readability levels.
   Print styles (.lbl-, .ep-, .e2-, .cert-) are deliberately untouched. */
h1, h2, h3, .topbar-title, .hero h2, .home-greeting h2, .section-title, .card-head h2, .modal-card h2,
.stat .stat-label, .stat .stat-value, .btn, .nav-item, .nav-section, .nav-subitem, .table th, .pill, .segmented a, .segmented .seg-btn,
.app-tab, .app-name, .field > label, .field-label, .tabbar a, .tabbar button, .list-card-stats strong, .kpis .stat-value {
  font-family: var(--font-cond);
}
h1, h2, h3 { letter-spacing: 0.005em; }
h2 { color: var(--navy); font-weight: 700; }
h3 { color: var(--navy); font-weight: 700; }
.card-head h2, .modal-card h2, .empty h2 { text-transform: uppercase; letter-spacing: 0.02em; }
/* Headings on pictures and colored panels keep their own (white) color. */
.slide h2, .slide h3, .cover-art h2, .cover-art h3, .academy-hero h2, .academy-hero h3, .action-tile.primary h3 { color: inherit; }
a { color: var(--accent); }
.muted { color: var(--text-2); }

/* ---- header band: a slim blue bar with the title in big type, first word bold and the rest light.
   Behind the title: the Sales Dashboard's section-title quote marks (sales-dashboard/public/assets/title-quote.svg),
   black at 34% so they read as a darker shade of the blue band (v1.0.88, Dylan).
   Both halves are one font family at one size on one baseline, so they always line up. */
.topbar {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='60' viewBox='0 0 350 60'%3E%3Cg fill='%23000' fill-opacity='.34'%3E%3Cpath d='M14.6,52.4C14.6,52.3,14.6,52.3,14.6,52.4l-33-77.7l130.8-55.5l28.5,67.3c0,0,0,0,0,0c0,0,0,0,0,0l25.7,60.5l-18.2,7.7c-8.2,3.5-16.4,7-24.6,10.4c-1.9,0.8-3,1.7-4.7,3.1c-2.5,2-0.2,8.6,0.7,11c1.5,4.2,3.7,8.1,6.1,11.8c6,9.1,13.4,17.3,21,25.1c7.5,7.7,15.4,15,23.6,22c5,4.4,10.2,8.7,15.4,12.8c0.5,0.4,1,0.8,1.5,1.2l-52,22.1c-44-17.2-75.7-46.1-93.8-74.2C34.3,88.4,20.6,64.7,14.6,52.4'/%3E%3Cpath d='M165.3-11.6C165.3-11.6,165.3-11.6,165.3-11.6l-33-77.7l130.8-55.5l28.5,67.3c0,0,0,0,0,0c0,0,0,0,0,0L317.3-17l-18.2,7.7c-8.2,3.5-16.4,7-24.6,10.4c-1.9,0.8-3,1.7-4.7,3.1c-2.5,2-0.2,8.6,0.7,11c1.5,4.2,3.7,8.1,6.1,11.8c6,9.1,13.4,17.3,21,25.1c7.5,7.7,15.4,15,23.6,22c5,4.4,10.2,8.7,15.4,12.8c0.5,0.4,1,0.8,1.5,1.2l-52,22.1c-44-17.2-75.7-46.1-93.8-74.2C184.9,24.5,171.2,0.8,165.3-11.6'/%3E%3C/g%3E%3C/svg%3E") left center / auto 100% no-repeat,
    linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; color: var(--band-text); min-height: 60px; padding-top: 8px; padding-bottom: 8px;
}
.topbar-title { font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; font-weight: 300; }
.topbar-title b, .app-tabs-title b { font-weight: 700; }
.topbar-title span, .app-tabs-title span { font-weight: 300; color: #d9e8ff; }
.topbar .icon-btn { color: rgba(255, 255, 255, .9); }
.topbar .icon-btn:hover, .topbar .icon-btn.active { background: rgba(255, 255, 255, .16); color: #fff; }
.topbar .bell-dot { box-shadow: 0 0 0 2px var(--band-2); }
/* Header buttons are slim outlined pills (like the "YEAR TO DATE" tag); the main action is filled white. */
.topbar .btn { height: 32px; padding: 0 16px; border-radius: 999px; font-size: 15px; letter-spacing: 0.1em; background: #fff; color: var(--band); }
.topbar .btn:hover { background: #e6f1ff; }
.topbar .btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.topbar .btn-secondary:hover { background: rgba(255, 255, 255, .14); }
.topbar .select { background-color: rgba(255, 255, 255, .95); color: var(--band); border-color: transparent; }
.topbar-search input { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.topbar-search input::placeholder { color: rgba(255, 255, 255, .85); }
.topbar-search input:focus { background: #fff; color: var(--text); }
.topbar-search input:focus::placeholder { color: var(--text-3); }
.topbar-search > .ic { color: #fff; z-index: 1; }
.topbar-search:focus-within > .ic { color: var(--text-3); }
.topbar-search .search-kbd { color: #fff; border-color: rgba(255, 255, 255, .6); background: transparent; }

/* ---- sidebar: the wordmark sits on the same blue band as the header */
.sidebar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-right: 1px solid var(--line-strong); padding-top: 0; }
.brand, .brand:has(.brand-logo.has-image) {
  display: flex; align-items: center; margin: 0 -12px 10px; padding: 0 18px; height: 60px;
  background:
    linear-gradient(115deg, rgba(0, 20, 70, .35) 0 40%, transparent 40%),
    linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%);
}
.wordmark { display: flex; flex-direction: column; line-height: 1; color: #fff; font-family: var(--font-cond); }
.wordmark-name { font-size: 31px; letter-spacing: 0.01em; white-space: nowrap; }
.wordmark-name b { font-weight: 800; color: #fff; }
.wordmark-name i { font-style: normal; font-weight: 300; color: var(--band-sky); }
.wordmark-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }
.nav-section { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--sky-text); }
.nav-item { font-size: 18.5px; font-weight: 500; border-radius: var(--radius-sm); }
.nav-item .ic { color: var(--accent); }
.nav-item.active { background: var(--band); color: #fff; box-shadow: inset 4px 0 0 var(--rule); }
.nav-subitem { font-size: 17px; }
.nav-subitem.active { color: var(--accent); font-weight: 700; }
.avatar { background: linear-gradient(135deg, var(--band-2), var(--band)); }
.app-version { font-family: var(--font-cond); letter-spacing: .04em; }

/* ---- cards, numbers, dividers */
.card, .stat, .modal-card, .action-tile, .form-tile, .list-card, .home-today { border: 1px solid var(--card-line); box-shadow: none; }
.card.flush .table th { background: var(--surface-2); }
.stat .stat-label { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sky-text); }
.stat .stat-label .ic { color: var(--sky-text); }
.stat .stat-value { font-size: 42px; font-weight: 700; letter-spacing: 0; line-height: 1.05; color: var(--navy); }
.stat .stat-sub { color: var(--text-2); }
.stat.tone-red .stat-value { color: var(--red); }
.stat.tone-orange .stat-value { color: var(--orange); }
.stat.tone-green .stat-value { color: var(--green); }
.kpis .stat-value { font-size: 36px; }
.list-card-stats strong { color: var(--navy); font-size: 24px; }
/* Section titles are solid bars with white uppercase type ("SOUTH BAY"), full width to separate sections. */
.section-title {
  display: block; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.1em; line-height: 1.2;
  background: var(--band); border-radius: var(--radius); padding: 8px 16px; margin: 24px 0 12px;
}
.section-head { display: flex; align-items: center; gap: 12px; background: var(--band); border-radius: var(--radius); margin: 24px 0 12px; padding: 0 16px 0 0; }
.section-head .section-title { margin: 0; flex: 1; background: none; }
.section-head > a { color: #fff; font-weight: 600; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.hero h2, .home-greeting h2 { font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy); }
.home-greeting p { color: var(--sky-text); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; }

/* ---- use the space: tighter page and card padding */
.content { padding: 18px 24px 48px; }
.card { padding: 20px; }
.card + .card { margin-top: 14px; }
.stats { gap: 12px; margin-bottom: 14px; }
.stat { padding: 14px 18px; }
.card.flush .card-head { padding: 16px 20px 0; }
.card.flush .table th:first-child, .card.flush .table td:first-child { padding-left: 20px; }
.card.flush .table th:last-child, .card.flush .table td:last-child { padding-right: 20px; }
.home-greeting { margin: 4px 0 14px; }

/* ---- buttons & controls */
.btn { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 17px; background: var(--btn); }
.btn:hover { background: var(--accent-hover); }
:root[data-theme="dark"] .btn:hover { background: #0d47a1; }
.empty .btn .ic { width: 18px; height: 18px; margin: 0; color: inherit; }
.btn-sm { font-size: 15px; }
.btn-secondary { background: var(--surface); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-danger { background: var(--surface); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.icon-btn { border-radius: var(--radius-sm); }
.input, .select, .textarea { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field > label, .field-label { font-size: 16.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sky-text); }
.table th { text-transform: uppercase; letter-spacing: 0.05em; color: var(--sky-text); font-weight: 600; }
.pill { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.segmented { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); padding: 0; gap: 0; }
.segmented a, .segmented .seg-btn { border-radius: 0; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.segmented a.active, .segmented .seg-btn.active { background: var(--btn); color: #fff; box-shadow: none; }
.choice-card.active { background: var(--btn); border-color: var(--btn); }
.action-tile.primary { background: linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%); }
.tab-plus { box-shadow: 0 4px 14px rgba(13, 71, 161, .4); }

/* ---- FASTFLOW apps (phone apps) */
.app-topbar .app-brand { color: #fff; }
.app-name { border-left-color: rgba(255, 255, 255, .45); text-transform: uppercase; letter-spacing: 0.03em; }
.app-name .ic { color: var(--band-sky); }
.app-logo .wordmark-name { font-size: 28px; }
.app-logo .wordmark-tag { display: none; }
.app-tabs a.app-tab { text-transform: uppercase; letter-spacing: 0.04em; }
.app-tabs a.app-tab.active { background: var(--band); box-shadow: inset 0 -4px 0 var(--rule); }

/* ---- sign-in page */
.bare { background: linear-gradient(180deg, var(--band) 0, var(--band-2) 300px, var(--bg) 300px); }
.auth-logo .wordmark { align-items: center; margin-bottom: 10px; }
.auth-logo .wordmark-name { font-size: 54px; }
.auth-logo .wordmark-tag { font-size: 15px; }
.auth-logo h1 { color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
.auth-logo p { color: rgba(255, 255, 255, .85); }

@media (max-width: 860px) {
  .sidebar { padding-top: 0; }
  .brand, .brand:has(.brand-logo.has-image) { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .topbar { min-height: 56px; }
  .topbar-title { font-size: 26px; }
  .topbar .btn { height: 30px; padding: 0 10px; font-size: 14px; letter-spacing: 0.04em; gap: 4px; }
  .content { padding: 14px 12px calc(96px + env(safe-area-inset-bottom)); }
  .card { padding: 16px; }
  .card { border-radius: var(--radius); }
  .stat .stat-value { font-size: 32px; }
  .section-title { font-size: 20px; }
  .hero h2, .home-greeting h2 { font-size: 27px; }
  .wordmark-name { font-size: 30px; }
  .app-logo .wordmark-name { font-size: 24px; }
}
@media (max-width: 480px) { .app-logo .wordmark-name { font-size: 21px; } }
.nav-off { font-family: var(--font-cond); font-size: 14px; }

/* ---- classic logo (the FASTFLOW picture): its blue lettering needs a white backing, so it sits on a
   white panel in the menu, a white chip in the app header and a white badge on the sign-in page. */
.brand:has(.brand-logo.has-image) { height: auto; padding: 12px 14px; background: #fff; border-bottom: 4px solid var(--band); }
.brand-logo.has-image img, :root[data-theme="dark"] .brand-logo.has-image img { display: block; width: 100%; height: auto; }
.app-logo.has-image { background: #fff; border-radius: var(--radius); padding: 3px 8px; }
.app-logo.has-image img, :root[data-theme="dark"] .app-logo.has-image img { display: block; height: 40px; width: auto; }
.auth-brand.has-image { display: block; width: fit-content; margin: 0 auto 10px; background: #fff; border-radius: 8px; padding: 12px 18px; box-shadow: 0 8px 28px rgba(0, 20, 70, .3); }
.auth-brand.has-image img { display: block; width: min(320px, 76vw); height: auto; }
/* Settings → Logo */
.logo-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.logo-choice { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; overflow: hidden; color: var(--text); text-align: left; }
.logo-choice.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.logo-choice-art { display: grid; place-items: center; height: 96px; padding: 10px 14px; background: linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%); }
.logo-choice-art img { max-height: 76px; max-width: 100%; }
.logo-choice-label { padding: 0 14px 10px; font: 600 17px var(--font-cond); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 860px) { .app-logo.has-image img, :root[data-theme="dark"] .app-logo.has-image img { height: 32px; } }

/* Buttons, tabs and chips size to their text and never break onto two lines. */
.report-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.report-tab { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-cond); font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; border-color: var(--card-line); padding: 10px 16px; }
.report-tab.active { background: var(--btn); border-color: var(--btn); }
.btn, .segmented a, .segmented .seg-btn, .app-tab, .metric-chip, .pill, .chip, .rep-chip, .stage-step, .choice-card, .nav-off { white-space: nowrap; }
@media (max-width: 860px) { .report-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } }
.logo-choice-art:has(img) { background: #fff; border-bottom: 4px solid var(--band); }

/* Sign-in page: plain white page so the logo sits on white (Dylan, v1.0). */
.bare { background: var(--surface); }
.auth-logo h1 { color: var(--navy); }
.auth-logo p { color: var(--text-2); }
.auth-brand.has-image { background: none; box-shadow: none; padding: 0; }
.auth-brand.has-image img { width: min(380px, 86vw); }
.auth-brand:not(.has-image) { display: block; width: fit-content; margin: 0 auto 10px; padding: 16px 26px; border-radius: var(--radius); background: linear-gradient(100deg, var(--band) 0%, var(--band-2) 100%); }
.bare .auth-card .card { border-color: var(--card-line); }
.has-image img.logo-dark, :root[data-theme="dark"] .has-image img.logo-dark { display: none; }
.has-image img.logo-light, :root[data-theme="dark"] .has-image img.logo-light { display: block; }
:root[data-theme="dark"] .auth-brand.has-image img.logo-light { display: none; }
:root[data-theme="dark"] .auth-brand.has-image img.logo-dark { display: block; }

/* ---- Home: My day in "My work" (v1.0.2). The to-do list and today's checklist side by side. */
.home-day-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; margin-bottom: 14px; }
.home-day-grid .card + .card { margin-top: 0; }
.home-day-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.home-day-card .card-head a { white-space: nowrap; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.home-day-card .todo-add { margin-bottom: 6px; }
.home-next-icon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--accent); align-self: flex-start; margin-top: 1px; }
.home-next-icon .ic { width: 20px; height: 20px; }
.stat .home-day-bar { display: block; max-width: none; margin: 6px 0 4px; }
@media (max-width: 860px) { .home-day-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- Talk to add to-dos (v1.0.3, assets/voice_todo.js) */
.todo-add .todo-mic { flex: 0 0 104px; justify-content: center; }
/* Talk sits next to the to-do box; the date, link and buttons go on the next line. */
.todo-add:has(.todo-mic) { flex-wrap: wrap; }
.todo-add:has(.todo-mic) > input[name="title"], .todo-add:has(.todo-mic) > .suggest-wrap { flex: 1 1 calc(100% - 112px); }
.voice-dialog { max-width: min(600px, calc(100vw - 32px)); }
.voice-live { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--fill); }
.voice-orb { width: 60px; height: 60px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 28px; }
.voice-live.is-on .voice-orb { background-color: var(--red); animation: voice-pulse 1.4s ease-out infinite; }
@keyframes voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(209, 18, 27, .45); } 100% { box-shadow: 0 0 0 16px rgba(209, 18, 27, 0); } }
@media (prefers-reduced-motion: reduce) { .voice-live.is-on .voice-orb { animation: none; } }
.voice-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.voice-status [data-interim] { font-style: italic; }
.voice-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.voice-items li { display: flex; gap: 8px; align-items: center; }
.voice-items [data-title] { flex: 1; min-width: 0; }
.voice-items .voice-date { flex: 0 0 150px; }
.voice-empty { margin: 4px 0 0; }
@media (max-width: 560px) {
  .voice-items li { flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .voice-items [data-title] { flex-basis: calc(100% - 40px); }
  .voice-items .voice-date { flex: 1; }
}

/* ===== Official FASTSIGNS icons (v1.0.x) =====
   Solid one-color icons from assets/brand-icons, drawn by icon() in currentColor.
   Some are wider than tall, so they center in the same box as the line icons. */
.ic-brand { overflow: visible; }
.rf-icon .ic { width: 28px; height: 28px; }
.rf-name { display: inline-flex; align-items: center; gap: 8px; }
.rf-name .ic { width: 20px; height: 20px; color: var(--accent); }
.cover-art { position: relative; }
.cover-art .cover-icon { position: absolute; top: 14px; right: 16px; width: 34%; max-width: 120px; height: auto; max-height: 46%; color: #fff; opacity: .9; }
.article-hero.cover-art .cover-icon { max-width: 160px; top: 22px; right: 26px; }
.card-head h2 .ic-brand { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- v1.0.5: header buttons and the to-do box on phones */
/* Page buttons in the blue header stay on one line. On phones they get their own row under the title, scrolling sideways. */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-actions .row { flex-wrap: nowrap; }
.topbar-actions .btn { white-space: nowrap; flex: none; }
/* Narrow computer windows: the buttons drop to a row under the header instead of pushing past the edge. */
@media (min-width: 861px) and (max-width: 1200px) {
  .topbar:has(.topbar-actions) { flex-wrap: wrap; row-gap: 6px; }
  .topbar-actions { order: 99; flex: 1 0 100%; justify-content: flex-end; }
}
@media (max-width: 860px) {
  .today-grid > *, .home-day-grid > * { min-width: 0; }
  /* v1.0.7: on phones the header buttons move out of the blue header to the top of the page (app.js moves them). */
  .topbar .topbar-actions { display: none; }
  .page-actions:not(:empty) { display: flex; margin: 0 0 12px; }
  .page-actions .topbar-actions { flex: 1 1 auto; min-width: 0; }
  .page-actions .topbar-actions, .page-actions .row { flex-wrap: wrap; gap: 8px; }
  .page-actions::-webkit-scrollbar { display: none; }
  .page-actions .hide-sm { display: inline; }
}
.page-actions:empty { display: none; }
@media (min-width: 861px) { .page-actions { display: none; } }

/* ---- v1.0.6: no white box behind the logo. Both logo pictures are transparent: the menu shows the
   normal one (the outlined one in dark mode), and the blue app header shows the white-outlined one. */
.app-logo.has-image { background: none; padding: 0; border-radius: 0; }
.app-logo.has-image img.logo-light, :root[data-theme="dark"] .app-logo.has-image img.logo-light { display: none; }
.app-logo.has-image img.logo-dark, :root[data-theme="dark"] .app-logo.has-image img.logo-dark { display: block; }
.brand:has(.brand-logo.has-image) { background: transparent; }
:root[data-theme="dark"] .brand-logo.has-image img.logo-light { display: none; }
:root[data-theme="dark"] .brand-logo.has-image img.logo-dark { display: block; }

/* ---- v1.0.8: loading splash. The FASTFLOW logo on white with a red-to-blue loading bar, shown once when
   FASTFLOW opens (layout.php adds .splash-on to <html> on the first page of a visit and removes it on load).
   It stays white in dark mode too, like the sign-in page and the iPhone launch screen. */
.splash { display: none; }
html.splash-on .splash {
  display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center;
  background: #fff; transition: opacity .3s ease;
}
html.splash-on.splash-out .splash { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(78vw, 480px); margin-top: -28px; }
.splash-logo { width: 100%; height: auto; animation: splash-in .45s ease-out both; }
.splash-bar { width: 46%; height: 4px; border-radius: 4px; background: #e3e9f3; overflow: hidden; }
.splash-bar span { display: block; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #e31e24, #7b2a9c, #1565d8); animation: splash-bar 1s ease-in-out infinite; }
@keyframes splash-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes splash-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .splash-logo, .splash-bar span { animation: none; } }
@media print { .splash { display: none !important; } }

/* ---------------------------------------------------------------- v1.0.9: Team page cards */
/* At most 5 people per row on wide screens, never narrower than 230px; text stays inside its card. */
.team-grid { grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - 4 * 14px) / 5)), 1fr)); align-items: stretch; }
.team-grid > .person-card { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; overflow: hidden; padding: 14px; }
.person-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-head .avatar { flex: none; }
.person-name { min-width: 0; }
.person-name strong { display: block; font-size: 18.5px; line-height: 1.2; overflow-wrap: anywhere; }
.person-name .small { line-height: 1.25; margin-top: 2px; }
.team-grid .person-info { gap: 6px; }
.team-grid .person-tags { margin: 0; min-width: 0; }
.team-grid .person-tags .pill { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-grid .person-contact { min-width: 0; padding-top: 6px; border-top: 1px solid var(--border, #dbe3f0); }
.team-grid .person-contact a { min-width: 0; }
.team-grid .person-contact .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Redos page (redos.php) ===== */
.redo-table td { vertical-align: top; }
.redo-table .redo-what { max-width: 340px; }
.redo-table .answer-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.redo-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 14px; }
.redo-step { position: relative; cursor: pointer; }
.redo-step input { position: absolute; opacity: 0; }
.redo-step span { display: block; padding: 8px 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; text-align: center; white-space: nowrap; }
.redo-step input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.redo-step input:focus-visible + span { outline: 2px solid var(--accent); }
.redo-toolbar { flex-wrap: wrap; }
.redo-toolbar .input.grow { flex: 1 1 260px; min-width: 220px; }
@media (min-width: 861px) { .redo-toolbar .select { flex: 0 1 auto; width: auto; } }

/* ---- Knowledge & HR articles: the whole cover picture at the top (never cropped), a "Contents" list for
   long articles (like the Employee Handbook), and a clean page when printed straight from the article. */
.article-hero:not(.cover-art) { aspect-ratio: auto; background: var(--surface-2) !important; }
.article-hero:not(.cover-art) img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.article-toc { margin: 0 0 26px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.article-toc summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 18px; color: var(--accent); }
.article-toc summary .ic { width: 20px; height: 20px; }
.article-toc summary .muted { font-weight: 400; }
.article-toc > ol { list-style: none; margin: 0; padding: 4px 16px 14px; columns: 2 300px; column-gap: 32px; border-top: 1px solid var(--line); font-size: 17px; }
.article-toc > ol > li { break-inside: avoid; padding-top: 8px; font-weight: 700; }
.article-toc ol ol { padding-left: 18px; margin: 2px 0 0; font-weight: 400; font-size: 16px; list-style: none; }
.article-toc ol ol li { padding: 2px 0; }
.article-toc a { color: var(--text); }
.article-toc a:hover { color: var(--accent); }
.article-body .ab-heading { scroll-margin-top: 80px; }
@media print {
  .page-article .sidebar, .page-article .topbar, .page-article .tabbar, .page-article .site-footer, .page-article .page-actions,
  .page-article .crumbs, .page-article .ack-box form, .page-article .article-readers, .page-article .view-as-bar { display: none !important; }
  .page-article .main { margin: 0 !important; }
  .page-article .content { padding: 0 !important; }
  .page-article .article-toc[open] > ol, .page-article .article-toc > ol { display: block; }
  .page-article .article-hero:not(.cover-art) img { max-height: 3.6in; }
}

/* v1.0.12: the Knowledge & HR (compliance) icon is nearly square, so it filled its whole box and looked bigger than the
   wider, shorter icons next to it. Draw it a little smaller so it matches them. */
.ic-b-compliance { transform: scale(.8); }
/* v1.0.16: menu icons sit in a fixed 22px box so every label starts at the same place. The Knowledge & HR icon is
   drawn smaller with padding inside that box (not a transform, which some browsers render a pixel off), and the
   menu keeps room for its scrollbar so nothing moves sideways when the list gets long enough to scroll. */
.nav-item .ic { flex: 0 0 22px; box-sizing: border-box; }
.nav-item .ic-b-compliance { transform: none; padding: 2.2px; }
.sidebar .nav { scrollbar-gutter: stable; }

/* ---- Signature forms in articles (the Employee Handbook receipts): printed name, position, date and a
   signature drawn with a finger or mouse. Signed forms show the saved signature. */
.ab-sign { border: 1px solid var(--line-strong); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
.ab-sign.is-signed { border-left-color: var(--green); }
.sign-statement { font-weight: 700; margin: 0 0 14px; }
.sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; }
.ab-sign .field { margin: 0; }
.ab-sign .field > span, .sign-label, .sign-field > span { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 4px; }
.sign-field strong { display: block; font-weight: 500; border-bottom: 1px solid var(--line-strong); padding: 2px 0 4px; min-height: 1.6em; }
.sign-form > .field { margin-top: 14px; }
.sign-pad { position: relative; height: 170px; border: 2px dashed var(--line-strong); border-radius: var(--radius); background: #fff; touch-action: none; }
.sign-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sign-pad::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 36px; border-bottom: 1px solid #c9d3e4; pointer-events: none; }
.sign-hint { position: absolute; left: 20px; bottom: 12px; font-size: 15px; color: #8a98b2; pointer-events: none; }
.sign-pad.inked .sign-hint { display: none; }
.sign-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.sign-sig { margin-top: 14px; }
.sign-sig img { display: block; height: 90px; width: auto; max-width: 100%; background: #fff; border-bottom: 1px solid var(--line-strong); }
.sign-paper .sign-field strong, .sign-sig.sign-paper strong { min-height: 2.4em; }
.sign-done { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--green); font-weight: 600; font-size: 16px; }
.sign-done .ic { width: 18px; height: 18px; }
.article-readers td .btn { margin-left: 8px; }
.eblock-sign .sign-opt { display: flex; align-items: center; gap: 8px; font-size: 16px; }
@media print {
  .page-article .sign-form { display: none !important; }
}

/* ===== v1.0.14: Job colors (Dylan) =====
   Installation #f99e33, Collection #007940, Site survey #f47d2e. Bars, dots and stop numbers use the exact color;
   text on a light background uses a darker shade of it so it stays easy to read. */
:root { --k-install: #f99e33; --k-install-text: #a85f07; --k-install-soft: rgba(249, 158, 51, 0.17);
        --k-survey: #f47d2e; --k-survey-text: #b4520f; --k-survey-soft: rgba(244, 125, 46, 0.15);
        --k-collection: #007940; --k-collection-text: #007940; --k-collection-soft: rgba(0, 121, 64, 0.13); }
:root[data-theme="dark"] { --k-install-text: #ffbe6e; --k-survey-text: #ff9a5c; --k-collection-text: #3ccf86; --k-collection-soft: rgba(60, 207, 134, 0.16); }
.kind-install, .tone-install { --tone: var(--k-install); --tone-soft: var(--k-install-soft); }
.kind-survey, .tone-survey { --tone: var(--k-survey); --tone-soft: var(--k-survey-soft); }
.kind-collection, .tone-collection { --tone: var(--k-collection); --tone-soft: var(--k-collection-soft); }
.pill-install { background: var(--k-install-soft); color: var(--k-install-text); }
.pill-survey { background: var(--k-survey-soft); color: var(--k-survey-text); }
.pill-collection { background: var(--k-collection-soft); color: var(--k-collection-text); }
.job-card.kind-install .jc-top, .job-card.kind-install .jc-who, .stop.kind-install .jc-kind,
.kind-option.tone-install input:checked + span, .tone-install .rf-icon { color: var(--k-install-text) !important; }
.job-card.kind-survey .jc-top, .job-card.kind-survey .jc-who, .stop.kind-survey .jc-kind,
.kind-option.tone-survey input:checked + span, .tone-survey .rf-icon { color: var(--k-survey-text) !important; }
.job-card.kind-collection .jc-top, .job-card.kind-collection .jc-who, .stop.kind-collection .jc-kind,
.kind-option.tone-collection input:checked + span, .tone-collection .rf-icon { color: var(--k-collection-text) !important; }

/* ---- v1.0.16: the index that stays with you while you read an article (handbook parts, long articles).
   Wide screens: a sticky column beside the article. Narrower screens and phones: a sticky bar at the top
   showing the section you're in; tap it to open the list. assets/article-nav.js marks the current section. */
.article-layout.has-nav { display: grid; grid-template-columns: minmax(0, 780px) 300px; justify-content: center; column-gap: 36px; align-items: start; }
.article-layout.has-nav > .article { grid-column: 1; grid-row: 1; margin: 0; max-width: none; min-width: 0; }
.article-nav { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--article-nav-top, 64px) + 14px); z-index: 20; }
.article-nav-toggle { display: none; }
.article-nav-panel { max-height: calc(100vh - var(--article-nav-top, 64px) - 34px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 12px 8px 12px 10px; }
.article-nav-title { margin: 0 0 6px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.article-nav ol { list-style: none; margin: 0; padding: 0; }
.article-nav a { display: block; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text); font-size: 15px; line-height: 1.3; text-decoration: none; }
.article-nav a:hover { background: var(--fill); color: var(--accent); }
a.article-nav-home { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 700; font-size: 16px; }
.article-nav-home .ic { width: 18px; height: 18px; flex: none; color: var(--accent); }
.article-nav-parts > li > a { font-weight: 600; }
.article-nav-parts > li.is-here > a, a.article-nav-home.is-here { color: var(--accent); background: var(--accent-soft); }
.article-nav-parts ol { margin: 4px 0 8px 12px; padding-left: 6px; border-left: 2px solid var(--line); }
.article-nav-parts ol a { font-size: 14.5px; }
.article-nav .nav-l3 a { padding-left: 20px; font-size: 14px; color: var(--text-2); }
.article-nav a.is-current { color: var(--accent); font-weight: 700; background: var(--fill); }
@media (max-width: 1299px) {
  .article-layout.has-nav { display: block; }
  .article-layout.has-nav > .article { max-width: 780px; margin: 0 auto; }
  .article-nav { position: sticky; top: var(--article-nav-top, 64px); max-width: 780px; margin: 0 auto 14px; }
  .article-nav-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font: inherit; font-size: 16px; color: var(--text); text-align: left; cursor: pointer; }
  .article-nav-toggle .ic { width: 20px; height: 20px; flex: none; color: var(--accent); }
  .article-nav-current { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
  .article-nav-chev { transform: rotate(90deg); transition: transform .2s; }
  .article-nav.is-open .article-nav-chev { transform: rotate(-90deg); }
  .article-nav-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 65vh; box-shadow: var(--shadow-lg); }
  .article-nav.is-open .article-nav-panel { display: block; }
  .article-nav-title { display: none; }
  .page-article .article-body .ab-heading { scroll-margin-top: 150px; }
}
@media print {
  .article-nav { display: none !important; }
  .article-layout.has-nav { display: block; }
}

/* v1.0.16: article and course cards show the whole cover picture (no cropping). The frame keeps its shape so the
   grid stays tidy; a blurred, dimmed copy of the same picture fills any space around it. */
.cover.has-photo { position: relative; overflow: hidden; }
.cover.has-photo .cover-blur { position: absolute; inset: -20px; background: center / cover no-repeat; filter: blur(18px) brightness(.85); }
.article-hero .cover-blur { display: none; }
.cover.has-photo img { position: relative; object-fit: contain; }

/* v1.0.16: reading the handbook in order. The index shows where you are (start / continue / sign); each part ends with a
   big "I've read this part" button that opens the next part. The button does a "tada" when it comes into view. */
.hb-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--line-strong); border-left: 5px solid var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.hb-box-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.hb-box-text strong { font-size: 19px; }
.hb-box.is-complete { border-left-color: var(--green); font-size: 17px; }
.hb-box.is-complete > .ic { width: 30px; height: 30px; color: var(--green); flex: none; }
.hb-box.is-locked { border-left-color: var(--orange); }
.hb-progress { height: 10px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.hb-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.hb-next { margin: 36px 0 0; padding: 26px 22px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); text-align: center; }
.hb-next p { margin: 0 0 14px; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hb-next p .ic { width: 24px; height: 24px; color: var(--green); }
.hb-next.is-done { border-style: solid; border-color: var(--green); }
.btn.hb-next-btn { height: auto; min-height: 60px; padding: 14px 30px; font-size: 20px; line-height: 1.25; white-space: normal; box-shadow: 0 8px 24px rgba(11, 61, 145, .3); }
.hb-next .btn.hb-next-btn { width: 100%; max-width: 560px; justify-content: center; }
.btn.hb-next-btn .ic { width: 22px; height: 22px; }
.hb-links { margin: 18px 0 0; text-align: center; font-size: 17px; }
.hb-next-btn.tada { animation: hb-tada 1s ease-in-out; }
@keyframes hb-tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(.94) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .hb-next-btn.tada { animation: none; } }
.article-nav .nav-step { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--fill); font-size: 12.5px; font-weight: 700; vertical-align: -1px; flex: none; }
.article-nav-parts > li > a { display: flex; align-items: flex-start; }
.article-nav .is-done .nav-step { background: var(--green); color: #fff; }
.article-nav .nav-step .ic { width: 14px; height: 14px; }
.article-nav .is-locked > a { color: var(--text-2); opacity: .6; }
.article-nav-quick { display: flex; align-items: center; gap: 6px; margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--line); }
.article-nav-quick .ic { width: 15px; height: 15px; }
.article-nav-links { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1299px) { .article-nav-panel .article-nav-quick { display: flex; } }
@media print { .hb-next, .hb-box, .hb-links { display: none !important; } }

/* Areas turned off on Site areas: their own "Turned off" menu section (admins only), dimmed */
.nav-item.nav-item-off:not(.active) { color: var(--text-2); }
.nav-item.nav-item-off:not(.active) .ic { opacity: .55; }

/* Menu hover: a light blue highlight so it's clear what you're pointing at */
.nav-item:not(.active):hover, .nav-subitem:not(.active):hover { background: var(--accent-soft); color: var(--accent); }
.nav-item:not(.active):hover .ic { color: var(--accent); }
.nav-item, .nav-subitem { transition: background-color .15s ease, color .15s ease; }
.nav-caret:hover { background: var(--accent-soft); }

/* v1.0.22: a handbook form that isn't open yet says why (instead of blank lines), and the managers' sign-off table. */
.sign-locked { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--fill); }
.sign-locked > .ic { width: 24px; height: 24px; flex: none; color: var(--orange); }
.sign-locked > div { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.hb-mini { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.hb-mini span { display: block; height: 100%; background: var(--accent); }
.hb-report { margin-top: 24px; }

/* ------------------------------------------------------------- survey board overview (admins) */
.so-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.so-bar .segmented a, .so-bar .segmented { white-space: nowrap; }
.so-views a { display: inline-flex; align-items: center; gap: 6px; }
.so-views .ic { width: 16px; height: 16px; }
.so-periods { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.so-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.so-stats .stat { padding: 14px 16px; }
.so-grid { gap: 12px; margin-bottom: 4px; }
.so-grid .card, .so-attn .card { margin-bottom: 12px; }
.so-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 12px; }
.so-list { list-style: none; margin: 0; padding: 0; }
.so-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.so-list li:first-child { border-top: 0; padding-top: 0; }
.so-link { color: var(--text); }
.so-link:hover { text-decoration: none; }
.so-link:hover .hbar-label { color: var(--text); }
.so-table .card-head { padding: 14px 16px 0; margin-bottom: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .so-grid { grid-template-columns: 1fr; }
  .so-attn { grid-template-columns: 1fr; }
  .so-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.so-attn .card-head > a, .so-grid .card-head > a { white-space: nowrap; }
.so-table { margin-top: 12px; }

/* v1.0.25: the header band carries the two FASTSIGNS quotation marks at its left edge (Dylan's brand example,
   replacing the diagonal stripes), and the title stays left-aligned on every screen size. */
.topbar-title, .app-tabs-title { text-align: left; }


/* Boxes on hover: a soft blue edge on every card, tile and row you point at, so it's clear where you are.
   Mouse/trackpad only (phones don't hover) and never on printouts. */
@media (hover: hover) and (pointer: fine) {
  .card, .stat, .action-tile, .article-card, .list-card, .academy-card, .training-card, .vendor-card, .form-tile, .job-card,
  .cat-tile, .app-card, .shout, .contest-card, .area-row {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
  }
  .card:hover, .stat:hover, .action-tile:hover, .article-card:hover, .list-card:hover, .academy-card:hover, .training-card:hover,
  .vendor-card:hover, .form-tile:hover, .job-card:hover, .cat-tile:hover, .app-card:hover, .shout:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: var(--shadow-lg), 0 0 0 3px var(--accent-soft);
  }
  .area-row:hover, .table tbody tr:hover, .live-row:hover, .act-row:hover td { background-color: var(--accent-soft); }
}
@media print {
  .card, .stat, .table tbody tr { transition: none !important; }
}

/* ---- v1.0.34: to-dos spaced like the Daily checklist, wrapping on phones (no sideways scrolling),
   and a "N left" count next to the To-do title. */
.todo-list > .task, .home-next > .task { gap: 12px; padding: 14px 0; }
.todo-list .task-text, .home-next .task-text { flex: 1 1 auto; gap: 4px; }
.todo-list .task-text strong, .home-next .task-text strong { line-height: 1.35; overflow-wrap: anywhere; }
.todo-list .task-meta, .home-next .task-meta { margin-top: 2px; }
.todo-card h2, .home-day-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-left[hidden] { display: none; }
/* A to-do with a CoreBridge button puts its buttons on their own line when the title would get squeezed. */
.todo-list > .task:not(.task-estimate) { flex-wrap: wrap; align-items: flex-start; }
.todo-list > .task:not(.task-estimate) > .task-text { flex: 1 1 200px; }
.todo-list > .task:not(.task-estimate) > .todo-acts { margin-left: auto; }
.home-next > .task { flex-wrap: wrap; align-items: flex-start; }
.home-next > .task > .task-text { flex: 1 1 200px; }
.home-next > .task > .task-text ~ * { margin-left: auto; }


/* v1.0.35 Team page department colors (Dylan): sales #007940, graphic design #B71E53, production #F05232; office stays gray */
.person-card { --dept: var(--fill-2, #d9d9d9); --dept-ink: var(--text-2, #555); }
.person-card.dept-sales { --dept: #11804a; --dept-ink: #fff; }   /* v1.0.89: the Sales Dashboard's "Statement Makers" green */
.person-card.dept-design { --dept: #B71E53; --dept-ink: #fff; }
.person-card.dept-production { --dept: #F05232; --dept-ink: #fff; }
.team-grid > .person-card:not(.dept-office) { border-top: 3px solid var(--dept); }
.person-card .pill-dept { background: var(--dept); color: var(--dept-ink); }
.team-grid-more { margin-top: 12px; }
/* v1.0.36: management (owners, partners, managers, admins like Sales Operations) gets the FASTFLOW blue */
.person-card.dept-management { --dept: var(--accent); --dept-ink: #fff; }

/* ---- v1.0.37: tap a to-do to change it in place; a tidier add form on phones; date/time chips in Talk. */
.todo-list > .task.can-edit > .task-text { cursor: pointer; }
.todo-list > .task.can-edit > .task-text:hover strong { color: var(--accent); }
.todo-list > .task.is-editing > .task-text, .todo-list > .task.is-editing > .todo-acts { display: none; }
.todo-editor { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.todo-list > .task.is-editing > .todo-editor { flex-basis: calc(100% - 34px); }
.todo-editor > input[name="title"] { flex: 1 1 100%; min-width: 0; }
.todo-editor .todo-date { flex: 1 1 130px; min-width: 0; }
.todo-editor .todo-time { flex: 1 1 100px; min-width: 0; }
.todo-editor .todo-link { flex: 2 1 200px; }
.todo-editor-btns { display: flex; gap: 8px; margin-left: auto; }
.todo-add-btn { white-space: nowrap; }
@media (max-width: 860px) {
  /* Add form: the to-do on its own line, then date and link, then one even row of buttons (Talk, To-do, Estimate). */
  .todo-add { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .todo-add > * { grid-column: span 3; min-width: 0; width: 100%; }
  .todo-add > input[name="title"], .todo-add > .suggest-wrap { grid-column: 1 / -1; order: 0; }
  .todo-add > .todo-date { order: 1; }
  .todo-add > .todo-link { order: 2; }
  .todo-add:not(:has(.todo-link)) > .todo-date { grid-column: 1 / -1; }
  .todo-add > .btn { order: 3; justify-content: center; }
  .todo-add > .todo-add-btn { order: 4; }
  .todo-add > [data-new-estimate] { order: 5; }
  .todo-add:has([data-new-estimate]) > .btn { grid-column: span 2; }
  .todo-add > input[type="hidden"] { display: none; }
  .todo-editor-btns { flex: 1 1 100%; }
  .todo-editor-btns .btn { flex: 1; justify-content: center; }
}

/* Talk pop-up: each to-do's due date and time as chips (blue once set), and a grey Add button until there's something to add. */
.voice-items li { flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.voice-items [data-title] { flex: 1 1 calc(100% - 44px); }
.voice-when { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.voice-when .when-chip { min-width: 0; }
.when-chip input[type="date"] { width: 8.6em; }
.when-chip input[type="time"] { width: 6.6em; }
.when-chip input::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: .6; }
.when-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--line-2, var(--line)); border-radius: 999px; background: var(--fill); color: var(--text-2); cursor: pointer; font-size: 14px; }
.when-chip .ic { width: 16px; height: 16px; flex: none; }
.when-chip .when-label { font-weight: 600; }
.when-chip input { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; min-width: 0; }
.when-chip.is-set { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.when-chip { position: relative; white-space: nowrap; }
.when-chip.is-set .when-label { display: none; }
.when-chip:not(.is-set) input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.voice-dialog [data-save]:disabled { background: var(--fill); color: var(--text-3); border-color: var(--line); cursor: not-allowed; filter: none; opacity: 1; }

/* ---- v1.0.38: date boxes show a calendar icon and "Due date" (an empty date box is blank on iPhones),
   and a little more room between the add form and the to-do list. */
.date-field { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-3); }
.date-field > .ic { width: 18px; height: 18px; flex: none; color: var(--accent); }
.date-field > input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.date-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.date-field .date-hint { white-space: nowrap; }
.date-field.has-value .date-hint { display: none; }
.date-field:not(.has-value) > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.todo-card .todo-add, .home-day-card .todo-add { margin-bottom: 18px; }
.todo-card .todo-add + [data-live-part] .todo-list > .task:first-child, .home-day-card .todo-add + [data-live-part] .home-next > .task:first-child { border-top: 1px solid var(--line); }
/* A soft highlight on the to-do under the pointer (mice only, so phones don't keep it stuck after a tap). */
.todo-list > .task, .home-next > .task { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; transition: background-color .12s ease; }
@media (hover: hover) {
  .todo-list > .task:hover, .home-next > .task:hover { background: var(--accent-soft); }
}
@media (max-width: 860px) { .todo-editor .date-field { flex: 1 1 100%; } }

/* ---- v1.0.39: the same gap and divider between the add form and the list as the Daily checklist has under its
   header (a plain grey bar, no blue), and a clearer highlight on the to-do under the mouse. */
.todo-card .todo-add, .home-day-card .todo-add { margin-bottom: 0; }
.todo-divider { height: 8px; border-radius: var(--radius-sm); background: var(--fill); margin: 16px 0 14px; }
.todo-card .todo-divider + [data-live-part] .todo-list > .task:first-child, .home-day-card .todo-divider + [data-live-part] .home-next > .task:first-child { border-top: 0; }
@media (hover: hover) {
  .todo-list > .task:hover, .home-next > .task:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
}

/* v1.0.40: Talk shows a filling bar while it waits to see if you're still on the same to-do. */
.voice-hold { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.voice-hold > span { display: block; height: 100%; width: 0; background: var(--accent); }
.voice-hold[hidden], .voice-hold-note[hidden] { display: none; }
.voice-hold-note { margin-top: 2px; }

/* Live updates (v1.0.41, assets/live.js): notices at the bottom when something changes elsewhere */
.toast-live { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; font-weight: 500; text-align: left; }
.toast-live strong { font-weight: 700; white-space: nowrap; }
.toast-live span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-live .toast-btn { flex: none; white-space: nowrap; border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 700; font-size: 16px; background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; }
.toast-live .toast-x { flex: none; border: 0; background: transparent; color: inherit; opacity: .7; font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; }
.toast-live .toast-x:hover { opacity: 1; }
.toast-live.toast-error .toast-btn { background: #fff; color: var(--red); }
html.live-saving, html.live-saving * { cursor: progress; }
/* ---- v1.0.44: drag to-dos into your own order on My day (the grip on the left). */
.drag-handle { flex: none; width: 18px; height: 24px; margin: 0 -4px 0 -6px; display: grid; place-items: center; color: var(--text-3); cursor: grab; touch-action: none; opacity: .55; }
.drag-handle .ic { width: 16px; height: 16px; }
.todo-list > .task:hover .drag-handle { opacity: 1; color: var(--accent); }
.todo-done .drag-handle { visibility: hidden; }
.todo-list > .task.is-dragging { background: var(--surface); box-shadow: 0 6px 18px rgba(16, 32, 64, .18), inset 3px 0 0 var(--accent); position: relative; z-index: 2; }
body.todo-dragging, body.todo-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.todo-list .task-estimate > .drag-handle { align-self: flex-start; margin-top: 0; }
@media (max-width: 860px) { .drag-handle { opacity: .8; width: 22px; } }
.todo-list > .task.is-editing > .todo-editor { flex-basis: calc(100% - 60px); }


/* v1.0.45: every menu icon is cropped to its drawing and pinned to the left edge of the same 22 x 18 box, so the
   icons line up on the left like the labels do and none looks smaller or set in (Knowledge & HR). */
.nav-item .ic.ic-nav { width: 22px; height: 18px; flex: 0 0 22px; padding: 0; transform: none; overflow: visible; }

/* v1.0.47 Team page: "Also goes by" under the name */
.person-goes-by { font-size: 15px; font-style: italic; color: var(--text-2); line-height: 1.25; margin-top: 1px; overflow-wrap: anywhere; }

/* v1.0.52: the browser's own calendar/clock button is stretched invisibly over the whole Due date / Time box, so a click
   anywhere opens it, in every Chromium browser (Chrome, Edge, Opera, Brave) without needing script. */
.date-field > input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; background: transparent; }
.date-field > input::-webkit-inner-spin-button, .date-field > input::-webkit-clear-button { display: none; }
.todo-editor .todo-date { flex-basis: 165px; }
.todo-editor .todo-time { flex-basis: 135px; }

/* v1.0.54: menu icons and labels a little larger (icons 26 x 21, was 22 x 18; labels 19.5px, was 18.5px). Icons stay
   cropped and pinned left so they line up, and labels stay on one line. */
.nav-item .ic.ic-nav { width: 26px; height: 21px; flex: 0 0 26px; }
.nav-item { font-size: 19.5px; }
.nav-item > span:not(.nav-badge):not(.nav-off) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* v1.0.55: notices get room to breathe: wider, roomier, the message on one line where it fits (v1.0.57: also on small laptops, zoomed-in browsers and tablets) */
@media (min-width: 600px) {
  .toast-live { max-width: min(960px, calc(100vw - 48px)); min-width: min(440px, calc(100vw - 48px)); gap: 20px; padding: 14px 14px 14px 24px; }
  .toast-live span { flex: 1 1 auto; overflow-wrap: normal; }
  .toast-live .toast-btn { padding: 8px 18px; margin-left: 4px; }
}
/* Phones: full width, the heading on its own line above the message, buttons on the right */
@media (max-width: 599px) {
  .toasts:has(.toast-live) { width: calc(100vw - 24px); }
  .toast-live { display: grid; grid-template-columns: 1fr auto auto; column-gap: 10px; row-gap: 2px; width: 100%; max-width: none; box-sizing: border-box; padding: 12px 8px 12px 16px; }
  .toast-live strong { grid-column: 1; grid-row: 1; white-space: normal; }
  .toast-live span { grid-column: 1; grid-row: 2; overflow-wrap: break-word; }
  .toast-live .toast-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .toast-live .toast-x { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .toast-live:not(:has(.toast-btn)) .toast-x { grid-column: 2; }
}
/* v1.0.58: home page Knowledge & HR cards lie on their side (picture left, title right), two to a row, so long titles
   like "Handbook Section 5: General Standards of Conduct" get the room to wrap cleanly instead of squeezing into a narrow
   column. The picture's own title text is left off here because the title sits right beside it. */
.article-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.article-grid-home .article-card { flex-direction: row; align-items: stretch; }
.article-grid-home .article-card .cover { flex: 0 0 36%; aspect-ratio: auto; min-height: 128px; }
.article-grid-home .article-card .cover-art { align-items: center; justify-content: center; }
.article-grid-home .article-card .cover-art span { display: none; }
.article-grid-home .article-card .cover-art .cover-icon { position: static; width: 46%; max-width: 72px; max-height: 60%; }
.article-grid-home .article-card-body { padding: 14px 16px; justify-content: center; gap: 6px; min-width: 0; }
.article-grid-home .article-card-body h3 { font-size: 20px; line-height: 1.3; overflow-wrap: break-word; }
.article-grid-home .article-meta .pill { max-width: 100%; }
@media (max-width: 860px) {
  .article-grid-home { grid-template-columns: 1fr; gap: 10px; }
  .article-grid-home .article-card .cover { flex-basis: 34%; min-height: 104px; }
  .article-grid-home .article-card-body { padding: 12px 14px; gap: 4px; }
  .article-grid-home .article-card-body h3 { font-size: 18.5px; }
  .article-grid-home .article-meta .pill { height: 22px; font-size: 13.5px; padding: 0 8px; }
}
/* Sign Materials Academy lessons now live in Knowledge & HR: their category color, the part-of-series bar and the self-check */
.tone-teal { background: rgba(48, 176, 199, 0.15); color: #0e7c8f; }
.series-nav { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin: 28px 0 8px; }
.series-nav .series-step { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); min-width: 0; }
.series-nav .series-step:hover { text-decoration: none; border-color: var(--accent); }
.series-nav .series-step.next { text-align: right; }
.series-nav .series-step small { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--accent); font-size: 13.5px; }
.series-nav .series-step strong { font-size: 18px; line-height: 1.3; }
.series-where { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 14px; color: var(--text-2); margin: 0 0 6px; }
.self-check { margin-top: 28px; }
.self-check h2 { margin-bottom: 4px; }
.self-check .sc-q { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-top: 12px; }
.self-check .sc-q p { font-weight: 600; margin: 0 0 10px; }
.self-check .sc-opts { display: flex; flex-direction: column; gap: 6px; }
.self-check .sc-opt { text-align: left; font: inherit; font-size: 17px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2, var(--surface)); color: var(--text); cursor: pointer; white-space: normal; }
.self-check .sc-opt:hover { border-color: var(--accent); }
.self-check .sc-q.answered .sc-opt { cursor: default; }
.self-check .sc-opt.right { border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 600; }
.self-check .sc-opt.wrong { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.self-check .sc-result { margin-top: 14px; font-weight: 600; }
@media print { .series-nav, .self-check { display: none; } }
/* Knowledge & HR cards: a cover without a photo shows just its icon, centered. The title is printed right under it, so the
   big cover lettering (which ran into the icon and wrapped to four lines on handbook parts) is left off the cards. */
.article-card .cover-art { align-items: center; justify-content: center; }
.article-card .cover-art span { display: none; }
.article-card .cover-art .cover-icon { position: static; width: 30%; max-width: 96px; max-height: 58%; }
.article-grid-home .article-card .cover-art .cover-icon { width: 46%; max-width: 72px; max-height: 60%; }
/* Knowledge & HR category tiles: wide enough for "Sign Materials Academy" on one or two lines */
.cat-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cat-tile { padding: 12px 14px; }
.cat-tile strong { line-height: 1.25; }
@media (max-width: 860px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-tile { gap: 10px; padding: 10px 12px; } }

/* v1.0.61: Check Yourself scores are saved; admins' Quiz Scores page (quiz_scores.php) */
.self-check .sc-last { margin: 0 0 4px; }
.self-check .sc-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.self-check .sc-end .sc-result { margin: 0; }
.article-readers td a .pill { margin-left: 4px; }
.qs-crumbs { margin: 0 0 14px; }
.qs-crumbs a { white-space: nowrap; }
.qs-grid th { font-size: 14px; line-height: 1.25; vertical-align: bottom; min-width: 84px; }
.qs-grid th:first-child { min-width: 0; }
.qs-grid th a { color: inherit; }
.qs-grid td, .qs-grid th { padding-left: 10px; padding-right: 10px; }
.qs-grid tfoot td { border-top: 2px solid var(--line); background: var(--surface-2, var(--surface)); }
.qs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .qs-split { grid-template-columns: minmax(0, 1fr); } }
.qs-try { margin-bottom: 14px; }
.qs-answers { margin: 0; padding: 4px 16px 14px 40px; }
.qs-answers li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.qs-answers li:last-child { border-bottom: 0; }
.qs-answers li > div { margin-top: 3px; }
.qs-answers li.is-right > div:first-of-type { color: var(--green); font-weight: 600; }
.qs-answers li.is-wrong > div:first-of-type { color: var(--red); font-weight: 600; }
.qs-answers .ic { width: 16px; height: 16px; vertical-align: -3px; }
.qs-split > .card { margin: 0; }
.qs-grid th:first-child, .qs-grid td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.qs-grid tfoot td:first-child { background: var(--surface-2, var(--surface)); }

/* v1.0.65: My day Daily Checklist head: "Each person" / "Edit checklist" as small icon buttons, never wrapping.
   The checklist card is narrow, so they get their own row under the title. */
.checklist-card .card-head { flex-wrap: wrap; }
.checklist-card .card-head > div:first-child { flex: 1 1 100%; }
.checklist-btns { display: flex; gap: 6px; flex-wrap: nowrap; width: 100%; }
.checklist-btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v1.0.65: Daily checklist tasks: move up/down, edit, pause and delete sit side by side in one row. */
.task-row-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.task-row-acts form { display: inline-flex !important; align-items: center; gap: 2px; margin: 0; }
/* v1.0.65: My day: "See a team member's My day" sits on the My day / Manager view line, on the right. */
.myday-bar { margin-bottom: 8px; }
.myday-bar .viewing-pick { margin: 0 0 0 auto; flex-wrap: nowrap; }
.myday-bar .viewing-pick label { white-space: nowrap; }
@media (max-width: 599px) {
  .myday-bar .viewing-pick { margin-left: 0; width: 100%; }
  .myday-bar .viewing-pick .select { flex: 1; min-width: 0; }
}

/* Site areas: Linked apps */
.link-list { margin: 0 -16px 12px; }
.link-form { margin: 8px 0 0; flex-wrap: wrap; align-items: center; }

/* v1.0.71 Team page: titled divider above part-time employees (after the last center, e.g. Tarzana), and extensions */
.section-title.team-divider { position: relative; margin-top: 44px; }
.section-title.team-divider::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; border-top: 2px dashed var(--border, #dbe3f0); }
.section-title.team-divider .muted { color: inherit; opacity: .75; }
.person-contact .person-ext { display: flex; align-items: center; gap: 6px; }
.staff-search { flex: 1 1 260px; min-width: 200px; }
.person-name .person-center { display: flex; align-items: center; gap: 4px; }
.person-name .person-center .ic { width: 13px; height: 13px; flex: none; }
/* Call list drawer: admin tools for the open contact */
.acct-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 22px; padding: 12px 0; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); }
/* Roomier contact facts (company, title, email…) in the call drawer */
#acctDialog .acct-facts div { padding: 12px 16px; gap: 3px; }
#acctDialog .acct-facts strong { line-height: 1.35; }
#acctDialog .pb-guide { margin-top: 0; }
.acct-admin > .muted { margin-right: 4px; }
.acct-admin .acct-remove { color: var(--red); }
#acctDialog .acct-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* v1.0.74 call lists: someone else's change flashes the row instead of a notice */
@keyframes rowFlash { 0%, 35% { background: rgba(255, 196, 0, .35); } 100% { background: transparent; } }
#sheetBody tr.row-flash > td { animation: rowFlash 2s ease-out; }

/* v1.0.75 call lists: "# No Longer In Service" is flagged light red (status pill, legend, and the whole row) */
.tone-pink { --tone: #d0342c; --tone-soft: #ffe1df; }
.pill-pink, .cell-select.tone-pink, .outcome.tone-pink { background: #ffe1df; color: #c0261e; }
.seg.tone-pink, .dot.tone-pink { background: #ff8f88; }
.sheet tr.is-dead td { background: #fff1f0; opacity: 1; }
.sheet tr.is-dead:hover td { background: #ffe6e4; }
[data-theme="dark"] .pill-pink, [data-theme="dark"] .cell-select.tone-pink, [data-theme="dark"] .outcome.tone-pink { background: rgba(255, 105, 97, .2); color: #ff9a94; }
[data-theme="dark"] .sheet tr.is-dead td { background: rgba(255, 69, 58, .12); }

/* v1.0.76 call lists: "Update phone / email" for everyone; the numbers the list came in with stay on file */
#acctDialog .acct-facts .acct-orig strong { color: var(--text-2); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line-strong); }
#contactDialog .field-hint { margin-top: 4px; }

/* v1.0.81: requested date from the request form, on Job Board cards and the accept box */
.job-card .jc-wanted { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface-2, rgba(0,0,0,.05));
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.request-wanted { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.request-wanted .ic { flex: none; }

/* v1.0.82: job notes from a request form, as easy-to-scan questions and answers */
.job-notes.is-structured { padding: 0; background: none; border: 1px solid var(--line); overflow: hidden; }
.job-notes .jn-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--fill-2); font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--line); }
.job-notes .jn-free { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.job-notes .jn-group { padding: 4px 14px 10px; background: var(--surface); }
.job-notes .jn-group + .jn-group { border-top: 6px solid var(--fill-2); }
.job-notes .jn-group h4 { margin: 10px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.job-notes .jn-list { margin: 0; display: grid; }
.job-notes .jn-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--line); line-height: 1.4; }
.job-notes .jn-row:first-child { border-top: 0; }
.job-notes .jn-row dt { font-weight: 700; color: var(--text); font-size: 16px; }
.job-notes .jn-row dd { margin: 0; overflow-wrap: anywhere; font-size: 17px; }
.job-notes .jn-row dd.is-quiet { color: var(--text-3, var(--text-2)); }
.job-notes .jn-link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.job-notes .jn-link .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .job-notes .jn-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
dialog .job-notes .jn-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* v1.0.83: set the date from the job's pop-up, and cards gliding to their new day */
.job-date-form { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--fill-2); display: grid; gap: 8px; justify-items: start; }
.job-date-form .jdf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.job-date-form .jdf-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.job-date-form .jdf-wanted { font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.job-date-form .jdf-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.job-date-form .jdf-field { display: grid; gap: 3px; flex: 1 1 150px; min-width: 0; }
.job-date-form .jdf-field > span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.job-date-form .jdf-field em { font-style: normal; font-weight: 400; }
.job-date-form .jdf-field .input { width: 100%; }
.job-date-form .btn { white-space: nowrap; }
.job-date-form .jdf-flash .input { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .2s; }
.job-card.jc-moving { box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12); }
.job-card.jc-arrive { animation: jc-arrive 1.3s ease-out; }
@keyframes jc-arrive { 0% { box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0,0,0,.15); } 100% { box-shadow: 0 1px 2px rgba(0,0,0,.06); } }
.job-card.jc-leaving { animation: jc-leave .65s ease-in forwards; }
@keyframes jc-leave { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .job-card.jc-arrive, .job-card.jc-leaving { animation: none; } }

/* v1.0.89: section bars use the Sales Dashboard's colors (Dylan: "match the same colors for things like sales, statement makers").
   Royal blue = sales and numbers (Sales, Goals, Pipeline), green = salespeople and customers ("Statement Makers",
   Staff & Salespeople, Customers), light blue = feeds and side panels (FastFlow Feed, Monthly goal). */
.section-title, .section-head { background-color: #1450b4; background-image: none; }
.section-head .section-title { background: none; }
.section-title.tone-green, .section-head.tone-green { background-color: #11804a; }
.section-title.tone-light, .section-head.tone-light { background-color: #3f8fdc; }
:root[data-theme="dark"] .section-title, :root[data-theme="dark"] .section-head { background-color: #2a66c9; }
:root[data-theme="dark"] .section-title.tone-green, :root[data-theme="dark"] .section-head.tone-green { background-color: #11804a; }
:root[data-theme="dark"] .section-title.tone-light, :root[data-theme="dark"] .section-head.tone-light { background-color: #2a6fb8; }
:root[data-theme="dark"] .section-head .section-title { background: none; }
.section-title .muted { color: rgba(255, 255, 255, .78); }   /* counts like "· 3" stay readable on the colored bar */

/* v1.0.105 Staff: tick people, then "Email temporary passwords" */
.table .pick-col { width: 1%; padding-right: 0; }
.pick-col input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.pick-col input:disabled { cursor: not-allowed; opacity: .35; }
tr.is-picked td { background: var(--accent-soft, rgba(18, 89, 195, .07)); }
.pick-bar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; width: max-content; max-width: 100%; margin: 12px auto 0; padding: 10px 16px; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(20, 40, 75, .18); white-space: nowrap; }
.pick-bar[hidden] { display: none; }
.pw-who { max-height: 200px; overflow: auto; margin: 6px 0 10px; padding-left: 20px; }
.pw-warn { color: var(--orange-text, #b45309); font-weight: 600; }
@media (max-width: 860px) { .pick-bar { bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 31; gap: 10px; padding: 8px 12px; } }

/* ---- v1.0.111: pictures on My day to-dos (assets/todo_images.js). Picture button, previews under the form,
   thumbnails on the to-do rows, a small chooser menu and a full-screen viewer. */
[data-todo-pic-input] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.todo-pic-btn { white-space: nowrap; justify-content: center; }
.todo-pic-btn.has-pics { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.todo-pics { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; grid-column: 1 / -1; order: 6; }
.todo-pics[hidden] { display: none; }
.todo-pic { position: relative; width: 72px; height: 72px; flex: none; border-radius: 10px; overflow: hidden; background: var(--fill); border: 1px solid var(--line); }
.todo-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.todo-pic-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.65); color: #fff; font-size: 18px; line-height: 24px; text-align: center; }
.todo-pic-x:hover { background: var(--red, #c00); }
.todo-pic.is-loading { display: grid; place-items: center; }
.todo-pic-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: todo-pic-spin .8s linear infinite; }
@keyframes todo-pic-spin { to { transform: rotate(360deg); } }
form.is-pic-drop, [data-todo-drop].is-pic-drop { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 8px; background: var(--accent-soft); }
.todo-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.todo-thumb { display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--fill); }
.todo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.todo-thumb:hover { border-color: var(--accent); }
.task.is-done .todo-thumb { opacity: .6; }
.todo-editor .todo-pic-btn { flex: 0 0 auto; }
.todo-editor .todo-pics { order: 1; } .todo-editor .todo-editor-btns { order: 2; }
/* Computers: Picture sits next to Talk on the to-do line. */
.todo-add:has(.todo-mic):has(.todo-pic-btn) > input[name="title"], .todo-add:has(.todo-mic):has(.todo-pic-btn) > .suggest-wrap { flex: 1 1 calc(100% - 262px); }
.todo-add .todo-pic-btn { flex: 0 0 128px; }
.todo-pop-pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.todo-pop-pics > label { flex: 1 1 100%; }
.todo-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: 48px 16px; }
.todo-lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 6px; background: #fff; }
.todo-lightbox-x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 30px; line-height: 44px; cursor: pointer; }
.todo-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; font-size: 40px; cursor: pointer; }
.todo-lightbox-nav.prev { left: 10px; } .todo-lightbox-nav.next { right: 10px; }
.todo-lightbox-open { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; text-decoration: underline; }
@media (max-width: 860px) {
  /* Phones: the Picture button sits next to the date (and link) boxes, as an icon. */
  .todo-add:has(.todo-pic-btn) > .btn.todo-pic-btn { order: 2; grid-column: span 1; padding-left: 0; padding-right: 0; }
  .todo-add > .todo-pic-btn > span { display: none; }
  .todo-add:has(.todo-pic-btn) > .todo-date { grid-column: span 2; }
  .todo-add:has(.todo-pic-btn):not(:has(.todo-link)) > .todo-date { grid-column: span 5; }
  .todo-add:has(.todo-pic-btn) > .todo-link { order: 2; grid-column: span 3; }
  .todo-editor .todo-pic-btn { flex: 1 1 100%; }
}

/* v1.0.113: header band title matches the Sales Dashboard's section headers (sales-dashboard/public/assets/app.css .sec-head h2):
   first word Antonio bold, the rest Saira Extra Condensed hairline at 1.25em (same cap height), all caps, white, 52px
   (46px on phones). Same self-hosted font files and pinned metrics as the dashboard, so both halves sit on one centre line. */
@font-face { font-family: "Antonio"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/antonio-latin-variable.woff2") format("woff2");
  ascent-override: 95.9%; descent-override: 10%; line-gap-override: 0%; }
@font-face { font-family: "Saira Extra Condensed"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/saira-extra-condensed-latin-100-normal.woff2") format("woff2");
  ascent-override: 76.8%; descent-override: 8%; line-gap-override: 0%; }
.topbar { padding-top: 4px; padding-bottom: 4px; }
.topbar-title { font: 700 52px/1.08 "Antonio", var(--font-cond); text-transform: uppercase; letter-spacing: .005em; color: #fff; }
.topbar-title b { font-weight: 700; }
.topbar-title span { font-family: "Saira Extra Condensed", "Antonio", var(--font-cond); font-weight: 100; font-size: 1.25em; line-height: .8; letter-spacing: 0; color: #fff; }
@media (max-width: 760px) {
  .topbar-title { font-size: 46px; }
}

/* v1.0.114: Team cards: a long role bar (e.g. "Partner, Outside Sales Representative") wraps instead of being cut off. */
.team-grid .person-tags .pill-dept { white-space: normal; text-overflow: clip; line-height: 1.3; height: auto; padding-top: 3px; padding-bottom: 3px; }

/* ---- v1.0.115: the Picture button opens an "Add Pictures" pop-up (drop box, choose, paste); photos can be dropped
   (or pasted with the mouse over) straight onto a to-do on the list. */
.todo-pic-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 150px; margin: 14px 0 10px;
  border: 2px dashed var(--line-2, var(--line)); border-radius: 12px; background: var(--fill); color: var(--text-2); font: inherit; cursor: pointer; padding: 16px; }
.todo-pic-drop svg { width: 40px; height: 40px; color: var(--accent); }
.todo-pic-drop strong { color: var(--text); font-size: 17px; }
.todo-pic-drop:hover, .todo-pic-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.todo-pic-paste { width: 100%; justify-content: center; }
.todo-pic-dialog-pics { margin-top: 12px; }
.todo-pic-dialog .form-actions { margin-top: 14px; }
[data-todo-drop].is-pic-uploading { opacity: .55; pointer-events: none; }
/* v1.0.116: My account → Profile — locked fields (staff can't change them) look clearly disabled:
   grey fill, muted text, dashed border, a lock icon and a not-allowed cursor. */
.profile-card .input:disabled {
  background-color: rgba(120, 130, 145, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* ---- v1.0.118: pictures on estimates (New Estimate pop-up, the estimate's Details, thumbnails on its My day row). */
.est-pics .todo-pics { margin-top: 2px; }
.task-link .todo-thumbs { cursor: zoom-in; }
.field.todo-pop-pics { flex-direction: row; justify-content: flex-start; text-align: left; }
.todo-pop-pics > .field-label { flex: 1 1 100%; }

/* ---------------------------------------------------------------- v1.0.119: scheduling in the board pop-up */
.job-date-form .jdf-final { font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.job-date-form .jdf-final.is-final { background: var(--green-soft); color: var(--green); }
.job-date-form .jdf-final.is-draft { background: var(--orange-soft); color: var(--orange); }
.job-date-form .jdf-block { display: grid; gap: 6px; width: 100%; }
.job-date-form .jdf-label { font-size: 14px; font-weight: 600; color: var(--text-2); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.job-date-form .jdf-label em { font-style: normal; font-weight: 400; }
.job-date-form .jdf-leave { font-size: 14.5px; color: var(--text-2); }
.job-date-form .jdf-leave:empty { display: none; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; width: 100%; }
.slot-opt { position: relative; cursor: pointer; }
.slot-opt > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.slot-opt > span { display: grid; gap: 1px; height: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-left: 4px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.slot-opt b { font-size: 15.5px; white-space: nowrap; }
.slot-opt small { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.slot-opt small.is-busy { color: var(--orange); font-weight: 600; }
.slot-opt:hover > span { border-color: var(--accent); }
.slot-opt > input:checked + span { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.slot-opt > input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-other .input { margin-top: 3px; width: 100%; }
.pick-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-btn { position: relative; cursor: pointer; }
.pick-btn > input { position: absolute; opacity: 0; pointer-events: none; }
.pick-btn > span { display: inline-block; padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; white-space: nowrap; }
.pick-btn:hover > span { border-color: var(--accent); }
.pick-btn > input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick-btn > input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.jd-final-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.jd-final-row .btn { white-space: nowrap; }
.jd-final-row .jd-final-note { flex-basis: 100%; margin: 0; }
.job-card.is-draft { border-style: dashed; }
.jc-draft { font-size: 12px; font-weight: 700; color: var(--orange); background: var(--orange-soft); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.jc-phone { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }

/* v1.0.119: request forms use the page, with the Job Board's next two weeks on the right */
.request-form-wrap { display: grid; gap: 20px; align-items: start; }
.request-form-wrap .request-form { max-width: none; }
.request-form-wrap.has-preview { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .request-form-wrap.has-preview { grid-template-columns: 1fr; } }
.sched-preview { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.sched-preview strong { display: inline-flex; gap: 6px; align-items: center; }
.sp-days { display: grid; gap: 6px; }
.sp-day { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 9px; }
.sp-day.is-today { border-color: var(--accent); }
.sp-day.is-picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.sp-date { display: flex; gap: 6px; align-items: baseline; font-size: 15px; }
.sp-count { margin-left: auto; font-size: 13px; color: var(--text-3); }
.sp-job { display: flex; gap: 8px; font-size: 14px; padding: 2px 0 2px 8px; border-left: 3px solid var(--tone, var(--line)); margin-top: 3px; }
.sp-time { color: var(--text-2); white-space: nowrap; min-width: 82px; }
.sp-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-buttons .choice { border-radius: 999px; font-weight: 600; }
.choice-buttons .choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-buttons .choice { position: relative; }
.choice-buttons .choice:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice-buttons .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-other > span { min-width: 0; }
.slot-other .input { min-width: 0; max-width: 100%; box-sizing: border-box; padding-left: 6px; padding-right: 4px; }

/* ---------------------------------------------------------------- v1.0.120 My Jobs (routes.php, was Routes / My route) */
.mj-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; }
.mj-toolbar .segmented a { white-space: nowrap; }
.mj-who { display: flex; align-items: center; gap: 8px; margin: 0; }
.mj-who .select { min-width: 200px; }
.mj-count { margin-left: auto; }
.mj-day { margin: 0 0 22px; max-width: 900px; }
.mj-day-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.mj-day-head h2 { margin: 0; font-size: 21px; font-weight: 700; }
.mj-day.is-today .mj-day-head { border-bottom-color: var(--accent); }
.mj-day.is-today .mj-day-head h2 { color: var(--accent); }
.mj-day.is-late .mj-day-head { border-bottom-color: var(--orange); }
.mj-day.is-late .mj-day-head h2 { color: var(--orange); }
.mj-day-head .col-count { font-size: 14px; font-weight: 700; color: var(--text-2); background: var(--fill); border-radius: var(--radius-sm); padding: 1px 8px; }
.mj-route { margin-left: auto; white-space: nowrap; }
.mj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mj-job { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--tone); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mj-job.is-done { opacity: .8; }
.mj-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.mj-kind { color: var(--tone); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.mj-when { font-weight: 600; font-size: 15px; }
.mj-time { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 16px; background: var(--tone-soft); color: var(--text); padding: 2px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.mj-time .ic { width: 15px; height: 15px; }
.mj-leave { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.mj-pills { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mj-title { font-size: 21px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; line-height: 1.25; }
.mj-sub { font-size: 16px; color: var(--text-2); }
.mj-address { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 17px; color: var(--accent); overflow-wrap: anywhere; margin-top: 2px; }
.mj-address .ic { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.mj-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.mj-actions form { margin: 0; }
.mj-actions .btn { white-space: nowrap; }
.mj-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; margin: 6px 0 0; }
.mj-facts div { min-width: 0; }
.mj-facts dt { font-size: 14px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.mj-facts dd { margin: 0; font-size: 16.5px; overflow-wrap: anywhere; }
.mj-nobody { color: var(--red); font-weight: 600; }
.mj-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mj-pics img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); display: block; border: 1px solid var(--line); }
.mj-pics.is-small img { width: 72px; height: 72px; }
.mj-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mj-details { margin-top: 10px; }
.mj-details > summary { cursor: pointer; font-size: 16px; font-weight: 600; color: var(--accent); }
.mj-details .job-notes { margin-top: 8px; }
.mj-note { margin-top: 8px; padding: 8px 12px; background: var(--fill-2); border-radius: var(--radius-sm); font-size: 16px; }
.mj-pod { margin-top: 8px; padding: 8px 12px; background: var(--green-soft); border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  .mj-job { padding: 12px; }
  .mj-count { margin-left: 0; }
  .mj-who { width: 100%; }
  .mj-who .select { flex: 1; min-width: 0; }
  .mj-route { margin-left: 0; width: 100%; justify-content: center; }
  .mj-actions .btn { flex: 1 0 auto; height: 42px; font-size: 16px; justify-content: center; }
  .mj-pills { margin-left: 0; }
  .mj-pics img { width: calc(33.333% - 6px); height: auto; aspect-ratio: 1; }
  .mj-pics a { display: contents; }
}
/* v1.0.120: "On the way · Fernando" pills can be long: let the card foot wrap instead of spilling out of the card. */
.job-card .jc-foot { flex-wrap: wrap; row-gap: 4px; }
.job-card .jc-foot .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v1.0.121: request form icons in FASTSIGNS colors, white icons (Dylan) */
.rf-icon.rf-install, .rf-icon.rf-delivery, .rf-icon.rf-collection, .rf-icon.rf-survey, .rf-icon.rf-redo { color: #fff !important; }
.rf-icon.rf-install { background: #f47d2e; }
.rf-icon.rf-delivery { background: #f99e33; }
.rf-icon.rf-collection { background: #006953; }
.rf-icon.rf-survey, .rf-icon.rf-redo { background: #f05232; }
.form-tile:has(.rf-install):hover { border-color: #f47d2e; }
.form-tile:has(.rf-delivery):hover { border-color: #f99e33; }
.form-tile:has(.rf-collection):hover { border-color: #006953; }
.form-tile:has(.rf-survey):hover, .form-tile:has(.rf-redo):hover, .request-form-head:has(.rf-survey), .request-form-head:has(.rf-redo) { border-top-color: #f05232; }
.form-tile:has(.rf-survey):hover, .form-tile:has(.rf-redo):hover { border-color: #f05232; }
.request-form-head:has(.rf-install) { border-top-color: #f47d2e; }
.request-form-head:has(.rf-delivery) { border-top-color: #f99e33; }
.request-form-head:has(.rf-collection) { border-top-color: #006953; }

/* v1.0.121: Job Board in FASTSIGNS blues, bolder (Dylan). Royal blue day headers, navy for today, light blue for
   To schedule. Cards get a full colored border in the request-form colors: Installation #f47d2e, Delivery #f99e33,
   Collection #006953, Other navy. */
.board, .month-wrap, .board-legend { --jb-royal: #1450b4; --jb-navy: #0a2a66; --jb-light: #3f8fdc; --jb-tint: #e3ecf9; --jb-tint-2: #d2e1f6; }
:root[data-theme="dark"] .board, :root[data-theme="dark"] .month-wrap, :root[data-theme="dark"] .board-legend { --jb-royal: #2a66c9; --jb-navy: #0d2350; --jb-light: #2a6fb8; --jb-tint: rgba(42, 102, 201, .14); --jb-tint-2: rgba(42, 102, 201, .26); }
:is(.board, .month-wrap, .board-legend) .kind-install { --tone: #f47d2e; --tone-soft: rgba(244, 125, 46, .15); }
:is(.board, .month-wrap, .board-legend) .kind-green { --tone: #f99e33; --tone-soft: rgba(249, 158, 51, .17); }
:is(.board, .month-wrap, .board-legend) .kind-collection { --tone: #006953; --tone-soft: rgba(0, 105, 83, .14); }
:is(.board, .month-wrap, .board-legend) .kind-gray { --tone: #0a2a66; --tone-soft: rgba(10, 42, 102, .12); }
:root[data-theme="dark"] :is(.board, .month-wrap, .board-legend) .kind-gray { --tone: #9db6e0; }
:root[data-theme="dark"] :is(.board, .month-wrap, .board-legend) .kind-collection { --tone: #2fbf93; }
.board-legend .legend-item { font-weight: 700; color: var(--text); }
.board-legend .legend-item i { width: 14px; height: 14px; border-radius: 3px; }
.board .board-col, .month-wrap .board-col { background: var(--jb-tint); border-radius: var(--radius); overflow: hidden; }
.board .board-col header, .month-wrap .board-col header { background: var(--jb-royal); color: #fff; padding: 9px 8px 9px 12px; margin-bottom: 4px; }
.board .board-col header .col-date { color: rgba(255, 255, 255, .88); }
.board .board-col header .col-count, .month-wrap .board-col header .col-count { background: rgba(255, 255, 255, .22); color: #fff; }
.board .board-col header .icon-btn, .month-wrap .board-col header .icon-btn { color: #fff; }
.board .board-col header .icon-btn:hover { background: rgba(255, 255, 255, .18); }
.board .board-col.is-today { background: var(--jb-tint-2); box-shadow: inset 0 0 0 3px var(--jb-navy); }
.board .board-col.is-today header { background: var(--jb-navy); }
.board .board-col.is-past:not(.is-today) header { opacity: 1; background: #6f86ad; }
.board .board-col.col-unscheduled, .month-wrap .board-col.col-unscheduled { background: var(--jb-tint); }
.board .board-col.col-unscheduled header, .month-wrap .board-col.col-unscheduled header { background: var(--jb-light); }
.board .board-col.col-hold { background: repeating-linear-gradient(135deg, var(--jb-tint) 0 10px, transparent 10px 20px), var(--jb-tint-2); }
.board .board-col.col-hold header { background: #4a5d80; }
.board .board-list.drop-hover, .month-wrap .board-list.drop-hover { background: var(--jb-tint-2); }
:is(.board, .month-wrap) .job-card { border: 2.5px solid var(--tone); box-shadow: 0 1px 3px rgba(10, 42, 102, .14); padding-left: 11px; }
:is(.board, .month-wrap) .job-card:hover { border-color: var(--tone); border-left-color: var(--tone); box-shadow: 0 3px 10px rgba(10, 42, 102, .2); }
:is(.board, .month-wrap) .job-card.is-compact { border-width: 2px; padding-left: 8px; }
:is(.board, .month-wrap) .job-card .jc-top, :is(.board, .month-wrap) .job-card[class*="kind-"] .jc-top { color: var(--tone) !important; font-weight: 800; font-size: 14px; }
:is(.board, .month-wrap) .job-card .jc-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.board, .month-wrap) .job-card .jc-time { color: var(--jb-navy); font-weight: 800; }
:root[data-theme="dark"] :is(.board, .month-wrap) .job-card .jc-time { color: #cfe0ff; }
:is(.board, .month-wrap) .job-card .jc-title { font-weight: 750; }
:is(.board, .month-wrap) .job-card .jc-who, :is(.board, .month-wrap) .job-card[class*="kind-"] .jc-who { background: var(--tone); color: #fff !important; }
:is(.board, .month-wrap) .job-card.is-draft { border-style: dashed; }
.month-wrap .month { border-color: var(--jb-royal); background: rgba(20, 80, 180, .25); }
.month-wrap .month-dow { background: var(--jb-royal); color: #fff; font-weight: 700; }
.month-wrap .month-cell.is-today { box-shadow: inset 0 0 0 3px var(--jb-navy); }
.month-wrap .month-cell.is-today .month-day a { background: var(--jb-navy); }

/* v1.0.121: dragging leaves a dashed empty slot where the card will land (it used to look like a second card) */
:is(.board, .month-wrap) .job-card.is-dragging { opacity: 1; background: transparent; border-style: dashed; box-shadow: none; }
:is(.board, .month-wrap) .job-card.is-dragging > * { visibility: hidden; }
/* v1.0.121: the card a request just turned into (schedule?new=ID) drops in and glows for a few seconds */
.job-card.jc-new { animation: jc-new-in .7s cubic-bezier(.2, .8, .2, 1) both, jc-new-glow 1.6s ease-in-out .7s 3; z-index: 2; }
@keyframes jc-new-in { 0% { opacity: 0; transform: translateY(-18px) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes jc-new-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 80, 180, 0); } 50% { box-shadow: 0 0 0 5px rgba(20, 80, 180, .45), 0 8px 22px rgba(10, 42, 102, .25); } }
.jc-new-tag { position: absolute; top: -9px; right: 8px; background: #1450b4; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(10, 42, 102, .3); }
@media (prefers-reduced-motion: reduce) { .job-card.jc-new { animation: none; box-shadow: 0 0 0 4px rgba(20, 80, 180, .45); } }

/* v1.0.124: pop-ups can be dragged around the page by the bar on top (or their title), and the page behind them is
   no longer blurred, only lightly dimmed, so you can see the board while you work (Dylan). */
.modal::backdrop { background: rgba(10, 20, 40, .14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal-grip { position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 5; cursor: grab; touch-action: none; border-radius: var(--radius) var(--radius) 0 0; }
.modal-grip::before { content: ""; position: absolute; left: 50%; top: 7px; width: 44px; height: 5px; margin-left: -22px; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.modal-grip:hover::before, dialog.is-moving .modal-grip::before { background: var(--accent); }
dialog.modal:not(.drawer) .modal-card > h2, dialog.modal:not(.drawer) .job-head h2 { cursor: grab; }
dialog.is-moving, dialog.is-moving * { cursor: grabbing !important; user-select: none; }
dialog.is-moving .modal-card { box-shadow: 0 24px 60px rgba(10, 42, 102, .32); }
@media (max-width: 599px) { .modal-grip { display: none; } dialog.modal:not(.drawer) .modal-card > h2, dialog.modal:not(.drawer) .job-head h2 { cursor: auto; } }

/* v1.0.125: "Make Your Statement" banner on top of every request form, in that form's color (Dylan). */
.rf-banner { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--rfb, #f47d2e);
  color: #fff; min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; margin-bottom: 16px; }
.rf-banner.rfb-install { --rfb: #f47d2e; }
.rf-banner.rfb-delivery { --rfb: #f99e33; }
.rf-banner.rfb-collection { --rfb: #006953; }
.rf-banner.rfb-survey, .rf-banner.rfb-redo { --rfb: #f05232; }
.rfb-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.rfb-lt { fill: #fff; opacity: .2; }
.rfb-dk { fill: #000; opacity: .26; }
.rfb-collection .rfb-lt { opacity: .14; }
.rfb-say, .rfb-tag { position: relative; }
.rfb-say { font-size: 64px; font-weight: 800; line-height: .92; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rfb-tag { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right;
  font-size: 22px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.rfb-tag .ic { width: 58px; height: 58px; color: #fff; }
.rf-banner + .request-form-head { margin-top: 0; }
@media (max-width: 600px) {
  .rf-banner { min-height: 130px; padding: 16px 18px; }
  .rfb-say { font-size: 38px; }
  .rfb-tag { font-size: 15px; }
  .rfb-tag .ic { width: 38px; height: 38px; }
}
.rf-banner + .request-form-head { border-top-width: 10px; background: var(--surface); }
.rf-banner + .request-form-head .rf-icon { display: none; }

/* v1.0.126: home slideshow a sensible height; pictures fit whole (no cropping) and the slide's color shows around them (Dylan). */
.carousel-track, .carousel-text-only .carousel-track { aspect-ratio: auto; height: clamp(190px, 20vw, 290px); }
.carousel-empty { aspect-ratio: auto; height: clamp(170px, 17vw, 240px); }
.carousel { background: transparent; }
.slide-img { object-fit: contain; object-position: center; }
.slide.has-img.has-text .slide-img { object-position: right center; }
.slide-thumb, .slide-preview { aspect-ratio: 4 / 1; }
@media (max-width: 860px) {
  .carousel-track, .carousel-text-only .carousel-track { height: clamp(170px, 48vw, 260px); }
}
/* v1.0.126: request form banner a little shorter */
.rf-banner { min-height: 150px; padding: 18px 26px; }
.rfb-say { font-size: 50px; }
.rfb-tag .ic { width: 48px; height: 48px; }
.rfb-tag { font-size: 19px; }

/* v1.0.127: job pop-up less busy (Dylan). Finalize + Open & edit sit at the top right; the schedule box ends with its own
   Save bar; the crew's buttons get an "On the job" label. */
.job-detail { position: relative; }
.jd-top-actions { float: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 360px; margin: 0 0 8px 16px; }
.jd-top-actions .btn { white-space: nowrap; }
.jd-top-actions .jd-final-note { flex-basis: 100%; margin: 0; text-align: right; font-size: 14px; color: var(--text-2); }
.btn.btn-finalize { background: #11804a; border-color: #11804a; color: #fff; }
.btn.btn-finalize:hover { background: #0c6b3d; border-color: #0c6b3d; }
.job-detail .job-head { overflow: hidden; }
.job-date-form { clear: both; }
.job-date-form .jdf-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.btn.btn-save-sched { background: var(--surface); color: var(--accent); border: 2px solid var(--accent); }
.btn.btn-save-sched:hover { background: var(--accent-soft); }
.jdf-foot-note { font-size: 14px; color: var(--text-2); }
.jdf-foot .jdf-back { margin-left: auto; font-size: 15px; font-weight: 600; }
.jd-section-label { margin: 18px 0 -8px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 599px) {
  .jd-top-actions { float: none; max-width: none; justify-content: flex-start; margin: 0 0 12px; }
  .jd-top-actions .jd-final-note { text-align: left; }
  .jdf-foot .jdf-back { margin-left: 0; }
}
/* v1.0.127: picture pop-up (lightbox) */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; display: none; }
dialog.lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog.lightbox::backdrop { background: rgba(8,14,28,.82); }
dialog.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 140px); }
dialog.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.45); background: #fff; }
dialog.lightbox figcaption { color: #fff; font-size: 16px; display: flex; gap: 14px; align-items: center; }
dialog.lightbox .lb-full { color: #fff; text-decoration: underline; }
.lb-close { position: fixed; top: 14px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lb-nav { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; flex: none; margin: 0 12px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.3); }
dialog.lightbox.lb-single .lb-nav { visibility: hidden; }
@media (max-width: 599px) {
  dialog.lightbox figure { max-width: calc(100vw - 24px); }
  .lb-nav { position: fixed; bottom: 18px; margin: 0; }
  .lb-prev { left: 18px; } .lb-next { right: 18px; }
}
/* v1.0.127: label and answer line up on the same line (Dylan): same line height for both, so the smaller grey label
   sits on the answer's baseline. Pictures start at the top of the row. */
.answer, .job-facts > div { align-items: start; }
.answer dt, .answer dd, .job-facts dt, .job-facts dd { line-height: 26px; }
.answer dt, .job-facts dt { font-size: 16px; padding-top: 1px; }
.answer dd img, .job-facts dd img { vertical-align: top; }

/* ---------------------------------------------------------------- v1.0.128 Routes: wider list, Job Board calendar on the right, bigger buttons */
.mj-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: 18px; align-items: start; }
.mj-main { min-width: 0; }
.mj-day { max-width: none; }
.mj-actions { gap: 10px; }
.mj-actions .btn { min-height: 48px; height: auto; padding: 0 18px; font-size: 17px; }
.mj-actions .btn .ic { width: 19px; height: 19px; }
.mj-cal { position: sticky; top: 76px; padding: 12px; max-height: calc(100vh - 96px); overflow-y: auto; }
.mj-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mj-cal-head strong { font-size: 18px; margin: 0 4px; white-space: nowrap; }
.mj-cal-board { margin-left: auto; white-space: nowrap; }
.mj-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.mj-cal-dow { background: var(--surface-2); text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); padding: 4px 0; }
.mj-cal-cell { background: var(--surface); min-height: 70px; padding: 2px 2px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mj-cal-cell.is-out { background: var(--surface-2); }
.mj-cal-cell.is-out .mj-cal-num { color: var(--text-3); }
.mj-cal-num { font-size: 14px; font-weight: 600; color: var(--text); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.mj-cal-cell.has-mine .mj-cal-num { background: var(--accent-soft); color: var(--accent); }
.mj-cal-cell.is-today .mj-cal-num { background: var(--accent); color: #fff; }
.mj-cal-jobs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mj-cal-job { display: block; font-size: 11.5px; line-height: 1.35; padding: 1px 4px; border-radius: 3px; border-left: 3px solid var(--tone); background: var(--tone-soft); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; }
.mj-cal-job:hover { text-decoration: none; opacity: 1; }
.mj-cal-job.is-mine { opacity: 1; background: var(--tone); color: #fff; font-weight: 600; }
.mj-cal-key { margin: 8px 0 0; }
.mj-cal-key .mj-cal-job { display: inline-block; vertical-align: middle; }
@media (max-width: 1100px) {
  .mj-layout { grid-template-columns: minmax(0, 1fr); }
  .mj-cal { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .mj-actions .btn { flex: 1 0 auto; justify-content: center; }
}

/* v1.0.129: Job Board dragging on phones and tablets (Dylan). Press and hold a card: it grows a little, then lifts. */
.job-card { transition: transform .18s ease, box-shadow .18s ease; }
.job-card.is-pressing { transform: scale(1.03); box-shadow: 0 8px 22px rgba(10,42,102,.22); }
.job-ghost.is-touch { opacity: .97; box-shadow: 0 20px 44px rgba(0,0,0,.32); }
body.is-board-dragging .board, body.is-board-dragging .month-side .board-list { scroll-snap-type: none; }
body.is-board-dragging { overscroll-behavior: none; user-select: none; -webkit-user-select: none; }
@media (hover: none) { .job-card { touch-action: pan-x pan-y; } }

/* ---------------------------------------------------------------- v1.0.131 Routes side panel: List (default) / Calendar */
.mj-side-switch { display: flex; margin: 0 0 10px; }
.mj-side-switch a { flex: 1; text-align: center; }
.mj-side-list { display: flex; flex-direction: column; gap: 12px; }
.mj-sl-day h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.mj-sl-day h3 a { color: var(--text); }
.mj-sl-day.is-today h3 a { color: var(--accent); }
.mj-sl-day .col-count { font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--fill); border-radius: var(--radius-sm); padding: 0 7px; }
.mj-sl-job { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); border-left: 4px solid var(--tone); color: var(--text); opacity: .6; margin-bottom: 4px; background: var(--surface-2); min-width: 0; }
.mj-sl-job:hover { text-decoration: none; opacity: 1; background: var(--fill); }
.mj-sl-job.is-mine { opacity: 1; background: var(--tone-soft); }
.mj-sl-time { flex: none; width: 92px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.mj-sl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mj-sl-main strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-sl-sub { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-sl-you { flex: none; }

/* v1.0.133: Open in CoreBridge button under the request form's CoreBridge link box */
#requestForm .cb-open{display:inline-flex;width:auto;align-self:flex-start;margin-top:6px;white-space:nowrap}
#requestForm .cb-open[hidden]{display:none}

/* v1.0.134: form name on the request form banner ("COLLECTION REQUEST") larger (Dylan) */
.rfb-tag { font-size: 30px; line-height: 1.05; gap: 10px; }
.rfb-tag .ic { width: 62px; height: 62px; }
@media (max-width: 600px) { .rfb-tag { font-size: 16px; } .rfb-tag .ic { width: 38px; height: 38px; } }

/* v1.0.135: request form time windows (same buttons as the Job Board pop-up) */
#requestForm .slot-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.slot-opt small.is-open { color: var(--green, #11804a); font-weight: 600; }

/* v1.0.137: slide headline and text sit in the vertical middle of the slide, also on slides with a picture (Dylan). */
.slide.has-text { align-items: center; }
.carousel .slide.has-text .slide-text { padding-top: clamp(16px, 2.5vw, 32px); padding-bottom: clamp(16px, 2.5vw, 32px); }
@media (max-width: 860px) {
  .carousel .slide.has-text .slide-text { padding-top: 30px; padding-bottom: 30px; }
}

/* v1.0.138: slide photo takes 40% of the slide (right side, text in the other 60%; centered when the slide has no text),
   timer bar along the bottom shows how long the slide stays up, arrows always there to flip through (Dylan). */
.carousel .slide.has-img .slide-img { left: auto; right: 0; width: 40%; height: 100%; object-fit: contain; object-position: center; }
.carousel .slide.has-img:not(.has-text) .slide-img { left: 30%; right: auto; }
.carousel .slide.has-img.has-text::after { display: none; }
.carousel .slide.has-img .slide-text { max-width: 60%; flex: 0 0 60%; box-sizing: border-box; padding-left: clamp(56px, 4.5vw, 72px); padding-right: clamp(20px, 3vw, 40px); }
.carousel-nav { opacity: .85; width: 38px; height: 38px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.carousel-nav:hover { opacity: 1; }
.carousel-nav.prev { left: 10px; } .carousel-nav.next { right: 10px; }
.carousel-timer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.22); pointer-events: none; }
.carousel-timer span { display: block; height: 100%; width: 0; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.carousel-count { position: absolute; z-index: 3; bottom: 12px; left: 16px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.38);
  padding: 2px 9px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; pointer-events: none; }
.carousel-dots { bottom: 14px; }
.carousel.is-paused .carousel-timer span { background: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .carousel-nav { display: grid; width: 32px; height: 32px; top: auto; bottom: 8px; transform: none; }
  .carousel-count { left: 50%; transform: translateX(-50%); bottom: 34px; }
  .carousel .slide.has-text .slide-text { padding-top: 46px; padding-bottom: 46px; }
  .carousel .slide.has-img .slide-text { padding-left: 20px; }
}
@media (max-width: 600px) {
  .carousel-track, .carousel-text-only .carousel-track { height: 330px; }
  .carousel .slide.has-img .slide-img, .carousel .slide.has-img:not(.has-text) .slide-img { left: 0; right: 0; top: 0; width: 100%; height: 40%; }
  .carousel .slide.has-img.has-text { align-items: flex-end; }
  .carousel .slide.has-img .slide-text { max-width: 100%; flex: 1 1 100%; height: 60%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px 18px 50px !important; }
  .carousel .slide.has-img .slide-text h2 { font-size: 22px; }
  .carousel .slide.has-img .slide-text p { font-size: 14px; margin-top: 6px; }
  .carousel-count { left: 12px; top: 12px; bottom: auto; transform: none; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .carousel-timer { display: none; } }
/* v1.0.138: Edit slides previews show the picture at 40% too */
.slide-thumb .slide.has-img .slide-img, .slide-preview .slide.has-img .slide-img { left: auto; right: 0; width: 40%; object-fit: contain; object-position: center; }
.slide-thumb .slide.has-img:not(.has-text) .slide-img, .slide-preview .slide.has-img:not(.has-text) .slide-img { left: 30%; right: auto; }
.slide-thumb .slide.has-img.has-text::after, .slide-preview .slide.has-img.has-text::after { display: none; }
.slide-thumb .slide.has-img .slide-text, .slide-preview .slide.has-img .slide-text { max-width: 60%; flex: 0 0 60%; box-sizing: border-box; }
.slide-thumb .slide.has-text, .slide-preview .slide.has-text { align-items: center; }

/* v1.0.139: every slide is the same size no matter the picture or text (fixed height: 340px on computers, about 17% taller
   than before; 300px on tablets, 330px on phones). The picture fills its whole 40% panel edge to edge, and the slide
   counter and dots sit centered at the bottom (Dylan). */
.carousel-track, .carousel-text-only .carousel-track { aspect-ratio: auto; height: 340px; }
.carousel .slide.has-img .slide-img, .slide-thumb .slide.has-img .slide-img, .slide-preview .slide.has-img .slide-img { object-fit: cover; object-position: center; }
.carousel .slide-text { max-height: 100%; overflow: hidden; }
.carousel .slide-text h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.carousel .slide-text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.carousel-dots { left: 0; right: 0; justify-content: center; bottom: 12px; }
.carousel-count { left: 50%; right: auto; top: auto; bottom: 28px; transform: translateX(-50%); }
.carousel .slide.has-text .slide-text { padding-bottom: 52px; padding-top: 52px; }
.slide-thumb, .slide-preview { aspect-ratio: 4.5 / 1; }
@media (max-width: 860px) {
  .carousel-track, .carousel-text-only .carousel-track { height: 300px; }
  .carousel-count { bottom: 34px; }
  .carousel .slide-text p { -webkit-line-clamp: 3; }
}
@media (max-width: 600px) {
  .carousel-track, .carousel-text-only .carousel-track { height: 330px; }
  .carousel-count { left: 50%; top: auto; bottom: 34px; transform: translateX(-50%); }
  .carousel .slide.has-img .slide-text { padding: 10px 18px 60px !important; }
  .carousel .slide.has-img .slide-text p { -webkit-line-clamp: 3; }
}

/* v1.0.140: the slideshow keeps one shape and grows/shrinks with the window, so the picture always shows whole in its
   40% panel (no cutting off) and every slide stays the same size (Dylan). Panel is 40% wide and about half as tall as
   it is wide, which fits the usual 2:1 slide pictures exactly. Phones/tablets: picture on top at full width, text under it.
   The counter sits in the same centered row as the dots. */
.carousel-track, .carousel-text-only .carousel-track { height: auto; aspect-ratio: 5 / 1; min-height: 210px; max-height: 400px; }
.carousel .slide.has-img .slide-img, .slide-thumb .slide.has-img .slide-img, .slide-preview .slide.has-img .slide-img { object-fit: contain; object-position: center; }
.slide-thumb, .slide-preview { aspect-ratio: 5 / 1; }
.carousel .slide.has-text .slide-text { padding-top: 34px; padding-bottom: 38px; }
.carousel .slide.has-img .slide-text h2 { font-size: clamp(22px, 2.6vw, 46px); }
.carousel .slide.has-img .slide-text p { font-size: clamp(14px, 1.15vw, 20px); -webkit-line-clamp: 3; }
.carousel .slide.has-img .slide-btn { margin-top: clamp(8px, .9vw, 16px); padding: clamp(6px, .6vw, 10px) clamp(14px, 1.3vw, 20px); font-size: clamp(14px, 1vw, 17px); }
.carousel-dots { left: 0; right: 0; bottom: 8px; justify-content: center; align-items: center; gap: 7px; pointer-events: none; }
.carousel-dots button { pointer-events: auto; }
.carousel-dots .carousel-count { position: static; transform: none; margin-right: 6px; font-size: 12px; line-height: 18px; }
@media (max-width: 860px) {
  .carousel-track, .carousel-text-only .carousel-track { aspect-ratio: auto; min-height: 0; max-height: none; height: 230px; }
  .carousel { container-type: inline-size; }
  .carousel-track:has(.slide.has-img) { height: calc(50cqw + 190px); }
  .carousel .slide.has-img .slide-img, .carousel .slide.has-img:not(.has-text) .slide-img { left: 0; right: 0; top: 0; width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .carousel .slide.has-img.has-text { align-items: flex-end; }
  .carousel .slide.has-img .slide-text { max-width: 100%; flex: 1 1 100%; height: 190px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8px 52px 40px 18px !important; }
  .carousel .slide.has-img .slide-text h2 { font-size: 22px; }
  .carousel .slide.has-img .slide-text p { font-size: 14px; margin-top: 6px; -webkit-line-clamp: 3; }
  .carousel .slide:not(.has-img) .slide-text { padding: 20px 52px 40px !important; }
  .carousel-nav { bottom: 6px; width: 30px; height: 30px; }
  .carousel-dots { bottom: 12px; }
  .carousel-dots .carousel-count { left: auto; top: auto; bottom: auto; }
}

/* v1.0.141: on wide screens the slideshow reached its tallest size and stopped getting wider, leaving a blank strip on the
   right. It now always spans the full width; the slide's chosen background (color or gradient) fills the whole slide,
   including around the picture, and a transparent PNG stays see-through over it (Dylan). */
.carousel-track { width: 100%; }
.carousel .slide { background-size: cover; }
.carousel .slide-img { background: transparent; }

/* v1.0.142: "Use the picture as the slide's background" — the picture fills the whole slide (cropped to fit, never
   stretched), the headline and text sit on top over a soft dark shade so they stay readable (Dylan). */
.carousel .slide.has-img.img-bg .slide-img, .slide-thumb .slide.has-img.img-bg .slide-img, .slide-preview .slide.has-img.img-bg .slide-img,
.carousel .slide.has-img.img-bg:not(.has-text) .slide-img { inset: 0; left: 0; right: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.slide.img-bg.has-text::after { content: ""; display: block !important; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 80%); }
.carousel .slide.has-img.img-bg .slide-text, .slide-thumb .slide.img-bg .slide-text, .slide-preview .slide.img-bg .slide-text { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
@media (max-width: 860px) {
  .carousel .slide.has-img.img-bg .slide-img { height: 100%; aspect-ratio: auto; }
  .carousel .slide.has-img.img-bg .slide-text { height: auto; max-height: 100%; }
  .slide.img-bg.has-text::after { background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
}
.slide:has(.slide-cover-link) { cursor: pointer; }

/* v1.0.143: a background picture now shows WHOLE (nothing cut off) instead of being cropped to the wide banner. A soft,
   blurred copy of the same picture fills the rest of the slide; with text, the picture sits on the right and the text on
   the blurred part. When any slide uses a background picture the slideshow is 30% taller so pictures show bigger;
   every slide is still the same size (Dylan). */
.carousel-has-bg .carousel-track { aspect-ratio: 3.85 / 1; max-height: 520px; min-height: 240px; }
.slide-img-fill { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(22px) saturate(1.1); opacity: .9; z-index: 0; pointer-events: none; }
.carousel .slide.has-img.img-bg .slide-img, .slide-thumb .slide.has-img.img-bg .slide-img, .slide-preview .slide.has-img.img-bg .slide-img,
.carousel .slide.has-img.img-bg:not(.has-text) .slide-img { z-index: 0; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 18px rgba(0,0,0,.25)); }
.carousel .slide.has-img.img-bg.has-text .slide-img, .slide-thumb .slide.img-bg.has-text .slide-img, .slide-preview .slide.img-bg.has-text .slide-img { object-position: right center; }
.slide.img-bg.has-text::after { z-index: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 60%); }
@media (max-width: 860px) {
  .carousel-has-bg .carousel-track { aspect-ratio: auto; max-height: none; min-height: 0; }
  .carousel .slide.has-img.img-bg .slide-img { object-position: center top !important; height: calc(100% - 150px); }
  .carousel .slide.has-img.img-bg:not(.has-text) .slide-img { height: 100%; object-position: center !important; }
  .slide.img-bg.has-text::after { background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 55%); }
}
@media (min-width: 861px) { .carousel .slide.has-img.img-bg.has-text .slide-text { max-width: 46%; flex-basis: 46%; } }

/* v1.0.145: Reviews: wider "Named in Reviews" side column so names and centers stay on one line (Dylan). */
.rv-layout { grid-template-columns: minmax(0, 1fr) 420px; }
#named td.strong { white-space: nowrap; }
#named td.num { white-space: nowrap; }
@media (max-width: 1100px) { .rv-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Coming Soon (v1.0.147) */
.soon-intro { max-width: 820px; margin: 0 0 14px; }
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: stretch; }
.soon-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--card-line); border-radius: 4px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.soon-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 71, 161, .14); }
.soon-card.is-hidden { opacity: .6; border-style: dashed; }
.soon-cover { position: relative; color: #fff; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.soon-cover-fill { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(14px) brightness(.85); }
.soon-cover-img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; }
.soon-grid .soon-cover-title { padding: 0 26px; color: #fff; font: 700 clamp(26px, 2.6vw, 34px)/1.05 'Roboto Condensed', sans-serif; text-transform: uppercase; text-align: center; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.soon-grid .soon-cover-icon { color: #fff; }
.soon-cover-icon .ic { width: 72px; height: 72px; opacity: .85; }
.soon-grid .soon-ribbon { position: absolute; top: 22px; right: -46px; transform: rotate(35deg); width: 190px; color: #fff; text-align: center; padding: 4px 0; background: var(--rule); font: 700 11px/1.2 'Roboto Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.soon-grid .soon-new { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 3px; background: #fff; color: var(--band); font: 700 11px/1.3 'Roboto Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.soon-body { flex: 1; padding: 14px 16px 10px; }
.soon-body h3 { margin: 8px 0 4px; font: 700 20px/1.2 'Roboto Condensed', sans-serif; color: var(--navy); }
.soon-body p { margin: 0 0 8px; color: var(--text-2); }
.soon-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.soon-grid .soon-eta { display: inline-flex; align-items: center; gap: 4px; font: 600 13px 'Roboto Condensed', sans-serif; color: var(--text-3); white-space: nowrap; }
.soon-eta .ic { width: 14px; height: 14px; }
.soon-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.soon-grid .soon-steps span { font: 600 10.5px/1.2 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soon-steps i { display: block; height: 5px; margin-bottom: 4px; border-radius: 3px; background: var(--fill); }
.soon-grid .soon-steps .on { opacity: 1; color: var(--accent); }
.soon-steps .on i { background: var(--accent); }
.soon-foot { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.soon-foot:empty { display: none; }
.soon-foot form { margin: 0; display: inline-flex; gap: 4px; }
.soon-vote { white-space: nowrap; }
.soon-vote.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.soon-grid .soon-vote-n { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: rgba(0,0,0,.12); font-weight: 700; text-align: center; }
.soon-area .soon-cover { aspect-ratio: 16 / 9; }
.soon-pic { position: relative; min-height: 150px; border: 2px dashed var(--line-strong); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; background: var(--surface-2); }
.soon-pic.over { border-color: var(--accent); background: var(--accent-soft); }
.soon-pic img { max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 3px; }
.soon-pic-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) { .soon-grid { grid-template-columns: 1fr; gap: 12px; } }
/* Coming Soon v1.0.148: a card for every feature (icon + name on the cover), admin Show/Hide switch */
.soon-grid .soon-cover-feature { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.soon-grid .soon-cover-feature .ic { width: 78px; height: 64px; color: #fff; fill: currentColor; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.soon-grid .soon-cover-feature .soon-cover-title { font-size: clamp(22px, 2.1vw, 28px); }
.soon-grid .soon-who { margin: 6px 0 0; color: var(--text-3); }
.soon-toggle { white-space: nowrap; min-width: 92px; }
.soon-toggle.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.soon-grid .soon-votes { font: 700 14px 'Roboto Condensed', sans-serif; color: var(--text-2); white-space: nowrap; }
/* Coming Soon v1.0.150: covers show only the feature's icon, big and centered (Dylan) */
.soon-grid .soon-cover > .soon-cover-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }
.soon-grid .soon-cover > .soon-cover-icon svg.soon-big-ic { width: 38%; max-width: 120px; height: 52%; max-height: 96px; color: #fff; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.soon-grid .soon-cover { aspect-ratio: 16 / 8; }
.soon-grid .soon-meta:not(:has(*)) { display: none; }
.soon-grid .soon-meta:not(:has(*)) + h3 { margin-top: 0; }
/* Coming Soon v1.0.151: admins see how many people would use each feature, and who */
.soon-sort { margin: 0 0 12px; }
.soon-grid .soon-votebox { margin-top: 10px; padding: 8px 12px; border-radius: 4px; background: var(--green-soft); color: var(--green); font: 600 15px/1.3 'Roboto Condensed', sans-serif; }
.soon-grid .soon-votebox strong { font-size: 20px; margin-right: 2px; }
.soon-grid .soon-votebox.is-zero { background: var(--fill-2); color: var(--text-3); }
.soon-grid .soon-votebox summary { cursor: pointer; }
.soon-grid .soon-votebox ul { margin: 6px 0 2px; padding-left: 18px; color: var(--text-2); font: 400 14px/1.5 Roboto, sans-serif; }

/* v1.0.155: job pop-up header cleaner (Dylan): Finalize / Open & edit sit in their own bar across the top, clear of
   the X, and the title gets the full width below instead of squeezing beside the buttons. */
.job-detail .jd-top-actions { float: none; max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 8px 10px; margin: 0 0 14px; padding: 0 52px 12px 0; border-bottom: 1px solid var(--line); }
.job-detail .jd-top-actions .jd-final-note { flex: 1 1 220px; margin: 0; text-align: left; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.job-detail .job-head h2, .job-detail .job-head h1 { line-height: 1.12; }
@media (max-width: 600px) { .job-detail .jd-top-actions { padding-right: 44px; } .job-detail .jd-top-actions .jd-final-note { flex-basis: 100%; } }

/* v1.0.156: center number on Job Board cards */
.jc-meta .jc-center { display: inline-block; padding: 0 6px; margin-right: 2px; border-radius: 4px; background: var(--surface-2, #eef1f6);
  border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: .92em; line-height: 1.45; }

/* v1.0.157: Completed / Couldn't complete on the finish-job page: the picked one is filled in, the other plain (Dylan) */
.seg-outcome { gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
.seg-outcome label > span { border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 700;
  box-shadow: none; opacity: .85; transition: background .15s, color .15s, border-color .15s; }
.seg-outcome label:hover > span { border-color: var(--text-3); opacity: 1; }
.seg-outcome input[value="done"]:checked + span { background: #11804a; border-color: #11804a; color: #fff; opacity: 1; box-shadow: 0 2px 8px rgba(17,128,74,.3); }
.seg-outcome input[value="failed"]:checked + span { background: #f59e0b; border-color: #f59e0b; color: #1f1300; opacity: 1; box-shadow: 0 2px 8px rgba(245,158,11,.3); }
.seg-outcome input:checked + span::after { content: " ✓"; }
.seg-outcome input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Site survey photos v1.0.158: Take Photo (phone camera) + Upload Photos on the survey page */
.survey-photos .card-head { flex-wrap: wrap; gap: 8px; }
.survey-photos .sp-actions label { position: relative; cursor: pointer; white-space: nowrap; }
.survey-photos .sp-actions input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.survey-photos .sp-status { margin-top: 8px; color: var(--muted); }
.survey-photos .sp-status.is-error { color: var(--red, #c62828); font-weight: 600; }
.survey-photos.is-busy .sp-actions label { opacity: .55; pointer-events: none; }
.survey-photos .sp-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.survey-photos .sp-thumb { position: relative; }
.survey-photos .sp-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.survey-photos .sp-empty { margin: 10px 0 0; }
.survey-photos .sp-count { margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 601px) { .survey-photos .sp-take { display: none; } }
@media (max-width: 600px) { .survey-photos .sp-actions { width: 100%; } .survey-photos .sp-actions label { flex: 1; justify-content: center; } }
/* Site survey measurements & details v1.0.158 */
.survey-details .card-head { flex-wrap: wrap; gap: 4px 12px; }
.sd-rows { display: flex; flex-direction: column; gap: 8px; }
.sd-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) auto minmax(120px, 1fr) 32px; gap: 8px; align-items: center; }
.sd-size { display: flex; align-items: center; gap: 4px; }
.sd-size .input { width: 84px; }
.sd-size .select { width: 70px; padding-left: 8px; padding-right: 22px; }
.sd-x { color: var(--text-3); font-weight: 700; }
.sd-del { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--fill, #eef1f6); color: var(--text-2); cursor: pointer; font-size: 14px; }
.sd-del:hover { background: var(--red-soft); color: var(--red); }
.sd-add { margin-top: 10px; align-self: flex-start; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.sd-table td, .sd-table th { font-size: 15px; }
@media (max-width: 760px) {
  .sd-row { grid-template-columns: 1fr 32px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .sd-row .sd-label { grid-column: 1; } .sd-row .sd-del { grid-column: 2; grid-row: 1; }
  .sd-row .sd-size, .sd-row .sd-note { grid-column: 1 / -1; }
  .sd-size .input { flex: 1; width: auto; min-width: 0; }
}
/* v1.0.158: same Completed / Couldn't complete look, with a stronger selector so nothing older can override it */
.segmented.seg-block.seg-outcome { gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
.segmented.seg-block.seg-outcome label > span { border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-2); box-shadow: none; }
.segmented.seg-block.seg-outcome input[value="done"]:checked + span { background: #11804a; border-color: #11804a; color: #fff; box-shadow: 0 2px 8px rgba(17,128,74,.3); }
.segmented.seg-block.seg-outcome input[value="failed"]:checked + span { background: #f59e0b; border-color: #f59e0b; color: #1f1300; box-shadow: 0 2px 8px rgba(245,158,11,.3); }
.complete-form .cs-details .sd-fields { margin-top: 4px; }
/* v1.0.158: survey Salespeople box: labels above the names so long names fit on one line; salesperson sets the visit */
.survey-people .job-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; }
.survey-people .job-facts dt { font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.survey-people .job-facts dd { font-weight: 600; line-height: 24px; overflow-wrap: normal; }
.survey-people .visit-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.survey-people .visit-form .field-label { display: block; margin-bottom: 6px; }
.survey-people .visit-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.survey-people .visit-row .input { min-width: 0; padding-left: 10px; padding-right: 6px; }
@media (min-width: 1101px) { .request-layout:has(.survey-people) { grid-template-columns: minmax(0, 1fr) 360px; } }
/* v1.0.158: site survey page on phones (outside sales reps on site): the most used boxes first, big tap targets */
@media (max-width: 900px) {
  .survey-layout { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .survey-layout .card { min-width: 0; width: 100%; box-sizing: border-box; }
  .survey-layout > .survey-main, .survey-layout > .survey-side { display: contents; }
  .survey-layout .card, .survey-layout form.card { margin: 0 !important; }
  .survey-layout .survey-head { order: 1; } .survey-layout .survey-people { order: 2; } .survey-layout .survey-photos { order: 3; }
  .survey-layout .survey-details { order: 4; } .survey-layout .survey-stage { order: 5; } .survey-layout .survey-notes { order: 6; }
  .survey-layout .survey-request { order: 7; }
}
@media (max-width: 600px) {
  .survey-head h2 { font-size: 24px; }
  .survey-contact { flex-direction: column; gap: 10px; }
  .survey-contact a { min-height: 32px; }
  .pipe-steps li { font-size: 12px; }
  .survey-layout .btn, .survey-layout .input, .survey-layout .select { min-height: 44px; }
  .survey-layout .stage-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .survey-layout .stage-option span { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; }
  .survey-layout .stage-option:last-child { grid-column: 1 / -1; }
  .survey-layout .note-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .survey-layout .note-foot > span { flex-wrap: wrap; }
  .survey-layout .note-foot .btn { flex: 1 0 100%; }
  .survey-layout .note-foot input[type=date] { flex: 1; }
  .survey-people .visit-row { grid-template-columns: 1fr 1fr; }
  .survey-photos .sp-grid { grid-template-columns: repeat(3, 1fr); }
  .survey-layout .grid-2 { grid-template-columns: 1fr 1fr; }
}
[data-unclick] .stage-option input:checked + span { font-weight: 700; box-shadow: inset 0 0 0 1px var(--tone); }
[data-unclick] .stage-option input:checked + span::after { content: " ✓"; }
/* v1.0.159: Measure with the phone camera (assets/measure.js). Button in each survey measurement row + full-screen tool. */
.sd-measure, .msr-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm, 6px); background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; }
.sd-measure:hover, .msr-btn:hover { background: var(--accent); color: #fff; }
.msr-wrap { display: flex; gap: 6px; align-items: center; }
.msr-wrap > .input { flex: 1; min-width: 0; }
.input.msr-filled { box-shadow: 0 0 0 3px rgba(31,138,59,.45); border-color: var(--green); transition: box-shadow .3s; }
@media (max-width: 760px) {
  .sd-size { flex-wrap: wrap; }
  .sd-size .sd-measure { flex: 1 1 100%; justify-content: center; height: 46px; font-size: 16px; margin-top: 4px; }
}
html.msr-open, html.msr-open body { overflow: hidden; }
.msr { position: fixed; inset: 0; z-index: 10000; background: rgba(10,20,40,.55); display: flex; align-items: center; justify-content: center; padding: 16px; -webkit-tap-highlight-color: transparent; }
.msr[hidden] { display: none; }
.msr .btn { white-space: nowrap; }
.msr-card { width: 100%; max-width: 440px; max-height: 100%; overflow: auto; background: var(--surface); color: var(--text); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; }
.msr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 20px; font-weight: 300; }
.msr-head b { font-weight: 800; }
.msr-head small { display: block; font-size: 14px; color: var(--text-3); font-weight: 500; }
.msr-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fill); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; }
.msr-choice { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.msr-choice.is-main { border-color: var(--accent); background: var(--accent-soft); }
.msr-choice-t { font-size: 18px; font-weight: 800; }
.msr-choice-d { font-size: 14px; color: var(--text-2); line-height: 1.35; }
.msr-tip, .msr-p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.msr-refs { display: flex; flex-direction: column; gap: 6px; }
.msr-ref { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; cursor: pointer; }
.msr-ref:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.msr-ref input { width: 20px; height: 20px; accent-color: var(--accent); }
.msr-ref small { color: var(--text-3); font-weight: 500; }
.msr-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msr-custom[hidden] { display: none; }
.msr-custom label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.msr-custom small { grid-column: 1 / -1; color: var(--text-3); font-size: 13px; }
.msr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.msr-row > .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
.msr-row > .btn[hidden] { display: none; }
.msr-file { position: relative; overflow: hidden; }
.msr-file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.msr-err { margin: 0; color: var(--red); font-weight: 600; font-size: 14px; }
.msr-err[hidden] { display: none; }
/* full-screen photo + AR screens */
.msr:has(.msr-full), .msr:has(.msr-ar) { padding: 0; background: #000; }
.msr-full, .msr-ar { position: fixed; inset: 0; display: flex; flex-direction: column; background: #111; color: #fff; }
.msr-ar { background: transparent; }
.msr-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: rgba(0,0,0,.72); z-index: 2; }
.msr-bar .msr-x { background: rgba(255,255,255,.16); color: #fff; }
.msr-step { font-size: 16px; line-height: 1.3; }
.msr-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.msr-canvas { flex: 1; min-height: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.msr-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.msr-zoom button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font: inherit; font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; }
.msr-zoom button[data-zoom="0"] { font-size: 13px; text-transform: uppercase; }
.msr-full.is-corners .msr-seg { display: none; }
.msr-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.78); display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.msr-ar .msr-foot { margin-top: auto; }
.msr-foot .btn:not(.btn-primary) { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
.msr-read { min-height: 0; font-size: 15px; color: rgba(255,255,255,.85); text-align: center; }
.msr-big { font-size: 30px; font-weight: 800; color: #fff; }
.msr-big small { font-size: 16px; font-weight: 500; opacity: .8; }
.msr-hint { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); text-align: center; }
.msr-save { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.9); }
.msr-save[hidden] { display: none; }
.msr-save input { width: 20px; height: 20px; }
.msr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msr-seg > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border: 2px solid var(--msr-c); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; }
.msr-seg > div span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.msr-seg > div b { font-size: 24px; font-weight: 800; white-space: nowrap; }
.msr-seg > div.is-on { background: var(--msr-c); }
.msr-ar-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.msr-ar-svg line { stroke-width: 4; stroke-linecap: round; }
.msr-ar-svg line.k-w { stroke: #e4002b; } .msr-ar-svg line.k-h { stroke: #1f6fff; }
.msr-ar-svg line.is-live { stroke-dasharray: 10 8; opacity: .85; }
.msr-ar-svg text { font: 800 18px system-ui, -apple-system, sans-serif; text-anchor: middle; fill: #fff; paint-order: stroke; stroke-width: 5px; stroke-linejoin: round; }
.msr-ar-svg text.k-w { stroke: #e4002b; } .msr-ar-svg text.k-h { stroke: #1f6fff; }
.msr-ar-svg circle { fill: #fff; stroke: #111; stroke-width: 3; }
.msr-ar-aim { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; }
.msr-ar-aim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.msr-ar.has-hit .msr-ar-aim { border-color: #22d36b; }
.msr-ar.has-hit .msr-ar-aim::after { background: #22d36b; }
.msr-ar .msr-add { font-size: 20px; }
/* v1.0.161: Measure "Photo, type the sizes": typed width / height boxes */
.msr-seg.is-type > label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; border: 2px solid var(--msr-c); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; }
.msr-seg.is-type > label span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-align: center; opacity: .9; }
.msr-seg.is-type input { width: 100%; min-width: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 22px; font-weight: 800; text-align: center; }
.msr-seg.is-type input::placeholder { color: rgba(255,255,255,.45); font-weight: 500; font-size: 16px; }
.msr-seg.is-type input:focus { outline: 2px solid #fff; background: rgba(255,255,255,.22); }
/* v1.0.162: Measure "+ Add another": numbered areas on the live camera */
.msr-ar-svg circle.num { fill: #111; stroke: #fff; stroke-width: 2.5; }
.msr-ar-svg text.num { fill: #fff; stroke: none; font-size: 16px; }

/* v1.0.163: Leaderboard podium shows 4th and 5th place (outer, lower steps) */
.podium-spot.place-4, .podium-spot.place-5 { width: 150px; }
.place-4 .podium-value, .place-5 .podium-value { font-size: 20px; }
.place-4 .podium-block { height: 44px; background: linear-gradient(180deg, #8fb0e8, #3f6fc6); }
.place-5 .podium-block { height: 32px; background: linear-gradient(180deg, #a9c3ec, #5a86cf); }
.podium-num { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.podium-list .medal-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill-3, #dfe5ee); color: var(--text-2); font-size: 13px; font-weight: 800; }
@media (max-width: 640px) {
  .podium { gap: 4px; }
  .podium-spot, .podium-spot.place-4, .podium-spot.place-5 { width: 19.5%; min-width: 0; }
  .podium-spot strong { font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
  .podium-spot .small { font-size: 11.5px; }
  .podium-value, .place-4 .podium-value, .place-5 .podium-value { font-size: 12.5px; letter-spacing: -.03em; }
  .podium-spot .avatar-xl { width: 40px; height: 40px; font-size: 15px; }
  .podium-block { font-size: 22px; }
}

/* v1.0.164: Customer Files card (survey, job pop-up, job page, customer page) */
.customer-files .card-head { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.customer-files .card-head h2 { display: flex; align-items: center; gap: 8px; }
.customer-files .card-head h2 .ic { width: 20px; height: 20px; color: var(--accent); }
.customer-files .cf-sub { margin: 2px 0 0; }
.customer-files .cf-add { position: relative; cursor: pointer; white-space: nowrap; flex: none; }
.customer-files .cf-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.customer-files.is-busy .cf-add { opacity: .55; pointer-events: none; }
.customer-files.is-drag { outline: 3px dashed var(--accent); outline-offset: -3px; background: var(--accent-soft); }
.customer-files .cf-status { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; color: var(--text-2); }
.customer-files .cf-status[hidden] { display: none; }
.customer-files .cf-status.is-error { color: var(--red, #c62828); font-weight: 600; }
.customer-files .cf-bar { display: none; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.customer-files .cf-status.has-bar .cf-bar { display: block; }
.customer-files .cf-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.customer-files .cf-empty { margin: 10px 0 0; }
.customer-files .cf-count { margin: 8px 0 0; }
.cf-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cf-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface, #fff); min-width: 0; }
.cf-thumb { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line); text-decoration: none; }
.cf-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cf-ext { background: var(--accent-soft); color: var(--accent); font: 800 13px/1 'Roboto Condensed', sans-serif; letter-spacing: .04em; }
.cf-ext-pdf { background: #fde7e9; color: #c8102e; }
.cf-ext-ai, .cf-ext-eps { background: #fff1e0; color: #c05a00; }
.cf-ext-psd { background: #e3f0ff; color: #0b5cad; }
.cf-ext-zip { background: #eee; color: #444; }
.cf-ext-doc, .cf-ext-docx { background: #e5edff; color: #2b5797; }
.cf-ext-xls, .cf-ext-xlsx, .cf-ext-csv { background: #e3f5ea; color: #1d7044; }
.cf-info { flex: 1; min-width: 0; }
.cf-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.cf-meta a { color: inherit; text-decoration: underline; }
.cf-kind { font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 999px; padding: 3px 22px 3px 10px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 7px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.cf-kind.tone-purple { background-color: var(--purple-soft); color: var(--purple); }
.cf-kind.tone-blue { background-color: var(--accent-soft); color: var(--accent); }
.cf-kind.tone-green { background-color: var(--green-soft); color: var(--green); }
.cf-kind.tone-orange { background-color: var(--orange-soft); color: var(--orange); }
.cf-kind.tone-gray { background-color: var(--line); color: var(--text-2); }
.cf-btns { display: flex; gap: 4px; flex: none; }
.cf-btns .icon-btn { width: 40px; height: 40px; }
.cf-count-pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); }
.cf-count-pill .ic { width: 15px; height: 15px; }
/* inside the Job Board pop-up the card sits flat in the details */
.job-detail .customer-files.jd-files { margin: 16px 0 0; padding: 14px; box-shadow: none; border: 1px solid var(--line); }
.job-detail .customer-files h2 { font-size: 18px; }
@media (max-width: 900px) { .survey-layout .survey-files { order: 3; } }
@media (max-width: 600px) {
  .customer-files .card-head > div { flex: 1 1 100%; }
  .customer-files .cf-add { flex: 1 1 100%; justify-content: center; min-height: 48px; font-size: 17px; }
  .cf-row { gap: 10px; padding: 8px 6px 8px 8px; }
  .cf-thumb { width: 48px; height: 48px; }
  .cf-meta span:nth-child(n+4) { display: none; }
}

/* v1.0.165: slide text never runs over the picture (Dylan). On a "picture as background" slide with text, the picture
   gets its own panel on the right exactly as wide as the picture is at the slide's height (never more than 60% of the
   slide), and the headline/text/button wrap inside the panel to its left. --ar = the picture's width / height, set by
   render_slide (2 when unknown). Phones keep picture on top, text under it. */
@media (min-width: 861px) {
  .carousel .carousel-slide { container-type: size; }
  .carousel .slide.has-img.img-bg.has-text { --pw: min(calc(100cqh * var(--ar, 2)), 60cqw); }
  .carousel .slide.has-img.img-bg.has-text .slide-img { left: auto; right: 0; width: var(--pw); object-position: center; }
  .carousel .slide.has-img.img-bg.has-text .slide-text { max-width: calc(100cqw - var(--pw)); flex: 0 0 calc(100cqw - var(--pw)); box-sizing: border-box;
    padding-left: clamp(56px, 4.5vw, 72px); padding-right: clamp(20px, 2.5vw, 36px); }
  .carousel .slide.has-img.img-bg.has-text .slide-text h2 { font-size: clamp(20px, 2.3vw, 42px); overflow-wrap: anywhere; }
  .carousel .slide.has-img.img-bg.has-text .slide-text p { font-size: clamp(13px, 1.05vw, 19px); }
  .slide.img-bg.has-text::after { background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 55%); }
}

/* v1.0.166 Email temporary passwords: attach a file + copy admins */
.pw-extra { margin: 10px 0 6px; }
.pw-copy { display: flex; flex-wrap: wrap; gap: 2px 18px; max-height: 160px; overflow: auto; }
.pw-copy .check { margin-bottom: 4px; }

/* v1.0.168: invoice Order # (shows once a center is picked, with the center's prefix in front) */
#orderField[hidden], #orderPrefix[hidden] { display: none; }
.input-group .addon[hidden] + .input { border-radius: var(--radius-sm); }

/* v1.0.170 Purchases list: status drop-down per row */
.ps-form { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ps-select { width: auto; min-width: 130px; font-weight: 600; }
.ps-ordered { color: var(--accent); }
.ps-shipped { color: var(--orange); }
.ps-scheduled { color: var(--purple); }
.ps-form.is-late .ps-select { color: var(--red); border-color: var(--red); }
.ps-date { width: auto; }

/* v1.0.171: invoice subtotal / shipping / tax / other fees */
.grid-4.inv-money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 760px) { .grid-4.inv-money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.input.inv-total[readonly] { background: var(--fill-2); font-weight: 700; }
.inv-extras, .table td.num .inv-extras { font-weight: 400; white-space: normal; min-width: 150px; }
.inv-who { text-align: right; line-height: 1.45; }

/* v1.0.174 Purchases list: item name is a real link (open in new tab), looks like plain bold text */
.table a.row-link { color: inherit; }
.table a.row-link:hover { color: var(--accent); }

/* v1.0.176: vendor page Invoices box: number + amount on top, CB # / date + status underneath */
.vendor-invs { list-style: none; margin: 0; padding: 0 12px 4px; }
.vendor-invs li + li { border-top: 1px solid var(--line); }
.vendor-invs a { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); }
.vendor-invs a:hover { background: var(--fill-2); text-decoration: none; }
.vendor-invs .vi-top, .vendor-invs .vi-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vendor-invs .vi-num { font-weight: 700; color: var(--accent); white-space: nowrap; }
.vendor-invs .vi-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vendor-invs .vi-meta { color: var(--text-2); font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vendor-invs .pill, .vendor-invs .status-pill { flex: none; }
.vi-all { display: block; padding: 4px 24px 18px; }
.table.vendor-recent td, .table.vendor-recent th { padding-top: 10px; padding-bottom: 10px; }
.table.vendor-recent td:nth-child(2) { width: 100%; }
.vendor-layout > * { min-width: 0; }

/* v1.0.177/178 (Dylan): breadcrumbs everywhere look like the tab bar, as arrows pointing into each other.
   Works on old markup too: the "›" text between items is hidden (font-size 0) and each link / span is an arrow.
   The current page (last plain item) is solid blue and squared off on the right; section names are grey.
   v1.0.178: no filter (it made text blurry). The outline is the element's own background (line colour) and the
   fill is a ::before inset 1px with the same arrow shape, so text stays crisp and hover is a plain light-blue fill. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 14px; font-size: 0; line-height: 1; }
.crumbs .crumb-sep { display: none; }
.crumbs > a, .crumbs > span:not(.pill):not(.crumb-sep) {
  --crumb-shape: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  --crumb-fill: var(--surface);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px 0 24px; margin-right: -6px;
  font: 600 15.5px var(--font-cond); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  background: var(--line-strong); color: var(--text-2);
  clip-path: var(--crumb-shape);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.crumbs > a::before, .crumbs > span:not(.pill):not(.crumb-sep)::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--crumb-fill); clip-path: var(--crumb-shape);
}
.crumbs > a:first-child, .crumbs > span:not(.pill):not(.crumb-sep):first-child {
  --crumb-shape: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding-left: 16px;
}
.crumbs > a { color: var(--navy); transition: background-color .12s; }
/* v1.0.179 (Dylan didn't like the pale blue): hover = white with a navy outline + navy text, no tint */
.crumbs > a:hover, .crumbs > a:focus-visible { background: var(--navy); --crumb-fill: var(--surface); color: var(--navy); text-decoration: none; outline: none; }
.crumbs > a:hover::before, .crumbs > a:focus-visible::before { inset: 2px; }
.crumbs > .crumb-sec { color: var(--text-3); }
/* current page: the crumb-here item, or (old markup) the last plain span with no link / plain span after it */
.crumbs > .crumb-here,
.crumbs > span:not(.pill):not(.crumb-sep):not(.crumb-sec):not(:has(~ a)):not(:has(~ span:not(.pill):not(.crumb-sep))) {
  --crumb-shape: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
  --crumb-fill: var(--btn); background: var(--btn); color: #fff; padding-right: 16px; margin-right: 0;
}
.crumbs > .crumb-here:first-child,
.crumbs > span:not(.pill):not(.crumb-sep):not(.crumb-sec):first-child:not(:has(~ a)):not(:has(~ span:not(.pill):not(.crumb-sep))) {
  --crumb-shape: none;
}
.crumbs > .pill { font-size: 13px; margin-left: 10px; }
@media (max-width: 600px) {
  .crumbs > a, .crumbs > span:not(.pill):not(.crumb-sep) { font-size: 14px; min-height: 32px; padding: 0 14px 0 20px; }
  .crumbs > a:first-child, .crumbs > span:not(.pill):not(.crumb-sep):first-child { padding-left: 12px; }
}
@media print { .crumbs { display: none !important; } }

/* v1.0.181 (Dylan: hover outline was uneven/jagged): the fill (::before) is no longer the same arrow shrunk by
   a fixed inset, which made the slanted edges thinner than the straight ones. It now has its own arrow whose edges
   run parallel to the outer ones, offset by --bw (outline width) measured square to each edge, so the outline is
   the same thickness all the way round. Factors are for the 12px-deep arrow on a 36px item (32px on phones is close). */
.crumbs > a, .crumbs > span:not(.pill):not(.crumb-sep) {
  --bw: 1px;
  --crumb-inner: polygon(calc(1.87 * var(--bw)) 0, calc(100% - 12px - 0.54 * var(--bw)) 0, calc(100% - 1.2 * var(--bw)) 50%,
                         calc(100% - 12px - 0.54 * var(--bw)) 100%, calc(1.87 * var(--bw)) 100%, calc(12px + 1.2 * var(--bw)) 50%);
}
.crumbs > a:first-child, .crumbs > span:not(.pill):not(.crumb-sep):first-child {
  --crumb-inner: polygon(var(--bw) 0, calc(100% - 12px - 0.54 * var(--bw)) 0, calc(100% - 1.2 * var(--bw)) 50%,
                         calc(100% - 12px - 0.54 * var(--bw)) 100%, var(--bw) 100%);
}
.crumbs > a::before, .crumbs > span:not(.pill):not(.crumb-sep)::before,
.crumbs > a:hover::before, .crumbs > a:focus-visible::before {
  inset: var(--bw) 0; clip-path: var(--crumb-inner);
}
.crumbs > a:hover, .crumbs > a:focus-visible { --bw: 2px; }
/* current page is one solid colour, so its fill just matches the outer shape */
.crumbs > .crumb-here::before,
.crumbs > span:not(.pill):not(.crumb-sep):not(.crumb-sec):not(:has(~ a)):not(:has(~ span:not(.pill):not(.crumb-sep)))::before {
  inset: 0; clip-path: var(--crumb-shape);
}

/* v1.0.179: purchase's linked invoice shown read-only when the invoice is paid/void */
.linked-inv-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; background: var(--surface-2); }
.linked-inv-locked a { font-weight: 600; }

/* v1.0.180: vendor cards: badges sit under the name (no more squished names); vendor pictures */
.vendor-card-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.vendor-card-head h3 { margin: 0; }
/* v1.0.182 (Dylan): initials tiles are white with a border and navy letters (no more black tiles) */
.vendor-mark { background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--navy); font-family: var(--font-cond); letter-spacing: .02em; font-size: 20px; }
.vendor-mark-lg:not(.has-logo) { font-size: 28px; }
.vendor-mark.has-logo { background: #fff; border: 1px solid var(--line); overflow: hidden; padding: 3px; }
.vendor-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* v1.0.185: vendor page "Also Supplies" (vendors.search_terms) as a tidy checklist of chips */
.vendor-also { padding: 18px 24px 20px; }
.vendor-also-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vendor-also-head h2 { margin: 0; }
.vendor-also-list { display: flex; flex-wrap: wrap; gap: 8px; }
.vendor-also-list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--navy); font-size: 14.5px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: border-color .12s, background-color .12s; }
.vendor-also-list a:hover { border-color: var(--navy); background: var(--surface); text-decoration: none; }
.vendor-also-list a svg { width: 14px; height: 14px; flex: none; color: var(--green, #11804a); }

/* v1.0.186: Vendors list "What Our Vendors Supply" (same chips as the vendor page) */
.vendor-all-supplies { margin-top: 18px; }
.vendor-also-list a .vendor-also-n { margin-left: 2px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--navy); color: var(--surface); font-size: 12px; font-weight: 700; text-align: center; }
.vendor-also-list a.is-on { border-color: var(--navy); background: var(--surface); box-shadow: inset 0 0 0 1px var(--navy); }

/* v1.1.1: supply families on the Vendors list (similar items combined) */
.vendor-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.vendor-fam { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--navy); text-decoration: none; transition: border-color .12s, background-color .12s; min-width: 0; }
.vendor-fam:hover { border-color: var(--navy); background: var(--surface); text-decoration: none; }
.vendor-fam.is-on { border-color: var(--navy); background: var(--surface); box-shadow: inset 0 0 0 1px var(--navy); }
.vendor-fam-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vendor-fam-top strong { font-size: 16px; }
.vendor-fam-top .vendor-also-n { white-space: nowrap; }
.vendor-fam-items { font-size: 13.5px; color: var(--text-3); line-height: 1.4; }
.vendor-also-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.vendor-group-on { margin: -2px 0 12px; }

/* v1.1.2: live vendor filter hides cards/chips with [hidden] */
.vendor-card[hidden], .vendor-fam[hidden], .vendor-also-list a[hidden] { display: none !important; }

/* v1.1.3: which vendors carry each supply group (small tiles + names) */
.vendor-fam-who { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); min-width: 0; }
.vendor-fam-marks { display: flex; flex: none; }
.vendor-fam-marks .vendor-mark { width: 28px; height: 28px; font-size: 12px; border-radius: 6px; margin-right: -6px; box-shadow: 0 0 0 2px var(--surface-2); padding: 0; }
.vendor-fam-marks .vendor-mark.has-logo { padding: 2px; }
.vendor-fam:hover .vendor-fam-marks .vendor-mark, .vendor-fam.is-on .vendor-fam-marks .vendor-mark { box-shadow: 0 0 0 2px var(--surface); }
.vendor-fam-more { display: grid; place-items: center; height: 28px; min-width: 28px; padding: 0 5px; margin-left: 2px; border-radius: 6px; background: var(--navy); color: var(--surface); font-size: 12px; font-weight: 700; position: relative; }
.vendor-fam-names { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* v1.1.4: picked supply group shown as a removable tag inside the Vendors search bar */
.vendor-search { display: flex; align-items: center; }
.vendor-search-tags { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 6px; max-width: 70%; }
.vendor-search-tags[hidden], .vendor-search-tag[hidden] { display: none; }
.vendor-search-tag { display: inline-flex; min-width: 0; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--navy); color: var(--surface); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.vendor-search-tag > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-search-tag button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.vendor-search-tag button:hover { background: rgba(255,255,255,.35); }
.vendor-search.has-tag .input { padding-left: calc(34px + var(--tag-w, 0px) + 8px); }

/* v1.1.5: sub-items of the picked supply group, under the search bar */
.vendor-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.vendor-subs[hidden] { display: none; }
.vendor-subs-lead { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.vendor-sub { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--navy);
  font: 500 13.5px/1.2 inherit; font-family: inherit; cursor: pointer; transition: border-color .12s, background-color .12s; }
.vendor-sub:hover { border-color: var(--navy); }
.vendor-sub.is-on { background: var(--navy); border-color: var(--navy); color: var(--surface); }
.vendor-sub .vendor-also-n { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--surface-2); color: var(--navy); font-size: 11.5px; font-weight: 700; text-align: center; }

/* v1.1.6: the picked item is its own lighter tag beside the group tag */
.vendor-search-tag.is-sub { background: var(--surface); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.vendor-search-tag.is-sub button { background: var(--surface-2); }
.vendor-search-tag.is-sub button:hover { background: var(--line); }

/* ------------------------------------------------------------- Daily Planner (v1.1.8, planner.php) */
.planner { display: grid; gap: 14px; }
.planner .spacer, .pe-actions .spacer { flex: 1; }
.planner-top { padding: 0; overflow: hidden; }
.planner-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: #1a2b4a; color: #fff; }
.planner-kicker { font-size: 16px; opacity: .92; }
.planner-hours { font-weight: 700; font-size: 15px; margin-top: 2px; }
.planner-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.planner-nav .btn { white-space: nowrap; }
.planner-nav .btn-secondary { min-width: 38px; font-size: 20px; line-height: 1; justify-content: center; }
.planner-date .input { height: 36px; padding: 4px 8px; width: auto; }
.planner-dayname { padding: 12px 18px 0; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planner-priority { padding: 10px 18px 0; margin: 0; }
.planner-priority label { font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.planner-priority .input { font-size: 18px; font-weight: 600; }
.planner-legend { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 12px 18px 8px; }
.pl-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text-2); }
.pl-cat i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.planner-count { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.planner-progress { height: 6px; background: var(--fill); }
.planner-progress span { display: block; height: 100%; background: var(--green); transition: width .3s ease; }
.planner-card { padding: 0; overflow: hidden; }
.planner-cols, .pl-row { display: grid; grid-template-columns: 190px 1fr 64px; align-items: center; gap: 12px; }
.planner-cols { padding: 10px 18px 10px 24px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.planner-cols span:last-child { text-align: center; }
.planner-list { list-style: none; margin: 0; padding: 0; }
.pl-block { position: relative; border-bottom: 1px solid var(--line); }
.pl-block:last-child { border-bottom: 0; }
.pl-block::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 5px; border-radius: 3px; background: var(--c); }
.pl-row { padding: 10px 18px 10px 24px; cursor: pointer; min-height: 58px; }
.pl-row:hover { background: var(--fill-2); }
.pl-time { font-weight: 700; color: var(--navy); font-size: 16px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.pl-now { font-size: 12px; font-weight: 700; text-transform: uppercase; background: var(--c); color: #fff; padding: 2px 7px; border-radius: var(--radius-pill); }
.pl-what { display: grid; gap: 2px; min-width: 0; }
.pl-what strong { font-size: 17px; }
.pl-what span { color: var(--text-3); font-size: 15.5px; }
.pl-check { display: grid; place-items: center; }
.pl-check .task-box { width: 26px; height: 26px; }
.pl-block.is-done .pl-what strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.pl-block.is-done .pl-time, .pl-block.is-done .pl-what { opacity: .55; }
.pl-block.is-past:not(.is-done) .pl-time { color: var(--orange); }
.pl-block.is-now { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 2px var(--c); }
.planner-notes h2 { font-size: 18px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.planner-notes textarea { width: 100%; min-height: 120px; resize: vertical; font-size: 16.5px; }
.planner-saved { margin: 6px 0 0; }
.planner-foot { text-align: center; margin: 0 0 8px; }
@media (max-width: 700px) {
  .planner-cols { display: none; }
  .pl-row { grid-template-columns: 1fr 44px; grid-template-areas: "time check" "what check"; gap: 2px 10px; padding-left: 22px; }
  .pl-time { grid-area: time; font-size: 15px; }
  .pl-what { grid-area: what; }
  .pl-check { grid-area: check; }
  .planner-band { padding: 12px 14px; }
  .planner-dayname, .planner-priority, .planner-legend { padding-left: 14px; padding-right: 14px; }
}
/* Edit time blocks */
.pe-rows { display: grid; gap: 8px; margin: 8px 0 14px; }
.pe-row { display: grid; grid-template-columns: 150px 150px minmax(160px, 1fr) minmax(200px, 1.6fr) 160px 40px; gap: 8px; align-items: center; }
.pe-head { font-size: 14px; font-weight: 700; color: var(--text-2); text-transform: uppercase; }
.pe-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-reset { margin: 12px 0 0; }
@media (max-width: 900px) {
  .pe-head { display: none; }
  .pe-row { grid-template-columns: 1fr 1fr 40px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
  .pe-row > input[name$="[title]"], .pe-row > input[name$="[about]"] { grid-column: 1 / -1; }
  .pe-row > select { grid-column: 1 / 3; }
}
/* Print: the paper planner, like Dylan's PDF */
.planner-print { font-family: var(--font); color: #1a2b4a; }
@media print {
  /* the page size/margin is set inline on planner.php (an @page here would change label printing too) */
  .planner-print .pp-band { background: #1a2b4a !important; color: #fff; padding: 14px 18px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .planner-print h1 { margin: 0 0 4px; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
  .planner-print .pp-hours { font-weight: 700; font-size: 12px; margin-top: 4px; }
  .planner-print .pp-band div { font-size: 12px; }
  .planner-print .pp-meta { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; padding: 10px 2px 4px; }
  .planner-print .pp-legend { display: flex; gap: 22px; font-size: 10px; padding: 4px 2px 10px; }
  .planner-print .pp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .planner-print .pp-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
  .planner-print .pp-table th { text-align: left; background: #e9eef6 !important; padding: 6px 8px; font-size: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .planner-print .pp-table th:last-child, .planner-print .pp-table td:last-child { text-align: center; width: 50px; }
  .planner-print .pp-table td { padding: 4px 8px; border-bottom: 1px solid #dfe5ee; vertical-align: top; }
  .planner-print .pp-table td:first-child { width: 120px; font-weight: 700; border-left: 4px solid; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .planner-print .pp-table td span { color: #55667f; font-size: 9.5px; }
  .planner-print .pp-box { display: inline-block; width: 13px; height: 13px; border: 1.3px solid #8b95a5; border-radius: 3px; font-size: 11px; line-height: 13px; font-weight: 700; }
  .planner-print .pp-notes { font-size: 11px; margin-top: 12px; min-height: 70px; border-bottom: 1px solid #dfe5ee; padding-bottom: 8px; }
  .planner-print .pp-notes div { font-size: 11px; margin-top: 6px; white-space: normal; }
  .planner-print .pp-foot { font-size: 9.5px; color: #55667f; margin-top: 8px; }
}

/* Daily Planner Blocks view (v1.1.9): the day as a timeline, each block as tall as it is long (--t start, --d length in minutes). */
.planner-view { margin-left: auto; }
.planner-view button { min-height: 32px; padding: 0 14px; font-size: 14.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.planner-view { display: inline-flex; border: 1.5px solid var(--accent); border-radius: var(--radius-sm); overflow: hidden; }
.planner-view button { background: var(--surface); color: var(--accent); border: 0; cursor: pointer; white-space: nowrap; }
.planner-view button.is-on { background: var(--accent); color: #fff; }
.planner-legend .spacer { flex: 1 1 0; }
.pl-hours, .pl-nowline { display: none; }
.planner-card.is-blocks { --px: 2.3px; position: relative; padding: 14px 14px 14px 0; }
.planner-card.is-blocks .planner-cols { display: none; }
.planner-card.is-blocks .pl-hours { display: block; position: absolute; left: 0; right: 14px; top: 14px; height: calc(var(--span) * var(--px)); pointer-events: none; }
.pl-hours span { position: absolute; left: 0; right: 0; top: calc(var(--t) * var(--px)); border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text-3); padding-left: 8px; line-height: 1; }
.pl-hours span:not(.is-half) { padding-top: 0; transform: none; }
.pl-hours span:not(.is-half)::before { content: none; }
.pl-hours span.is-half { border-top-style: dashed; border-top-color: var(--fill); }
.pl-hours span { text-indent: 0; }
.pl-hours span:not(.is-half) { margin-top: 0; }
.planner-card.is-blocks .planner-list { position: relative; height: calc(var(--span) * var(--px)); margin-left: 78px; }
.planner-card.is-blocks .pl-block { position: absolute; left: 0; right: 0; top: calc(var(--t) * var(--px) + 2px); height: calc(var(--d) * var(--px) - 4px); border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 13%, var(--surface)); overflow: hidden; }
.planner-card.is-blocks .pl-block::before { left: 0; top: 0; bottom: 0; width: 6px; border-radius: 0; }
.planner-card.is-blocks .pl-row { display: grid; grid-template-columns: 1fr auto 44px; grid-template-areas: "what time check"; align-items: start; gap: 2px 12px; min-height: 0; height: 100%; padding: 6px 8px 6px 18px; }
.planner-card.is-blocks .pl-row:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.planner-card.is-blocks .pl-what { grid-area: what; }
.planner-card.is-blocks .pl-time { grid-area: time; font-size: 14.5px; flex-direction: column; align-items: flex-end; gap: 0; }
.planner-card.is-blocks .pl-check { grid-area: check; align-self: center; }
.pl-len { display: none; }
.planner-card.is-blocks .pl-len { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); }
.planner-card.is-blocks .pl-block.is-short .pl-row { align-items: center; padding-top: 0; padding-bottom: 0; }
.planner-card.is-blocks .pl-block.is-short .pl-len { display: none; }
/* v1.1.10: short blocks keep their description, on the same line as the name (Dylan) */
.planner-card.is-blocks .pl-block.is-short .pl-what { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.planner-card.is-blocks .pl-block.is-short .pl-what strong { flex: none; max-width: 60%; }
.planner-card.is-blocks .pl-block.is-short .pl-what span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-card.is-blocks .pl-block.is-short .pl-time { flex-direction: row; }
.planner-card.is-blocks .pl-what strong, .planner-card.is-blocks .pl-what span { overflow: hidden; text-overflow: ellipsis; }
.planner-card.is-blocks .pl-block.is-short .pl-what strong { white-space: nowrap; }
.planner-card.is-blocks .pl-block.is-done { background: var(--surface-2); }
.planner-card.is-blocks .pl-block.is-now { box-shadow: inset 0 0 0 2px var(--c), 0 4px 14px rgba(13, 40, 90, .18); z-index: 1; }
.planner-card.is-blocks .pl-nowline { display: block; position: absolute; left: 70px; right: 14px; top: calc(14px + var(--t) * var(--px)); border-top: 2px solid var(--red); z-index: 2; pointer-events: none; }
.planner-card.is-blocks .pl-nowline[hidden] { display: none; }
.pl-nowline span { position: absolute; right: 0; top: -9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: var(--radius-pill); }
.planner-card.is-blocks .pl-nowline::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
@media (max-width: 700px) {
  .planner-card.is-blocks { --px: 2.9px; padding-right: 8px; }
  .planner-card.is-blocks .planner-list { margin-left: 58px; }
  .planner-card.is-blocks .pl-hours { right: 8px; }
  .pl-hours span { font-size: 11.5px; padding-left: 4px; }
  .planner-card.is-blocks .pl-row { grid-template-columns: 1fr 36px; grid-template-areas: "time check" "what check"; gap: 0 8px; padding-left: 14px; }
  .planner-card.is-blocks .pl-time { flex-direction: row; gap: 8px; align-items: center; font-size: 13.5px; }
  .planner-card.is-blocks .pl-what strong { font-size: 15.5px; }
  .planner-card.is-blocks .pl-what span { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .planner-card.is-blocks .pl-block.is-short .pl-row { grid-template-columns: 1fr 36px; grid-template-areas: "what check"; }
  .planner-card.is-blocks .pl-block.is-short .pl-time { display: none; }
  .planner-card.is-blocks .pl-nowline { left: 52px; right: 8px; }
  .planner-view button { padding: 0 10px; }
  .planner-card.is-blocks .pl-row { align-content: start; }
  .planner-card.is-blocks .pl-block.is-mid .pl-what span { -webkit-line-clamp: 1; }
  .planner-card.is-blocks .pl-block.is-mid .pl-row { padding-top: 3px; padding-bottom: 3px; }
  .planner-card.is-blocks .pl-block.is-mid .pl-time, .planner-card.is-blocks .pl-block.is-mid .pl-what span { font-size: 13px; line-height: 1.25; }
  .planner-card.is-blocks .pl-block.is-mid .pl-what strong { font-size: 15px; line-height: 1.2; }
  .planner-card.is-blocks .pl-block.is-short .pl-what { display: grid; gap: 0; }
  .planner-card.is-blocks .pl-block.is-short .pl-what strong { max-width: none; }
  .planner-card.is-blocks .pl-block.is-short .pl-what span { display: block; font-size: 13px; line-height: 1.2; }
  .planner-card.is-blocks .pl-block.is-short .pl-what strong { font-size: 14.5px; line-height: 1.2; }
}