/**
 * Skip Manager component library. Reads tokens.css only: no raw colours, radii or sizes.
 * Live reference: docs/styleguide.html. Add new components here, never inline in a page.
 *
 * Contents
 *   1 Buttons        .btn
 *   2 Type + status  .type-chip .type-tile .type-band .status
 *   3 Cards          .card
 *   4 Stats          .stat-strip .stat-card .inventory-tile
 *   5 Forms          .field .input .seg .choice-tile .size-chip .chip .tag
 *   6 Lists          .list-row .timeline .empty-state .avatar
 *   7 Overlays       .sheet .toast
 */

/* ---------- 1 Buttons ----------
   Variants: --primary (accent, one per view) --tonal --secondary --ghost --danger
   Sizes: default 48px, --lg 56px.  Modifiers: --block --icon                       */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--btn-h-md);
    padding: 0 var(--sp-5);
    border: 0;
    border-radius: var(--r-lg);
    font-size: var(--fs-4);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-1);
    background: var(--surface-2);
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn--primary:hover { background: var(--accent-press); }
.btn--tonal { background: var(--accent-tint); color: var(--accent-ink); }
.btn--secondary { background: var(--surface); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }
.btn--danger { background: var(--danger-tint); color: var(--danger-ink); }

.btn--lg { min-height: var(--btn-h-lg); font-size: var(--fs-5); font-weight: 700; border-radius: var(--r-xl); }
.btn--sm { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-3); border-radius: var(--r-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--tap); min-height: var(--tap); padding: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: var(--fs-5); }
.btn--icon:hover { background: var(--surface-2); color: var(--text-1); }

/* ---------- 2 Type + status ----------
   Put data-type="skip|roro|hiab|none" on the element (or any ancestor).        */
.type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    background: var(--t-tint);
    color: var(--t-on);
    font-size: var(--fs-2);
    font-weight: 700;
}
.type-chip i { color: var(--t); }

.type-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--t-tint);
    color: var(--t);
    font-size: var(--fs-5);
}
.type-tile--sm { width: 32px; height: 32px; border-radius: var(--r-sm); font-size: var(--fs-4); }

.type-band {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-4);
    background: var(--t-tint);
    color: var(--t-on);
    font-size: var(--fs-3);
    font-weight: 700;
}
.type-band i { color: var(--t); }
.type-band__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-band__meta { font-weight: 600; }

/* Neutral pill with a coloured dot. Set data-status on it. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-2);
    font-weight: 600;
    white-space: nowrap;
}
.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--s, var(--text-3));
}

/* ---------- 3 Cards ---------- */
.card {
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.card--pad { padding: var(--sp-4); }
.card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.card__title { font-size: var(--fs-5); font-weight: 700; margin: 0; }
.card__sub { font-size: var(--fs-3); color: var(--text-2); }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-3); color: var(--text-2); }
.meta--danger { color: var(--danger-ink); font-weight: 600; }

/* Tap-to-expand note preview (two lines). Button reset so it can hold the text. */
.note-preview {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-3);
    line-height: 1.4;
    text-align: left;
}
.note-preview__line { display: flex; gap: 8px; }
.note-preview__line > i { flex: none; margin-top: 3px; }
.note-preview__line > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-preview__line--urgent { color: var(--danger-ink); font-weight: 600; }

.card__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.card__actions-row { display: flex; gap: var(--sp-2); }
.card__actions-row > .btn { flex: 1; min-width: 0; padding: 0 var(--sp-3); }
.card--wash { background: var(--t-wash); } /* only for the 1a treatment; default cards stay neutral */
.card--alert { background: var(--danger-tint); color: var(--danger-ink); box-shadow: none; }

.section-label {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---------- 4 Stats ---------- */
.stat-card { padding: var(--sp-4); }
.stat-card__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); font-weight: 600; color: var(--text-2); }
.stat-card__value { font-size: var(--fs-8); font-weight: 800; letter-spacing: -.02em; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.stat-card__hint { font-size: var(--fs-2); color: var(--text-3); }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.stat-strip__item { padding: 10px var(--sp-3); }
.stat-strip__item + .stat-strip__item { border-left: 1px solid var(--border); }
.stat-strip--3 { grid-template-columns: repeat(3, 1fr); }
.stat-strip--3 .stat-strip__item:nth-child(3n+1) { border-left: 0; }
.stat-strip--3 .stat-strip__item:nth-child(n+4) { border-top: 1px solid var(--border); }
.stat-strip__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-strip__label { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); }

.stat-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; }
.stat-pill { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); border-radius: 10px; background: var(--surface-2); }
.stat-pill__value { font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-pill__label { display: flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 600; color: var(--text-2); }
.stat-pill__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--s, var(--text-3)); }

.inventory-tile { display: block; color: inherit; text-decoration: none; }
.inventory-tile__figures { display: flex; align-items: baseline; gap: 6px; }
.inventory-tile__free { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.inventory-tile__of { font-size: var(--fs-4); color: var(--text-2); }
.inventory-tile__out { margin-left: auto; font-size: var(--fs-3); color: var(--text-2); }
.bar3 { display: flex; height: 8px; gap: 2px; border-radius: var(--r-xs); overflow: hidden; background: var(--surface-2); }
.bar3__free { background: var(--t); }
.bar3__out { background: var(--t-tint); }
.bar3__maint { background: var(--text-3); }

/* ---------- 5 Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-3); font-weight: 600; color: var(--text-2); }
.field__hint { font-size: var(--fs-2); color: var(--text-3); }
.field__error { font-size: var(--fs-3); font-weight: 600; color: var(--danger-ink); }

.input,
.select,
.textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-1);
    font-size: 16px; /* 16px stops iOS zooming on focus */
    box-shadow: inset 0 0 0 1px var(--border-strong);
    transition: box-shadow var(--dur-fast) var(--ease);
}
.textarea { min-height: 96px; padding: var(--sp-3) 14px; resize: vertical; line-height: var(--lh-body); }
.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }
.input:focus,
.select:focus,
.textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-tint); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }

.search { position: relative; }
.search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search > .input { padding-left: 42px; min-height: var(--btn-h-md); }

/* Segmented control. Buttons with aria-pressed, or .is-active. */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); }
.seg__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-3);
    font-weight: 600;
}
.seg__opt.is-active,
.seg__opt[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-1); }

/* Type tile picker: uses the type colour only when selected. */
.choice-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 76px;
    padding: var(--sp-3);
    border: 0;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-3);
    font-weight: 700;
}
.choice-tile i { font-size: 22px; }
.choice-tile.is-selected,
.choice-tile[aria-pressed="true"] { background: var(--t-tint); color: var(--t-on); box-shadow: inset 0 0 0 2px var(--t); }
.choice-tile.is-selected i,
.choice-tile[aria-pressed="true"] i { color: var(--t); }

.size-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: var(--tap);
    padding: 6px var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--text-1);
    font-size: var(--fs-4);
    font-weight: 700;
}
.size-chip small { font-size: var(--fs-1); font-weight: 600; color: var(--text-3); }
.size-chip.is-selected,
.size-chip[aria-pressed="true"] { background: var(--t-tint); color: var(--t-on); box-shadow: inset 0 0 0 2px var(--t); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    white-space: nowrap;
    min-height: 36px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-3);
    font-weight: 600;
    text-decoration: none;
}
.chip.is-active,
.chip[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); }

.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-1); font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.tag--request { background: var(--accent-tint); color: var(--accent-ink); }
.tag--urgent,
.tag--hot { background: var(--danger-tint); color: var(--danger-ink); }
.tag--warn { background: var(--warning-tint); color: var(--warning-ink); }
.tag--ok { background: var(--success-tint); color: var(--success-ink); }

/* ---------- 6 Lists ---------- */
.list { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.list-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-3) var(--sp-4);
    color: inherit;
    text-decoration: none;
}
.list-row + .list-row { border-top: 1px solid var(--border); }
.list-row > i:first-child { width: 20px; text-align: center; color: var(--text-2); }
.list-row__main { flex: 1; min-width: 0; }
.list-row__title,
.list-row__sub { display: block; }
.list-row__title { font-size: var(--fs-4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__sub { font-size: var(--fs-3); color: var(--text-2); }
.list-row__end { text-align: right; font-size: var(--fs-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.list-row__end--owed { color: var(--danger-ink); }
.list-row__chev { color: var(--text-3); font-size: var(--fs-2); }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-size: var(--fs-4); font-weight: 700; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline__item { position: relative; display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); }
.timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--surface-3); }
.timeline__icon { flex: none; width: 24px; text-align: center; padding-top: 2px; color: var(--text-2); }
.timeline__title { font-size: var(--fs-4); font-weight: 600; }
.timeline__meta { font-size: var(--fs-3); color: var(--text-3); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-2); }
.empty-state > i { font-size: 32px; color: var(--text-3); }
.empty-state__title { font-size: var(--fs-5); font-weight: 700; color: var(--text-1); }

.banner { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-3); font-weight: 500; }
.banner--warning { background: var(--warning-tint); color: var(--warning-ink); }
.banner--danger { background: var(--danger-tint); color: var(--danger-ink); }
.banner--success { background: var(--success-tint); color: var(--success-ink); }
.banner--info { background: var(--info-tint); color: var(--info-ink); }

.fab {
    position: fixed;
    right: var(--sp-4);
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-3);
}
@media (min-width: 768px) { .fab { bottom: var(--sp-6); right: var(--sp-6); } }

/* ---------- 7 Overlays ----------
   Markup: <div class="sheet" id="x" hidden> <div class="sheet__scrim" data-sheet-close></div>
             <div class="sheet__panel" role="dialog" aria-modal="true"> <div class="sheet__grab"></div> ... </div> </div>
   Open/close with ui.js: UI.openSheet('x') / UI.closeSheet('x'). Bottom sheet on mobile, centred dialog from 768px. */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade-in var(--dur-base) var(--ease); }
.sheet__panel {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-6) + var(--safe-bottom));
    background: var(--surface);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    box-shadow: var(--shadow-2);
    animation: sheet-up var(--dur-slow) var(--ease);
}
.sheet__grab { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.sheet__title { margin: 0; font-size: var(--fs-6); font-weight: 700; }
.sheet__body { font-size: var(--fs-4); color: var(--text-2); white-space: pre-line; }
.sheet__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
@media (min-width: 768px) {
    .sheet { align-items: center; }
    .sheet__panel { max-width: var(--dialog-w); border-radius: var(--r-sheet); padding: var(--sp-6); box-shadow: var(--shadow-3); animation: fade-in var(--dur-base) var(--ease); }
    .sheet__grab { display: none; }
    .sheet__actions { flex-direction: row-reverse; }
    .sheet__actions > .btn { flex: 1; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4));
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: var(--r-lg);
    background: var(--text-1);
    color: var(--bg);
    font-size: var(--fs-4);
    font-weight: 600;
    box-shadow: var(--shadow-3);
    transform: translateX(-50%);
    animation: toast-in var(--dur-base) var(--ease);
}
.toast--success i { color: var(--success); }
.toast--error i { color: var(--danger); }
@media (min-width: 768px) { .toast { bottom: var(--sp-6); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }