/* STANAGELOG signed-in shell on log.stanage.org, included by templates/base.html.
Flexfolio tokens (stanage.org v16, kit cache v=19): #faf9f7 canvas, sage #1f4d32. Type is self-hosted Libre Caslon.
Layout chrome and visual-viewport height retained; iOS blue HIG accents removed.
The inventory Filter control (desktop popover and phone sheet) is the kit-filter block at the end.
Section headings below name each block. */
/* Self-hosted on this origin. swap paints Georgia first, then the real face. */
@font-face {
font-family: "Libre Caslon Text";
src: url("/static/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Libre Caslon Text";
src: url("/static/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Libre Caslon Text";
src: url("/static/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Libre Caslon Display";
src: url("/static/fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fragment Mono";
src: url("/static/fonts/fragment-mono-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fragment Mono";
src: url("/static/fonts/fragment-mono-latin-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
:root, [data-theme="light"] {
color-scheme: light;
--bg: #faf9f7;
--bg-elevated: #ffffff;
--bg-panel: #ffffff;
--bg-hover: #f3f1ec;
--fg: #0a0a0a;
--fg-muted: #555550;
--fg-subtle: #555550;
--fg-faint: #8a8a85;
--border: #d8d4cc;
--border-strong: #d8d4cc;
--border-bright: #c8c4bc;
--separator: #eeeae3;
--accent: #1f4d32;
--accent-muted: #e8f1eb;
--sage: #1f4d32;
--sage-soft: #2f6b46;
--success: #2f6b46;
--success-muted: #2f6b4626;
--warn: #f59e0b;
--warn-muted: #f59e0b26;
--danger: #ef4444;
--danger-muted: #ef444426;
--topbar-h: 64px;
--sidebar-w: 264px;
--hintbar-h: 28px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--app-height: 100dvh;
--ios-bar: rgba(250, 249, 247, 0.9);
--ios-fill: #ffffff;
--ios-grouped: #faf9f7;
--ios-sep: rgba(17, 17, 16, 0.08);
--ios-search: rgba(17, 17, 16, 0.06);
--ios-hairline: rgba(17, 17, 16, 0.14);
--ios-sheet-bg: rgba(255, 255, 255, 0.94);
--theme-color: #faf9f7;
}
[data-theme="dark"] {
color-scheme: dark;
--bg: #0a0a0a;
--bg-elevated: #141414;
--bg-panel: #141414;
--bg-hover: #1c1c1c;
--fg: #ffffff;
--fg-muted: #aaaaaa;
--fg-subtle: #aaaaaa;
--fg-faint: #8a8a85;
--border: #2a2a2a;
--border-strong: #2a2a2a;
--border-bright: #3a3a3a;
--separator: #2a2a2a;
--accent: #2f6b46;
--accent-muted: #2f6b4626;
--sage: #1f4d32;
--sage-soft: #2f6b46;
--success: #2f6b46;
--success-muted: #2f6b4626;
--warn: #f59e0b;
--warn-muted: #f59e0b26;
--danger: #ef4444;
--danger-muted: #ef444426;
--ios-bar: rgba(10, 10, 10, 0.94);
--ios-fill: #141414;
--ios-grouped: #0a0a0a;
--ios-sep: #2a2a2a;
--ios-search: #141414;
--ios-hairline: #2a2a2a;
--ios-sheet-bg: #141414;
--theme-color: #0a0a0a;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0a0a0a;
--bg-elevated: #141414;
--bg-panel: #141414;
--bg-hover: #1c1c1c;
--fg: #ffffff;
--fg-muted: #aaaaaa;
--fg-subtle: #aaaaaa;
--fg-faint: #8a8a85;
--border: #2a2a2a;
--border-strong: #2a2a2a;
--border-bright: #3a3a3a;
--separator: #2a2a2a;
--accent: #2f6b46;
--accent-muted: #2f6b4626;
--sage: #1f4d32;
--sage-soft: #2f6b46;
--success: #2f6b46;
--success-muted: #2f6b4626;
--warn: #f59e0b;
--warn-muted: #f59e0b26;
--danger: #ef4444;
--danger-muted: #ef444426;
--ios-bar: rgba(10, 10, 10, 0.94);
--ios-fill: #141414;
--ios-grouped: #0a0a0a;
--ios-sep: #2a2a2a;
--ios-search: #141414;
--ios-hairline: #2a2a2a;
--ios-sheet-bg: #141414;
--theme-color: #0a0a0a;
}
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
font-family: "Fragment Mono", ui-monospace, monospace;
background: var(--bg);
color: var(--fg);
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .bill-name, .bill-card-name, .ios-large-title, .ios-nav-title {
font-family: "Fragment Mono", ui-monospace, monospace;
}
.caslon-display {
font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
}
/* Brand names. GO and RACK use the italic file when they sit in em. */
.wordmark,
.site-wordmark {
font-family: "Fragment Mono", ui-monospace, monospace;
font-style: normal;
font-weight: 400;
letter-spacing: -0.02em;
}
.wordmark em,
.site-wordmark em { font-style: italic; font-weight: 400; color: #1f4d32; }
[data-theme="dark"] .wordmark em,
[data-theme="dark"] .site-wordmark em { color: #5fa77a; }
.wordmark strong,
.site-wordmark strong { font-weight: 400; font-style: normal; }
.site-wordmark.stanagerack strong { font-weight: 400; font-style: normal; }
.site-wordmark.stanagerack em { font-style: italic; font-weight: 400; }
/* ── Utilities ── */
.cap { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
/* Digits in counts, serials, and table cells share one width. The face stays Libre Caslon. */
.mono,
.sstat-value,
.serial,
.item-card-serial,
.item-card-dates,
.due-calc,
.dt-td,
table {
font-variant-numeric: tabular-nums;
}
.fg-muted { color: var(--fg-muted); }
.fg-subtle { color: var(--fg-subtle); }
.fg-faint { color: var(--fg-faint); }
/* Large titles are phone-only */
.ios-large-title, .ios-large-sub { display: none; }
/* ── Shell ── */
.app-shell { display: flex; flex-direction: column; height: var(--app-height, 100dvh); overflow: hidden; background: var(--bg); }
/* ── Top bar ── */
.topbar {
height: calc(var(--topbar-h) + var(--safe-top)); flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: var(--safe-top) max(1.15rem, var(--safe-right)) 0 max(1.25rem, var(--safe-left));
border-bottom: 1px solid var(--border);
background: var(--bg-elevated);
min-width: 0;
}
.topbar-brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.brand-link {
flex-shrink: 0;
color: var(--fg);
text-decoration: none;
font-size: 1.15rem;
line-height: 1;
}
.breadcrumbs {
display: flex; align-items: center; gap: 0.35rem;
min-width: 0;
padding-left: 0.85rem;
border-left: 1px solid var(--border-strong);
font-size: 0.92rem; font-weight: 500;
color: var(--fg-subtle);
white-space: nowrap;
}
.breadcrumbs .crumb-active {
color: var(--fg); font-weight: 600;
overflow: hidden; text-overflow: ellipsis;
}
.breadcrumbs .crumb-sep { color: var(--fg-faint); font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; min-width: 0; }
.account-cluster {
display: inline-flex; align-items: center; gap: 0.45rem;
min-width: 0; max-width: 16rem; height: 36px;
padding: 0 0.28rem 0 0.8rem;
border: 1px solid var(--border); border-radius: 4px;
background: var(--bg);
}
.account-name {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em;
color: var(--fg); line-height: 1;
text-transform: capitalize;
}
.signout-form { margin: 0; flex-shrink: 0; }
.signout-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 36px; padding: 0 0.95rem;
border-radius: 4px; border: 1.5px solid var(--border-strong);
background: transparent; color: var(--fg);
font-size: 0.88rem; font-weight: 600;
letter-spacing: -0.01em; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.brand-link:focus-visible,
.signout-btn:focus-visible,
.topbar .theme-toggle:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (hover: hover) {
.brand-link:hover { color: var(--accent); }
.signout-btn:hover { border-color: var(--fg); background: var(--bg-hover); }
}
.live-clock {
display: inline-flex; align-items: center; height: 36px;
padding: 0 0.75rem; border-radius: 4px;
border: 1px solid var(--border); background: transparent;
font-size: 0.72rem; color: var(--fg-subtle);
letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.topbar .theme-toggle {
width: 36px; height: 36px; min-width: 36px; min-height: 36px;
border-radius: 4px;
}
.topbar .theme-toggle svg { width: 16px; height: 16px; }
/* ── Body split ── */
.app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
/* ── Sidebar ── */
.sidebar {
width: var(--sidebar-w); flex-shrink: 0;
border-right: 1px solid var(--border); background: var(--bg-elevated);
display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.sidebar-brand {
padding: 0.75rem; border-bottom: 1px solid var(--border);
}
.sidebar-ws { color: var(--fg-faint); margin-bottom: 0.2rem; }
.sidebar-ws-name { font-size: 0.875rem; font-weight: 500; color: var(--fg); line-height: 1.3; }
.sidebar-ws-sub { color: var(--fg-subtle); margin-top: 0.1rem; }
.sidebar-nav { padding: 0.4rem; }
.nav-item {
display: flex; align-items: center; gap: 0.5rem;
width: 100%; padding: 0.45rem 0.6rem;
font: inherit; font-size: 0.875rem; color: var(--fg-muted);
cursor: pointer; border: 1px solid transparent;
background: transparent; text-align: left;
transition: all 0.08s; white-space: nowrap;
}
.nav-item:hover { border-color: var(--border); background: var(--bg-hover); color: var(--fg); }
.nav-item.active {
border-color: rgba(31,77,50,0.35);
background: var(--accent-muted); color: var(--fg);
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg-subtle); }
.sidebar-stats-wrap { border-top: 1px solid var(--border); margin-top: auto; }
.sidebar-section-label { padding: 0.6rem 0.75rem 0.25rem; color: var(--fg-faint); display: block; }
.sidebar-stat {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.3rem 0.75rem; font-size: 0.78rem;
}
.sstat-label { color: var(--fg-subtle); font-size: 0.7rem; }
.sstat-value { color: var(--fg-muted); font-weight: 500; }
.sidebar-stat.attn .sstat-value { color: var(--danger); }
/* ── Content column ── */
.content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-content {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 0.75rem;
padding-bottom: calc(var(--hintbar-h) + 0.75rem);
}
.loading-splash { color: var(--fg-subtle); padding: 2rem; font-size: 0.8rem; }
/* ── Hintbar ── */
.hintbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
height: var(--hintbar-h);
display: flex; align-items: center; gap: 1rem; padding: 0 0.75rem;
background: var(--bg-elevated); border-top: 1px solid var(--border);
color: var(--fg-faint); font-size: 0.65rem;
white-space: nowrap; overflow: hidden;
}
.hintbar .hint b { color: var(--fg-subtle); font-weight: 500; }
.hintbar .hint-status { margin-left: auto; color: var(--success); font-weight: 500; }
/* ── Toast ── */
.toast {
position: fixed; bottom: calc(var(--hintbar-h) + 8px); right: 12px; z-index: 20;
padding: 0.5rem 1rem; font-size: 0.78rem; font-weight: 500;
background: var(--bg-panel); color: var(--fg);
border: 1px solid var(--border-bright); max-width: 360px;
}
.toast-ok { border-color: rgba(61,204,145,0.5); color: var(--success); }
.toast-err { border-color: rgba(226,74,53,0.5); color: var(--danger); }
/* ── Panel ── */
.panel {
background: var(--bg-panel); border: 1px solid var(--border);
display: flex; flex-direction: column; overflow: hidden;
border-radius: 6px;
}
.panel + .panel { margin-top: 0.5rem; }
.panel-header {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--border);
background: var(--bg-elevated); flex-shrink: 0;
border-radius: 6px 6px 0 0;
}
.panel-title { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.panel-label { color: var(--fg-muted); }
.panel-sub { color: var(--fg-faint); font-size: 0.65rem; }
.panel-controls { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.panel-body { padding: 0.75rem; }
.panel-body.flush { padding: 0; }
/* ── Two-pane ── */
.split { display: grid; gap: 0.5rem; align-items: start; }
.split.list { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
.split.detail { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
/* ── Filter row ── */
.filterrow { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; }
.search-field {
display: inline-flex; align-items: center; gap: 0.4rem;
border: 1px solid var(--border-strong); background: var(--bg-panel);
padding: 0.3rem 0.6rem; flex: 1; min-width: 13rem; max-width: 24rem;
transition: border-color 0.08s; border-radius: 5px;
}
.search-field:focus-within { border-color: var(--accent); }
.s-icon { width: 12px; height: 12px; color: var(--fg-faint); flex-shrink: 0; }
.search-field input {
font: inherit; font-size: 0.8rem;
background: transparent; border: none; outline: none; color: var(--fg); width: 100%;
}
.search-field input::placeholder { color: var(--fg-faint); }
/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fchip {
font: inherit; font-size: 0.65rem; font-weight: 500;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 0.2rem 0.5rem;
border: 1px solid var(--border-strong); background: transparent;
color: var(--fg-subtle); cursor: pointer;
display: inline-flex; align-items: center; gap: 0.35rem; transition: all 0.08s;
border-radius: 4px;
}
.fchip::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--fg-faint); }
.fchip:hover { border-color: var(--border-bright); color: var(--fg-muted); }
.fchip.on { background: var(--bg-hover); border-color: var(--border-bright); color: var(--fg); }
/* Color-coded active states */
.fchip.on[data-status="OVERDUE"],
.fchip.on[data-status="EXPIRED"] { border-color:rgba(226,74,53,.4); background:var(--danger-muted); color:var(--danger); }
.fchip.on[data-status="DUE SOON"],
.fchip.on[data-status="NEVER INSPECTED"] { border-color:rgba(209,152,11,.4); background:var(--warn-muted); color:var(--warn); }
.fchip.on[data-status="OK"] { border-color:rgba(61,204,145,.4); background:var(--success-muted);color:var(--success); }
/* Dot colors */
.fchip[data-status="OVERDUE"]::before,
.fchip[data-status="EXPIRED"]::before { background:var(--danger); }
.fchip[data-status="DUE SOON"]::before,
.fchip[data-status="NEVER INSPECTED"]::before { background:var(--warn); }
.fchip[data-status="OK"]::before { background:var(--success); }
.fchip[data-status="RETIRED"]::before { background:var(--fg-subtle); }
.fchip .cn { opacity:0.55; margin-left:0.1rem; }
/* ── Data table ── */
.dt-wrap { width:100%; }
.dt-container { overflow-x:auto; }
.dt-table { width:100%; border-collapse:collapse; }
.dt-th {
text-align:left; padding:0.35rem 0.75rem;
background:var(--bg-elevated); border-bottom:1px solid var(--border);
color:var(--fg-subtle); white-space:nowrap;
}
.dt-td {
padding:0.45rem 0.75rem; border-bottom:1px solid var(--border);
color:var(--fg-muted); font-size:0.8rem;
}
.dt-td.wide { max-width:10rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-td.muted { color:var(--fg-subtle); }
.dt-row { cursor:pointer; transition:background 0.06s; }
@media (hover: hover) { .dt-row:hover { background:var(--bg-hover); } }
.dt-row.sel { background:var(--accent-muted); box-shadow:inset 2px 0 0 var(--accent); }
.dt-row.sel .dt-td { color:var(--fg); }
.dt-empty { padding:1rem 0.75rem; color:var(--fg-subtle); font-size:0.8rem; }
/* ── Status indicator ── */
.st { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; font-weight:500; }
.st-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.st-overdue .st-dot, .st-expired .st-dot { background:var(--danger); }
.st-overdue, .st-expired { color:var(--danger); }
.st-due .st-dot, .st-never .st-dot { background:var(--warn); }
.st-due, .st-never { color:var(--warn); }
.st-ok .st-dot { background:var(--success); }
.st-ok { color:var(--success); }
.st-retired .st-dot { background:var(--fg-subtle); }
.st-retired { color:var(--fg-subtle); }
/* ── Key/value ── */
.kv { display:grid; grid-template-columns:6rem 1fr; gap:0.28rem 0.75rem; font-size:0.8rem; }
.kv dt { color:var(--fg-subtle); }
.kv dd { color:var(--fg); margin:0; word-break:break-word; }
.kv dd.warn { color:var(--warn); }
.detail-name { font-size:1rem; font-weight:600; color:var(--fg); }
.detail-sub { color:var(--fg-muted); margin-bottom:0.6rem; font-size:0.8rem; }
.detail-notes { margin-top:0.6rem; font-size:0.8rem; }
.detail-notes .lbl {
color:var(--fg-subtle); font-size:0.625rem; font-weight:500;
letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.15rem;
display:block;
}
.detail-notes-body { color:var(--fg-muted); }
/* ── Kit header ── */
.kit-head { display:flex; flex-wrap:wrap; gap:0.35rem 1.5rem; align-items:baseline; }
.kit-head .serial { font-size:1rem; font-weight:600; }
.kit-head .type { color:var(--fg-muted); font-size:0.8rem; }
.kit-head .field { font-size:0.8rem; }
.kit-head .field .l {
color:var(--fg-subtle); margin-right:0.3rem;
font-size:0.625rem; letter-spacing:0.08em; text-transform:uppercase;
}
/* ── History ── */
.hist { display:flex; flex-direction:column; }
.hist .row {
display:flex; flex-direction:column; align-items:stretch; gap:0.35rem;
padding:0.55rem 0.75rem; cursor:pointer; border-bottom:1px solid var(--border);
font-size:0.8rem;
}
.hist .row:hover { background:var(--bg-hover); }
.hist .row.sel { background:var(--accent-muted); }
.hist .row .hist-main {
display:grid; grid-template-columns:6.5rem 5rem 1fr; gap:0.5rem; align-items:center;
width:100%;
}
.hist .row .date { color:var(--fg-muted); }
.hist .row .who { color:var(--fg-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist .row .hist-notes,
.hist-notes {
white-space:pre-wrap; overflow:visible; word-break:break-word;
color:var(--fg-muted); font-size:0.78rem; line-height:1.4;
}
.hist-notes .lbl {
display:block; color:var(--fg-subtle); font-size:0.625rem; font-weight:600;
letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.12rem;
}
.hist-item-note {
padding:0.55rem 0.75rem; border-bottom:1px solid var(--border);
}
.hist .row .hist-recheck { color:var(--fg-muted); font-size:0.78rem; }
.hist .row .hist-recheck .warn { color:var(--warn); }
.ios-row.hist-entry .ios-row-sub.hist-inspector {
overflow:visible; text-overflow:unset; white-space:normal;
}
.ios-row.hist-entry .hist-notes {
margin-top:6px; font-size:15px; line-height:1.35; letter-spacing:-0.24px;
color:var(--fg-muted);
white-space:pre-wrap; overflow:visible; word-break:break-word;
}
.ios-row.hist-entry .hist-notes .lbl {
font-size:11px; letter-spacing:0.06em; margin-bottom:2px;
}
.hist .empty { color:var(--fg-subtle); padding:0.75rem; font-size:0.8rem; }
.res-pass { color:var(--success); font-weight:500; }
.res-fail { color:var(--danger); font-weight:500; }
.res-monitor { color:var(--warn); font-weight:500; }
/* ── Actions ── */
.actions { display:flex; gap:0.4rem; margin-top:0.75rem; flex-wrap:wrap; }
/* ── Buttons ── */
.btn {
font:inherit; font-size:0.8rem; height:30px; padding:0 0.7rem;
border:1px solid var(--border-strong); background:var(--bg-panel);
color:var(--fg-muted); cursor:pointer;
display:inline-flex; align-items:center; gap:0.35rem;
transition:all 0.08s; white-space:nowrap; border-radius: 5px;
}
.btn:hover { border-color:var(--border-bright); background:var(--bg-hover); color:var(--fg); }
.btn-icon { width:13px; height:13px; flex-shrink:0; }
.btn.primary {
border-color:#1f4d32; background:#1f4d32;
color:#fff; font-weight:600;
border-radius: 4px;
}
.btn.primary:hover { border-color:#173a26; background:#173a26; color:#fff; }
/* ── Inspect form ── */
.form-grid { display:grid; grid-template-columns:7rem 1fr; gap:0.7rem 0.75rem; align-items:start; }
.form-grid .flabel { color:var(--fg-subtle); padding-top:0.3rem; font-size:0.8rem; }
.form-grid .flabel.req::after { content:" *"; color:var(--danger); }
.form-grid .ffield { min-width:0; }
.row-hidden { display:none; }
/* Inspector chips */
.picker { display:flex; flex-wrap:wrap; gap:0.3rem; }
.pchip {
font:inherit; font-size:0.75rem;
padding:0.22rem 0.6rem; cursor:pointer;
border:1px solid var(--border-strong); background:transparent;
color:var(--fg-subtle); transition:all 0.08s; border-radius: 4px;
}
.pchip:hover { border-color:var(--border-bright); color:var(--fg); background:var(--bg-hover); }
.pchip.on { border-color:rgba(31,77,50,.4); background:var(--accent-muted); color:var(--accent); font-weight:500; }
.otherwrap { margin-top:0.35rem; }
/* Segmented (result) */
.segment { display:inline-flex; border:1px solid var(--border-strong); overflow:hidden; border-radius: 5px; }
.segment button {
font:inherit; font-size:0.78rem;
padding:0.28rem 0.9rem; cursor:pointer;
background:var(--bg-panel); color:var(--fg-subtle);
border:none; border-right:1px solid var(--border-strong); transition:all 0.08s;
}
.segment button:last-child { border-right:none; }
.segment button.on { font-weight:500; }
.segment button[data-result="pass"].on { background:var(--success-muted); color:var(--success); }
.segment button[data-result="monitor"].on { background:var(--warn-muted); color:var(--warn); }
.segment button[data-result="fail"].on { background:var(--danger-muted); color:var(--danger); }
/* Inputs */
.finput, .ftext, .fnum, .othername {
font:inherit; font-size:0.8rem;
background:var(--bg-panel); color:var(--fg);
border:1px solid var(--border-strong);
padding:0.32rem 0.6rem; outline:none; width:100%;
transition:border-color 0.08s; border-radius: 5px;
}
.finput:focus, .ftext:focus, .fnum:focus, .othername:focus { border-color:var(--accent); }
.finput { width:auto; }
.fnum { width:5.5rem; display:inline-block; }
.ftext { resize:vertical; min-height:3.5rem; }
.due-calc { color:var(--fg-muted); font-size:0.75rem; margin-left:0.5rem; }
.due-calc b { color:var(--warn); font-weight:500; }
.check-interval {
display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;
margin:0 0 0.55rem; font-size:0.8rem; color:var(--fg-subtle);
}
.check-interval .fnum { width:5.5rem; }
.check-interval .fnum.row-hidden { display:none; }
.check-interval .psel,
.recheck-row .psel { width:auto; }
.recheck-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; }
.recheck-row .fnum { width:5.5rem; flex:0 0 auto; }
.recheck-custom { display:inline-flex; align-items:center; gap:0.35rem; }
.recheck-custom.row-hidden { display:none; }
.muted { color:var(--fg-muted); }
/* ── Print-page extras ── */
.psel {
font:inherit; font-size:0.78rem;
background:var(--bg-panel); color:var(--fg-muted);
border:1px solid var(--border-strong);
padding:0.28rem 0.6rem; outline:none; cursor:pointer;
transition:border-color 0.08s; height:30px; border-radius: 5px;
}
.psel:focus { border-color:var(--accent); color:var(--fg); }
.psel:hover { border-color:var(--border-bright); }
.psel option { background:var(--bg-panel); }
.no-screen { display:none !important; }
.print-report-header {
padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
font-size:0.72rem; color:var(--fg-muted);
}
/* ── Mobile hamburger ── */
.ham-btn {
display:none; align-items:center; justify-content:center;
width:44px; height:44px; min-width:44px; min-height:44px; padding:0; margin-right:0.25rem;
background:transparent; border:1px solid var(--border-strong);
color:var(--fg-muted); cursor:pointer; flex-shrink:0; border-radius: 4px;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ham-btn svg { width:16px; height:16px; }
@media (hover: hover) { .ham-btn:hover { border-color:var(--border-bright); color:var(--fg); background:var(--bg-hover); } }
/* Sidebar overlay (mobile drawer backdrop) */
.sidebar-overlay {
display:none; position:fixed; inset:0; z-index:40;
background:rgba(0,0,0,0.7); backdrop-filter:blur(2px);
}
.sidebar-overlay.visible { display:block; }
.sidebar-overlay:not(.visible) { pointer-events: none; }
.item-cards { display: none; }
/* ── Responsive ── */
/* Tablet / large phone: hamburger + drawer. */
@media (max-width:860px) {
.ham-btn { display:inline-flex; }
.live-clock { display:none; }
.brand-link { font-size: 1.05rem; }
.breadcrumbs { font-size: 0.84rem; min-width: 0; overflow: hidden; }
.account-cluster { max-width: 11rem; }
/* Sidebar becomes a slide-in drawer */
.sidebar {
position:fixed; top:0; left:0; bottom:0; z-index:50;
width:min(280px, 86vw);
transform:translateX(-100%);
transition:transform 0.22s ease;
box-shadow:none;
padding-top: var(--safe-top);
padding-bottom: var(--safe-bottom);
}
.sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.5); }
.sidebar:not(.open) { pointer-events: none; }
.split.list, .split.detail { grid-template-columns:1fr; }
.form-grid { grid-template-columns:1fr; gap:0.35rem 0; }
.form-grid .flabel { padding-top:0.45rem; }
.filterrow { flex-direction:column; align-items:stretch; }
.search-field { max-width:none; min-width:0; width:100%; padding: 0.45rem 0.7rem; }
.search-field input { font-size: 16px; min-height: 28px; }
.chips { flex-wrap:wrap; }
.dt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-td { padding:0.6rem 0.55rem; font-size:0.8rem; }
.dt-th { padding:0.4rem 0.55rem; }
.dt-row { min-height: 44px; }
.panel-header { flex-wrap:wrap; gap:0.45rem; }
.panel-controls { flex-wrap:wrap; gap: 0.4rem; }
.panel-controls .btn { min-height: 44px; }
.psel { width:100%; min-height:44px; height:auto; font-size:16px; padding: 0.45rem 0.65rem; }
.btn { min-height:44px; height:auto; font-size:0.9rem; padding:0 0.9rem; touch-action: manipulation; }
.fchip { padding:0.45rem 0.75rem; min-height:44px; font-size:0.75rem; touch-action: manipulation; }
.pchip { min-height:44px; padding: 0.45rem 0.75rem; font-size: 0.85rem; touch-action: manipulation; }
.segment { width: 100%; display: flex; }
.segment button { flex: 1; min-height: 44px; font-size: 16px; padding: 0.45rem 0.4rem; touch-action: manipulation; }
.finput, .ftext, .fnum, .othername { font-size: 16px; min-height: 44px; width: 100%; }
.finput { width: 100%; }
.fnum { width: 100%; }
.check-interval .fnum,
.recheck-row .fnum { width: 5.5rem; }
.check-interval .psel,
.recheck-row .psel { width: auto; min-width: 8rem; }
.hist .row { min-height: 44px; padding: 0.65rem 0.75rem; }
.hintbar { display:none; }
.nav-item { padding:0.75rem 0.7rem; min-height:44px; }
.app-content {
padding: 0.55rem;
padding-left: max(0.55rem, var(--safe-left));
padding-right: max(0.55rem, var(--safe-right));
padding-bottom: 0.55rem;
}
.toast {
left: 12px; right: 12px; max-width: none;
bottom: calc(12px + var(--safe-bottom));
}
.actions { flex-direction: column; }
.actions .btn { width: 100%; justify-content: center; }
.kv { grid-template-columns: 5.5rem 1fr; }
}
/* Phone: in-app push navigation only; print hidden */
@media (max-width: 640px) {
.ham-btn { display: none !important; }
.sidebar, .sidebar-overlay { display: none !important; pointer-events: none !important; }
.phone-hide, #tab-print, .ios-toolbar { display: none !important; pointer-events: none !important; }
.app-content {
padding: 0.5rem;
padding-left: max(0.5rem, var(--safe-left));
padding-right: max(0.5rem, var(--safe-right));
padding-bottom: max(0.5rem, var(--safe-bottom));
}
.hintbar { display: none; }
.toast {
bottom: calc(var(--safe-bottom) + 12px);
}
/* Hide list-page preview pane — tap opens the full detail view */
.split.list > .panel:last-child { display: none; }
/* Inventory card rows instead of a 4-col table */
.inv-table, .inv-table tbody { display: block; }
.inv-table thead { display: none; }
.inv-table .dt-row {
display: grid;
grid-template-columns: 1fr auto;
padding: 0.85rem 0.75rem;
gap: 0.2rem 0.55rem;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: none;
min-height: 44px;
align-items: center;
}
.inv-table .dt-row .dt-td { border: none; padding: 0; max-width: none; overflow: visible; white-space: normal; text-overflow: unset; }
/* Serial → title */
.inv-table .dt-row .dt-td:nth-child(3) {
grid-column: 1; grid-row: 1;
font-size: 0.95rem; font-weight: 600; color: var(--fg);
}
/* Status badge */
.inv-table .dt-row .dt-td:nth-child(1) {
grid-column: 2; grid-row: 1; align-self: center;
}
/* ID mark */
.inv-table .dt-row .dt-td:nth-child(4) {
grid-column: 1 / -1; grid-row: 2;
font-size: 0.8rem; color: var(--fg-muted);
}
/* Kit */
.inv-table .dt-row .dt-td:nth-child(2) {
grid-column: 1 / -1; grid-row: 3;
font-size: 0.72rem; color: var(--fg-subtle);
}
.inv-table .dt-row.sel {
background: var(--accent-muted);
box-shadow: inset 3px 0 0 var(--accent);
}
/* Print page: hide wide table, show cards */
.print-dt { display: none; }
.item-cards { display: flex; flex-direction: column; }
/* Larger controls */
.fchip { border-radius: 4px; padding: 0.45rem 0.85rem; min-height: 44px; }
.btn { min-height: 44px; border-radius: 4px; height: auto; padding: 0 1rem; font-size: 0.9rem; }
.btn-icon { width: 15px; height: 15px; }
.psel { width: 100%; min-height: 44px; border-radius: 4px; font-size: 16px; }
.search-field { min-width: 0; max-width: none; border-radius: 4px; padding: 0.5rem 0.7rem; }
.search-field input { font-size: 16px; }
.filterrow { gap: 0.5rem; }
.app-content, .panel-body, .hist, .item-cards { -webkit-overflow-scrolling: touch; }
/* History rows wrap on a narrow screen */
.hist .row {
min-height: 44px;
padding: 0.7rem 0.75rem;
}
.hist .row .hist-main {
grid-template-columns: auto 1fr;
}
.hist .row .who { grid-column: 1 / -1; }
.panel-header { align-items: stretch; }
.panel-controls { width: 100%; }
.panel-controls .btn { flex: 1 1 auto; justify-content: center; }
.topbar { padding-left: max(0.5rem, var(--safe-left)); padding-right: max(0.5rem, var(--safe-right)); }
}
/* Very small phones */
@media (max-width:430px) {
.topbar { padding-left: max(0.45rem, var(--safe-left)); padding-right: max(0.45rem, var(--safe-right)); }
}
/* Landscape phone: keep KPIs on one row so content is not crushed */
@media (max-height: 500px) and (max-width: 900px) {
}
/* Print-page cards: hidden on desktop, flex under 640px */
@media (min-width: 641px) {
.item-cards { display: none; }
}
.item-card {
display: flex; align-items: flex-start; gap: 0.65rem;
padding: 0.8rem 0.75rem;
border-bottom: 1px solid var(--border);
min-height: 44px;
}
.item-card-check {
display: flex; align-items: center; justify-content: center;
width: 44px; min-width: 44px; height: 44px;
margin: 0; flex-shrink: 0;
}
.item-card-check input {
width: 20px; height: 20px; margin: 0;
accent-color: var(--accent); cursor: pointer;
}
.item-card-main { flex: 1; min-width: 0; }
.item-card-top {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem;
}
.item-card-serial {
font-size: 0.95rem; font-weight: 600; color: var(--fg);
word-break: break-word;
}
.item-card-id { font-size: 0.8rem; color: var(--fg-muted); margin-top: 0.15rem; word-break: break-word; }
.item-card-meta { font-size: 0.72rem; color: var(--fg-subtle); margin-top: 0.15rem; }
.item-card-dates {
display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem;
font-size: 0.72rem; color: var(--fg-subtle);
margin-top: 0.25rem;
}
/* Print-only columns: hidden on screen, shown in @media print */
.print-col { display:none; }
/* ── Print ──
A4 landscape. Hides app chrome. Rows marked .no-print (unchecked on the print page) are omitted. */
@media print {
@page {
size: A4 landscape;
margin: 1.2cm 1.4cm;
}
@page :first {
margin-top: 1.2cm;
}
.topbar, .sidebar, .sidebar-overlay,
.hintbar, .toast, .ham-btn,
.filterrow, .panel-controls,
.item-cards, .ios-large-title, .ios-large-sub,
.ios-nav, .ios-sheet, .ios-toolbar, .no-print,
.link-status, .link-status-card,
#settings-pop, #settings-btn { display:none !important; }
.print-dt { display:block !important; }
/* When printing item history overlay, hide everything else */
body:has(#print-hist-overlay) .app-shell { display:none !important; }
#print-hist-overlay td { padding:3pt 8pt 3pt 0; border-bottom:1px solid #ddd; vertical-align:top; }
html, body { height:auto !important; overflow:visible !important; }
body {
background:#fff !important; color:#111 !important;
font-family: "Libre Caslon Text", Georgia, serif !important;
font-size:9pt !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.app-shell { height:auto !important; overflow:visible !important; }
.app-body { display:block !important; overflow:visible !important; }
.content-col { display:block !important; overflow:visible !important; }
.app-content { overflow:visible !important; padding:0 !important; padding-bottom:0 !important; }
.panel { border:none !important; background:#fff !important; }
.panel + .panel { margin-top:0.4cm; }
.panel-header { display:none !important; }
/* Table */
.dt-wrap { width:100% !important; }
.dt-container { overflow:visible !important; }
.dt-table { width:100% !important; border-collapse:collapse !important; table-layout:fixed; }
thead { display:table-header-group; }
tr { page-break-inside:avoid; }
.dt-th {
background:#1a1a2e !important; color:#fff !important;
font-size:7.5pt !important; padding:4pt 5pt !important;
border:1px solid #1a1a2e !important;
text-align:left; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
-webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.dt-td {
color:#111 !important; font-size:8pt !important;
padding:4pt 5pt !important; border-bottom:1px solid #ddd !important;
font-variant-numeric: tabular-nums;
vertical-align:top; word-break:break-word;
}
.dt-row:nth-child(even) .dt-td { background:#f9f9f9 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.dt-row.no-print { display:none !important; }
/* Print-only columns: make visible */
.print-col { display:table-cell !important; }
/* Report header */
.no-screen { display:block !important; }
.print-report-header {
color:#111 !important;
border-bottom:2pt solid #1a1a2e !important;
padding:0 0 8pt 0 !important; margin-bottom:6pt !important;
background:#fff !important;
-webkit-print-color-adjust:exact; print-color-adjust:exact;
}
/* Status colours */
.st-dot { -webkit-print-color-adjust:exact; print-color-adjust:exact; display:inline-block !important; }
.st-overdue .st-dot, .st-expired .st-dot { background:#c00 !important; }
.st-due .st-dot, .st-never .st-dot { background:#a05000 !important; }
.st-ok .st-dot { background:#006600 !important; }
.st-retired .st-dot { background:#777 !important; }
.st-overdue, .st-expired { color:#c00 !important; font-weight:600; }
.st-due, .st-never { color:#a05000 !important; font-weight:600; }
.st-ok { color:#006600 !important; }
.st-retired{ color:#666 !important; }
/* Result colours */
.res-pass { color:#006600 !important; font-weight:600; }
.res-monitor { color:#a05000 !important; font-weight:600; }
.res-fail { color:#c00 !important; font-weight:600; }
}
/* Theme toggle */
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
padding: 0; border: 1px solid var(--border-strong);
background: var(--bg-panel); color: var(--fg);
border-radius: 4px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme-toggle svg { width: 20px; height: 20px; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
@media (hover: hover) and (min-width: 641px) {
.theme-toggle:hover { background: var(--bg-hover); }
}
/* Phone-only chrome is hidden on desktop */
.ios-nav, .ios-sheet, .ios-toolbar { display: none; }
/* ── iOS list primitives ── */
.ios-list { padding: 0 0 12px; }
.ios-section-header {
font-size: 13px; font-weight: 400; color: var(--fg-subtle);
text-transform: uppercase; letter-spacing: -0.08px;
padding: 22px 16px 7px;
padding-left: max(32px, calc(16px + var(--safe-left)));
padding-right: max(16px, var(--safe-right));
}
.ios-section-header-actions {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ios-link-btn {
min-height: 44px; min-width: 44px; padding: 0 8px;
border: none; background: transparent; color: var(--accent);
font: inherit; font-size: 17px; font-weight: 400; letter-spacing: -0.41px;
text-transform: none; cursor: pointer;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ios-link-btn:active { opacity: 0.55; }
.ios-check, .desk-check {
display: inline-flex; align-items: center; gap: 0.5rem;
min-height: 44px; font-size: 0.875rem; color: var(--fg);
}
.ios-check input, .desk-check input {
width: 20px; height: 20px; margin: 0; accent-color: var(--accent);
}
.psel {
width: 100%; border: 1px solid var(--border);
background: var(--bg-panel); color: var(--fg);
padding: 0.45rem 0.6rem; border-radius: 3px;
font: inherit;
}
.kit-edit-grid { margin-top: 0.25rem; }
.ios-grouped {
margin: 0 16px;
margin-left: max(16px, var(--safe-left));
margin-right: max(16px, var(--safe-right));
background: var(--ios-fill);
border-radius: 4px;
overflow: hidden;
}
.ios-row {
display: flex; align-items: center; gap: 12px;
width: 100%; min-height: 44px;
padding: 11px 16px;
border: none; border-bottom: 0.5px solid var(--ios-sep);
background: transparent; color: var(--fg);
text-align: left; font: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
position: relative;
}
.ios-grouped .ios-row:last-child { border-bottom: none; }
.ios-row:not(.static):active { background: var(--bg-hover); }
.ios-row.static { cursor: default; min-height: 44px; }
.ios-row-text { flex: 1; min-width: 0; }
.ios-row-title {
font-size: 17px; font-weight: 400; letter-spacing: -0.41px;
color: var(--fg); line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ios-row-sub {
font-size: 15px; font-weight: 400; color: var(--fg-subtle);
margin-top: 1px; line-height: 1.25;
letter-spacing: -0.24px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ios-row-value {
font-size: 17px; color: var(--fg-subtle); letter-spacing: -0.41px;
text-align: right; flex-shrink: 0; max-width: 55%;
}
.ios-row-label {
font-size: 17px; color: var(--fg); flex: 1; letter-spacing: -0.41px;
}
.ios-row .st {
font-size: 15px; font-weight: 400;
letter-spacing: -0.24px; flex-shrink: 0;
}
.ios-row .st-dot { width: 8px; height: 8px; }
.ios-chevron {
width: 7px; height: 7px; flex-shrink: 0; margin-left: 2px;
border-right: 2px solid var(--fg-faint);
border-top: 2px solid var(--fg-faint);
transform: rotate(45deg);
opacity: 0.9;
}
.ios-check {
width: 22px; height: 22px; flex-shrink: 0;
border: 1.5px solid var(--border-strong);
border-radius: 50%; background: transparent;
position: relative;
}
.ios-check.on {
background: var(--accent); border-color: var(--accent);
}
.ios-check.on::after {
content: ""; position: absolute; left: 7px; top: 3px;
width: 5px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ios-detail {
animation: ios-push-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ios-screen {
display: flex;
flex-direction: column;
min-height: 100%;
height: 100%;
}
.ios-screen-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.ios-screen .ios-actions {
flex-shrink: 0;
margin-top: 0;
padding-top: 12px;
padding-bottom: max(12px, var(--safe-bottom));
background: var(--ios-grouped);
border-top: 0.5px solid var(--ios-hairline);
position: relative;
z-index: 2;
}
@keyframes ios-push-in {
from { opacity: 0.55; transform: translateX(18px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.ios-detail { animation: none; }
}
.ios-detail-hero {
padding: 4px 16px 14px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.ios-detail-name {
font-size: 28px; font-weight: 700; letter-spacing: 0.36px;
line-height: 1.15; color: var(--fg);
}
.ios-detail-type {
font-size: 15px; color: var(--fg-subtle); margin-top: 4px;
letter-spacing: -0.24px;
}
.ios-actions {
padding: 16px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
display: flex; flex-direction: column; gap: 12px;
}
.ios-empty {
padding: 48px 24px; text-align: center;
color: var(--fg-subtle); font-size: 17px; letter-spacing: -0.41px;
}
.visually-hidden {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.ios-form-block { padding: 0; }
.ios-form-block .ios-row {
flex-wrap: wrap; align-items: flex-start; gap: 8px;
padding-top: 12px; padding-bottom: 12px;
}
.ios-form-block .ios-row-label {
flex: 0 0 auto; min-width: 96px; padding-top: 10px;
color: var(--fg); font-size: 17px;
}
.ios-form-block .ffield { flex: 1; min-width: 0; width: 100%; }
.ios-form-block .picker { gap: 8px; }
.ios-form-block .pchip {
font-size: 15px;
border-radius: 4px; min-height: 44px; padding: 10px 14px;
border: none; background: var(--ios-search); color: var(--fg);
}
.ios-form-block .pchip.on {
background: var(--accent); color: #fff; font-weight: 600;
}
.ios-form-block .segment {
width: 100%; display: flex; border: none;
background: var(--ios-search); border-radius: 4px; padding: 3px; min-height: 44px;
overflow: visible;
}
.ios-form-block .segment button {
flex: 1; border: none; border-right: none;
background: transparent; border-radius: 2px;
font-size: 13px; font-weight: 600;
color: var(--fg); min-height: 44px; padding: 0 8px;
}
.ios-form-block .segment button.on {
background: var(--ios-fill);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04);
color: var(--fg);
}
.ios-form-block .segment button[data-result="pass"].on { color: var(--success); }
.ios-form-block .segment button[data-result="monitor"].on { color: var(--warn); }
.ios-form-block .segment button[data-result="fail"].on { color: var(--danger); }
.ios-form-block .finput,
.ios-form-block .ftext,
.ios-form-block .fnum,
.ios-form-block .othername {
border: none; background: transparent; padding: 8px 0;
font-size: 17px; min-height: 44px;
border-radius: 0; width: 100%;
}
.ios-form-block .finput:focus,
.ios-form-block .ftext:focus,
.ios-form-block .fnum:focus,
.ios-form-block .othername:focus { border: none; outline: none; }
.ios-btn-primary {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: 50px;
border: none; border-radius: 4px;
background: #1f4d32; color: #fff;
font-size: 17px; font-weight: 600;
letter-spacing: -0.41px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
.ios-btn-primary:active { opacity: 0.72; filter: brightness(0.96); background: #173a26; }
.ios-btn-fill {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: 50px;
border: none; border-radius: 4px;
background: var(--accent); color: #fff;
font-size: 17px; font-weight: 600;
letter-spacing: -0.41px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
.ios-btn-fill:active { opacity: 0.72; filter: brightness(0.96); }
.ios-btn-fill.is-saving {
opacity: 0.72;
filter: none;
}
.ios-btn-fill.is-saved {
background: var(--success);
opacity: 1;
filter: none;
transition: background 0.18s ease;
}
.ios-btn-fill.is-saved .btn-icon { stroke: #fff; }
.ios-btn-fill .btn-icon { width: 18px; height: 18px; stroke: #fff; }
.ios-btn-plain {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 50px;
border: none; border-radius: 4px;
background: var(--ios-fill); color: var(--accent);
font-size: 17px; font-weight: 400;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
.ios-btn-plain:active { opacity: 0.55; background: var(--bg-hover); }
/* ══════════════════════════════════════════════════════════════
Native iOS phone chrome (≤640px) — light/dark HIG
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
html, body {
width: 100%;
height: var(--app-height, 100dvh);
min-height: var(--app-height, 100dvh);
max-height: var(--app-height, 100dvh);
overflow: hidden; overscroll-behavior: none;
font-size: 17px;
background: var(--ios-grouped);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
}
/* Hide desktop chrome completely — no invisible tap targets */
.topbar, .hintbar, .sidebar, .sidebar-overlay,
.breadcrumbs, .live-clock, .ham-btn, .brand-text, .brand-mark,
.filterrow, .split.list > .panel:last-child,
.phone-hide, .ios-toolbar {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
.ios-nav {
display: block;
flex-shrink: 0;
position: relative; z-index: 80;
background: var(--ios-bar);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid transparent;
padding-top: var(--safe-top);
transition: border-color 0.15s ease;
}
body.ios-compact .ios-nav,
body.ios-pushed .ios-nav {
border-bottom-color: var(--ios-hairline);
}
body.ios-pushed .ios-nav {
display: none;
}
body.ios-pushed .content-col {
padding-top: calc(var(--safe-top) + 44px);
}
.ios-nav-bar {
position: relative;
height: 44px;
display: flex; align-items: center; justify-content: flex-end;
padding: 0 4px 0 max(12px, var(--safe-left));
}
.ios-nav-title {
position: absolute; left: max(16px, var(--safe-left)); right: 96px;
text-align: left;
font-size: 17px; font-weight: 600;
letter-spacing: -0.41px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
body.ios-pushed .ios-nav-title,
body.ios-compact .ios-nav-title {
opacity: 1;
transform: translateY(0);
}
body.ios-pushed .ios-large-title,
body.ios-pushed .ios-large-sub,
body.ios-pushed .ios-search-wrap,
body.ios-pushed .ios-seg-wrap,
body.ios-pushed .ios-filter-bar,
body.ios-compact .ios-large-title,
body.ios-compact .ios-large-sub,
body.ios-compact .ios-filter-bar { display: none !important; }
body.ios-pushed #ios-filter-btn,
body.ios-pushed #ios-add-btn { display: none; }
body.page-print .ios-seg-wrap { display: none !important; }
body.page-print .ios-nav,
body.page-print .ios-large-title,
body.page-print .ios-large-sub { display: none !important; }
.ios-nav-actions {
display: flex; align-items: center; gap: 0; z-index: 2;
margin-right: 2px;
}
.ios-nav-users {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 10px;
color: var(--accent); font-size: 17px; font-weight: 400;
letter-spacing: -0.41px; text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.ios-nav-users:active { opacity: 0.35; }
.ios-icon-btn {
min-width: 44px; min-height: 44px;
width: 44px; height: 44px;
padding: 0; border: none; background: none;
color: var(--accent); font-size: 17px; font-weight: 400;
letter-spacing: -0.41px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.ios-icon-btn:active { opacity: 0.35; }
.ios-icon-btn.theme-toggle {
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
border: none; background: none; border-radius: 0;
color: var(--accent); padding: 0;
}
.ios-icon-btn.theme-toggle svg {
width: 22px; height: 22px; stroke-width: 1.7;
}
.ios-icon-btn .ios-glyph {
width: 22px; height: 22px; display: block;
background: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
#ios-filter-btn .ios-glyph {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
#ios-add-btn .ios-glyph {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
#ios-filter-btn.is-active::after {
content: "";
position: absolute;
top: 7px; right: 7px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
border: 1.5px solid var(--ios-bar);
}
#ios-filter-btn { position: relative; }
.ios-filter-bar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 0 16px 8px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
min-height: 44px;
}
.ios-filter-bar[hidden] { display: none !important; }
.ios-filter-label {
flex: 1; min-width: 0; margin: 0;
font-size: 15px; line-height: 1.25; letter-spacing: -0.24px;
color: var(--fg-subtle);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ios-filter-clear {
flex-shrink: 0;
min-height: 44px; min-width: 44px;
padding: 0 8px;
border: none; background: transparent;
color: var(--accent);
font-size: 17px; font-weight: 400; letter-spacing: -0.41px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
.ios-filter-clear:active { opacity: 0.55; }
.ios-search-wrap {
padding: 0 16px 8px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.ios-search {
display: flex; align-items: center; gap: 6px;
background: var(--ios-search);
border-radius: 4px;
min-height: 44px; padding: 0 10px;
margin: 0;
}
.ios-search-go {
position: relative;
flex: 0 0 15px;
width: 15px; height: 15px;
min-width: 15px; min-height: 15px;
padding: 0; margin: 0; border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
z-index: 1;
}
.ios-search-go::before {
content: "";
position: absolute;
inset: 0;
background: var(--fg-faint);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
pointer-events: none;
}
.ios-search-go::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.ios-search input {
flex: 1; border: none; outline: none; background: transparent;
font-size: 17px; color: var(--fg);
min-height: 44px; width: 100%; letter-spacing: -0.41px;
-webkit-appearance: none; appearance: none;
}
.ios-search input::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px;
background: var(--fg-faint);
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.ios-search input::placeholder { color: var(--fg-faint); }
.ios-seg-wrap {
padding: 0 16px 10px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.ios-seg {
display: flex; background: var(--ios-search);
border-radius: 4px; padding: 3px; min-height: 44px;
align-items: stretch; gap: 2px;
}
.ios-seg button {
flex: 1; border: none; background: transparent;
border-radius: 4px; font-size: 15px; font-weight: 600;
color: var(--fg);
letter-spacing: -0.24px;
min-height: 44px;
padding: 0 12px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.ios-seg button.on {
background: var(--ios-fill);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04);
}
[data-theme="dark"] .ios-seg button.on {
background: #636366;
box-shadow: none;
}
.ios-seg button:active { opacity: 0.7; }
.ios-large-title {
display: block;
font-size: 34px; font-weight: 700;
letter-spacing: 0.37px; line-height: 41px;
color: var(--fg);
margin: 2px 0 0;
padding: 2px 16px 0;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.ios-large-sub {
display: block;
font-size: 15px; font-weight: 400;
color: var(--fg-subtle);
letter-spacing: -0.24px;
margin: 0 0 4px;
padding: 1px 16px 8px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.ios-large-sub:empty { display: none; }
body { color: var(--fg); line-height: 1.29; }
.app-shell {
position: fixed;
top: var(--vv-offset-top, 0px);
left: 0;
right: 0;
width: 100%;
height: var(--app-height, 100dvh);
min-height: 0;
max-height: var(--app-height, 100dvh);
overflow: hidden;
background: var(--ios-grouped);
display: flex;
flex-direction: column;
}
.app-body { flex: 1; min-height: 0; overflow: hidden; }
.content-col { flex: 1; min-height: 0; overflow: hidden; background: var(--ios-grouped); }
.app-content {
flex: 1; min-height: 0; overflow: hidden;
display: flex; flex-direction: column;
padding: 0 !important;
}
#view-root {
flex: 1; min-height: 0;
overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding-bottom: calc(var(--safe-bottom) + 24px);
position: relative;
z-index: 1;
}
#view-root:has(.ios-screen) {
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: 0;
}
#view-root:has(.ios-screen) .ios-screen {
flex: 1;
min-height: 0;
background: var(--ios-grouped);
}
#view-root:has(.ios-screen) .ios-screen-scroll {
background: var(--ios-grouped);
}
#view-root:has(.ios-screen) .ios-screen .ios-actions {
background: var(--ios-bar);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
padding-top: 10px;
padding-bottom: max(10px, var(--safe-bottom));
gap: 10px;
}
html.ios-keyboard-open #view-root:has(.ios-screen) .ios-screen .ios-actions {
position: fixed;
left: 0;
right: 0;
bottom: var(--keyboard-inset, 0px);
z-index: 95;
padding-bottom: max(10px, var(--safe-bottom));
}
html.ios-keyboard-open #view-root:has(.ios-screen) .ios-screen-scroll {
padding-bottom: calc(118px + 8px);
}
#view-root:has(.ios-screen) .ios-btn-fill,
#view-root:has(.ios-screen) .ios-btn-plain {
min-height: 44px;
}
/* Action sheet — UIAlertController */
.ios-sheet {
display: block; position: fixed; inset: 0; z-index: 1000;
pointer-events: none;
}
.ios-sheet:not([hidden]) { pointer-events: auto; }
.ios-sheet[hidden] { display: none !important; }
.ios-sheet-backdrop {
position: absolute; inset: 0; border: none; padding: 0; margin: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.45);
opacity: 0;
transition: opacity 0.28s ease;
-webkit-tap-highlight-color: transparent;
}
.ios-sheet.open .ios-sheet-backdrop { opacity: 1; }
.ios-sheet-card {
position: absolute; left: 8px; right: 8px;
bottom: calc(8px + var(--safe-bottom));
display: flex; flex-direction: column; gap: 8px;
transform: translateY(110%);
transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.ios-sheet.open .ios-sheet-card { transform: translateY(0); }
.ios-sheet-group {
background: var(--ios-sheet-bg);
-webkit-backdrop-filter: saturate(180%) blur(30px);
backdrop-filter: saturate(180%) blur(30px);
border-radius: 4px; overflow: hidden;
}
.ios-sheet-group button {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 57px;
border: none; background: transparent;
border-bottom: 0.5px solid var(--ios-sep);
color: var(--accent); font-size: 20px; font-weight: 400;
letter-spacing: 0.38px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
padding: 12px 44px;
position: relative;
}
.ios-sheet-group button.is-picked {
font-weight: 600;
}
.ios-sheet-group button.is-picked::after {
content: "✓";
position: absolute;
right: 16px;
font-size: 20px;
font-weight: 700;
line-height: 1;
}
.ios-sheet-group button:last-child { border-bottom: none; }
.ios-sheet-group button:active { background: var(--bg-hover); }
.ios-sheet-group button.destructive { color: var(--danger); }
.ios-sheet-cancel { font-weight: 600 !important; }
.toast {
bottom: calc(var(--safe-bottom) + 12px);
left: 16px; right: 16px; max-width: none;
border-radius: 4px;
background: var(--ios-sheet-bg);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: none;
box-shadow: 0 8px 28px rgba(0,0,0,0.18);
text-align: center; font-size: 15px;
}
.toast.toast-phone {
padding: 10px 14px;
font-size: 15px;
font-weight: 500;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.toast.toast-phone.toast-err {
color: var(--danger);
background: var(--ios-sheet-bg);
}
.ios-row {
min-height: 44px;
cursor: pointer;
touch-action: manipulation;
}
.ios-seg button {
min-height: 44px;
touch-action: manipulation;
}
.btn, .pchip, .segment button, .ios-row {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn {
min-height: 50px; border-radius: 4px;
font-size: 17px;
border: none;
}
.btn.primary {
background: #1f4d32; color: #fff;
border: none; font-weight: 600; border-radius: 4px;
}
.btn.primary:hover, .btn.primary:active {
background: #173a26; color: #fff; opacity: 0.9;
}
.btn:active { opacity: 0.65; }
.btn:hover, .fchip:hover, .pchip:hover, .dt-row:hover, .hist .row:hover {
border-color: inherit; background: inherit; color: inherit;
}
.finput, .ftext, .fnum, .othername, .psel {
font-size: 17px !important;
min-height: 44px; border-radius: 4px;
}
.print-dt { display: none; }
.panel { background: transparent; border: none; border-radius: 0; }
.split.detail { display: block; }
.split.detail > .panel {
background: var(--ios-fill);
border-radius: 4px;
margin: 0 16px 10px;
margin-left: max(16px, var(--safe-left));
margin-right: max(16px, var(--safe-right));
overflow: hidden;
}
.loading-splash {
font-size: 15px;
color: var(--fg-subtle); padding: 40px 16px; text-align: center;
}
}
@media (max-width: 430px) {
.ios-large-title { font-size: 32px; line-height: 38px; }
.ios-detail-name { font-size: 26px; }
}
/* ── iOS switch (Retired toggle) ── */
.ios-row-switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap !important;
}
.ios-row-switch .ios-row-label {
flex: 1 1 auto;
min-width: 0;
padding-top: 0 !important;
}
.ios-row-switch .ios-switch {
flex: 0 0 auto;
margin-left: auto;
}
.ffield-switch {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 44px;
}
.ios-switch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: 51px;
height: 31px;
min-height: 31px;
margin: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
flex-shrink: 0;
}
.ios-switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.ios-switch-ui {
position: absolute;
inset: 0;
border-radius: 16px;
background: #e9e9eb;
transition: background 0.2s ease;
pointer-events: none;
}
html[data-theme="dark"] .ios-switch-ui {
background: #39393d;
}
.ios-switch-ui::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 27px; height: 27px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.12);
transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.ios-switch input:checked + .ios-switch-ui {
background: #34c759;
}
.ios-switch input:checked + .ios-switch-ui::after {
transform: translateX(20px);
}
.ios-switch input:focus-visible + .ios-switch-ui {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.ios-btn-danger { color: var(--danger) !important; }
.btn.danger {
color: var(--danger);
border-color: rgba(255, 59, 48, 0.35);
}
.btn.danger:hover {
background: var(--danger-muted);
border-color: var(--danger);
color: var(--danger);
}
.ios-sheet-msg {
padding: 14px 16px 10px;
text-align: center;
font-size: 13px;
line-height: 1.3;
color: var(--fg-subtle);
border-bottom: 0.5px solid var(--ios-sep, var(--border));
}
/* Billing page. Inventory search, filters, and the gear totals stay off this screen. */
body.page-billing .hintbar,
body.page-billing .sidebar-stats-wrap { display: none !important; }
/* Recently deleted. Same chrome as billing: no kit totals or search. */
body.page-deleted .hintbar,
body.page-deleted .sidebar-stats-wrap { display: none !important; }
body.page-deleted .app-content {
padding: 1.35rem 1.5rem 2rem;
}
.deleted-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
body.page-billing .app-content {
padding: 1.35rem 1.5rem 2rem;
}
.bill {
max-width: 52rem;
margin: 0 auto;
}
.bill-banner {
margin: 0 0 1rem;
padding: 0.8rem 1rem;
border-radius: 4px;
border: 1px solid var(--border-strong);
background: var(--bg-elevated);
color: var(--fg);
font-size: 0.95rem;
line-height: 1.45;
}
.bill-banner.ok {
background: var(--success-muted);
border-color: transparent;
}
.bill-banner.warn {
background: var(--warn-muted);
border-color: transparent;
}
.bill-kicker {
margin: 0 0 0.4rem;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-faint);
}
.bill-now {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 1.5rem;
padding-bottom: 1.35rem;
margin-bottom: 1.35rem;
border-bottom: 1px solid var(--border);
}
.bill-now-id {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.bill-name {
margin: 0;
font-weight: 600;
font-size: 2.5rem;
letter-spacing: -0.03em;
line-height: 1.05;
}
.bill-detail {
margin: 0.45rem 0 0;
max-width: 36rem;
color: var(--fg-muted);
font-size: 0.95rem;
line-height: 1.45;
}
.bill-pill {
display: inline-flex;
align-items: center;
height: 1.55rem;
padding: 0 0.65rem;
border-radius: 4px;
background: var(--bg-hover);
color: var(--fg-muted);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bill-pill.is-ok { background: var(--accent-muted); color: var(--accent); }
.bill-pill.is-warn { background: var(--warn-muted); color: var(--warn); }
.bill-pill.is-bad { background: var(--danger-muted); color: var(--danger); }
.bill-now-actions { flex-shrink: 0; }
.bill-plans-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.9rem;
}
.bill-lead {
margin: 0;
max-width: 36rem;
color: var(--fg-muted);
font-size: 0.95rem;
line-height: 1.45;
}
.bill-seg {
display: inline-flex;
flex-shrink: 0;
padding: 3px;
gap: 2px;
border-radius: 4px;
background: var(--bg-hover);
border: 1px solid var(--border);
}
.bill-seg button {
appearance: none;
border: 0;
background: transparent;
color: var(--fg-muted);
font: inherit;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: -0.01em;
padding: 0.4rem 0.9rem;
border-radius: 4px;
cursor: pointer;
}
.bill-seg button[aria-pressed="true"] {
background: var(--bg-panel);
color: var(--fg);
box-shadow: 0 1px 2px rgba(17, 17, 16, 0.12);
}
[data-theme="dark"] .bill-seg button[aria-pressed="true"] {
background: #2c2a27;
box-shadow: none;
}
.bill-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
align-items: stretch;
}
.bill-card {
display: flex;
flex-direction: column;
min-width: 0;
padding: 1.15rem 1.2rem 1.1rem;
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: 0 1px 0 rgba(17, 17, 16, 0.04);
}
[data-theme="dark"] .bill-card { box-shadow: none; }
.bill-card.is-current,
.bill-card.is-needed {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.bill-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.bill-card-name {
margin: 0;
font-weight: 600;
font-size: 1.65rem;
letter-spacing: -0.03em;
line-height: 1.1;
}
.bill-price {
margin: 0.85rem 0 0;
font-weight: 600;
font-size: 2.35rem;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.bill-per,
.bill-eq,
.bill-unavail {
margin: 0.28rem 0 0;
color: var(--fg-subtle);
font-size: 0.88rem;
}
.bill-yours {
margin: 0;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fg-muted);
font-size: 0.92rem;
font-weight: 600;
}
.bill-launch {
margin: 0.9rem 0 0;
color: var(--fg-faint);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bill-blurb {
margin: 0.75rem 0 0;
min-height: 2.9em;
color: var(--fg-muted);
font-size: 0.92rem;
line-height: 1.45;
text-wrap: pretty;
}
.bill-features {
list-style: none;
margin: 0.85rem 0 0;
padding: 0;
border-top: 1px solid var(--border);
}
.bill-features li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.92rem;
}
.bill-features li:last-child { border-bottom: 0; }
.bill-check {
width: 16px;
height: 16px;
margin-top: 0.16rem;
flex-shrink: 0;
color: var(--accent);
}
.bill-card-foot { margin-top: auto; padding-top: 1rem; }
.bill-card-foot:not(:has(.btn, .bill-yours)) { display: none; }
.bill-card-foot .btn { width: 100%; }
.bill-save,
.bill-fine {
margin: 0.9rem 0 0;
color: var(--fg-subtle);
font-size: 0.85rem;
line-height: 1.45;
}
.bill-err {
margin: 0.85rem 0 0;
color: var(--danger);
font-size: 0.92rem;
}
.bill-priceblock[hidden],
.bill .btn[hidden],
.bill-unavail[hidden],
.bill-save[hidden],
.bill-err[hidden] { display: none !important; }
.page-billing .bill .btn {
min-height: 40px;
padding: 0 1rem;
border-radius: 4px;
border: 1px solid var(--border-strong);
background: var(--bg-panel);
color: var(--fg);
font-weight: 600;
justify-content: center;
}
.page-billing .bill .btn.primary {
border-color: #1f4d32;
background: #1f4d32;
color: #fff;
}
.page-billing .bill .btn:disabled {
opacity: 0.6;
cursor: wait;
}
.page-billing .bill .btn:focus-visible,
.bill-seg button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: hover) {
.page-billing .bill .btn:hover {
border-color: var(--fg);
background: var(--bg-hover);
color: var(--fg);
}
.page-billing .bill .btn.primary:hover {
border-color: #173a26;
background: #173a26;
color: #fff;
}
.bill-card:hover { border-color: var(--border-bright); }
.bill-card.is-current:hover,
.bill-card.is-needed:hover { border-color: var(--accent); }
}
[data-theme="dark"] .page-billing .bill .btn.primary {
background: var(--accent);
border-color: var(--accent);
color: #111110;
}
@media (hover: hover) {
[data-theme="dark"] .page-billing .bill .btn.primary:hover {
background: #b7d4c0;
border-color: #b7d4c0;
color: #111110;
}
}
@media (max-width: 860px) {
body.page-billing .app-content { padding: 1rem 0.9rem 1.5rem; }
}
@media (max-width: 720px) {
.bill-grid { grid-template-columns: 1fr; }
.bill-now,
.bill-plans-head { flex-direction: column; align-items: stretch; }
.bill-now-actions .btn,
.bill-seg { width: 100%; }
.bill-seg button { flex: 1; }
}
@media (max-width: 640px) {
body.page-deleted .ios-search-wrap,
body.page-deleted .ios-seg-wrap,
body.page-deleted .ios-filter-bar,
body.page-deleted #ios-add-btn,
body.page-deleted #ios-filter-btn { display: none !important; }
body.page-billing .ios-search-wrap,
body.page-billing .ios-seg-wrap,
body.page-billing .ios-filter-bar,
body.page-billing #ios-add-btn,
body.page-billing #ios-filter-btn { display: none !important; }
body.page-billing .app-content { padding: 0 !important; }
.bill {
padding: 6px 16px 8px;
padding-left: max(16px, var(--safe-left));
padding-right: max(16px, var(--safe-right));
}
.bill-name { font-size: 2.15rem; }
.bill-yours { min-height: 48px; }
.page-billing .bill .btn { min-height: 48px; font-size: 17px; }
}
/* ── Inventory Filter (popover on desktop, sheet on a phone) ──
One Filter button replaces the old row of status chips.
The Attention | All strip stays in the markup for older pages and is hidden on the inventory list. */
body.page-inventory .ios-seg-wrap { display: none !important; }
.filter-anchor { position: relative; z-index: 6; flex: 0 0 auto; }
.filter-launch {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.filter-launch.is-active {
border-color: var(--accent);
background: var(--accent-muted);
color: var(--accent);
}
.filter-count,
#ios-filter-btn .filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.3rem;
border-radius: 4px;
background: var(--accent);
color: #faf9f7;
font-size: 0.65rem;
font-weight: 600;
line-height: 1;
}
[data-theme="dark"] .filter-count,
[data-theme="dark"] #ios-filter-btn .filter-badge { color: #111110; }
#ios-filter-btn .filter-badge {
position: absolute;
top: 4px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border: 1.5px solid var(--ios-bar);
font-size: 10px;
pointer-events: none;
}
#ios-filter-btn.has-count::after { content: none; }
.filter-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 6;
width: min(22rem, 72vw);
max-height: min(70vh, 32rem);
overflow: auto;
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: 0 16px 40px rgba(17, 17, 16, 0.16);
padding: 4px 0 8px;
}
[data-theme="dark"] .filter-pop { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.filter-pop[hidden] { display: none !important; }
.filter-applied {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
flex: 1 1 100%;
}
.filter-applied:empty { display: none; }
.applied-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.28rem 0.55rem;
border-radius: 4px;
border: 1px solid var(--accent);
background: var(--accent-muted);
color: var(--accent);
cursor: pointer;
}
.applied-x { font-size: 0.85rem; line-height: 1; }
.kit-filter-title {
margin: 10px 14px 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg);
}
.kit-filter-h {
margin: 12px 14px 6px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.kit-filter-show {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 0 12px 4px;
}
.kit-filter-show-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
min-height: 44px;
padding: 6px 8px;
border-radius: 4px;
border: 1px solid var(--border-strong);
background: var(--bg-panel);
color: var(--fg);
font-size: 0.85rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
cursor: pointer;
}
.kit-filter-show-btn.on {
background: var(--accent-muted);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
.kit-filter-hint {
font-size: 0.6rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg-faint);
font-weight: 500;
}
.kit-filter-show-btn.on .kit-filter-hint { color: var(--accent); }
.kit-filter-list {
display: flex;
flex-direction: column;
padding: 0 8px;
}
.kit-filter-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 40px;
padding: 6px 8px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--fg);
font-size: 0.9rem;
font-weight: 400;
text-align: left;
cursor: pointer;
}
.kit-filter-row.on { background: var(--accent-muted); }
.kit-filter-row.on .kit-filter-name { font-weight: 600; }
.kit-filter-tick {
width: 1.1rem;
flex: 0 0 1.1rem;
text-align: center;
color: var(--accent);
font-weight: 700;
}
.kit-filter-name { flex: 1; min-width: 0; }
.kit-filter-n {
font-size: 0.72rem;
color: var(--fg-faint);
}
.kit-filter-clear,
.kit-filter-done {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 24px);
margin: 8px 12px;
min-height: 40px;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
}
.kit-filter-clear {
margin-top: 12px;
border: 1px solid var(--border-strong);
background: transparent;
color: var(--danger);
}
.kit-filter-done {
margin-top: 0;
border: none;
background: var(--accent);
color: #faf9f7;
}
[data-theme="dark"] .kit-filter-done { color: #111110; }
.kit-filter-show-btn:focus-visible,
.kit-filter-row:focus-visible,
.kit-filter-clear:focus-visible,
.kit-filter-done:focus-visible,
.filter-launch:focus-visible,
.applied-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: hover) {
.kit-filter-row:hover { background: var(--bg-hover); }
.kit-filter-row.on:hover { background: var(--accent-muted); }
.kit-filter-show-btn:hover { border-color: var(--border-bright); }
.applied-chip:hover { background: var(--bg-hover); }
}
.kit-filter-row:active,
.kit-filter-show-btn:active,
.kit-filter-clear:active,
.kit-filter-done:active,
.applied-chip:active { opacity: 0.72; }
/* Phone sheet uses large centred action buttons. Reset those inside Filter. */
.ios-sheet.is-filter .ios-sheet-card { max-height: min(82vh, 680px); }
.ios-sheet.is-filter #ios-sheet-options {
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: min(68vh, 560px);
}
.ios-sheet.is-filter .ios-sheet-group button {
justify-content: flex-start;
width: auto;
min-height: 44px;
padding: 8px 12px;
border-bottom: none;
color: var(--fg);
font-size: 17px;
font-weight: 400;
letter-spacing: -0.2px;
text-align: left;
}
.ios-sheet.is-filter .ios-sheet-group button.kit-filter-show-btn {
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
font-size: 15px;
font-weight: 500;
text-align: center;
color: var(--fg);
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: 4px;
}
.ios-sheet.is-filter .ios-sheet-group button.kit-filter-show-btn.on {
background: var(--accent-muted);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
.ios-sheet.is-filter .ios-sheet-group button.kit-filter-row {
width: 100%;
border-radius: 4px;
background: transparent;
}
.ios-sheet.is-filter .ios-sheet-group button.kit-filter-row.on { background: var(--accent-muted); }
.ios-sheet.is-filter .ios-sheet-group button.kit-filter-clear {
justify-content: center;
width: calc(100% - 24px);
margin: 12px;
color: var(--danger);
font-weight: 600;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: transparent;
}
.ios-sheet.is-filter .ios-sheet-group button.ios-sheet-cancel {
justify-content: center;
width: 100%;
min-height: 57px;
padding: 12px 44px;
border-bottom: none;
color: var(--accent);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.38px;
text-align: center;
}
/* Export menu on the inventory list. Same surface as the filter popover.
The list panel lets the menu hang below the header. Each row is a 44px target. */
.export-anchor {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.export-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 8;
min-width: 12.5rem;
max-width: min(18rem, calc(100vw - 1.5rem));
margin: 0;
padding: 4px 0;
list-style: none;
background: var(--bg-panel);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-shadow: 0 16px 40px rgba(17, 17, 16, 0.16);
}
[data-theme="dark"] .export-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.export-menu[hidden] { display: none !important; }
.export-menu a {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: 44px;
padding: 0.4rem 0.9rem;
color: var(--fg);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.2;
}
.export-menu a:hover,
.export-menu a:focus {
background: var(--bg-hover);
color: var(--fg);
}
.export-menu a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.split.list > .panel:first-child {
overflow: visible;
position: relative;
z-index: 2;
}
.split.list > .panel:first-child .panel-header {
position: relative;
z-index: 3;
overflow: visible;
}
@media (max-width: 860px) {
.panel-controls .export-anchor { flex: 1 1 auto; }
.export-anchor .btn {
width: 100%;
justify-content: center;
min-height: 44px;
}
.export-menu {
left: 0;
right: 0;
width: auto;
min-width: 0;
max-width: none;
}
}
/* Item photos. Free plans replace Library and Camera with a note. Stored photos stay. */
.item-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.item-photo {
width: 4.75rem; height: 4.75rem; object-fit: cover;
border-radius: 4px; border: 1px solid var(--border);
background: var(--bg-panel); display: block;
}
.photo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.photo-actions .btn { cursor: pointer; }
.photo-limit-note { margin: 0.35rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.ios-grouped.item-photo-pad { padding: 12px 16px; }
/* App-styled overlay sheets for Export, Import, preview, and Undo.
Not a native