@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { color-scheme: light; }
  img, svg { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; width: 100%; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--type);
    font-family: var(--font);
    font-feature-settings: "tnum", "kern";   /* tabular figures: columns of money line up */
    /* Inter's contextual alternates rewrite "1 x 3T" as "1 × 3T" but leave
       "1 x Wacker" alone, so one column renders two different glyphs, and the
       PDF (which applies no substitutions) matches neither. Turn them off. */
    font-variant-ligatures: no-contextual;
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100vh;
  }
  ::selection { background: var(--accent-soft); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }

  h1, h2, h3 { font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0; }
  strong { font-weight: 600; }
  small { font-size: var(--fs-sm); }
}

@layer layout {
  .frame { max-inline-size: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
  main { padding-block: var(--s-6) var(--s-9); }

  .skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
    background: var(--type); color: #fff; padding: var(--s-3) var(--s-4);
  }
  .skip:focus { inset-inline-start: 0; }

  .stack > * + * { margin-block-start: var(--s-5); }
  .row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
  .cols { display: grid; gap: var(--s-5); }
  @media (min-width: 900px) {
    .cols--2 { grid-template-columns: 1fr 1fr; }
    .cols--3 { grid-template-columns: repeat(3, 1fr); }
    .cols--side { grid-template-columns: 1fr 320px; align-items: start; }
  }
}

@layer components {

  /* ---- Nav -------------------------------------------------- */
  .nav { background: var(--panel); border-block-end: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
  .nav__in {
    max-inline-size: var(--max-w); margin-inline: auto; padding: 0 var(--gutter);
    display: flex; align-items: center; gap: var(--s-6); min-block-size: 58px; flex-wrap: wrap;
  }
  .mark { display: flex; align-items: baseline; gap: var(--s-2); }
  .mark__rule { inline-size: 2px; block-size: 15px; background: var(--accent); align-self: center; }
  .mark__name { font-size: 1.02rem; font-weight: 300; letter-spacing: -0.01em; }
  .mark__sub {
    font-size: 0.58rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--track-up); color: var(--accent);
  }
  .nav__links { display: flex; gap: var(--s-5); margin-inline-end: auto; flex-wrap: wrap; }
  .nav__links a {
    font-size: var(--fs-sm); color: var(--type-mute); padding-block: var(--s-2);
    border-block-end: 1.5px solid transparent;
  }
  .nav__links a:hover { color: var(--type); }
  .nav__links a[aria-current="page"] { color: var(--type); border-block-end-color: var(--accent); }
  .nav__out { display: flex; align-items: center; gap: var(--s-3); }
  .nav__who { font-size: var(--fs-xs); color: var(--type-soft); }

  .banner {
    display: block; background: var(--warn-bg); color: var(--warn);
    border-block-end: 1px solid #e7d5ae; font-size: var(--fs-sm);
    padding: var(--s-3) var(--gutter); text-align: center;
  }
  .banner:hover { text-decoration: underline; }

  /* ---- Micro-label, the house signature ---------------------- */
  .label {
    display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--track-up-sm); color: var(--type-soft);
  }
  .label--accent { color: var(--accent); }

  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-block-end: var(--s-5); }
  .page-head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .lede { color: var(--type-mute); font-size: var(--fs-sm); max-inline-size: 62ch; }

  /* ---- Tiles. Hairline-divided, not a card grid -------------- */
  .tiles {
    display: grid; gap: 0; background: var(--panel);
    border: 1px solid var(--rule); grid-template-columns: 1fr;
  }
  @media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
  .tile { padding: var(--s-5); border-block-start: 1px solid var(--rule); }
  .tile:first-child { border-block-start: 0; }
  @media (min-width: 760px) {
    .tile { border-block-start: 0; border-inline-start: 1px solid var(--rule); }
    .tile:first-child { border-inline-start: 0; }
  }
  .tile__value { font-size: var(--fs-2xl); font-weight: 300; letter-spacing: -0.02em; margin-block-start: var(--s-2); }
  .tile__note { font-size: var(--fs-xs); color: var(--type-soft); margin-block-start: var(--s-1); }
  .tile--flag .tile__value { color: var(--accent); }

  /* ---- Panels ----------------------------------------------- */
  .panel { background: var(--panel); border: 1px solid var(--rule); }
  .panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--rule); flex-wrap: wrap;
  }
  .panel__body { padding: var(--s-5); }
  .panel__body--flush { padding: 0; }

  /* ---- Data tables ------------------------------------------ */
  .data th {
    text-align: left; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--track-up-sm); color: var(--type-soft);
    padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--type);
    white-space: nowrap;
  }
  .data td { padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--rule-faint); vertical-align: top; }
  .data tbody tr:hover { background: var(--panel-2); }
  .data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .data .shrink { width: 1%; white-space: nowrap; }
  .data a.link { color: var(--accent); }
  .data a.link:hover { text-decoration: underline; }
  .data tr.is-muted td { color: var(--type-soft); }
  .data td.tight { padding-block: var(--s-2); }

  .table-scroll { overflow-x: auto; }
  /* On a phone, let the columns keep a readable width and scroll sideways
     rather than squeezing "1 x 1.5T Micro Digger" down to four lines. */
  @media (max-width: 760px) {
    .table-scroll .data { min-inline-size: 640px; }
    /* The first column is always the name of the thing. Give it room, or an
       item description wraps to four one-word lines. */
    .table-scroll .data th:first-child,
    .table-scroll .data td:first-child { min-inline-size: 190px; }
  }

  /* ---- Buttons ---------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-sm); font-weight: 500; padding: var(--s-2) var(--s-4);
    border: 1px solid var(--rule); background: var(--panel); color: var(--type);
    border-radius: var(--radius); white-space: nowrap;
  }
  .btn:hover { border-color: var(--type-soft); }
  .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
  .btn--danger { color: var(--bad); border-color: #e8cdc5; }
  .btn--danger:hover { background: var(--bad-bg); border-color: var(--bad); }
  .btn--quiet { border-color: transparent; color: var(--type-mute); padding-inline: var(--s-2); }
  .btn--quiet:hover { color: var(--type); border-color: var(--rule); }
  .btn--sm { font-size: var(--fs-xs); padding: 3px var(--s-3); }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* ---- Forms ------------------------------------------------ */
  .field { display: block; margin-block-end: var(--s-4); }
  .field > .label { margin-block-end: var(--s-2); }
  .input, select.input, textarea.input {
    inline-size: 100%; background: var(--panel); border: 1px solid var(--rule);
    padding: var(--s-2) var(--s-3); font-size: var(--fs-md); color: var(--type);
    border-radius: var(--radius); min-block-size: 34px;
  }
  .input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
  textarea.input { min-block-size: 76px; resize: vertical; }
  .input--num { text-align: right; font-variant-numeric: tabular-nums; }
  .hint { font-size: var(--fs-xs); color: var(--type-soft); margin-block-start: var(--s-1); }
  .field-row { display: grid; gap: var(--s-3); }
  @media (min-width: 700px) {
    .field-row--2 { grid-template-columns: 1fr 1fr; }
    .field-row--3 { grid-template-columns: repeat(3, 1fr); }
    .field-row--4 { grid-template-columns: repeat(4, 1fr); }
  }
  .prefix { position: relative; }
  .prefix > .input { padding-inline-start: 22px; }
  .prefix::before {
    content: "£"; position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%);
    color: var(--type-soft); font-size: var(--fs-sm); pointer-events: none;
  }
  .check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
  .check input { inline-size: 15px; block-size: 15px; accent-color: var(--accent); }

  /* ---- Pills ------------------------------------------------ */
  .pill {
    display: inline-block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--track-up-sm); padding: 2px var(--s-2); border-radius: var(--radius);
    background: var(--bg-2); color: var(--type-mute);
  }
  .pill--on { background: var(--ok-bg); color: var(--ok); }
  .pill--off { background: var(--warn-bg); color: var(--warn); }
  .pill--closed { background: var(--bg-2); color: var(--type-soft); }
  .pill--draft { background: var(--info-bg); color: var(--info); }
  .pill--issued { background: var(--ok-bg); color: var(--ok); }
  .pill--credit { background: var(--bad-bg); color: var(--bad); }

  /* ---- Alerts + toast --------------------------------------- */
  .alert { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); border: 1px solid; border-radius: var(--radius); }
  .alert--error { background: var(--bad-bg); border-color: #e8cdc5; color: var(--bad); }
  .alert--warn  { background: var(--warn-bg); border-color: #e7d5ae; color: var(--warn); }
  .alert--ok    { background: var(--ok-bg); border-color: #c3ddd0; color: var(--ok); }
  .alert--info  { background: var(--info-bg); border-color: #cbd8f0; color: var(--info); }
  .alert + .alert { margin-block-start: var(--s-3); }

  .toast {
    position: fixed; inset-block-end: var(--s-5); inset-inline-start: 50%; transform: translateX(-50%);
    background: var(--type); color: #fff; padding: var(--s-3) var(--s-5); font-size: var(--fs-sm);
    z-index: 60; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(15,26,36,0.22);
  }
  .toast--bad { background: var(--bad); }

  /* ---- Modal ------------------------------------------------ */
  .modal-back {
    position: fixed; inset: 0; background: rgba(15,26,36,0.4); z-index: 50;
    display: flex; align-items: flex-start; justify-content: center; padding: var(--s-6) var(--s-4); overflow-y: auto;
  }
  .modal {
    background: var(--panel); border: 1px solid var(--rule); inline-size: min(620px, 100%);
    box-shadow: 0 20px 60px rgba(15,26,36,0.2);
  }
  .modal__head { padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; }
  .modal__body { padding: var(--s-5); }
  .modal__foot { padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--rule); display: flex; gap: var(--s-2); justify-content: flex-end; }

  /* ---- Empty ------------------------------------------------ */
  .empty { padding: var(--s-7) var(--s-5); text-align: center; color: var(--type-soft); font-size: var(--fs-sm); }

  /* ---- Hire tape --------------------------------------------
     The bespoke touch, and the one piece of chrome that earns its
     place: lightrole.co.uk's mils bearing tape rebuilt to answer
     "how long has this been out, and how much of it have we
     billed". Weekly ticks, a billed-to caret and an off-hire caret.
     ----------------------------------------------------------- */
  .tape { padding: var(--s-5) var(--s-5) var(--s-6); }
  .tape__scale { position: relative; block-size: 46px; margin-block-start: var(--s-5); }
  .tape__line { position: absolute; inset-inline: 0; top: 22px; block-size: 1px; background: var(--rule); }
  .tape__fill { position: absolute; top: 21px; block-size: 3px; background: var(--accent-soft); }
  .tape__billed { position: absolute; top: 21px; block-size: 3px; background: var(--accent); }
  .tape__tick { position: absolute; top: 15px; inline-size: 1px; block-size: 8px; background: var(--rule); }
  .tape__tick--major { top: 12px; block-size: 11px; background: var(--type-soft); }
  .tape__tick-label {
    position: absolute; top: 0; font-size: 0.6rem; line-height: 1; color: var(--type-soft);
    transform: translateX(-50%); white-space: nowrap;
  }
  /* The marker and its label are positioned separately so a caret sitting at
     either end of the scale keeps its point on the right date while the text
     tucks back inside the panel instead of hanging off the edge. */
  .tape__caret { position: absolute; top: 26px; inline-size: 8px; transform: translateX(-50%); }
  .tape__caret::before {
    content: ""; display: block; inline-size: 0; block-size: 0; margin-inline: auto;
    border-inline: 4px solid transparent; border-block-end: 5px solid currentColor;
  }
  .tape__caret-label {
    position: absolute; top: 33px; font-size: 0.6rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--track-up-sm); white-space: nowrap;
  }
  .tape__caret--billed { color: var(--accent); }
  .tape__caret--off { color: var(--bad); }
  .tape__caret--today { color: var(--type-soft); }
  .tape__legend { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--type-soft); }

  /* ---- Invoice preview, the on-screen twin of the PDF -------- */
  .doc {
    background: #fff; border: 1px solid var(--rule); padding: clamp(20px, 4vw, 44px);
    max-inline-size: 840px;
  }
  .doc__head { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
  .doc__co { text-align: right; font-size: var(--fs-xs); color: var(--type-mute); line-height: 1.7; }
  .doc__title { font-size: var(--fs-3xl); font-weight: 300; letter-spacing: -0.02em; }
  .doc__title::after { content: ""; display: block; inline-size: 34px; block-size: 2px; background: var(--accent); margin-block-start: var(--s-2); }
  /* Sits beside the title, so it must not take the reset's width:100%. */
  .doc__meta { inline-size: auto; }
  .doc__meta td { padding: 2px 0 2px var(--s-5); font-size: var(--fs-sm); white-space: nowrap; }
  .doc__meta td:first-child { padding-inline-start: 0; }
  .doc__parties { display: grid; gap: var(--s-5); margin-block: var(--s-5); }
  @media (min-width: 640px) { .doc__parties { grid-template-columns: 1fr 1fr; } }
  .doc hr { border: 0; border-block-start: 1px solid var(--rule); margin-block: var(--s-4); }
  .doc__totals { margin-inline-start: auto; inline-size: min(320px, 100%); }
  .doc__totals td { padding: var(--s-2) 0; font-size: var(--fs-sm); }
  .doc__totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
  .doc__totals tr.grand td { border-block-start: 2px solid var(--type); font-size: var(--fs-lg); font-weight: 600; padding-block-start: var(--s-3); }
  .doc__foot { display: grid; gap: var(--s-5); margin-block-start: var(--s-5); font-size: var(--fs-xs); color: var(--type-mute); }
  @media (min-width: 700px) { .doc__foot { grid-template-columns: repeat(3, 1fr); } }
}

@layer utilities {
  .mute { color: var(--type-mute); }
  .soft { color: var(--type-soft); }
  .num { font-variant-numeric: tabular-nums; }
  .right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .neg { color: var(--bad); }
  .pos { color: var(--ok); }
  .hidden { display: none !important; }
  .mt-0 { margin-block-start: 0; }
  .mt-3 { margin-block-start: var(--s-3); }
  .mt-4 { margin-block-start: var(--s-4); }
  .mt-5 { margin-block-start: var(--s-5); }
  .mt-6 { margin-block-start: var(--s-6); }
  .flex { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
  .flex-end { justify-content: flex-end; }
  .grow { flex: 1; }
}

@media print {
  .nav, .banner, .page-head__actions, .btn, .skip { display: none !important; }
  body { background: #fff; }
  .doc { border: 0; padding: 0; max-inline-size: none; }
}