/*
    RIPROKA TRACK - the public tracking pages. Phone first (390px is the design width), one column,
    the status before anything else. Every value is a token from rk-tokens.css (Riproka.UI.Controls),
    so the job ticket a customer sees wears the same paper, ink and safety orange as the portal.
*/

*, *::before, *::after { box-sizing: border-box; }

body.tk {
    margin: 0;
    background: var(--rk-paper);
    color: var(--rk-ink);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-base);
}

.tk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-12) var(--rk-sp-16);
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
}

.tk-brand {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-3xl);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.tk-bar-tag {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-chrome-mute);
    text-transform: uppercase;
}

.tk-main {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--rk-sp-16);
    display: grid;
    gap: var(--rk-sp-16);
}

.tk--embed .tk-main { padding: var(--rk-sp-8); }

/* A GRID ITEM IS AS WIDE AS ITS WIDEST WORD BY DEFAULT - and a booked window in mono is wider than a
   390px phone. min-width: 0 lets every card shrink to the screen; the times wrap instead. */
.tk-main { grid-template-columns: minmax(0, 1fr); }
.tk-main > * { min-width: 0; }
.tk-times dd { overflow-wrap: anywhere; }

.tk-card {
    background: var(--rk-card);
    border: var(--rk-border-card);
    border-radius: var(--rk-radius-md);
    box-shadow: var(--rk-shadow-card);
    padding: var(--rk-sp-16);
}

.tk-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-12);
}

.tk-job {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.tk-h1 {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-6xl);
    line-height: var(--rk-lh-tight);
    margin: var(--rk-sp-12) 0 var(--rk-sp-8);
}

.tk-lede { margin: 0 0 var(--rk-sp-12); color: var(--rk-ink-soft); }

.tk-meta, .tk-fine, .tk-foot { margin: 0; font-size: var(--rk-fs-sm); color: var(--rk-ink-soft); }

.tk-foot { padding: 0 var(--rk-sp-8); }

/* The status stamp - the job ticket's rubber stamp. */
.tk-stamp {
    display: inline-block;
    padding: var(--rk-sp-4) var(--rk-sp-12);
    border: 2px solid currentColor;
    border-radius: var(--rk-radius-sm);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-xl);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-lg);
    transform: rotate(var(--rk-stamp-tilt));
    color: var(--rk-steel);
}

.tk-stamp--ontheway { color: var(--rk-accent-ink); background: var(--rk-accent-soft); }
.tk-stamp--inprogress { color: var(--rk-warn-ink); background: var(--rk-warn-soft); }
.tk-stamp--complete { color: var(--rk-ok-ink); background: var(--rk-ok-soft); }
.tk-stamp--cancelled { color: var(--rk-danger-ink); background: var(--rk-danger-soft); }

/* The map - tiles and pins drawn by track.js; no library. */
.tk-card--map { padding: 0; overflow: hidden; }

.tk-map {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--rk-skeleton);
}

.tk-map img.tk-tile {
    position: absolute;
    width: 256px;
    height: 256px;
    max-width: none;
    user-select: none;
}

.tk-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--rk-sp-24);
    height: var(--rk-sp-24);
    border-radius: var(--rk-radius-circle);
    border: 3px solid var(--rk-white);
    box-shadow: var(--rk-shadow-drop);
    background: var(--rk-steel);
    display: grid;
    place-items: center;
    color: var(--rk-on-fill);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-xs);
}

.tk-pin--pickup { background: var(--rk-accent-deep); }
.tk-pin--dropoff { background: var(--rk-chrome-bg); }
.tk-pin--delivered { background: var(--rk-ok); width: var(--rk-sp-14); height: var(--rk-sp-14); }
.tk-pin--driver { background: var(--rk-accent); width: var(--rk-sp-28); height: var(--rk-sp-28); z-index: 1; }
.tk-pin.is-done { opacity: 0.55; }

.tk-map-credit {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px var(--rk-sp-8);
    background: var(--rk-card-veil);
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
}

/* The stops. */
.tk-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rk-sp-12); }

.tk-leg { border-left: 6px solid var(--rk-line-hard); }
.tk-leg.is-moving { border-left-color: var(--rk-accent); }
.tk-leg.is-done { border-left-color: var(--rk-ok); }

.tk-leg-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rk-sp-12); }

.tk-leg-kind {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-3xl);
    text-transform: uppercase;
}

.tk-leg-status { font-weight: var(--rk-fw-semibold); }
.tk-leg.is-moving .tk-leg-status { color: var(--rk-accent-ink); }
.tk-leg.is-done .tk-leg-status { color: var(--rk-ok-ink); }

.tk-leg-site { margin: var(--rk-sp-8) 0 0; font-weight: var(--rk-fw-semibold); }
.tk-leg-addr { margin: var(--rk-sp-4) 0 0; color: var(--rk-ink-soft); }

.tk-times {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: var(--rk-sp-12) 0 0;
    font-size: var(--rk-fs-lg);
}

.tk-times dt { color: var(--rk-ink-soft); }
.tk-times dd { margin: 0; font-family: var(--rk-font-mono); }

/* The lookup form. */
.tk-form { display: grid; gap: var(--rk-sp-12); margin: 0 0 var(--rk-sp-12); }
.tk-form--inline { margin: 0; }

.tk-label { display: grid; gap: var(--rk-sp-4); font-weight: var(--rk-fw-semibold); font-size: var(--rk-fs-sm); }

.tk-input {
    min-height: var(--rk-tap);
    padding: 0 var(--rk-sp-12);
    border: var(--rk-border);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-field);
    color: var(--rk-ink);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-input);
}

.tk-input--code { letter-spacing: var(--rk-track-3xl); }

.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rk-tap);
    padding: 0 var(--rk-sp-20);
    border: 0;
    border-radius: var(--rk-radius-sm);
    background: var(--rk-accent-deep);
    color: var(--rk-on-fill);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-md);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.tk-btn--ghost {
    background: transparent;
    color: var(--rk-ink);
    border: var(--rk-border);
}

.tk-error {
    margin: 0 0 var(--rk-sp-12);
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-danger-soft);
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-semibold);
}

.tk a { color: var(--rk-accent-ink); }

/* ---------------------------------------------------------------------------------------------
   THE BOOKING PAGE (lane AR, 2026-10-13) - /book/{code}. The same paper, ink and safety orange.
   --------------------------------------------------------------------------------------------- */
.tk-book { gap: var(--rk-sp-16); }

.tk-fieldset { margin: 0; min-width: 0; display: grid; gap: var(--rk-sp-12); }

.tk-sub {
    padding: 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-2xl);
    text-transform: uppercase;
}

/* Side by side even on a 390px phone - each field is short (a name, a phone, a ZIP), and a form half
   the length is a form that gets finished. */
.tk-grid2, .tk-grid3, .tk-grid-street { display: grid; gap: var(--rk-sp-8); }
.tk-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-grid3 { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.2fr); }
.tk-grid-street { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.tk-grid-when { display: grid; gap: var(--rk-sp-8); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* AN INPUT'S INTRINSIC WIDTH (its size attribute) would push a two-up row past the card's edge on a
   phone: the label and the input may shrink to their column. */
.tk-book .tk-label { min-width: 0; }
.tk-book .tk-input { width: 100%; min-width: 0; }

.tk-address { display: grid; gap: var(--rk-sp-12); }
.tk-address[hidden] { display: none; }

.tk-stop { border-left: 6px solid var(--rk-line-hard); }

.tk-choices { display: grid; gap: var(--rk-sp-8); }

.tk-choice, .tk-check {
    display: flex;
    gap: var(--rk-sp-12);
    align-items: flex-start;
    padding: var(--rk-sp-12);
    border: var(--rk-border);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-field);
    font-size: var(--rk-fs-sm);
    cursor: pointer;
}

.tk-choice input, .tk-check input { margin-top: var(--rk-sp-4); min-width: var(--rk-sp-20); min-height: var(--rk-sp-20); }
.tk-choice small { color: var(--rk-ink-soft); }

.tk-textarea { min-height: calc(var(--rk-tap) * 2); padding: var(--rk-sp-8) var(--rk-sp-12); font-family: var(--rk-font-body); }

select.tk-input { font-family: var(--rk-font-body); }

.tk-note {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

.tk-btn--wide { width: 100%; }

/* A LINK DRESSED AS A BUTTON ("Track it") keeps the button's ink - `.tk a` would otherwise paint its
   text the accent on an accent fill, and the button reads as an empty orange box. */
.tk a.tk-btn { color: var(--rk-on-fill); }

.tk-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rk-accent-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}