/* ============================================================================
   Components: buttons, forms, cards, tables, badges, overlays, charts
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink-2);
  --btn-border: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 13px;
  font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--btn-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); color: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn--primary { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); --btn-border: transparent; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--accent-ink); border-color: transparent; }
.btn--danger { --btn-bg: var(--danger); --btn-ink: #fff; --btn-border: transparent; }
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); color: #fff; border-color: transparent; }
.btn--success { --btn-bg: var(--success); --btn-ink: #fff; --btn-border: transparent; }
.btn--success:hover { background: color-mix(in srgb, var(--success) 86%, #000); color: #fff; border-color: transparent; }
.btn--soft { --btn-bg: var(--accent-soft); --btn-ink: var(--accent-ink-on-soft); --btn-border: transparent; box-shadow: none; }
.btn--soft:hover { background: var(--accent-soft-2); color: var(--accent-ink-on-soft); border-color: transparent; }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn--quiet { --btn-bg: transparent; --btn-border: transparent; --btn-ink: var(--muted); box-shadow: none; }
.btn--quiet:hover { background: var(--surface-3); color: var(--ink); }
.btn--sm { height: 28px; padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--lg { height: 40px; padding: 0 18px; font-size: var(--fs-base); }
.btn--icon { width: 34px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.btn--block { width: 100%; }

.btngroup { display: inline-flex; }
.btngroup .btn { border-radius: 0; margin-left: -1px; box-shadow: none; }
.btngroup .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btngroup .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btngroup .btn.is-on { background: var(--accent-soft); color: var(--accent-ink-on-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); z-index: 1; }

/* Segmented control */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-md);
}
.segmented button {
  border: 0; background: transparent; color: var(--muted);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 4px 11px; border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease); white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card--flat { box-shadow: none; }
.card--inset { background: var(--surface-inset); box-shadow: none; }
.card__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 52px;
}
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.card__sub { font-size: var(--fs-sm); color: var(--muted); }
.card__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.card__body { padding: var(--s-5); }
.card__body--tight { padding: var(--s-3) var(--s-4); }
.card__body--flush { padding: 0; }
.card__foot {
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-subtle);
  background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted);
  display: flex; align-items: center; gap: var(--s-3);
}

/* ---- KPI tiles ---------------------------------------------------------- */
.kpi {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5) var(--s-4);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
a.kpi:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi__top { display: flex; align-items: center; gap: var(--s-2); }
.kpi__icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent-soft); color: var(--accent);
}
.kpi__icon svg { width: 15px; height: 15px; }
.kpi__icon[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.kpi__icon[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.kpi__icon[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.kpi__icon[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.kpi__icon[data-tone="purple"] { background: var(--purple-soft); color: var(--purple); }
.kpi__label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.kpi__value { font-size: var(--fs-3xl); font-weight: var(--fw-semi); letter-spacing: -.028em; line-height: 1.05; color: var(--ink); }
.kpi__value small { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--muted); letter-spacing: 0; }
.kpi__foot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.kpi__spark { margin-top: var(--s-2); height: 34px; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.delta svg { width: 13px; height: 13px; }
.delta[data-dir="up"] { color: var(--success); }
.delta[data-dir="down"] { color: var(--danger); }
.delta[data-dir="flat"] { color: var(--muted); }
.delta[data-invert="true"][data-dir="up"] { color: var(--danger); }
.delta[data-invert="true"][data-dir="down"] { color: var(--success); }

/* ---- Badges / pills ----------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.6;
  background: var(--neutral-soft); color: var(--neutral-ink);
  white-space: nowrap; border: 1px solid transparent;
}
.badge svg { width: 11px; height: 11px; }
.badge--success { background: var(--success-soft); color: var(--success-ink); }
.badge--warning { background: var(--warning-soft); color: var(--warning-ink); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.badge--info    { background: var(--info-soft);    color: var(--info-ink); }
.badge--purple  { background: var(--purple-soft);  color: var(--purple-ink); }
.badge--accent  { background: var(--accent-soft);  color: var(--accent-ink-on-soft); }
.badge--outline { background: transparent; border-color: var(--border-strong); color: var(--ink-3); }
.badge--lg { font-size: var(--fs-sm); padding: 4px 11px; }
.badge__dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: 0 0 auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 4px 0 10px; border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.chip button { border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; }
.chip button:hover { background: var(--border); color: var(--ink); }
.chip svg { width: 12px; height: 12px; }

/* ---- Avatars ------------------------------------------------------------ */
.avatar {
  width: 30px; height: 30px; border-radius: 99px;
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink-on-soft);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  letter-spacing: -.02em; flex: 0 0 auto; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--fs-lg); }
.avatar--xl { width: 68px; height: 68px; font-size: var(--fs-2xl); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar[data-hue="1"] { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }
.avatar[data-hue="2"] { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
.avatar[data-hue="3"] { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
.avatar[data-hue="4"] { background: var(--purple-soft); color: var(--purple-ink); border-color: transparent; }
.avatar[data-hue="5"] { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.avatars { display: flex; }
.avatars .avatar { margin-left: -7px; border: 2px solid var(--surface); }
.avatars .avatar:first-child { margin-left: 0; }

/* ---- Forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.field__label .req { color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }

.input, .select, .textarea {
  width: 100%; min-width: 0;
  height: 34px; padding: 0 10px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.input[readonly] { background: var(--surface-inset); color: var(--ink-3); }
.input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface-inset); color: var(--faint); cursor: not-allowed; }
.textarea { height: auto; min-height: 76px; padding: 8px 10px; line-height: var(--lh-snug); resize: vertical; }
.select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a889b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
}
.input--sm, .select--sm { height: 28px; font-size: var(--fs-sm); }
.input--num { text-align: right; font-variant-numeric: tabular-nums; }

.inputgroup { display: flex; align-items: stretch; }
.inputgroup .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.inputgroup .input + .inputgroup__addon { border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 0; }
.inputgroup__addon {
  display: grid; place-items: center; padding: 0 10px;
  background: var(--surface-inset); border: 1px solid var(--border-strong);
  color: var(--muted); font-size: var(--fs-sm); white-space: nowrap;
}
.inputgroup__addon--pre { border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0; }
.inputgroup__addon--pre + .input { border-radius: 0 var(--r-md) var(--r-md) 0; }

.searchbox { position: relative; }
.searchbox .input { padding-left: 31px; }
.searchbox > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--faint); pointer-events: none;
}

.check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--fs-md); line-height: 1.4; }
.check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.check span { color: var(--ink-2); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 36px; height: 20px; border-radius: 99px; background: var(--border-strong);
  position: relative; flex: 0 0 auto; transition: background var(--t-fast) var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 99px; background: #fff;
  box-shadow: var(--shadow-xs); transition: transform var(--t-med) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }
.switch__text { font-size: var(--fs-md); color: var(--ink-2); }

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.formgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .formgrid, .formgrid--3 { grid-template-columns: minmax(0, 1fr); } }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.fieldset__legend {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 0 0 var(--s-3);
  display: flex; align-items: center; gap: var(--s-2); width: 100%;
}
.fieldset__legend::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* ---- Tables ------------------------------------------------------------- */
.tablewrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.table th {
  text-align: left; font-weight: var(--fw-semi); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding: 9px var(--s-4); white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.table th.is-sortable { cursor: pointer; user-select: none; }
.table th.is-sortable:hover { color: var(--ink-2); background: var(--surface-3); }
.table th .sortic { display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; opacity: .35; }
.table th.is-sorted .sortic { opacity: 1; color: var(--accent); }
.table td {
  padding: 0 var(--s-4); height: var(--row-h);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-2); vertical-align: middle;
}
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .td-strong { color: var(--ink); font-weight: var(--fw-semi); }
.table .td-tight { width: 1%; white-space: nowrap; }
.table .td-actions { width: 1%; white-space: nowrap; text-align: right; }
.table--lines td { border-right: 1px solid var(--border-subtle); }
.table--lines td:last-child { border-right: 0; }
.table tfoot td {
  background: var(--surface-2); font-weight: var(--fw-semi); color: var(--ink);
  border-top: 1px solid var(--border); border-bottom: 0;
}

.tabletools {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.tabletools .searchbox { flex: 1 1 220px; max-width: 320px; }
.tablefoot {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--muted); background: var(--surface);
}
.pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.table tbody tr.is-critical td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.linkcell { color: var(--ink); font-weight: var(--fw-semi); }
.linkcell:hover { color: var(--accent); text-decoration: none; }
.subcell { font-size: var(--fs-xs); color: var(--muted); }
.cellstack { display: flex; flex-direction: column; line-height: 1.3; padding: 5px 0; }

/* ---- Empty / loading ---------------------------------------------------- */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-12) var(--s-5); }
.empty__icon {
  width: 52px; height: 52px; border-radius: var(--r-xl); display: grid; place-items: center;
  background: var(--surface-3); color: var(--faint);
}
.empty__icon svg { width: 24px; height: 24px; }
.empty__title { font-weight: var(--fw-semi); font-size: var(--fs-lg); color: var(--ink-2); }
.empty__text { font-size: var(--fs-md); color: var(--muted); max-width: 420px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%; animation: shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.spinner {
  width: 16px; height: 16px; border-radius: 99px; flex: 0 0 auto;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Tabs --------------------------------------------------------------- */
.tabs {
  display: flex; align-items: center; gap: 2px; overflow-x: auto;
  border-bottom: 1px solid var(--border); margin-bottom: var(--s-5);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
/* With a mouse there is no sideways swipe: the tabs that do not fit go on a second row, where they can be clicked. */
@media (hover: hover) and (pointer: fine) { .tabs { flex-wrap: wrap; overflow-x: visible; } }
.tab {
  position: relative; padding: 9px 13px; white-space: nowrap;
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--muted);
  border: 0; background: transparent; border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--ink-2); background: var(--surface-2); text-decoration: none; }
.tab.is-on { color: var(--accent); }
.tab.is-on::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.tab__count {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); padding: 0 5px;
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); line-height: 17px;
}
.tab.is-on .tab__count { background: var(--accent-soft); color: var(--accent-ink-on-soft); }

/* ---- Definition lists / detail panes ------------------------------------ */
.dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 1px var(--s-4); }
.dl dt { font-size: var(--fs-sm); color: var(--muted); padding: 6px 0; }
.dl dd { margin: 0; padding: 6px 0; font-size: var(--fs-md); color: var(--ink); font-weight: var(--fw-medium); min-width: 0; }
.dl--rows dt, .dl--rows dd { border-bottom: 1px solid var(--border-subtle); }
.dl--rows > :nth-last-child(-n+2) { border-bottom: 0; }

.statline { display: flex; align-items: baseline; gap: var(--s-2); }
.statline__v { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: -.02em; }
.statline__l { font-size: var(--fs-sm); color: var(--muted); }

.metricrow { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); }
.metric { min-width: 96px; }
.metric__l { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-semi); }
.metric__v { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: -.02em; margin-top: 2px; }
.metric__s { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Progress ----------------------------------------------------------- */
.progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width var(--t-slow) var(--ease-out); }
.progress[data-tone="success"] > i { background: var(--success); }
.progress[data-tone="warning"] > i { background: var(--warning); }
.progress[data-tone="danger"] > i { background: var(--danger); }
.progress--lg { height: 9px; }

.meterbar { display: flex; align-items: center; gap: var(--s-3); }
.meterbar .progress { flex: 1 1 auto; min-width: 60px; }
.meterbar__v { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; min-width: 52px; text-align: right; }

/* ---- Timeline ----------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); position: relative; padding-bottom: var(--s-5); }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px;
  background: var(--border); border-radius: 2px;
}
.tl:last-child::before { display: none; }
.tl__dot {
  width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); border: 2px solid var(--surface); z-index: 1;
}
.tl__dot svg { width: 13px; height: 13px; }
.tl__dot[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.tl__dot[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.tl__dot[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.tl__dot[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); }
.tl__dot[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.tl__body { min-width: 0; padding-top: 3px; }
.tl__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); }
.tl__meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; }

/* ---- Alerts / callouts -------------------------------------------------- */
.alert {
  display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--fs-md); color: var(--ink-2);
}
.alert svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.alert__title { font-weight: var(--fw-semi); color: var(--ink); }
.alert--info { background: var(--info-soft); border-color: transparent; color: var(--info-ink); }
.alert--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning-ink); }
.alert--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger-ink); }
.alert--success { background: var(--success-soft); border-color: transparent; color: var(--success-ink); }

.alertlist { display: flex; flex-direction: column; }
.alertrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-fast) var(--ease); color: inherit;
}
.alertrow:last-child { border-bottom: 0; }
.alertrow:hover { background: var(--surface-2); text-decoration: none; }
.alertrow__icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex: 0 0 auto; }
.alertrow__icon svg { width: 15px; height: 15px; }
.alertrow__icon[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.alertrow__icon[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.alertrow__icon[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.alertrow__icon[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); }
.alertrow__body { min-width: 0; flex: 1 1 auto; }
.alertrow__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); }
.alertrow__meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Overlays: modal, drawer, palette ----------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s-5);
  background: rgba(8, 12, 20, .45); backdrop-filter: blur(3px);
  animation: fadeIn var(--t-med) var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px; max-height: calc(100vh - 2 * var(--s-5));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn var(--t-med) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal--sm { max-width: 420px; }
.modal--lg { max-width: 760px; }
.modal--xl { max-width: 1040px; }
.modal--full { max-width: min(1320px, 96vw); height: calc(100vh - 2 * var(--s-5)); }
.modal__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4); flex: 0 0 auto;
  border-bottom: 1px solid var(--border-subtle);
}
.modal__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -.015em; }
.modal__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.modal__x { margin-left: auto; flex: 0 0 auto; }
.modal__body { padding: var(--s-5); overflow-y: auto; flex: 1 1 auto; }
.modal__body--flush { padding: 0; }
.modal__foot {
  display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto;
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border-subtle);
  background: var(--surface-2);
}
.modal__foot .spacer { flex: 1 1 auto; }

.drawer-overlay { justify-items: end; align-items: stretch; padding: 0; }
.drawer {
  width: min(560px, 100vw); height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
  animation: drawerIn var(--t-med) var(--ease-out); border-radius: 0;
  max-height: none;
}
.drawer--wide { width: min(880px, 100vw); }
@keyframes drawerIn { from { transform: translateX(24px); opacity: .6; } }

/* Command palette */
.palette-overlay { align-items: start; padding-top: 12vh; z-index: var(--z-palette); }
.palette {
  width: 100%; max-width: 620px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: modalIn var(--t-med) var(--ease-out);
  display: flex; flex-direction: column; max-height: 64vh;
}
.palette__input {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border-subtle);
}
.palette__input svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.palette__input input { flex: 1 1 auto; border: 0; background: transparent; font-size: var(--fs-lg); outline: none; }
.palette__input input::placeholder { color: var(--faint); }
.palette__list { overflow-y: auto; padding: var(--s-2); }
.palette__group { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: var(--fw-semi); padding: var(--s-3) var(--s-3) var(--s-1); }
.palette__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3); border-radius: var(--r-md); cursor: pointer;
  color: var(--ink-2); font-size: var(--fs-md);
}
.palette__item svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.palette__item.is-on { background: var(--accent-soft); color: var(--accent-ink-on-soft); }
.palette__item.is-on svg { color: var(--accent); }
.palette__item mark { background: transparent; color: var(--accent); font-weight: var(--fw-semi); }
.palette__meta { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.palette__foot {
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border-subtle);
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--muted);
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
}

/* Dropdown menus */
.menu {
  position: absolute; z-index: var(--z-drawer); min-width: 190px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-2); animation: modalIn var(--t-fast) var(--ease-out);
  max-height: 70vh; overflow-y: auto;
}
.menu__item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left; padding: 7px var(--s-3);
  border: 0; background: transparent; border-radius: var(--r-sm);
  font-size: var(--fs-md); color: var(--ink-2);
}
.menu__item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.menu__item svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.menu__item[data-tone="danger"] { color: var(--danger); }
.menu__item[data-tone="danger"] svg { color: var(--danger); }
.menu__item[data-tone="danger"]:hover { background: var(--danger-soft); }
.menu__item.is-on { color: var(--accent); font-weight: var(--fw-medium); }
.menu__sep { height: 1px; background: var(--border-subtle); margin: var(--s-2) 0; }
.menu__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: var(--fw-semi); padding: var(--s-2) var(--s-3) 4px; }
.menu__check { margin-left: auto; width: 14px; height: 14px; color: var(--accent); }

/* ---- Toasts ------------------------------------------------------------- */
.toasts {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none;
  max-width: min(400px, calc(100vw - 2 * var(--s-5)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); pointer-events: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: toastIn var(--t-med) var(--ease-out);
  font-size: var(--fs-md);
}
.toast.is-out { animation: toastOut var(--t-med) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(14px); } }
.toast[data-tone="success"] { border-left-color: var(--success); }
.toast[data-tone="danger"] { border-left-color: var(--danger); }
.toast[data-tone="warning"] { border-left-color: var(--warning); }
.toast__icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.toast[data-tone="success"] .toast__icon { color: var(--success); }
.toast[data-tone="danger"] .toast__icon { color: var(--danger); }
.toast[data-tone="warning"] .toast__icon { color: var(--warning); }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title { font-weight: var(--fw-semi); color: var(--ink); }
.toast__text { color: var(--muted); font-size: var(--fs-sm); }
.toast__x { flex: 0 0 auto; }

/* ---- Charts ------------------------------------------------------------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font-sans); fill: var(--chart-axis); font-size: 11px; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis line { stroke: var(--chart-grid); }
.chart .bar { transition: opacity var(--t-fast) var(--ease); }
.chart .bar:hover { opacity: .82; }
.chart .dot { transition: r var(--t-fast) var(--ease); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover ~ .dot { r: 5; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.legend__sw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }

.charttip {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 7px 10px; font-size: var(--fs-sm); color: var(--ink);
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
  animation: fadeIn var(--t-fast) var(--ease);
}
.charttip b { font-weight: var(--fw-semi); }
.charttip .t-muted { display: block; font-size: var(--fs-xs); }

/* ---- Time clock --------------------------------------------------------- */
.punchcard {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) minmax(260px, 1fr);
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.punchcard__who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.punchcard__name { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: -.02em; }
.punchcard__meta { font-size: var(--fs-sm); color: var(--muted); }
.punchcard__timers { display: flex; gap: var(--s-6); }
.punchcard__timerlabel { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: var(--fw-semi); }
.punchcard__timervalue { font-size: 34px; font-weight: var(--fw-semi); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.punchcard__since { font-size: var(--fs-xs); color: var(--faint); }
.punchcard__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
@media (max-width: 1080px) {
  .punchcard { grid-template-columns: 1fr; }
  .punchcard__actions { justify-content: flex-start; }
}

.clockboard { display: flex; flex-direction: column; }
.clockrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}
.clockrow:last-child { border-bottom: 0; }
.clockrow.is-off { opacity: .68; }
.clockrow__body { flex: 1 1 auto; min-width: 0; }
.clockrow__name { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.clockrow__meta { font-size: var(--fs-sm); color: var(--muted); }
.clockrow__time { text-align: right; flex: 0 0 auto; }
.clockrow__elapsed { font-size: var(--fs-lg); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.clockrow__since { font-size: var(--fs-xs); color: var(--faint); }

/* ---- Import wizard ------------------------------------------------------ */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--s-10) var(--s-5);
  text-align: center;
  background: var(--surface-inset);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft-2); }
.dropzone__icon {
  width: 54px; height: 54px; margin: 0 auto var(--s-3);
  border-radius: var(--r-xl); display: grid; place-items: center;
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm);
}
.dropzone__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.dropzone__text { font-size: var(--fs-md); color: var(--muted); margin-top: 4px; }
.dropzone__formats { font-size: var(--fs-xs); color: var(--faint); margin-top: var(--s-3); }

.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-2) var(--s-4); }
.mapgrid__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-items: center; }
.mapgrid__label { font-size: var(--fs-sm); color: var(--ink-2); }
.mapgrid__label .req { color: var(--danger); }

.importcard {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.importcard:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.importcard__icon {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.importcard__body { flex: 1 1 auto; min-width: 0; }
.importcard__title { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.importcard__text { font-size: var(--fs-sm); color: var(--muted); }
.importcard__count { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }

/* ---- "Preview as" banner ------------------------------------------------ */
.viewas {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: 9px var(--s-5);
  background: var(--warning-soft);
  color: var(--warning-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  font-size: var(--fs-sm);
}
.viewas svg { flex: 0 0 auto; }
.viewas span { flex: 1 1 260px; min-width: 0; }
.viewas .btn { flex: 0 0 auto; }

/* ---- Inspection checklist ----------------------------------------------- */
.insp-list { display: flex; flex-direction: column; }
.insp-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}
.insp-item:last-child { border-bottom: 0; }
.insp-item[data-answered="1"] { background: var(--surface-2); }
.insp-item__label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); color: var(--ink); min-width: 0; }
.insp-item__actions { display: flex; gap: 4px; flex: 0 0 auto; }
.insp-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted);
  transition: all var(--t-fast) var(--ease);
}
.insp-btn:hover { border-color: var(--muted); color: var(--ink); }
.insp-btn--pass.is-on { background: var(--success); border-color: transparent; color: #fff; }
.insp-btn--defect.is-on { background: var(--danger); border-color: transparent; color: #fff; }
.insp-btn--na.is-on { background: var(--surface-3); border-color: var(--border-strong); color: var(--ink); }
.insp-extra {
  grid-column: 1 / -1;
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  padding-top: var(--s-2);
}
.insp-extra .input { flex: 1 1 200px; }
@media (max-width: 620px) {
  .insp-item { grid-template-columns: 1fr; }
  .insp-item__actions { justify-content: stretch; }
  .insp-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- App footer (version stamp on every page) --------------------------- */
.appfoot {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-4) var(--s-6) var(--s-6);
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--faint);
  border-top: 1px solid var(--border-subtle);
}
.appfoot__name { font-weight: var(--fw-medium); color: var(--muted); }
.appfoot__version {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--muted); padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--border-subtle);
}
.appfoot__version:hover { color: var(--accent); text-decoration: none; border-color: var(--accent); }
.appfoot .spacer { flex: 1 1 auto; }
@media (max-width: 720px) { .appfoot { padding: var(--s-4) var(--s-4) var(--s-8); } }

/* ---- Misc --------------------------------------------------------------- */
.divider { height: 1px; background: var(--border); margin: var(--s-4) 0; }
.dot-sep { color: var(--faint); }

.statusdot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; display: inline-block; }
.statusdot[data-tone="success"] { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); }
.statusdot[data-tone="warning"] { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent); }
.statusdot[data-tone="danger"] { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.statusdot[data-tone="muted"] { background: var(--faint); }

.filterbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.tile-link { color: inherit; display: block; }
.tile-link:hover { text-decoration: none; }

.imgcell {
  width: 40px; height: 30px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--surface-3); flex: 0 0 auto;
}

.unitmini { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.unitmini__icon {
  width: 34px; height: 34px; border-radius: var(--r-md); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-3); color: var(--ink-3);
}
.unitmini__icon svg { width: 18px; height: 18px; }

.scrollx { overflow-x: auto; }

.printonly { display: none; }

/* Photo / doc thumbnails */
.thumbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.thumb {
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--faint); position: relative;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Signature box */
.sigbox {
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  padding: var(--s-4); min-height: 76px; display: grid; align-content: end;
}
.sigbox__name { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 22px; color: var(--ink); }
.sigbox__line { border-top: 1px solid var(--border-strong); margin-top: var(--s-2); padding-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ============================================================================
   Business mode chooser — the first decision a new installation makes.
   ========================================================================== */

.setup {
  max-width: 1080px; margin: 0 auto; padding: var(--s-6) 0 var(--s-8);
}
.setup__head { text-align: center; margin-bottom: var(--s-7); }
.setup__eyebrow {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--accent);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-2);
}
.setup__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-semi); letter-spacing: -.028em;
  margin-bottom: var(--s-3);
}
.setup__text { color: var(--muted); font-size: var(--fs-lg); max-width: 60ch; margin: 0 auto; line-height: var(--lh-snug); }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s-4); }

.choice {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  font: inherit; color: inherit;
}
.choice:hover { border-color: var(--muted); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.choice:focus-visible { box-shadow: var(--ring); outline: none; }
.choice.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.choice[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.choice__icon {
  width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink-on-soft);
}
.choice__icon svg { width: 20px; height: 20px; }
.choice__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -.012em; }
.choice__tag { font-size: var(--fs-sm); color: var(--ink-3); }
.choice__text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }
.choice__list { display: grid; gap: 5px; margin-top: auto; padding-top: var(--s-2); }
.choice__li { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.choice__li svg { width: 13px; height: 13px; color: var(--success); flex: 0 0 auto; margin-top: 2px; }
.choice__check {
  position: absolute; top: var(--s-4); right: var(--s-4); width: 20px; height: 20px;
  border-radius: 99px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); opacity: 0; transform: scale(.7);
  transition: opacity .12s, transform .12s;
}
.choice__check svg { width: 12px; height: 12px; }
.choice.is-on .choice__check { opacity: 1; transform: scale(1); }

/* ---- Settings shell ------------------------------------------------------ */

.settings { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) { .settings { grid-template-columns: 1fr; gap: var(--s-4); } }

.settings__nav { display: grid; gap: 1px; position: sticky; top: var(--s-4); }
@media (max-width: 900px) { .settings__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: var(--s-1); padding-bottom: var(--s-2); } }
.settings__link {
  display: flex; align-items: center; gap: var(--s-3); padding: 8px 10px;
  border-radius: var(--r-md); font-size: var(--fs-md); color: var(--ink-2);
  border: 0; background: transparent; text-align: left; cursor: pointer; width: 100%;
  white-space: nowrap;
}
.settings__link svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.settings__link:hover { background: var(--surface-3); color: var(--ink); }
.settings__link.is-on { background: var(--accent-soft); color: var(--accent-ink-on-soft); font-weight: var(--fw-medium); }
.settings__link.is-on svg { color: currentColor; }
.settings__panel { display: grid; gap: var(--s-4); min-width: 0; }

/* A setting that has been locked in. */
.locked {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--surface-inset); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-snug);
}
.locked svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; margin-top: 1px; }
.locked--reserved { background: var(--danger-soft); border-color: transparent; color: var(--danger-ink); }
.locked--reserved svg { color: currentColor; }

/* Feature switch list */
.switchlist { display: grid; gap: 1px; background: var(--border); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.switchrow {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--surface);
}
.switchrow__text { min-width: 0; flex: 1; }
.switchrow__label { font-size: var(--fs-md); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--s-2); }
.switchrow__hint { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }
.switchrow__ctl { flex: 0 0 auto; }

/* Access-level matrix */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 210px; max-width: 300px; white-space: normal; line-height: 1.3; }
.matrix thead th:not(:first-child) { white-space: normal; max-width: 86px; line-height: 1.2; vertical-align: bottom; }
.matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; font-weight: var(--fw-semi); color: var(--ink-2); font-size: var(--fs-xs); }
.matrix thead th:first-child { z-index: 3; }
.matrix tbody tr:hover td { background: var(--surface-2); }
.matrix tbody tr:hover td:first-child { background: var(--surface-2); }
.matrix__yes { color: var(--success); }
.matrix__no { color: var(--faint); }
.matrix svg { width: 14px; height: 14px; }

/* Accent swatches */
.swatch {
  width: 24px; height: 24px; border-radius: var(--r-sm); border: 1px solid var(--border);
  cursor: pointer; padding: 0; box-shadow: var(--shadow-xs);
}
.swatch:hover { transform: scale(1.08); }
.swatch:focus-visible { box-shadow: var(--ring); outline: none; }

/* ============================================================================
   The driver's day — big, thumb-first cards.
   ========================================================================== */

.daycard {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.daycard--danger { border-color: var(--danger); background: var(--danger-soft); }
.daycard--danger .unitmini__icon { background: var(--surface); color: var(--danger); }
.daycard--accent { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.daycard__text { flex: 1; min-width: 0; }
.daycard__title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -.012em; }
.daycard__action { flex: 0 0 auto; }
@media (max-width: 620px) {
  .daycard { flex-wrap: wrap; }
  .daycard__action { width: 100%; }
  .daycard__action .btn { width: 100%; }
}

/* Notification bell */
.bellwrap { position: relative; display: inline-flex; }
.bellwrap__dot {
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold); line-height: 15px; text-align: center;
  border: 2px solid var(--surface); box-sizing: content-box; pointer-events: none;
}
.bellwrap__dot[data-tone="accent"] { background: var(--accent); }

/* Deal line items */
.lineitem {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2);
}
.lineitem .input { height: 30px; font-size: var(--fs-sm); }
.lineitem .input[data-k="label"] { flex: 1 1 auto; min-width: 0; }
.lineitem .input[data-k="cost"],
.lineitem .input[data-k="amount"],
.lineitem .input[data-k="price"] { flex: 0 0 92px; width: 92px; }
.lineitem .check { flex: 0 0 auto; }

/* Language toggle in the top bar.
   A globe icon hid the choice behind a click and nobody found it. With two
   languages, showing both and marking the live one is simply clearer. */
.langtoggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 2px;
}
.langtoggle__btn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em;
  color: var(--muted); padding: 4px 9px; border-radius: calc(var(--r-md) - 3px);
  line-height: 1;
}
.langtoggle__btn:hover { color: var(--ink); background: var(--surface-3); }
.langtoggle__btn.is-on {
  background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow-xs);
}
.langtoggle__btn:focus-visible { box-shadow: var(--ring); outline: none; }

/* Language toggle on the setup screen. */
.setup__lang {
  display: flex; justify-content: center; gap: 2px; margin-bottom: var(--s-5);
  background: var(--surface-inset); border-radius: 99px; padding: 3px;
  width: max-content; margin-left: auto; margin-right: auto;
}
.setup__langbtn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted);
  padding: 5px 16px; border-radius: 99px;
}
.setup__langbtn:hover { color: var(--ink); }
.setup__langbtn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.setup__langbtn:focus-visible { box-shadow: var(--ring); outline: none; }

/* ============================================================================
   Replace-or-keep — the lifecycle cards.
   ========================================================================== */

.choice--flag { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.lifelist { display: grid; gap: var(--s-4); }

.lifecard {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); overflow: hidden;
  border-left: 3px solid var(--border-strong);
}
.lifecard[data-tone="danger"]  { border-left-color: var(--danger); }
.lifecard[data-tone="warning"] { border-left-color: var(--warning); }
.lifecard[data-tone="success"] { border-left-color: var(--success); }

.lifecard__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border);
}
.lifecard__mark {
  width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); flex: 0 0 auto;
}
.lifecard__mark[data-tone="danger"]  { background: var(--danger-soft);  color: var(--danger); }
.lifecard__mark[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.lifecard__mark[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.lifecard__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lifecard__unit { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -.012em; color: var(--ink); }
.lifecard__unit:hover { color: var(--accent); text-decoration: none; }
.lifecard__desc { font-size: var(--fs-sm); color: var(--muted); }
.lifecard__score { text-align: right; display: flex; flex-direction: column; line-height: 1.05; }
.lifecard__scorenum { font-size: var(--fs-xl); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.lifecard__scorelabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.lifecard__why { padding: var(--s-3) var(--s-5); background: var(--surface-inset); display: grid; gap: 4px; }
.lifecard__reason { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-md); color: var(--ink-2); line-height: var(--lh-snug); }
.lifecard__reason svg { color: var(--faint); flex: 0 0 auto; margin-top: 3px; }

.lifecard__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.lifestat { background: var(--surface); padding: var(--s-3) var(--s-5); }
.lifestat__l { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: var(--fw-semi); }
.lifestat__v { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -.015em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lifestat__s { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }

.lifecard__verdict {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5); flex-wrap: wrap;
}
.lifecard__sum { flex: 1 1 280px; min-width: 0; display: grid; gap: 2px; }
.lifecard__sumrow { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-md); }
.lifecard__sumrow b { font-variant-numeric: tabular-nums; }
.lifecard__sumnote { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.lifecard__delta {
  flex: 0 0 auto; text-align: right; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); min-width: 190px;
}
.lifecard__delta[data-sign="bad"]  { background: var(--danger-soft); }
.lifecard__delta[data-sign="good"] { background: var(--success-soft); }
.lifecard__deltanum { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.lifecard__delta[data-sign="bad"] .lifecard__deltanum  { color: var(--danger-ink); }
.lifecard__delta[data-sign="good"] .lifecard__deltanum { color: var(--success-ink); }
.lifecard__deltalabel { font-size: var(--fs-xs); color: var(--ink-3); }

.lifecard__foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-3); border-top: 1px solid var(--border);
}
.lifecard__curve { display: none; border-top: 1px solid var(--border); }
.lifecard__curve.is-open { display: block; }

@media (max-width: 620px) {
  .lifecard__delta { width: 100%; text-align: left; }
}

/* The monthly payment on a replacement — the figure an owner decides on. */
.lifecard__pay {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border);
  background: var(--surface-inset); flex-wrap: wrap;
}
.lifecard__payicon {
  width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink-on-soft); flex: 0 0 auto;
}
.lifecard__paytext { flex: 1 1 260px; min-width: 0; }
.lifecard__payline { font-size: var(--fs-md); color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lifecard__paynum { font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lifecard__paysub { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.lifecard__net { flex: 0 0 auto; text-align: right; }
.lifecard__netnum { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.lifecard__net[data-sign="bad"] .lifecard__netnum  { color: var(--danger); }
.lifecard__net[data-sign="good"] .lifecard__netnum { color: var(--success); }
.lifecard__netlabel { font-size: 10px; color: var(--muted); }

/* ============================================================================
   Exports.
   ========================================================================== */

.destbar__inner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
}
.destbar__inner[data-state="on"]    { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: var(--success-soft); }
.destbar__inner[data-state="stale"] { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: var(--warning-soft); }
.destbar__inner > svg { flex: 0 0 auto; color: var(--muted); }
.destbar__inner[data-state="on"] > svg    { color: var(--success); }
.destbar__inner[data-state="stale"] > svg { color: var(--warning); }
.destbar__text { flex: 1; min-width: 0; }
.destbar__title { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.destbar__sub { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug); }

.jobgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }

.jobcard {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.jobcard.is-off { opacity: .62; }
.jobcard__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); }
.jobcard__icon {
  width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink-on-soft); flex: 0 0 auto;
}
.jobcard__id { min-width: 0; }
.jobcard__name { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.jobcard__sub { font-size: var(--fs-xs); color: var(--muted); }
.jobcard__body { padding: var(--s-3) var(--s-4); flex: 1; }
.jobcard__body .dl { font-size: var(--fs-sm); }
.jobcard__foot { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); }

.filepreview {
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7;
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); overflow-x: auto; white-space: pre; margin: 0;
  color: var(--ink-2); max-height: 320px;
}

.collist { display: grid; gap: 2px; }
.colrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 5px 8px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid transparent;
}
.colrow:hover { background: var(--surface-2); border-color: var(--border); }
.colrow.is-dragging { opacity: .4; }
.colrow__grip { color: var(--faint); cursor: grab; flex: 0 0 auto; }
.colrow .check { flex: 0 0 170px; }
.colrow .input { flex: 1 1 auto; min-width: 0; }
.colrow__type { flex: 0 0 62px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; }

/* ============================================================================
   Bare screens — sign-in and first-run setup, where the menu would only invite
   somebody to click past the question being asked.
   ========================================================================== */

#app[data-bare="true"],
.app[data-bare="true"] { grid-template-columns: minmax(0, 1fr) !important; }

#app[data-bare="true"] .sidebar,
#app[data-bare="true"] .topbar__search,
#app[data-bare="true"] .topbar__actions .btn[data-action="quick-create"],
#app[data-bare="true"] .topbar__actions .btn[data-action="alerts"],
#app[data-bare="true"] .bellwrap,
#app[data-bare="true"] [data-action="toggle-sidebar"],
#app[data-bare="true"] [data-action="toggle-mobile-nav"] { display: none; }

#app[data-bare="true"] .topbar { background: transparent; border-bottom: 0; }
#app[data-bare="true"] .viewport { background: var(--surface-2); }
#app[data-bare="true"] .page { max-width: none; }

/* Alerts, grouped by how urgent they are. */
.alertgroup + .alertgroup { border-top: 1px solid var(--border); }
.alertgroup__head {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s-2) var(--s-4);
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em;
  background: var(--surface-inset); color: var(--muted);
}
.alertgroup__head[data-tone="danger"]  { color: var(--danger); background: var(--danger-soft); }
.alertgroup__head[data-tone="warning"] { color: var(--warning-ink); background: var(--warning-soft); }
.alertgroup__count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }

/* The quiet second line on a stat tile. */
.kpi__note {
  font-size: var(--fs-xs); color: var(--faint); margin-top: auto; padding-top: 6px;
  line-height: var(--lh-snug);
}
.kpi { min-height: 132px; }
.kpi__spark { margin-top: auto; }

/* ============================================================================
   The gate — sign-in and "open your company".
   ========================================================================== */

.gate {
  /* The shell around it never scrolls, so the gate scrolls itself — on a small
     or zoomed-in screen the form is taller than the window. Auto margins centre
     it when there is room and let it start at the top when there is not. */
  height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: var(--s-6) var(--s-4); background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--surface-2);
  grid-column: 1 / -1;
}
/* centring that never pushes the top of the form out of reach */
.gate > :first-child { margin-top: auto; }
.gate > :last-child { margin-bottom: auto; }
.gate__card {
  flex: none;
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl, 18px); box-shadow: var(--shadow-lg, var(--shadow-md)); padding: var(--s-7) var(--s-6) var(--s-6);
}
.gate__card--wide { max-width: 560px; }
.gate__brand { display: flex; justify-content: center; margin-bottom: var(--s-4); }
.gate__logo {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-md);
}
.gate__logo img { max-width: 100%; max-height: 100%; border-radius: inherit; }
.gate__title { font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: -.025em; text-align: center; }
.gate__sub { color: var(--muted); text-align: center; margin-top: var(--s-2); font-size: var(--fs-md); line-height: var(--lh-snug); }
.gate__form { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.gate__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 520px) { .gate__row { grid-template-columns: 1fr; } }
.input--lg { height: 42px; font-size: var(--fs-base); }
.gate__error {
  background: var(--danger-soft); color: var(--danger-ink); border-radius: var(--r-md);
  padding: 9px 12px; font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.gate__option {
  display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  background: var(--surface-inset); font-size: var(--fs-md);
}
.gate__option input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.gate__optionsub { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin-top: 2px; }
.gate__foot { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s-5); }
.gate__legal { margin-top: var(--s-5); color: var(--faint); font-size: var(--fs-xs); }
.gate__legal a { color: inherit; text-decoration: underline; }

/* Connection state and the demo marker, in the top bar. */
.conn {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 4px 10px; border-radius: 99px;
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.conn[data-state="offline"] { background: var(--warning-soft); color: var(--warning-ink); }
@media (max-width: 560px) {
  .conn[data-state="offline"] { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); z-index: 40;
    white-space: normal; text-align: center; padding: 8px 12px; box-shadow: var(--shadow-md); }
}
.demopill {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; background: var(--purple-soft); color: var(--purple-ink);
}
.demopill:hover { text-decoration: none; filter: brightness(.97); }

/* ---- Barcode labels ------------------------------------------------------ */
.lbllayout { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
.lbllayout__out { min-width: 0; position: sticky; top: var(--s-4); }
.lblbar { display: grid; grid-template-columns: minmax(0, 1fr) 120px 200px; gap: var(--s-3); align-items: end; margin-bottom: var(--s-4); }
.lblbar .field { margin: 0; }
.lblsummary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lblpreview { max-height: calc(100vh - 300px); overflow: auto; padding: var(--s-5); border-radius: var(--r-lg);
  background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 0% 25%, transparent 0% 50%) 0 0 / 18px 18px, var(--bg-sunken); }
.lblsheet { display: grid; align-content: start; box-sizing: border-box; background: #fff; color: #000; margin: 0 auto var(--s-5); overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .18); zoom: .62; }
.lblsheet:last-child { margin-bottom: 0; }
.lbl { box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; color: #000; background: #fff;
  font-family: var(--font-sans); outline: 1px dashed rgba(15, 23, 42, .22); outline-offset: -1px; border-radius: .08in; }
.lbl--blank { outline-style: dotted; background: repeating-linear-gradient(45deg, #f1f3f7 0 6px, #fff 6px 12px); }
.lbl--empty { align-items: center; justify-content: center; font-size: 7pt; color: #777; text-align: center; padding: .05in; }
.lbl__top { display: flex; align-items: baseline; justify-content: space-between; gap: .06in; min-width: 0; }
.lbl__big { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lbl__side { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; flex: none; }
.lbl__bin { border: 1px solid #000; border-radius: 3px; padding: 0 .04in; }
.lbl__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.lbl__top, .lbl__desc, .lbl__name, .lbl__co { flex: none; }
.lbl__bars { flex: 1 1 0; min-height: 0; position: relative; }
.lbl__bars svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.lbl--s { padding: .06in .12in .04in; }
.lbl--s .lbl__big { font-size: 10.5pt; line-height: 1.1; }
.lbl--s .lbl__big--part { font-size: 9pt; }
.lbl--s .lbl__side { font-size: 6.5pt; }
.lbl--s .lbl__desc { font-size: 6.5pt; line-height: 1.3; }
.lbl--s .lbl__bars { margin-top: .02in; }

.lbl--l { padding: .16in .22in .12in; }
.lbl--l .lbl__big { font-size: 26pt; line-height: 1.05; }
.lbl--l .lbl__big--part { font-size: 18pt; }
.lbl--l .lbl__side { font-size: 11pt; }
.lbl--l .lbl__desc { font-size: 11pt; margin-top: .03in; }
.lbl--l .lbl__bars { margin-top: .08in; }

.lbl--badge { padding: .16in .2in .12in; border-radius: .13in; text-align: center; }
.lbl--badge .lbl__co { display: flex; align-items: center; justify-content: center; gap: .07in; font-size: 8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #333;
  padding-bottom: .07in; border-bottom: 2px solid var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lbl--badge .lbl__co img { height: .26in; width: auto; }
.lbl--badge .lbl__name { font-size: 17pt; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin-top: .1in; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl--badge .lbl__desc { font-size: 9.5pt; margin-top: .02in; }
.lbl--badge .lbl__bars { margin-top: .08in; max-height: .85in; }
.lblsheet--cut .lbl { outline: 1px dashed #999; }

.printdoc__bars { width: 46mm; margin: 1.5mm 0 1.5mm auto; }
.printdoc__bars svg { display: block; width: 100%; height: 9mm; }

@media (max-width: 1100px) {
  .lbllayout { grid-template-columns: minmax(0, 1fr); }
  .lbllayout__out { position: static; }
  .lblbar { grid-template-columns: minmax(0, 1fr) 1fr; }
  .lblbar__format { grid-column: 1 / -1; }
}

/* ---- Work log, task picker, "what did you do?" ------------------------------ */
.taskhist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.taskhist__row { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.taskhist__row.is-running { border-left-color: var(--success, #0f9d6b); }
.taskhist__head { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-3); }
.taskhist__head b { color: var(--ink); font-size: var(--fs-md); }
.taskhist__note { margin-top: 4px; white-space: pre-wrap; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; }
.taskhist__note.is-blank { color: var(--ink-3); font-style: italic; }
.taskhist__more { font-size: var(--fs-sm); color: var(--ink-3); padding-left: var(--s-2); }
.taskhist--empty { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); border: 1px dashed var(--line); }

.pickhead { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pickhead .input { flex: 1; }
.picklist { max-height: min(58vh, 560px); overflow: auto; }
.pickrow { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-5); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.pickrow:hover, .pickrow:focus-visible { background: var(--accent-soft); outline: none; }
.pickrow__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pickrow__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pickrow__title { font-weight: 650; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pickrow__meta { font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickrow__last { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }
.pickrow__last b { font-weight: 600; }
.pickrow__side { flex: none; text-align: right; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.taskbrief { padding: var(--s-5); display: grid; gap: var(--s-2); max-height: min(60vh, 600px); overflow: auto; }
.taskbrief__title { font-size: var(--fs-xl, 20px); font-weight: 750; letter-spacing: -.01em; }
.taskbrief__line { color: var(--ink-2); } .taskbrief__line b { color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.taskbrief__sec { margin-top: var(--s-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.workdone__text { font-size: var(--fs-lg, 16px); line-height: 1.5; min-height: 130px; }
.workdone__done { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.workdone__done input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.workdone__earlier { margin-top: var(--s-4); } .workdone__earlier summary { cursor: pointer; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.t-danger { color: var(--danger, #dc2626) !important; }

.jobstory { margin: var(--s-4) 0; padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-sunken); max-height: 240px; overflow: auto; }
.jobstory__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); color: var(--ink-2); }
.twover { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-4) 0; }
.twover__col { display: grid; gap: var(--s-2); align-content: start; }
.twover__col .btn { justify-self: start; }
.segmented a { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--ink-3); font-weight: 600; font-size: var(--fs-sm); }
.segmented a.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.08)); }
.printdoc__copy { font-size: 8.5pt; letter-spacing: .08em; text-transform: uppercase; color: #555; }
@media (max-width: 760px) { .twover { grid-template-columns: 1fr; } }

/* ---- The shop terminal -------------------------------------------------------- */
.term { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto; color: #eef2fb;
  background: radial-gradient(900px 500px at 85% -10%, rgba(91, 61, 246, .30), transparent 60%), radial-gradient(800px 480px at 0% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 62%), #0b1020;
  font-size: 17px; -webkit-tap-highlight-color: transparent; user-select: none; }
.term__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 28px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.term__brand { display: flex; align-items: center; gap: 12px; color: #fff; } .term__brand img { height: 32px; width: auto; border-radius: 6px; }
.term__brand b { font-size: 18px; letter-spacing: -.01em; } .term__brand span { color: #8e9bbb; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-left: 6px; }
.term__topright { display: flex; align-items: center; gap: 14px; }
.term__lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .09); }
.term__lang button { all: unset; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #aab6d1; }
.term__lang button.is-on { background: #fff; color: #0b1020; }
.term__exit { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: #8e9bbb; font-size: 14px; padding: 8px 12px; border-radius: 10px; }
.term__exit:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.term__main { min-height: 0; overflow: auto; display: grid; }
.term__foot { padding: 10px 28px; font-size: 12px; color: #5f6b8a; text-align: right; }

.term__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); min-height: 100%; }
.term__who, .term__center { display: grid; justify-items: center; align-content: center; gap: 8px; padding: clamp(12px, 2.6vh, 28px) 28px; text-align: center; }
.term__bigclock { font-size: clamp(48px, 10vh, 120px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.term__date { color: #9aa7c7; font-size: 19px; margin-bottom: 18px; } .term__date::first-letter { text-transform: uppercase; }
.term__ask, .term__hello { font-size: clamp(28px, 4.4vh, 44px); margin: 6px 0 0; letter-spacing: -.025em; color: #fff; }
.term__or { margin: 0 0 10px; color: #9aa7c7; font-size: 18px; }
.term__input { width: min(420px, 80vw); text-align: center; font: 700 34px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .16); border-radius: 18px; padding: 14px 18px; outline: none; user-select: text; }
.term__input:focus { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); }
.term__hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.term__msg { min-height: 30px; font-weight: 600; font-size: 17px; padding: 4px 14px; border-radius: 10px; }
.term__msg[data-tone="danger"] { color: #ffb4b4; background: rgba(220, 38, 38, .16); }
.term__msg--blank { visibility: hidden; }
.term__pad { display: grid; grid-template-columns: repeat(3, 92px); gap: 12px; margin-top: 6px; }
.term__key { all: unset; cursor: pointer; height: clamp(50px, 8.4vh, 74px); border-radius: 18px; display: grid; place-items: center; font-size: 30px; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); transition: transform .06s ease, background .12s ease; }
.term__key:active { transform: scale(.95); background: rgba(255, 255, 255, .2); }
.term__key--soft { color: #aab6d1; } .term__key--go { background: var(--accent); border-color: transparent; font-size: 22px; font-weight: 750; }
.term__dots { display: flex; gap: 16px; margin: 6px 0 4px; } .term__dots i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.term__dots i.is-on { background: #fff; border-color: #fff; }
.term__link { all: unset; cursor: pointer; margin-top: 18px; color: #9aa7c7; font-size: 16px; padding: 10px 18px; border-radius: 12px; }
.term__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.term__board { border-left: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); padding: 24px; overflow: auto; }
.term__boardhead { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8e9bbb; margin-bottom: 14px; display: flex; justify-content: space-between; }
.term__boardhead b { color: #fff; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 1px 10px; letter-spacing: 0; }
.term__boardlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.term__boardlist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.term__boardwho { flex: 1; min-width: 0; display: grid; } .term__boardwho b { color: #fff; font-size: 15.5px; }
.term__boardwho span { color: #9aa7c7; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term__boardtime { font: 700 15px var(--font-mono); color: #9aa7c7; } .term__boardtime[data-state="job"] { color: #4ade80; } .term__boardtime[data-state="break"] { color: #fbbf24; }
.term__boardempty { color: #6f7c9c; padding: 20px 4px; }

.term__home { width: min(1080px, 100%); margin: 0 auto; padding: 32px 28px; display: grid; gap: 24px; align-content: start; }
.term__me { display: flex; align-items: center; gap: 20px; }
.term__mewho { flex: 1; min-width: 0; } .term__mewho h1 { margin: 0; font-size: clamp(30px, 4.6vh, 46px); letter-spacing: -.03em; color: #fff; }
.term__state { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; color: #c5cee6; font-size: 18px; }
.term__state i { width: 11px; height: 11px; border-radius: 50%; background: #64748b; }
.term__state[data-tone="idle"] i { background: #60a5fa; } .term__state[data-tone="job"] i { background: #4ade80; box-shadow: 0 0 0 5px rgba(74, 222, 128, .2); } .term__state[data-tone="break"] i { background: #fbbf24; }
.term__donebtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 14px; font-weight: 650; color: #dbe3f7; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .12); }
.term__donebtn:hover { background: rgba(255, 255, 255, .16); }
.term__now { padding: 20px 24px; border-radius: 20px; background: rgba(74, 222, 128, .10); border: 1px solid rgba(74, 222, 128, .28); }
.term__nowlabel { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #86efac; }
.term__nowtitle { font-size: 24px; font-weight: 750; color: #fff; letter-spacing: -.015em; margin: 4px 0; }
.term__nowmeta { color: #b7c3df; font-variant-numeric: tabular-nums; }
.term__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.term__tile { all: unset; cursor: pointer; box-sizing: border-box; min-height: 168px; padding: 24px; border-radius: 24px; display: grid; gap: 8px; align-content: center; justify-items: start; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: transform .08s ease, background .15s ease; }
.term__tile:hover { background: rgba(255, 255, 255, .12); } .term__tile:active { transform: scale(.98); }
.term__tile b { font-size: 24px; letter-spacing: -.015em; line-height: 1.15; } .term__tile span { color: rgba(255, 255, 255, .72); font-size: 15px; }
.term__tile[data-tone="go"] { background: linear-gradient(150deg, #16a34a, #15803d); border-color: transparent; }
.term__tile[data-tone="accent"] { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); border-color: transparent; }
.term__tile[data-tone="stop"] { background: linear-gradient(150deg, #dc2626, #b91c1c); border-color: transparent; }
.term__hint { display: flex; align-items: center; gap: 8px; color: #7f8cab; font-size: 15px; margin: 0; }
.term__worklist { display: grid; gap: 10px; }
.term__worklabel { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #93a3c7; margin-top: 4px; }
.term__work { all: unset; cursor: pointer; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.term__work:hover { background: rgba(255, 255, 255, .11); } .term__work:active { transform: scale(.995); }
.term__work[data-current="true"] { border-color: rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .09); }
.term__work[data-priority="critical"] { border-left: 5px solid #ef4444; } .term__work[data-priority="high"] { border-left: 5px solid #f59e0b; }
.term__workno { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.term__workbody { display: grid; gap: 2px; min-width: 0; } .term__workbody b { font-size: 19px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .term__workbody span { color: #b7c3df; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term__workside { display: grid; justify-items: end; gap: 4px; } .term__workside i { font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #dbe3f7; }
.term__workside i[data-tone="danger"] { background: rgba(239, 68, 68, .28); color: #fecaca; } .term__workside i[data-tone="warning"] { background: rgba(245, 158, 11, .28); color: #fde68a; } .term__workside i[data-tone="info"] { background: rgba(96, 165, 250, .22); color: #bfdbfe; }
.term__workside em { font-style: normal; font-size: 13px; color: #86efac; }
.term__bay { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; color: #fff; background: rgba(59, 130, 246, .35); padding: 5px 11px; border-radius: 10px; }
.term__bay--none { background: rgba(255, 255, 255, .08); color: #b7c3df; font-weight: 600; font-size: 13px; }
.term__tile[data-tone="warn"] { background: linear-gradient(150deg, #d97706, #b45309); border-color: transparent; }
@media (max-width: 720px) { .term__work { grid-template-columns: minmax(0, 1fr); gap: 6px; } .term__workside { justify-items: start; } }
.term__check { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #22c55e, #15803d); box-shadow: 0 20px 60px rgba(34, 197, 94, .35); margin-bottom: 14px; animation: termpop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes termpop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Dialogs opened from the terminal are for fingers too. */
body.is-terminal .modal { font-size: 17px; } body.is-terminal .modal__title { font-size: 24px; }
body.is-terminal .modal__foot .btn { min-height: 54px; padding-inline: 26px; font-size: 17px; }
body.is-terminal .pickrow { padding-block: 18px; } body.is-terminal .pickrow__title { font-size: 18px; }
body.is-terminal .workdone__text { font-size: 19px; min-height: 170px; }
@media (max-width: 900px) { .term__split { grid-template-columns: minmax(0, 1fr); } .term__board { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } }
@media (max-width: 560px) {
  .term__top { padding: 12px 16px; gap: 10px; } .term__brand span { display: none; } .term__exit span { display: none; }
  .term__who, .term__center { padding: 20px 16px; } .term__home { padding: 20px 16px; }
  .term__pad { grid-template-columns: repeat(3, minmax(0, 88px)); } .term__input { font-size: 26px; }
  .term__me { flex-wrap: wrap; } .term__tile { min-height: 120px; padding: 18px; }
}

@media screen and (max-width: 860px) {
  /* A letter-size document on a phone: keep it a document, let it slide sideways. */
  .invdocwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--s-4) * -1); padding: 0 var(--s-4) var(--s-4); }
  .invdocwrap .invdoc { min-width: 720px; }
}

/* ---- Billing: what the customer pays ------------------------------------------ */
.billlayout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.billlayout__main { display: grid; gap: var(--s-4); min-width: 0; }
.billlayout__side { position: sticky; top: var(--s-4); display: grid; gap: var(--s-3); }
.billtask { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); box-shadow: var(--shadow-xs, none); }
.billtask--who { display: grid; gap: var(--s-3); }
.billtask__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.billtask__no { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 750; background: var(--accent-soft); color: var(--accent); }
.billtask__title { flex: 1; min-width: 0; font-size: var(--fs-lg, 16px); font-weight: 700; letter-spacing: -.01em; }
.billtask__title span { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.billtask__sum { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.billgrid { display: grid; gap: var(--s-3); padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px dashed var(--line); }
.billgrid:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.billgrid__label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.billfacts { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.billfact b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .billfact span { font-size: var(--fs-sm); color: var(--ink-3); }
.billedit { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--accent-soft); }
.billfield { display: grid; gap: 4px; } .billfield > span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); } .billfield em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.billfield .input { width: 120px; height: 42px; font-size: 17px; font-weight: 650; } .billfield--wide .select { width: 100%; height: 42px; }
.billx { padding-bottom: 10px; color: var(--ink-3); font-size: 18px; }
.billamount { margin-left: auto; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; padding-bottom: 4px; }
.billquick { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.chipbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); }
.chipbtn:hover { border-color: var(--accent); color: var(--accent); }
.billtechs summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-3); }
.billtech { display: flex; gap: var(--s-3); padding: var(--s-2) 0; } .billtech__body { font-size: var(--fs-sm); color: var(--ink-2); }
.billtech__note { margin-top: 3px; padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink-2); white-space: pre-wrap; }
.billparts { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.billparts th { text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px 6px; }
.billparts td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: middle; } .billparts .input { width: 104px; }
.billextras { display: flex; gap: var(--s-5); flex-wrap: wrap; } .billdisc { display: flex; gap: 6px; } .billdisc .select { width: 64px; height: 42px; }
.billside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-5); display: grid; gap: var(--s-4); box-shadow: 0 10px 40px rgba(15, 23, 42, .07); }
.billside__copies { display: grid; gap: var(--s-2); } .billside__copies .btn { justify-content: center; }
.billtotal { display: grid; gap: 7px; }
.billtotal__row { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.billtotal__row--sub { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 650; }
.billtotal__row--minus b { color: var(--danger, #dc2626); }
.billtotal__grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--ink); }
.billtotal__grand span { font-weight: 700; } .billtotal__grand b { font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.billhours { display: grid; grid-template-columns: auto auto auto 1fr; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--bg-sunken); }
.billhours b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .billhours span { font-size: var(--fs-xs); color: var(--ink-3); }
.billhours__arrow { color: var(--ink-3); } .billhours__eff { text-align: right; }
.billhours__eff[data-tone="good"] b { color: #15803d; } .billhours__eff[data-tone="fair"] b { color: #b45309; } .billhours__eff[data-tone="poor"] b { color: #b91c1c; }
.billnote { margin: 0; display: flex; gap: 7px; font-size: var(--fs-sm); color: #92400e; background: #fef3c7; padding: 8px 12px; border-radius: var(--r-md); }
.billmargin { display: grid; gap: 7px; padding: var(--s-4); border-radius: var(--r-lg); background: #0f1420; color: #dbe3f7; }
.billmargin .billtotal__row { color: #b7c3df; } .billmargin .billtotal__row--sub { color: #fff; border-color: rgba(255,255,255,.15); }
.billmargin__head { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8e9bbb; }
.billmargin__big { font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.05; } .billmargin__big span { font-size: var(--fs-sm); font-weight: 500; color: #8e9bbb; margin-left: 8px; letter-spacing: 0; }
.billmargin__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 6px; } .billmargin__bar i { display: block; height: 100%; border-radius: inherit; background: #64748b; transition: width .25s ease; }
.billmargin[data-tone="good"] .billmargin__bar i { background: #22c55e; } .billmargin[data-tone="fair"] .billmargin__bar i { background: #f59e0b; } .billmargin[data-tone="poor"] .billmargin__bar i { background: #ef4444; }
@media (max-width: 1100px) { .billlayout { grid-template-columns: minmax(0, 1fr); } .billlayout__side { position: static; } }
.billtask, .billgrid, .billlayout__side { min-width: 0; }
@media (max-width: 720px) {
  .billtask { padding: var(--s-4); }
  .billparts { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .billfield--wide { width: 100%; }
  .billedit { gap: var(--s-2); } .billfield .input { width: 104px; }
  .billamount { margin-left: 0; width: 100%; text-align: right; }
  .billquick .chipbtn { white-space: normal; text-align: left; }
  .billhours { grid-template-columns: 1fr auto 1fr; } .billhours__eff { grid-column: 1 / -1; text-align: left; }
}

/* ---- The invoice document ------------------------------------------------------- */
.invbar { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.segmented a { display: inline-flex; align-items: center; gap: 6px; }
.invdoc { position: relative; max-width: 8.5in; margin: 0 auto; background: #fff; color: #111827; border-radius: 6px; padding: .6in .65in; box-shadow: 0 20px 70px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06); font-size: 10.5pt; line-height: 1.45; overflow: hidden; }
.invdoc__ribbon { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px; font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: repeating-linear-gradient(135deg, #b91c1c 0 14px, #991b1b 14px 28px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invdoc__stamp { position: absolute; top: 1.55in; right: .7in; transform: rotate(-12deg); padding: 4px 18px; border: 3px solid #16a34a; color: #16a34a; border-radius: 8px; font-size: 22pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.invdoc__stamp--draft { border-color: #9ca3af; color: #9ca3af; }
.invdoc__head { display: flex; justify-content: space-between; gap: .4in; padding-bottom: .22in; border-bottom: 3px solid var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invdoc--internal .invdoc__head { margin-top: .12in; }
.invdoc__co { display: flex; gap: .16in; align-items: flex-start; } .invdoc__co img { max-height: .7in; max-width: 1.6in; object-fit: contain; }
.invdoc__mark { width: .6in; height: .6in; border-radius: .14in; display: grid; place-items: center; color: #fff; background: var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invdoc__coname { font-size: 15pt; font-weight: 800; letter-spacing: -.015em; } .invdoc__coaddr { font-size: 9pt; color: #4b5563; }
.invdoc__id { text-align: right; } .invdoc__word { font-size: 9pt; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.invdoc__no { font-size: 19pt; font-weight: 800; letter-spacing: -.02em; } .invdoc__bars { width: 1.7in; margin-left: auto; } .invdoc__bars svg { display: block; width: 100%; height: .3in; }
.invdoc__meta { display: flex; justify-content: space-between; gap: .4in; padding: .22in 0; }
.invdoc__billto span, .invdoc__notes span { display: block; font-size: 7.5pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: 3px; }
.invdoc__billto b { font-size: 12.5pt; } .invdoc__billto div { color: #374151; font-size: 9.5pt; }
.invdoc__facts { margin: 0; display: grid; gap: 3px; min-width: 2.2in; } .invdoc__facts div { display: flex; justify-content: space-between; gap: .3in; }
.invdoc__facts dt { color: #6b7280; font-size: 9pt; } .invdoc__facts dd { margin: 0; font-weight: 650; }
.invwo { margin-top: .12in; break-inside: auto; }
.invwo__head { display: flex; justify-content: space-between; gap: .2in; flex-wrap: wrap; padding: 7px 12px; border-radius: 6px; background: #f3f4f6; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invwo__unit { color: #4b5563; }
.invtask { padding: .14in 0 .04in; break-inside: avoid; }
.invtask__title { display: flex; align-items: center; gap: 9px; font-size: 11.5pt; font-weight: 750; }
.invtask__title span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5pt; color: #fff; background: #111827; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invtask__text { margin: 4px 0 0 29px; color: #374151; white-space: pre-wrap; } .invtask__text b { font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-right: 6px; }
.invtable { width: calc(100% - 29px); margin: 8px 0 0 29px; border-collapse: collapse; font-size: 9.5pt; }
.invtable th { text-align: left; font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; padding: 4px 6px; border-bottom: 1px solid #d1d5db; }
.invtable td { padding: 5px 6px; border-bottom: 1px solid #eef0f3; } .invtable .td-num, .invtable .t-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invline--minus td { color: #b91c1c; }
.invint { background: #fef2f2; color: #991b1b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invint-block { margin: 8px 0 0 29px; padding: 8px 12px; border-radius: 6px; border: 1px dashed #fca5a5; background: #fef2f2; color: #7f1d1d; font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invint-block b, .invint-block > span { font-size: 7.5pt; letter-spacing: .1em; text-transform: uppercase; color: #991b1b; margin-right: 6px; font-weight: 700; }
.invtechs { display: grid; gap: 4px; } .invtech span { font-weight: 650; text-transform: none; letter-spacing: 0; font-size: 9pt; color: #7f1d1d; } .invtech em { display: block; font-style: normal; padding-left: 10px; white-space: pre-wrap; }
.invdoc__bottom { display: grid; grid-template-columns: 1fr 2.9in; gap: .4in; margin-top: .3in; padding-top: .2in; border-top: 1px solid #d1d5db; break-inside: avoid; }
.invdoc__notes p { margin: 0 0 10px; white-space: pre-wrap; color: #374151; } .invdoc__notes .invint-block { margin-left: 0; }
.invscore__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } .invscore__grid b { display: block; font-size: 11pt; letter-spacing: 0; text-transform: none; color: #7f1d1d; } .invscore__grid em { font-style: normal; font-size: 8pt; }
.invdoc__totals { display: grid; gap: 5px; align-content: start; } .invdoc__totals div { display: flex; justify-content: space-between; gap: .2in; font-variant-numeric: tabular-nums; }
.invdoc__totals span { color: #4b5563; } .invdoc__totals em { font-style: normal; font-size: 7.5pt; color: #9ca3af; margin-left: 4px; }
.invdoc__total { margin-top: 4px; padding: 9px 12px; border-radius: 8px; background: #111827; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.invdoc__total span { color: #d1d5db !important; font-weight: 600; } .invdoc__total b { font-size: 15pt; letter-spacing: -.01em; }
.invdoc__due b { font-size: 12pt; }
.invdoc__foot { display: flex; justify-content: space-between; gap: .3in; margin-top: .35in; padding-top: .12in; border-top: 1px solid #e5e7eb; font-size: 8pt; color: #9ca3af; }

/* ---- Shop reports ---- */
.reportpick { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.reportpick .select { min-width: 240px; }
.marginsplit { display: grid; gap: var(--s-4); }
.marginsplit > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.marginsplit > div:last-child { border-bottom: 0; padding-bottom: 0; }
.marginsplit span { font-weight: 650; } .marginsplit b { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.marginsplit em { grid-column: 1 / -1; font-style: normal; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---- Small screens: let headers, footers and banners wrap -------------------- */
@media (max-width: 640px) {
  .card__head, .card__foot { flex-wrap: wrap; }
  .card__head > :first-child { min-width: 0; flex: 1 1 60%; }
  .card__actions { margin-left: 0; flex-wrap: wrap; }
  .card__foot .btn { white-space: normal; text-align: left; height: auto; min-height: 34px; padding-block: 6px; }
  .destbar__inner { flex-wrap: wrap; } .destbar__text { flex: 1 1 200px; min-width: 0; } .destbar__inner code { word-break: break-all; }
  .kv a, .deflist a, .dl a, td a[href^="mailto:"], dd a { overflow-wrap: anywhere; word-break: break-word; }
  .formbar, .form__actions, .savebar { flex-wrap: wrap; }
}
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---- The shop wallboard (a television on the wall) ----------------------------- */
.wall { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #eef2fb; font-size: clamp(14px, 1.05vw, 20px);
  background: radial-gradient(1100px 600px at 100% -10%, rgba(91, 61, 246, .26), transparent 60%), radial-gradient(900px 520px at -5% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%), #0a0f1d; }
.wall__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 1.1em 1.8em; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wall__brand b { display: block; font-size: 1.35em; letter-spacing: -.015em; color: #fff; } .wall__brand span { font-size: .8em; letter-spacing: .14em; text-transform: uppercase; color: #8e9bbb; }
.wall__clock { text-align: center; } .wall__clock b { display: block; font-size: 2.5em; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.wall__clock span { font-size: .9em; color: #9aa7c7; } .wall__clock span::first-letter { text-transform: uppercase; }
.wall__actions { display: flex; justify-content: flex-end; gap: 8px; opacity: .55; transition: opacity .2s ease; } .wall__top:hover .wall__actions { opacity: 1; }
.wall__btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: #aab6d1; padding: 8px 12px; border-radius: 10px; } .wall__btn:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.wall__main { min-height: 0; overflow: auto; padding: 1.4em 1.8em; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.3em; }
.wall__stats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .9em; }
.wall__stat { padding: 1em 1.1em; border-radius: 1.1em; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .09); min-width: 0; }
.wall__stat b { display: block; font-size: 2.3em; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.wall__stat span { display: block; margin-top: .3em; font-size: .82em; color: #9aa7c7; line-height: 1.25; }
.wall__stat[data-tone="good"] b { color: #4ade80; } .wall__stat[data-tone="warn"] b { color: #fbbf24; } .wall__stat[data-tone="bad"] b { color: #f87171; }
.wall__cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.3em; min-height: 0; }
.wall__side { display: grid; gap: 1.3em; align-content: start; min-width: 0; }
.wall__panel { border-radius: 1.3em; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); padding: 1.2em 1.3em; min-width: 0; }
.wall__panel h2 { display: flex; align-items: center; gap: .55em; margin: 0 0 .9em; font-size: .82em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8e9bbb; }
.wall__panel h2 b { margin-left: auto; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .05em .7em; letter-spacing: 0; }
.wall__people, .wall__wos, .wall__pm { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.wall__people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24em), 1fr)); }
.wall__next { display: block; margin-top: .25em; font-size: .78em; color: #b7c3df; } .wall__next em { font-style: normal; font-family: var(--font-mono); color: #dbe3f7; }
.wall__bays { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .6em; }
.wall__main:has(> .wall__bays) { grid-template-rows: auto auto minmax(0, 1fr); }
.wall__bay { padding: .6em .9em; border-radius: .9em; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: grid; gap: .1em; }
.wall__bay[data-free="true"] { border-color: rgba(74, 222, 128, .35); } .wall__bay[data-free="true"] b { color: #86efac; }
.wall__bayname { font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: #93a3c7; font-weight: 700; } .wall__bay b { font-family: var(--font-mono); font-size: 1.05em; color: #fff; } .wall__bay span { font-size: .8em; color: #b7c3df; }
.wall__panel[data-tone="accent"] { border-color: rgba(129, 140, 248, .45); background: rgba(99, 102, 241, .1); }
.wall__person { display: flex; align-items: center; gap: .9em; padding: .8em 1em; border-radius: 1em; background: rgba(255, 255, 255, .05); border-left: 4px solid #64748b; min-width: 0; }
.wall__person[data-state="job"] { border-left-color: #4ade80; background: rgba(74, 222, 128, .07); } .wall__person[data-state="break"] { border-left-color: #fbbf24; }
.wall__person[data-state="indirect"] { border-left-color: #60a5fa; } .wall__person[data-state="idle"] { border-left-color: #f87171; }
.wall__who { flex: 1; min-width: 0; display: grid; } .wall__who b { font-size: 1.12em; color: #fff; letter-spacing: -.01em; }
.wall__job { color: #c5cee6; font-size: .92em; } .wall__job em { font-style: normal; font-family: var(--font-mono); font-weight: 700; color: #fff; }
.wall__task { color: #9aa7c7; font-size: .88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall__timer { text-align: right; flex: none; } .wall__timer b { display: block; font: 800 1.45em var(--font-mono); letter-spacing: -.02em; color: #fff; }
.wall__timer span { font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: #8e9bbb; }
.wall__person[data-state="job"] .wall__timer b { color: #86efac; } .wall__person[data-state="idle"] .wall__timer b { color: #fca5a5; }
.wall__wo, .wall__pm li { display: flex; align-items: center; gap: .8em; padding: .6em .85em; border-radius: .85em; background: rgba(255, 255, 255, .045); min-width: 0; }
.wall__wo[data-priority="critical"] { box-shadow: inset 3px 0 0 #f87171; } .wall__wo[data-priority="high"] { box-shadow: inset 3px 0 0 #fbbf24; }
.wall__wonum { font: 700 .92em var(--font-mono); color: #fff; flex: none; } .wall__wounit { flex: none; font-weight: 700; color: #c7d2fe; min-width: 3.6em; }
.wall__wotitle { flex: 1; min-width: 0; color: #c5cee6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wall__wotitle i { font-style: normal; color: #7f8cab; margin-left: .6em; font-size: .88em; }
.wall__wopeople { display: inline-flex; gap: 3px; flex: none; }
.wall__pill { flex: none; font-size: .74em; font-weight: 700; padding: .22em .7em; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #dbe3f7; white-space: nowrap; }
.wall__pill[data-tone="danger"] { background: rgba(248, 113, 113, .18); color: #fca5a5; } .wall__pill[data-tone="warning"] { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.wall__pill[data-tone="accent"] { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; } .wall__pill[data-tone="info"] { background: rgba(96, 165, 250, .18); color: #bfdbfe; }
.wall__empty, .wall__more { color: #7f8cab; margin: .4em 0 0; } .wall__more { font-size: .88em; text-align: right; }
.wall__foot { display: flex; justify-content: space-between; padding: .7em 1.8em; font-size: 12px; color: #5f6b8a; }
.wall__live { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #86efac; }
.wall__live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: wallpulse 2s ease-in-out infinite; }
@keyframes wallpulse { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); opacity: .5; } 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } }
@media (max-width: 1100px) { .wall__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wall__cols { grid-template-columns: minmax(0, 1fr); } .wall__main { grid-template-rows: auto auto; } }
@media (max-width: 620px) { .wall__top { grid-template-columns: 1fr auto; padding: 12px 16px; } .wall__actions span { display: none; } .wall__clock { grid-row: 2; grid-column: 1 / -1; } .wall__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall__main { padding: 14px 16px; font-size: 15px; } }

@media (max-height: 780px) { .term__date { margin-bottom: 6px; } .term__pad { gap: 8px; } .term__or { margin-bottom: 4px; } .term__top { padding-block: 10px; } .term__foot { padding-block: 4px; } .term__msg { min-height: 22px; } }

/* ---- The repair order on screen: the same sheet of paper it will print as ---- */
@media screen {
  .printdoc { background: #fff; color: #111827; max-width: 8.5in; margin: var(--s-4) auto; padding: .55in .6in; border-radius: 6px; box-shadow: 0 20px 70px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06); overflow-x: auto; }
  .printdoc__head { display: flex; align-items: flex-start; gap: 10mm; border-bottom: 2px solid #000; padding-bottom: 4mm; margin-bottom: 6mm; }
  .printdoc__logo { width: 22mm; height: 22mm; object-fit: contain; }
  .printdoc__co { flex: 1 1 auto; }
  .printdoc__coname { font-size: 15pt; font-weight: 700; letter-spacing: -.01em; }
  .printdoc__meta { text-align: right; font-size: 9.5pt; }
  .printdoc__doctitle { font-size: 13pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .printdoc__no { font-size: 11pt; font-weight: 700; }
  .printdoc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm 6mm; margin-bottom: 6mm; }
  .printdoc__f { font-size: 9pt; }
  .printdoc__f b { display: block; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: #444; font-weight: 700; }
  .printdoc__sec { font-size: 10pt; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #000; padding-bottom: 1.5mm; margin: 6mm 0 3mm; }
  .printdoc__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 12mm; }
  .printdoc__signline { border-top: 1px solid #000; padding-top: 1.5mm; font-size: 8.5pt; }
  .printdoc__foot { margin-top: 8mm; border-top: 1px solid #ccc; padding-top: 2mm; font-size: 8pt; color: #555; display: flex; justify-content: space-between; }
  .printdoc__totals { margin-left: auto; width: 70mm; }
  .printdoc__totals tr td { padding: 1.5mm 2mm; }
  .printdoc__totals tr:last-child td { border-top: 1.5px solid #000; font-weight: 700; font-size: 11pt; }
  .printdoc table { width: 100%; border-collapse: collapse; font-size: 10pt; } .printdoc th { text-align: left; background: #f3f4f6; color: #111827; } .printdoc td, .printdoc th { border-bottom: 1px solid #e5e7eb; padding: 5px 7px; }
}
@media screen and (max-width: 860px) { .printdoc { padding: 18px; } .printdoc__grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ==========================================================================
   Photos (thumbnails + lightbox) and the signature pad
   ========================================================================== */
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--photo-size, 96px), 1fr)); gap: var(--s-2); }
.photogrid__item { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2, #eee); aspect-ratio: 4 / 3; }
.photogrid__item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.photogrid__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photogrid__x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 1300; background: rgba(5, 8, 16, .92); display: grid; place-items: center; }
.lightbox__img { max-width: 94vw; max-height: 86vh; border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
.lightbox__x, .lightbox__nav { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.lightbox__x { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; }
.sigpad { position: relative; border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: 0 0 6px; touch-action: none; }
.sigpad.is-error { border-color: var(--danger, #dc2626); }
.sigpad__canvas { display: block; width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; cursor: crosshair; }
.sigpad__line { position: absolute; left: 16px; right: 16px; top: calc(var(--sig-h, 180px) - 42px); border-bottom: 1px solid var(--border); pointer-events: none; color: var(--muted); font-size: 12px; }
.sigpad__line span { position: absolute; left: 0; bottom: 2px; }
.sigpad__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 0; }
.sigimg { max-height: 80px; max-width: 260px; display: block; }

/* The customer's version of a task, on the work order */
.cvpanel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--border); }
.cvpanel__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }