/* Material Kit Maker — shared look, in the design language of "Yardline Office in Orbit":
   graphite surfaces, dark by default with a light mode, amber as the action colour,
   soft shadows, system fonts (no web fonts), mono for every code, quantity and time.
   Used by the app, the receiver page, the check page and the privacy notice. */
:root {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --bg: #0d1116; --bg-2: #121820; --surface: #161d26; --surface-2: #1c242f; --surface-3: #232d3a;
  --line: #2b3746; --line-soft: #222c39;
  --text: #e6ecf3; --text-2: #a3b1c2; --text-3: #71808f;
  --amber: #ffb020; --amber-hover: #ffc04a; --amber-ink: #1a1200; --amber-dim: #4a3208;
  --ok: #3ecf8e; --ok-dim: #123326; --warn: #f0a13c; --warn-dim: #3a2a10;
  --danger: #ff5c5c; --danger-dim: #3a1618; --danger-ink: #1d0606;
  --info: #4aa8ff; --info-dim: #10283f;
  --client: #14b8a6; --client-ink: #04211e;
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.55);
  --scrim: rgba(4,7,10,.62);
  --radius: 8px; --radius-sm: 5px; --radius-lg: 14px;
  --header-h: 56px; --tap: 44px;

  /* the names the pages were written with, pointed at the tokens above */
  --fg: var(--text); --muted: var(--text-2);
  --accent: var(--amber); --accent-hover: var(--amber-hover); --accent-fg: var(--amber-ink); --accent-soft: var(--amber-dim);
  --ok-soft: var(--ok-dim); --warn-soft: var(--warn-dim); --danger-soft: var(--danger-dim);
  --band: var(--bg-2); --band-fg: var(--text); --band-muted: var(--text-2);
  --focus: var(--amber);
  /* signatures are drawn on paper in both modes, so they print the same */
  --sig-bg: #fbfaf6; --sig-ink: #14213d; --sig-line: #c9c4b4;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef1f5; --bg-2: #e5e9ef; --surface: #ffffff; --surface-2: #f4f6f9; --surface-3: #e9edf2;
  --line: #ccd5e0; --line-soft: #dee4ec;
  --text: #131a22; --text-2: #4b5a6b; --text-3: #6f7d8d;
  --amber: #b26a00; --amber-hover: #9a5c00; --amber-ink: #fff8e8; --amber-dim: #ffeec9;
  --ok: #12805a; --ok-dim: #d6f2e5; --warn: #92601a; --warn-dim: #fbeacc;
  --danger: #c02626; --danger-dim: #fbdcdc; --danger-ink: #ffffff;
  --info: #1663b8; --info-dim: #d9e8fa;
  --client: #0f766e; --client-ink: #ffffff;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --shadow-lg: 0 2px 6px rgba(16,24,40,.08), 0 24px 60px rgba(16,24,40,.18);
  --scrim: rgba(19,26,34,.38);
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
body.glow {
  background:
    radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--amber) 8%, transparent), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, var(--info) 7%, transparent), transparent 60%),
    var(--bg);
}
::selection { background: var(--amber-dim); }

/* ---- top bar: the app's mark, the company beside it, the live state and the mode switch ---- */
.ot-top {
  position: relative; z-index: 6; min-height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
}
/* The top bar is the app's own frame, nothing to copy (version 55; the owner, 1 November 2026, of a long press on
   the logo: "it shows this and then after that when switching modes … Company logo chnage sbehaviou"). A long
   press on the logo opened the iPhone's link menu and SELECTED the company's logo, and a selected picture is
   painted with the selection's colour, --amber-dim, which turns with the mode: cream in light, dark brown in dark.
   So nothing in the bar can be selected, a long press opens no menu, and a tap leaves no grey box. */
.ot-top { -webkit-user-select: none; user-select: none; }
.ot-top a, .ot-top button, .ot-top img { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.ot-top img { -webkit-user-drag: none; }
/* The logo and the name never get narrower than they are (on phones the name may take two lines), so nothing
   beside them can run under the name: what follows gives way instead. */
.ot-brand { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; color: inherit; text-decoration: none; }
/* The Yardline Kits logo (version 54): Yardline's mark (Orbit's logo, in the theme's amber) with Kit Maker's
   old logo, the clipboard on its cream tile, as a badge on its lower right corner, about half its size and
   ringed in the colour of whatever the logo sits on (--ring), placed as Yardline places a company's badge on
   its mark. 44 px in the top bar (the clipboard tile's place; 34 px, Yardline's own top bar, on phones up to
   413 px, where the company's logo needs the room), .sm 34 px (the owner's console), .lg 56 px (the login
   page). The margin on its right is the badge's overhang. */
.ot-brandmark { position: relative; display: inline-block; width: 44px; height: 44px; flex: 0 0 44px; margin-right: 11px; --ring: var(--bg-2); }
.ot-mark { display: block; width: 100%; height: 100%; color: var(--amber); }
.ot-kmbadge { position: absolute; right: -11px; bottom: -7px; width: 48%; height: 48%; display: grid; place-items: center;
  border-radius: 6px; background: #fdf6e6; color: #b26a00; box-shadow: inset 0 0 0 1px #f0dfb8, 0 0 0 2px var(--ring); }
.ot-kmbadge svg { display: block; width: 82%; height: 82%; }
.ot-brandmark.sm { width: 34px; height: 34px; flex-basis: 34px; margin-right: 9px; }
.ot-brandmark.sm .ot-kmbadge { right: -9px; bottom: -6px; border-radius: var(--radius-sm); }
.ot-brandmark.lg { width: 56px; height: 56px; flex-basis: 56px; margin-right: 13px; }
.ot-brandmark.lg .ot-kmbadge { right: -13px; bottom: -9px; border-radius: 7px; }
/* The company's own logo (its initials until one is set) shows once in the top bar, beside the Yardline Kits
   logo and never on it (the owner, 1 November 2026: "Do not combine 3 logos under 1 sinfle logo"): in the
   company card where the bar shows the card, else as this tile of its own between the logo and the name, the
   size and look of the badge it was on the Kit Maker mark until version 53. The tile and the card switch at
   the same width, so no width shows both or neither: the app's card (.ot-wide, its tile .ot-narrow) hides at
   760 px, the card of the receiver's page, the report check and the privacy notice at 380 px. */
.ot-badge.ot-clogo, .ot-badge.ot-clogo.has-img { position: relative; width: 30px; height: 30px; flex: 0 0 30px; min-width: 0; max-width: none; padding: 0;
  border-radius: 6px; font-size: 8.5px; box-shadow: 0 0 0 2px var(--bg-2); border: 0; }
.ot-top .ot-badge.ot-clogo { display: none; }
.ot-badge.ot-clogo.has-img { background: #fff; padding: 1px; border-radius: 7px; }
.ot-badge.ot-clogo img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ot-bt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ot-bt b { font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.ot-bt small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.ot-vsep { width: 1px; height: 28px; background: var(--line); flex: 0 0 1px; }
.ot-client { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.ot-clogo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; display: grid; place-items: center; background: var(--client); color: var(--client-ink); font: 800 11px/1 var(--font-sans); letter-spacing: .02em; }
.ot-client b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ot-clogo.has-img { width: auto; height: 38px; flex-basis: auto; min-width: 38px; max-width: 122px; padding: 2px 3px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ot-clogo img { display: block; height: 32px; width: auto; max-width: 114px; object-fit: contain; }
/* the app's badge takes a logo: drop it on, or tap to choose one */
button.ot-client { font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.ot-client:hover { border-color: var(--text-3); }
.ot-client.drag { border: 2px dashed var(--amber); background: var(--amber-dim); }
.ot-client.drag .ot-drop-hint { display: block; }
.ot-drop-hint { display: none; font-size: 11px; font-weight: 700; color: var(--amber); }
.logo-menu { position: absolute; z-index: 60; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); display: grid; gap: 2px; }
.logo-menu button { all: unset; display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text); }
.logo-menu button:hover, .logo-menu button:focus-visible { background: var(--surface-2); }
.logo-menu .danger { color: var(--danger); }
.logo-menu small { display: block; padding: 4px 12px 6px; font-size: 12px; color: var(--text-3); }
.ot-client small { display: block; font-size: 10.5px; color: var(--text-3); white-space: nowrap; letter-spacing: .02em; }
/* The card's name and line end in "…" rather than run out of the card. The app's card (computers) keeps its
   size and caps a very long company name; on phones the card of the receiver's page, the report check and the
   privacy notice (its logo alone) keeps its size too. */
.ot-client > span:not(.ot-clogo) { min-width: 0; }
.ot-client b, .ot-client small { overflow: hidden; text-overflow: ellipsis; }
.ot-client.ot-wide { flex-shrink: 0; }
.ot-client.ot-wide b, .ot-client.ot-wide small { max-width: min(15rem, 20vw); }
.ot-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ot-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font: 640 12px/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
button.ot-pill { cursor: pointer; }
button.ot-pill:hover { border-color: currentColor; }
.ot-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ot-pill.ok { color: var(--ok); background: var(--ok-dim); border-color: color-mix(in srgb, var(--ok) 38%, transparent); }
.ot-pill.warn { color: var(--warn); background: var(--warn-dim); border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.ot-pill.danger { color: var(--danger); background: var(--danger-dim); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.ot-pill.amber { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 42%, transparent); }
.ot-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; padding: 0;
}
.ot-icon:hover { color: var(--text); border-color: var(--text-3); }
.ot-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ot-icon .ot-sun { display: none; }
:root:not([data-theme="light"]) .ot-icon .ot-sun { display: block; }
:root:not([data-theme="light"]) .ot-icon .ot-moon { display: none; }
@media (pointer: coarse) { .ot-icon { width: 40px; height: 40px; flex-basis: 40px; } }
@media (max-width: 760px) { .ot-client small, .ot-bt small, .ot-vsep { display: none; } .ot-client { padding: 4px 8px 4px 4px; } .ot-client.ot-wide { display: none; }
  .ot-top .ot-badge.ot-clogo.ot-narrow { display: grid; } }
@media (max-width: 520px) { .ot-client b, .ot-pill span.long { display: none; } .ot-client { flex-shrink: 0; } .ot-top { gap: 8px; } .ot-top .ot-bt b { white-space: normal; } }
@media (max-width: 413px) { .ot-top .ot-brandmark { width: 34px; height: 34px; flex-basis: 34px; margin-right: 9px; }
  .ot-top .ot-kmbadge { right: -9px; bottom: -6px; border-radius: var(--radius-sm); } }
@media (max-width: 380px) { .ot-client { display: none; } .ot-top .ot-badge.ot-clogo { display: grid; } }

/* The loading mark (version 58), "the coin" (the owner, 5 November 2026: "rotate the whole Yardline logo first then
   the company then back to yardline logo"; variant A, "but make it a bit faster and smoother"). Yardline's mark in
   the theme's amber turns round like a coin to the company's logo on a white tile and on round to Yardline: 2.2 s a
   round, eased in and out, holding on each face; a slight perspective so the turn reads as 3D. With no company logo
   both faces are the mark (.yl-solo). Reduced motion: the mark stands still. Filled by mode.js (mkmCoinHTML). */
.yl-load { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--amber); perspective: 400px; animation: yl-in .2s ease-out .15s both; }
.yl-coin { position: relative; display: block; width: 64px; height: 64px; transform-style: preserve-3d; will-change: transform; animation: yl-coin 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.yl-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.yl-face svg { display: block; width: 100%; height: 100%; }
.yl-back { transform: rotateY(180deg); }
.yl-co { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.yl-co img { display: block; width: 85%; height: 85%; object-fit: contain; }
.yl-load-word { font: 700 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
@keyframes yl-coin { 0%, 12% { transform: rotateY(0deg); } 38%, 62% { transform: rotateY(180deg); } 88%, 100% { transform: rotateY(360deg); } }
@keyframes yl-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yl-coin { animation: none; transform: none; } }
/* Where a loader stands in a page; the app's first-load cover (#ylBoot) until the app has drawn. */
.yl-loadwrap { display: flex; justify-content: center; padding: 48px 0; }
.yl-boot { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--bg); }