/*
 * styles.css
 * The visual system shared by every screen of the Northbound Ink store system.
 *
 * Where it comes from: a small independent bookstore in the north woods of Minnesota.
 * Ink, birch bark, white pine, lake water, and the gold a tamarack turns in October.
 * Headings are set in a bookish serif that is already on the device; everything a person
 * reads or types at speed is in the device's own plain face. No font is downloaded, so
 * nothing loads from another site and the counter screen works on a slow connection.
 *
 * Rules kept throughout:
 *   - colour is never the only signal: every state also has words;
 *   - every control shows clearly when it has keyboard focus;
 *   - controls are large enough to tap at a counter (44px or more);
 *   - the layout works from a phone to a wide monitor;
 *   - nothing moves unless the person asked for it, and not at all if they have asked
 *     their device to reduce motion.
 */

:root {
  /* colour */
  --ink: #18222d;          /* text; the deep blue-black of a fresh bottle */
  --ink-soft: #4a5663;     /* secondary text */
  --birch: #f5f6f2;        /* the page */
  --paper: #ffffff;        /* a surface to write on */
  --line: #cfd5cf;         /* a rule between things */
  --pine: #1f5a45;         /* the main action */
  --pine-deep: #153f31;
  --lake: #245f80;         /* a link; something to know */
  --tamarack: #8a6100;     /* attention that can wait (text on a light ground) */
  --tamarack-wash: #fbf1d3;
  --sumac: #9b2330;        /* attention that cannot wait; an action that removes access */
  --sumac-wash: #fbe6e7;
  --moss-wash: #e2efe6;    /* done */
  --focus: #0b57d0;

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --size-small: 0.875rem;
  --size-body: 1rem;
  --size-lead: 1.25rem;
  --size-title: 1.75rem;
  --size-display: 2.25rem;

  /* space, on a 4px step */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s6: 1.5rem; --s8: 2rem; --s12: 3rem;

  --tap: 2.75rem;          /* 44px: the smallest thing anyone is asked to tap */
  --radius: 4px;
  --measure: 68ch;
}

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

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--birch);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--size-body);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 var(--s3); text-wrap: balance; }
h1 { font-size: var(--size-display); letter-spacing: -0.01em; }
h2 { font-size: var(--size-title); }
h3 { font-size: var(--size-lead); }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
a { color: var(--lake); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ the TEST marker
   A TEST system holds practice data only and must never be mistaken for the real store.
   The marker is on every screen, in words, and stays in view. It is the one loud thing. */
.test-marker {
  position: sticky; top: 0; z-index: 10;
  padding: var(--s2) var(--s4);
  background: repeating-linear-gradient(135deg, #f1c84b 0 14px, #f7dc86 14px 28px);
  color: #2a2000;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid #2a2000;
}

/* ------------------------------------------------------------ the frame */
.frame { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6);
  padding: var(--s4) var(--s4) var(--s3);
  background: var(--ink); color: var(--birch);
}
.masthead-name { font-family: var(--serif); font-size: var(--size-lead); font-weight: 600; margin: 0; }
.masthead-who { margin: 0 0 0 auto; font-size: var(--size-small); color: #c9d2da; }

.rail { background: var(--paper); border-bottom: 1px solid var(--line); }
.rail ul { list-style: none; margin: 0; padding: var(--s2) var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.rail button {
  min-height: var(--tap); padding: var(--s2) var(--s4);
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.rail button:hover { background: var(--birch); }
.rail .more-options { flex-basis: 100%; }
.rail details summary { padding-inline: var(--s4); font-weight: 400; }
.rail details ul { padding-block: 0; }
@media (min-width: 60rem) { .rail details summary { padding-inline: var(--s8); } }
.rail button[aria-current="page"] { border-bottom-color: var(--pine); font-weight: 600; }

.screen { padding: var(--s6) var(--s4) var(--s12); max-width: 72rem; width: 100%; }
.screen > section + section { margin-top: var(--s8); }

@media (min-width: 60rem) {
  .frame { grid-template-columns: 15rem 1fr; grid-template-rows: auto 1fr; }
  .masthead { grid-column: 1 / -1; padding-inline: var(--s8); }
  .rail { border-bottom: 0; border-right: 1px solid var(--line); }
  .rail ul { flex-direction: column; padding: var(--s6) 0; gap: 0; }
  .rail button { width: 100%; padding-inline: var(--s8); border-bottom: 0; border-left: 4px solid transparent; }
  .rail button[aria-current="page"] { border-left-color: var(--pine); background: var(--birch); }
  .screen { padding: var(--s8); }
}

/* ------------------------------------------------------------ messages
   Each kind differs in its edge, its ground, and its first word, not in colour alone. */
.notice { padding: var(--s3) var(--s4); border-left: 6px solid var(--lake); background: var(--paper); margin: 0 0 var(--s4); max-width: var(--measure); }
.notice p { margin: 0; }
.notice p + * { margin-top: var(--s3); }
.notice-success { border-left-color: var(--pine); background: var(--moss-wash); }
.notice-warning { border-left-color: var(--tamarack); background: var(--tamarack-wash); }
.notice-blocking { border-left-color: var(--sumac); background: var(--sumac-wash); font-weight: 600; }

.attention { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: var(--measure); }
.attention li { padding: var(--s4); background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--tamarack); }
.attention li[data-level="BLOCKING"] { border-left-color: var(--sumac); }
.attention h3 { margin-bottom: var(--s1); }
.attention p { margin: 0; color: var(--ink-soft); }
.attention .level { font-weight: 700; color: var(--ink); }

.empty { color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------------------ controls */
.button {
  min-height: var(--tap); padding: var(--s2) var(--s4);
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius); border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.button:hover { background: var(--birch); }
.button-primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.button-primary:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.button-danger { border-color: var(--sumac); color: var(--sumac); }
.button-danger:hover { background: var(--sumac-wash); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.field { display: grid; gap: var(--s1); margin: 0 0 var(--s4); max-width: 28rem; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea {
  min-height: var(--tap); padding: var(--s2) var(--s3);
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink-soft); border-radius: var(--radius);
}
.field-hint { margin: 0; font-size: var(--size-small); color: var(--ink-soft); }
form.panel { padding: var(--s4); background: var(--paper); border: 1px solid var(--line); max-width: 32rem; }

/* ------------------------------------------------------------ tables
   On a narrow screen each row becomes a small card and every cell carries its own title. */
table { width: 100%; border-collapse: collapse; background: var(--paper); }
caption { text-align: left; font-family: var(--serif); font-size: var(--size-lead); font-weight: 600; padding: 0 0 var(--s2); background: var(--birch); }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
th { font-size: var(--size-small); color: var(--ink-soft); font-weight: 600; }
td { overflow-wrap: anywhere; }
.status { font-weight: 600; }
.status-off { color: var(--sumac); }

@media (max-width: 44rem) {
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  td { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s2); border: 0; padding: var(--s1) var(--s4); }
  td::before { content: attr(data-title); font-size: var(--size-small); color: var(--ink-soft); }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .rail button { transition: background-color 120ms ease-out; }
}

@media print {
  .rail, .actions, .button { display: none; }
  body { background: #fff; }
}

/* Phase 2 application and owner review. */
.application-page { max-width: 58rem; margin-inline: auto; }
fieldset { min-width: 0; border: 1px solid var(--line); padding: 1rem; margin-block: 1rem; border-radius: .5rem; }
legend { font-family: var(--serif); font-size: 1.25rem; padding-inline: .4rem; }
.agreement-section { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: .75rem; }
.acknowledgment { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 600; margin-block: 1rem; }
.acknowledgment input { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
textarea { width: 100%; min-height: 8rem; font: inherit; padding: .65rem; border: 1px solid var(--line); border-radius: .3rem; }
.split-preview { background: var(--moss-wash); padding: .75rem; border-radius: .3rem; }
.evidence { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; max-height: 32rem; overflow: auto; }
summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-weight: 600; }
@media (max-width: 40rem) { .application-page { padding-inline: .75rem; } fieldset { padding: .75rem; } }

/* Phase 4 counter: readable totals, keyboard scan and generous touch controls. */
.checkout-workspace { max-width: 64rem; }
.checkout-total { padding: 1.25rem; margin-block: 1rem; background: var(--moss-wash); border: 2px solid var(--pine); border-radius: var(--radius); font-size: 1.5rem; }
.checkout-total p { font-size: 1rem; }
.checkout-workspace .actions .button { min-width: 8rem; min-height: 3.5rem; }
input[type="checkbox"] { accent-color: var(--pine); }
@media (max-width: 44rem) { .checkout-total { font-size: 1.35rem; } .checkout-workspace .actions .button { flex: 1; } }

/* Item 23: SVG physical dimensions come from a checked template. One label per page. */
.label-preview {display:flex;flex-wrap:wrap;gap:1rem;overflow:auto;padding:1rem;background:#ddd;}
.label-preview svg {flex-shrink:0;max-width:none;border:1px solid #999;}
.label-print-surface {display:none;}
@media print {
 @page {margin:0;}
 body > :not(.label-print-surface) {display:none !important;}
 body {margin:0;padding:0;background:white;}
 .label-print-surface {display:block;margin:0;padding:0;}
 .label-print-surface svg {display:block;break-after:page;page-break-after:always;max-width:none;border:0;}
 .label-print-surface svg:last-child {break-after:auto;page-break-after:auto;}
}

/* Rear-camera scanning on iPhone and Android; no camera data is uploaded. */
.camera-scanner { margin-bottom: 1rem; }
.camera-panel { max-width: 38rem; padding: 1rem; margin-top: .75rem; border: 2px solid var(--pine); }
.camera-panel video { display: block; width: 100%; max-height: 24rem; background: #000; object-fit: contain; margin-block: .75rem; }
.camera-panel[hidden] { display: none; }

.frame > div, .screen { min-width: 0; }
.checkout-items { max-width: 100%; overflow-x: auto; }

.camera-scanner > button { min-height: 4rem; font-size: 1.3rem; }
@media (max-width: 44rem) { .camera-scanner > button { width: 100%; } }