/* Rainmaker Store. Look follows rainmaker.com: tall serif display, small uppercase labels, pill buttons,
   painted backgrounds, deco corner frames. Fonts are free substitutes for the site's commercial faces:
   Instrument Serif for Flecha, Hanken Grotesk for Founders Grotesk (both OFL, self-hosted). */
@font-face { font-family: "Hanken Grotesk"; src: url(/static/fonts/HankenGrotesk.ttf?v=8784703cb0) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/InstrumentSerif-Regular.ttf?v=760dce2e43) format("truetype"); font-weight: 400; font-display: swap; }

/* Brand palette (never changes with the theme) */
:root {
  --forest: #1c2c26; --pine: #103d1d; --canopy: #275f4b; --sage: #628c7d;
  --mist: #f5f5f1; --cloud: #e0ded7; --grain: #fff1cf; --ice: #baf7ff; --hivis: #e5ff42;
  --white: #fff; --danger: #b3261e; --night: #101a16; --lime-ink: #141d05;
  --display: "Instrument Serif", "Times New Roman", serif;
}
/* Theme tokens. Light is the base. [data-theme=dark] and [data-theme=auto] under a dark device swap the same names. Always use these in rules, never a brand colour for a surface or for text. */
:root, [data-theme=light] {
  --bg: var(--mist); --card: var(--white); --ink: var(--forest); --muted: var(--canopy); --line: var(--cloud);
  --link: var(--canopy); --accent-ink: var(--canopy); --faint: var(--sage); --placeholder: #66736d;
  --field-bg: var(--white); --field-line: var(--sage); --field-focus: var(--forest);
  --ctl-line: var(--forest); --ctl-ink: var(--forest); --ctl-hover-bg: var(--forest); --ctl-hover-ink: var(--mist);
  --sel-bg: var(--forest); --sel-ink: var(--hivis); --hover-line: var(--forest);
  --pri-hover-bg: var(--forest); --pri-hover-ink: var(--hivis);
  --solid-bg: var(--canopy); --solid-ink: var(--white); --solid-line: var(--canopy);
  --count-bg: var(--forest); --count-ink: var(--hivis);
  --top-bg: var(--forest); --top-glass: rgba(28, 44, 38, .96); --top-line: transparent;
  --tab-glass: rgba(255, 255, 255, .94); --tab-ink: var(--canopy); --tab-solid: var(--white);
  --bar-glass: rgba(255, 255, 255, .96); --bar-shadow: rgba(28, 44, 38, .35);
  --ok-bg: var(--ice); --ok-ink: var(--forest); --tint-bg: var(--ice);
  --warn-bg: var(--grain); --warn-ink: var(--forest); --danger-ink: var(--danger); --danger-line: var(--danger); --soon-ink: var(--forest);
  --badge-bg: var(--cloud); --badge-ink: var(--forest); --thumb-bg: var(--cloud); --thumb-filter: none;
  --toast-bg: var(--forest); --toast-ink: var(--mist); --toast-line: transparent; --shadow: rgba(28, 44, 38, .45);
  --deep: var(--forest); --focus-halo: var(--forest);
  --raised: var(--mist); --title: var(--forest); --eyebrow: var(--canopy); --orn: var(--canopy); --num: var(--canopy); --stone: var(--forest);
  --sel-line: var(--forest); --seg-bg: var(--forest); --seg-ink: var(--hivis);
  --scrim-a: rgba(16, 26, 22, .4); --scrim-m: rgba(16, 26, 22, .74); --scrim-b: rgba(16, 26, 22, .92); --pill-bg: rgba(16, 26, 22, .78); --art-tint: transparent;
  --alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* Dark: Forest ground, deeper wells, raised panels, Mist text, Hi-Vis stays the one primary, Ice for links */
[data-theme=dark] {
  --bg: #101a16; --card: #172520; --raised: #1f312a; --ink: #f2f2ec; --muted: #9baba1; --line: #2d4239;
  --link: #e5ff42; --accent-ink: #e5ff42; --faint: #7f9488; --placeholder: #8a9a91;
  --title: #e5ff42; --eyebrow: #e5ff42; --orn: #e5ff42; --num: #e5ff42; --stone: #d8d6cd;
  --field-bg: #101a16; --field-line: #5f7a6d; --field-focus: #e5ff42;
  --ctl-line: #5f7a6d; --ctl-ink: #f2f2ec; --ctl-hover-bg: #1f312a; --ctl-hover-ink: #f2f2ec;
  --sel-bg: rgba(229, 255, 66, .1); --sel-ink: #e5ff42; --sel-line: #e5ff42; --seg-bg: #e5ff42; --seg-ink: #141d05; --hover-line: #d8d6cd;
  --pri-hover-bg: #f2ffa0; --pri-hover-ink: #141d05;
  --solid-bg: #1f312a; --solid-ink: #f2f2ec; --solid-line: #5f7a6d;
  --count-bg: #2d4239; --count-ink: #f2f2ec;
  --top-bg: #101a16; --top-glass: rgba(16, 26, 22, .94); --top-line: #2d4239;
  --tab-glass: rgba(16, 26, 22, .95); --tab-ink: #9baba1; --tab-solid: #101a16;
  --bar-glass: rgba(16, 26, 22, .96); --bar-shadow: rgba(0, 0, 0, .6);
  --ok-bg: rgba(111, 220, 149, .12); --ok-ink: #6fdc95; --tint-bg: rgba(229, 255, 66, .07);
  --warn-bg: rgba(255, 130, 112, .12); --warn-ink: #f2f2ec; --danger-ink: #ff8270; --danger-line: #ff8270; --soon-ink: #f2c94c;
  --badge-bg: #1f312a; --badge-ink: #d8d6cd; --thumb-bg: #101a16; --thumb-filter: brightness(.92);
  --toast-bg: #1f312a; --toast-ink: #f2f2ec; --toast-line: #3d5a4c; --shadow: rgba(0, 0, 0, .6);
  --deep: #101a16; --focus-halo: #101a16;
  --scrim-a: rgba(16, 26, 22, .4); --scrim-m: rgba(16, 26, 22, .74); --scrim-b: rgba(16, 26, 22, .92); --pill-bg: rgba(16, 26, 22, .78); --art-tint: rgba(16, 26, 22, .3);
  --alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8270' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  color-scheme: dark;
}
/* Auto follows the device: the same dark tokens, inside the media query */
@media (prefers-color-scheme: dark) {
  [data-theme=auto] {
    --bg: #101a16; --card: #172520; --raised: #1f312a; --ink: #f2f2ec; --muted: #9baba1; --line: #2d4239;
    --link: #e5ff42; --accent-ink: #e5ff42; --faint: #7f9488; --placeholder: #8a9a91;
    --title: #e5ff42; --eyebrow: #e5ff42; --orn: #e5ff42; --num: #e5ff42; --stone: #d8d6cd;
    --field-bg: #101a16; --field-line: #5f7a6d; --field-focus: #e5ff42;
    --ctl-line: #5f7a6d; --ctl-ink: #f2f2ec; --ctl-hover-bg: #1f312a; --ctl-hover-ink: #f2f2ec;
    --sel-bg: rgba(229, 255, 66, .1); --sel-ink: #e5ff42; --sel-line: #e5ff42; --seg-bg: #e5ff42; --seg-ink: #141d05; --hover-line: #d8d6cd;
    --pri-hover-bg: #f2ffa0; --pri-hover-ink: #141d05;
    --solid-bg: #1f312a; --solid-ink: #f2f2ec; --solid-line: #5f7a6d;
    --count-bg: #2d4239; --count-ink: #f2f2ec;
    --top-bg: #101a16; --top-glass: rgba(16, 26, 22, .94); --top-line: #2d4239;
    --tab-glass: rgba(16, 26, 22, .95); --tab-ink: #9baba1; --tab-solid: #101a16;
    --bar-glass: rgba(16, 26, 22, .96); --bar-shadow: rgba(0, 0, 0, .6);
    --ok-bg: rgba(111, 220, 149, .12); --ok-ink: #6fdc95; --tint-bg: rgba(229, 255, 66, .07);
    --warn-bg: rgba(255, 130, 112, .12); --warn-ink: #f2f2ec; --danger-ink: #ff8270; --danger-line: #ff8270; --soon-ink: #f2c94c;
    --badge-bg: #1f312a; --badge-ink: #d8d6cd; --thumb-bg: #101a16; --thumb-filter: brightness(.92);
    --toast-bg: #1f312a; --toast-ink: #f2f2ec; --toast-line: #3d5a4c; --shadow: rgba(0, 0, 0, .6);
    --deep: #101a16; --focus-halo: #101a16;
    --scrim-a: rgba(16, 26, 22, .4); --scrim-m: rgba(16, 26, 22, .74); --scrim-b: rgba(16, 26, 22, .92); --pill-bg: rgba(16, 26, 22, .78); --art-tint: rgba(16, 26, 22, .3);
    --alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8270' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root {
  --radius: 3px; --pill: 9999px; --tap: 48px;
  /* spacing scale (4 px steps), the card inset, and the gap under a stuck action bar */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --pad: 24px; --ab-gap: 9px;
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23e5ff42' stroke-width='1.2'%3E%3Cpath d='M1.5 38.5V1.5h37M7 38.5V7h31.5M12.5 26V12.5H26'/%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23e5ff42' stroke='none'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 17px/1.5 "Hanken Grotesk", system-ui, sans-serif; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: -0.015em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }

/* Small uppercase label, like the site's section tags */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.eyebrow img { width: 16px; height: auto; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--top-bg); box-shadow: 0 1px 0 var(--top-line); color: var(--mist); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 6px 20px; }
.top a, .top .link { color: var(--mist); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.brand { gap: 10px; }
.brand .mark { width: 22px; height: 30px; color: var(--mist); }
.brand .word { font-family: var(--display); font-size: 1.45rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-left: auto; }
.search { flex: 1 1 240px; max-width: 520px; }
.search input { width: 100%; border-radius: var(--pill); background: rgba(245, 245, 241, .08); border-color: rgba(245, 245, 241, .55); color: var(--mist); padding-left: 18px; }
.search input::placeholder { color: rgba(245, 245, 241, .6); }

main { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }

/* Forms */
label { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: 6px; text-transform: none; letter-spacing: normal; font-size: 17px; font-weight: 400; color: var(--ink); }
input, select, textarea { font: inherit; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--field-bg); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[type=file] { width: 100%; max-width: 100%; padding: 6px; font-size: 1rem; }
input[type=file]::file-selector-button { font: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ctl-ink);
  background: transparent; border: 1px solid var(--ctl-line); border-radius: var(--pill); padding: 9px 16px; margin-right: 12px; cursor: pointer; }
form.row > input:not([type=hidden]), form.row > select { flex: 1 1 150px; min-width: 0; }
form.row > input[type=file] { flex: 1 1 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--field-focus); outline: 2px solid var(--hivis); outline-offset: 0; }

/* Buttons: pills with uppercase labels; the one hi-vis primary per screen carries an arrow */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 24px; border-radius: var(--pill);
  border: 1px solid var(--ctl-line); background: transparent; color: var(--ctl-ink); font: inherit; font-size: .85rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.btn.primary { background: var(--hivis); border-color: var(--hivis); color: var(--lime-ink); }
.btn.primary::after { content: "\2192"; font-size: 1.05rem; letter-spacing: 0; }
.btn.solid { background: var(--solid-bg); border-color: var(--solid-line); color: var(--solid-ink); }
.btn.danger { border-color: var(--danger-line); color: var(--danger-ink); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; color: var(--link); }

/* Panels */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 0 0 16px; }
.card.row { gap: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.big { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; margin-bottom: .3em; }
.flash { padding: 14px 20px; font-weight: 500; text-align: center; }
.flash.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash.error { background: var(--warn-bg); color: var(--danger-ink); }
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: var(--badge-bg); color: var(--badge-ink); }
.badge.hazmat { background: var(--warn-bg); color: var(--danger-ink); }
.badge.soon { background: var(--warn-bg); color: var(--soon-ink); }
.badge.expired { background: var(--danger); color: var(--white); }
.ai { background: var(--tint-bg) !important; }
.stepper { display: inline-flex; align-items: stretch; }
.stepper button { width: var(--tap); padding: 0; font-size: 1.4rem; }
.stepper input { width: 80px; text-align: center; border-radius: 0; }
.photo { width: 100%; height: auto; max-height: 280px; object-fit: contain; background: var(--thumb-bg); filter: var(--thumb-filter); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
td, th { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
details summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Stock actions on an item: one clear column, full-width controls */
.lot { gap: 6px 14px; }
.act { display: grid; gap: 10px; margin-top: 16px; max-width: 520px; }
.act > input, .act > select, .act > .btn { width: 100%; }
.act.use { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.act .eyebrow { margin: 0; }
.act .stepper { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); gap: 8px; }
.act .stepper input { width: 100%; border-radius: var(--radius); }
details { margin-top: 12px; }
details .act { padding-bottom: 6px; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Painted hero band (home page) */
.hero { position: relative; margin: -32px -20px 32px; padding: 96px 28px 56px; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--mist); background: linear-gradient(180deg, var(--scrim-a) 0%, var(--scrim-m) 40%, var(--scrim-b) 100%), url(/static/img/field.jpg?v=04266a9886) center 30% / cover; }
.hero h1 { color: var(--mist); max-width: 14ch; }
.hero p { max-width: 46ch; color: var(--mist); }
.hero .eyebrow { color: var(--hivis); }
.hero .eyebrow, .band .eyebrow { align-self: flex-start; padding: 5px 12px; border-radius: var(--pill); background: var(--pill-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .btn:not(.primary) { border-color: var(--mist); color: var(--mist); }
.hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(28px, calc(50vw - 460px)); padding-right: max(28px, calc(50vw - 460px)); }

/* Split screen (login and kiosk): dark panel with the form, painted panel framed by corner ornaments */
body.split { background: var(--night); color: var(--mist); }
body.split main { max-width: none; padding: 0; }
.split-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 60px); }
.split-form { padding: clamp(32px, 7vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.split-form h1 { color: var(--hivis); }
.split-form .eyebrow, .split-form label { color: var(--hivis); }
.split-form .muted { color: var(--cloud); }
.split-form input, .split-form select { background: rgba(245, 245, 241, .06); border-color: rgba(245, 245, 241, .55); color: var(--mist); }
.split-form select option { background: var(--white); color: var(--forest); }
.split-form .btn:not(.primary) { border-color: rgba(245, 245, 241, .55); color: var(--mist); }
.split-art { position: relative; background: url(/static/img/clouds.jpg?v=24175197e0) center / cover; box-shadow: inset 0 0 0 9999px var(--art-tint); }
.split-art::before, .split-art::after, .split-art span::before, .split-art span::after { content: ""; position: absolute; width: 80px; height: 80px; background: var(--corner) no-repeat center / contain; }
.split-art::before { top: 32px; left: 32px; }
.split-art::after { top: 32px; right: 32px; transform: scaleX(-1); }
.split-art span::before { bottom: 32px; left: 32px; transform: scaleY(-1); }
.split-art span::after { bottom: 32px; right: 32px; transform: scale(-1, -1); }
@media (max-width: 820px) {
  .split-wrap { grid-template-columns: 1fr; min-height: 0; }
  .split-art { order: -1; min-height: 200px; }
  .split-art::before, .split-art::after, .split-art span::before, .split-art span::after { width: 48px; height: 48px; }
  .split-art::before, .split-art::after { top: 16px; } .split-art span::before, .split-art span::after { bottom: 16px; }
  .split-art::before, .split-art span::before { left: 16px; } .split-art::after, .split-art span::after { right: 16px; }
}

/* Kiosk */
.kiosk { font-size: 19px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 88px); gap: 12px; margin-top: 16px; }
.pinpad button { height: 76px; padding: 0; font-size: 1.6rem; letter-spacing: 0; }
.pinpad .btn.primary::after { content: none; }
.kiosk .grid .btn { min-height: 64px; text-transform: none; letter-spacing: 0; font-size: 1rem; }

@media (max-width: 600px) {
  main { padding: 24px 16px 48px; }
  .top { position: static; padding: 4px 14px 6px; }
  .brand .word { font-size: 1.25rem; }
  .top nav { margin-left: 0; width: 100%; justify-content: space-between; }
  .hero { margin: -24px -16px 24px; padding: 72px 20px 40px; min-height: 360px; }
  .card { padding: 18px; }
}

/* Drones */
.drone-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 16px; }
.drone-card { text-decoration: none; color: inherit; margin-bottom: 0; }
.drone-card h3 { margin: 0 0 4px; }
.drone-card p { margin: 0; }
.drone-row { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.drone-row .drone-info { flex: 1 1 100%; }
.drone-row input[type=number] { flex: 0 1 110px; }
.drone-link { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 600px) { .drone-row select { flex: 1 1 100%; } }
main table td a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Items catalog and photos (UI agent, photos wave) */
.item-filter { margin-bottom: 12px; }
.item-filter input { flex: 1 1 220px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--ctl-line);
  color: var(--ctl-ink); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.chip.on { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.item-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.item-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; margin: 0; }
.item-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--thumb-bg); filter: var(--thumb-filter); display: block; }
.item-photo.empty, .drone-thumb.empty, .drone-photo.empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  font-family: var(--display); font-size: 1.4rem; color: var(--muted); background: var(--thumb-bg); }
.item-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.item-name { font-size: 1.02rem; line-height: 1.25; }
.item-body .eyebrow { margin: 0; font-size: .68rem; line-height: 1.4; }
.item-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.badge.low { background: var(--danger); color: var(--white); }
.drone-card { overflow: hidden; }
.drone-thumb { width: calc(100% + 44px); margin: -22px -22px 14px; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; }
.drone-head { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 24px; align-items: end; margin-bottom: 20px; }
.drone-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; filter: var(--thumb-filter); }
.drone-thumb:not(.empty) { filter: var(--thumb-filter); }
.photo-form { margin-top: 4px; }
.photo-pick { position: relative; }
.photo-pick:focus-within { outline: 2px solid var(--hivis); outline-offset: 2px; }
.photo-form.is-saving .photo-pick { opacity: .7; pointer-events: none; }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.photo-preview { display: block; max-width: 100%; width: 160px; height: auto; margin-top: 8px; border-radius: var(--radius); }
.draft-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.draft-photos figure { margin: 0; }
.draft-photos img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius); background: var(--thumb-bg); }
.draft-photos figcaption { font-size: .7rem; color: var(--muted, inherit); margin-top: 2px; }
@media (max-width: 600px) {
  .drone-thumb { width: calc(100% + 36px); margin: -18px -18px 14px; }
  .drone-head { grid-template-columns: 1fr; gap: 12px; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-body { padding: 10px 12px 14px; }
}

/* Part thumbnails in every list (shared macro _thumb.html) */
.thumb { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; background: var(--thumb-bg); filter: var(--thumb-filter); border-radius: var(--radius); display: inline-block; }
.thumb.sm { width: 40px; height: 40px; }
.thumb.empty { filter: none; background: var(--thumb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23628c7d' stroke-width='1.5'%3E%3Cpath d='M4 8l8-4 8 4v8l-8 4-8-4zM4 8l8 4 8-4M12 12v8'/%3E%3C/svg%3E") center / 55% no-repeat; }
main table td a.thumb-link { gap: 12px; }
.thumb-card { text-decoration: none; color: inherit; min-height: var(--tap); }
.hist-item { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); }

/* Home shortcut cards: six cards, three per row on desktop */
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-cards .card { margin: 0; padding: 16px; min-height: var(--tap); text-decoration: none; color: inherit; }
.home-cards .card h3 { font-size: 1.3rem; margin-bottom: .3em; }
.home-cards .card p:last-child { margin-bottom: 0; font-size: .9rem; line-height: 1.35; }
.home-cards .eyebrow { margin-bottom: 8px; }
@media (max-width: 900px) { .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Places */
.place-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.place-card { text-decoration: none; color: inherit; margin: 0; min-height: var(--tap); }
.place-card .big { margin: 0; }
.place-head { margin: 24px 0 8px; }
.where-row { margin: 6px 0; }
.card.where h2 { font-size: 1.1rem; margin-bottom: 6px; }
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Phone header: one row of links; log out lives on the More page there */
.phone-only { display: none; }
@media (max-width: 600px) {
  .top-logout { display: none; }
  .phone-only { display: block; }
  .top nav { gap: 4px 10px; }
}

/* ---- Task-first UI (Builder UX): icons, home tiles, take card, my items, what is this, receive ---- */
.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.eyebrow .ico { width: 16px; height: 16px; }
.btn .ico { width: 20px; height: 20px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px; border-radius: var(--pill);
  background: var(--count-bg); color: var(--count-ink); font-size: .72rem; font-weight: 600; letter-spacing: 0; line-height: 1; }
.top .count { background: var(--hivis); color: var(--forest); margin-left: 6px; }
.top nav a { white-space: nowrap; }

/* Home */
.hero.small { min-height: 220px; padding-top: 56px; padding-bottom: 32px; margin-bottom: 24px; }
.hero.small h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); max-width: none; margin-bottom: .25em; }
.hero.small p:last-child { margin-bottom: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; min-height: 176px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.tile .ico { width: 36px; height: 36px; margin-bottom: 14px; color: var(--accent-ink); }
.tile b { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.01em; }
.tile span { color: var(--muted); font-size: .95rem; line-height: 1.35; }
.tile.primary { background: var(--hivis); border-color: var(--hivis); }
.tile.primary b, .tile.primary .ico, .tile.primary span { color: var(--lime-ink); }
.tile .count { margin: 0 2px; background: var(--count-bg); color: var(--count-ink); }
.tile.primary .count { background: var(--forest); color: var(--hivis); }
.quiet-head { margin-bottom: 10px; }
.quiet { display: flex; flex-wrap: wrap; gap: 8px; }
.quiet a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--card);
  color: var(--ink); text-decoration: none; font-size: .95rem; }
.quiet .ico { width: 18px; height: 18px; color: var(--accent-ink); }

/* Big search (take, find, receive, what is this) */
.bigsearch { display: flex; gap: 10px; margin: 0 0 20px; }
.bigsearch input { flex: 1 1 auto; min-width: 0; min-height: 60px; font-size: 1.15rem; padding: 0 20px; border-radius: var(--pill); border-color: var(--ctl-line); }
.bigsearch .btn { min-height: 60px; flex: 0 0 auto; }
.hint { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); margin: 0 0 28px; max-width: 60ch; }
.hint .ico { margin-top: 3px; }
.section { margin-top: 8px; }
.newitem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); }
.result { text-decoration: none; color: inherit; min-height: 72px; }
.item-photo.empty .ico { width: 40px; height: 40px; color: var(--faint); }

/* Item page */
.item-top { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: center; }
.item-top:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.item-top .photo { max-height: 240px; margin: 0; }
.item-title h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .2em; }
.item-title .eyebrow { margin-bottom: 8px; }
.stock-line { font-size: 1.15rem; margin: 10px 0 0; }
.warn { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-bg); color: var(--danger-ink); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0 0; }
.warn .ico { margin-top: 2px; }
.warn span { color: var(--warn-ink); }
.item-head .photo-form { margin-top: 12px; }
.take-card .eyebrow { margin-bottom: 10px; }
.take-card .lot { margin: 0 0 4px; }
.field-label { display: block; margin: 14px 0 0; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.act .field-label { margin: 6px 0 0; }
.act.take, .act.receive { max-width: 560px; margin-top: 8px; }
.take .stepper input, .receive .stepper input { font-size: 1.4rem; min-height: 56px; }
.take .stepper button, .receive .stepper button { height: 56px; }
.take .stepper, .receive .stepper { grid-template-columns: 56px 1fr 56px; }
.chips.choose { gap: 10px; margin: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; border-radius: var(--pill); }
.chip:has(input:checked) { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.chip:has(input:focus-visible) { outline: 3px solid var(--hivis); box-shadow: 0 0 0 5px var(--focus-halo); }
button.chip { background: transparent; font: inherit; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; gap: 8px; }
button.chip .ico { width: 18px; height: 18px; }
button.chip.on { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.chips.choose .chip { min-height: 52px; padding: 0 22px; font-size: .85rem; }
.drone-pick select { width: 100%; }
.take .btn.primary, .take .btn.solid, .receive .btn.primary { min-height: 60px; font-size: .95rem; width: 100%; margin-top: 10px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-flex; width: 22px; font-size: 1.2rem; letter-spacing: 0; }
details[open] > summary::before { content: "\2212"; }
details .act + .act { border-top: 1px solid var(--line); padding-top: 16px; }

/* My items: every card is one grid. Row 1: thumbnail | quantity | name and meta. Row 2: Return | Used it up as two
   equal columns. Row 3: "Used only some?" in the first column, the amount and Use some in the second, so they sit
   under Used it up. Phones stack the buttons (see the phone block). */
.held-card { padding: 20px; }
.row.held { display: grid; grid-template-columns: 56px 3.6rem minmax(0, 1fr); column-gap: 14px; align-items: center; min-height: 56px; margin: 0 0 16px; }
.held-card .thumb { width: 56px; height: 56px; }
.held-qty { font: 400 2.4rem/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.held-qty.long { font-size: 1.7rem; }
.held-text { min-width: 0; line-height: 1.3; }
.held-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.held-actions > form { margin: 0; }
.held-card .btn { width: 100%; min-height: 56px; }
.place-head { display: flex; align-items: center; gap: 10px; }
.place-head .ico { width: 24px; height: 24px; color: var(--accent-ink); }
.card.empty .btn { margin-top: 4px; }

/* What is this */
.what-form { display: grid; gap: 12px; max-width: 520px; margin: 16px 0 20px; }
.what-form[hidden] { display: none; }
.what-form label.btn { position: relative; overflow: hidden; min-height: 64px; }
.what-form label.btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; }
.what-form label.btn.primary { font-size: 1rem; }
.looking { display: flex; align-items: center; gap: 14px; margin: 16px 0; padding: 20px; background: var(--tint-bg); border-radius: var(--radius); font-weight: 500; }
.looking[hidden] { display: none; }
.spin { width: 22px; height: 22px; border: 3px solid var(--ctl-ink); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; margin: 0 0 16px; background: var(--warn-bg); border-radius: var(--radius); }
.notice .ico { margin-top: 2px; color: var(--danger-ink); }
.match { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.match .thumb { width: 88px; height: 88px; }
.match-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.match .btn { flex: 0 0 auto; }

/* Receive */
.shelf-big { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.shelf-choice { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: var(--ink); cursor: pointer; min-height: var(--tap); }
.shelf-choice input { grid-row: 1 / span 2; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; accent-color: var(--field-focus); }
.shelf-choice .muted { grid-column: 2; font-size: .9rem; }
.shelf-choice.first { border: 2px solid var(--ctl-line); padding: 20px; }
.shelf-choice.first .shelf-big { font-size: clamp(2.4rem, 8vw, 3.4rem); }
.shelf-choice:has(input:checked) { border-color: var(--ctl-line); background: var(--tint-bg); }
.card > .shelf-big { font-size: clamp(2.6rem, 8vw, 3.6rem); margin: 0 0 4px; }

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hero.small { min-height: 180px; padding-top: 40px; padding-bottom: 24px; }
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 0; min-height: 88px; padding: 16px 18px; }
  .tile .ico { margin: 0; grid-row: 1 / span 2; }
  .tile { display: grid; grid-template-columns: 40px 1fr; }
  .tile .ico { grid-column: 1; }
  .tile b, .tile span { grid-column: 2; }
  .tile b { font-size: 1.5rem; }
  .item-top { grid-template-columns: 1fr; gap: 14px; }
  .bigsearch input, .bigsearch .btn { min-height: 56px; }
  .match .btn { width: 100%; }
}

/* Usability fixes */
.usesome { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: center; margin: 12px 0 0; }
.usesome label { text-transform: none; letter-spacing: normal; font-size: .95rem; font-weight: 400; color: var(--muted); }
.usesome-do { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.usesome input { width: 100%; min-height: 56px; text-align: center; }
.held-card details { margin-top: 8px; }
.held-card details select { width: 100%; min-width: 0; }
.idle-warn { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 18px 20px; background: var(--danger); color: var(--white); font-size: 1.15rem; font-weight: 600; text-align: center; }
.idle-warn[hidden] { display: none; }
.top nav a { min-width: 48px; justify-content: center; }
@media (max-width: 600px) {
  .item-top { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: start; }
  .item-top .photo { width: 80px; height: 80px; max-height: none; object-fit: cover; }
  .item-title h1 { font-size: 1.8rem; }
  .item-head { padding: 14px; }
  .item-title .eyebrow { font-size: .68rem; margin-bottom: 4px; }
  .stock-line { font-size: 1rem; margin-top: 6px; }
  .item-head .photo-form { margin-top: 0; }
  .warn { padding: 8px 10px; font-size: .9rem; }
}

/* Hover only where a real pointer exists, so taps on phones never leave a stuck hover state */
@media (hover: hover) {
  .top a:hover, .top .link:hover { color: var(--hivis); }
  .btn:hover { background: var(--ctl-hover-bg); color: var(--ctl-hover-ink); }
  .btn.primary:hover { background: var(--pri-hover-bg); color: var(--pri-hover-ink); border-color: var(--pri-hover-bg); }
  .btn.solid:hover { background: var(--ctl-hover-bg); color: var(--ctl-hover-ink); border-color: var(--ctl-hover-bg); }
  .btn.danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
  a.card:hover { border-color: var(--hover-line); }
  .hero .btn:not(.primary):hover { background: var(--mist); color: var(--forest); }
  .split-form .btn:not(.primary):hover { background: var(--mist); color: var(--forest); }
  .adm-nav a:hover { background: var(--ctl-hover-bg); color: var(--ctl-hover-ink); }
  .chip:hover { background: var(--ctl-hover-bg); color: var(--ctl-hover-ink); }
  .chip.on:hover, .chip:has(input:checked):hover { background: var(--sel-bg); color: var(--sel-ink); }
  .tile:hover { border-color: var(--hover-line); }
  .tile.primary:hover { background: var(--pri-hover-bg); border-color: var(--pri-hover-bg); }
  .tile.primary:hover b, .tile.primary:hover span, .tile.primary:hover .ico { color: var(--pri-hover-ink); }
  .quiet a:hover { border-color: var(--hover-line); }
  .result:hover { border-color: var(--hover-line); }
}

/* Admin (moved here from admin.html) */
.adm-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.adm-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--ctl-line); border-radius: var(--pill);
  color: var(--ctl-ink); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.adm-nav a:focus-visible { background: var(--ctl-hover-bg); color: var(--ctl-hover-ink); }
.adm-nav a[aria-current=page] { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.adm-form { display: grid; gap: 12px; max-width: 520px; }
.adm-form > .btn { justify-self: start; }
.adm-form label { display: grid; gap: 4px; }
.adm-form .adm-check, .adm-checks .adm-check, .adm-check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: 400; color: var(--ink); }
.adm-check input, .adm-form .adm-check input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; }
.adm-list { list-style: none; margin: 0 0 16px; padding: 0; }
.adm-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 10px; }
.adm-item.off { border-style: dashed; background: transparent; }
.adm-item.off h3, .adm-item.off h3 a { color: var(--muted); }
.adm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: var(--tap); }
.adm-head .grow { flex: 1 1 200px; min-width: 0; }
.adm-head h3 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.adm-head p { margin: 0; }
.adm-item details { margin-top: 4px; }
.adm-split { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-checks { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px; background: var(--card); }
.adm-checks .adm-check { min-height: 40px; font-size: .95rem; }
.adm-tree .adm-item { margin-bottom: 6px; }
.adm-head h3 a, .adm-item > a, main > p.back > a { display: inline-flex; align-items: center; min-height: var(--tap); }
body:has(.adm-nav) > .flash { display: none; }
main > .flash { margin: 0 0 20px; border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
main > .flash form { margin: 0; }
.adm-del summary { color: var(--danger-ink); }
.adm-small { font-size: .9rem; }
.adm-table-wrap { overflow-x: auto; }
h2.adm { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 28px 0 10px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.adm-grid .card { margin: 0; text-decoration: none; color: inherit; display: block; }
.adm-grid .card h3 { margin: 0 0 4px; }

/* =====================================================================================================
   Phone app shell (Mobile pass). Phones, and landscape phones, get a slim top bar and a bottom tab bar.
   Everything below is scoped to body.app (a logged-in person, not the kiosk). Desktop keeps its header.
   ===================================================================================================== */
:root { --bar-h: 56px; --tab-h: 62px; --rail-w: 78px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --gut: 20px; }
html { -webkit-tap-highlight-color: transparent; }
body { overflow-wrap: break-word; }
h1, h2, h3, .item-name, .big { overflow-wrap: anywhere; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger-line); box-shadow: 0 0 0 1px var(--danger-line); }
.bar-title, .bar-search, .tabbar { display: none; }
.actionbar { margin: 0; }
.filters > summary .count { margin-left: 8px; }
.filters { padding-top: 0; padding-bottom: 0; }
.filters[open] { padding-bottom: 16px; }
.filters > form { margin-top: 4px; }
.filters .days { width: 90px; flex: 0 0 90px; }
@media (min-width: 641px) { .filters > summary { display: none; } .filters { padding: 22px; } }
.more-list { display: grid; gap: 0; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.more-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; color: var(--ink); text-decoration: none; font-size: 1.02rem; border-top: 1px solid var(--line); transition: background .12s; }
.more-row:first-child { border-top: 0; }
.more-row > span { flex: 1 1 auto; min-width: 0; }
.more-row .ico { width: 22px; height: 22px; color: var(--accent-ink); }
.more-row .ico:last-child { width: 18px; height: 18px; color: var(--faint); }
.more-row:active { background: var(--bg); }
.more-out { margin-top: 20px; max-width: 560px; }
.more-out .btn { width: 100%; }
.adm-tree { --indent: 18px; }
.adm-tree .adm-item { margin-left: calc(var(--d, 0) * var(--indent)); }

/* Press states and motion that respect the reduced-motion setting */
.btn, .chip, .tile, a.card, .quiet a, .adm-nav a, .tab, .bar-search { transition: transform .12s ease, opacity .12s ease, background .15s, color .15s, border-color .15s; }
.btn:active, .chip:active, .tile:active, a.card:active, .quiet a:active, .adm-nav a:active { transform: scale(.97); opacity: .86; }
.tab:active, .bar-search:active { opacity: .6; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
main { animation: rise .24s ease-out backwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn:active, .chip:active, .tile:active, a.card:active { transform: none; }
}

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  body.app { padding-bottom: 0; font-size: 17px; line-height: 1.5; }
  .app main { padding: 20px 16px calc(var(--tab-h) + var(--safe-b) + 32px); }
  .app main { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); }

  /* Top bar: mark, page title, search icon. The search field opens underneath. */
  .app .top { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; gap: 0; padding: var(--safe-t) max(6px, var(--safe-r)) 0 max(8px, var(--safe-l)); align-items: center;
    background: var(--top-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .app .brand { flex: 0 0 auto; min-width: 48px; justify-content: center; padding: 0; }
  .app .brand .word, .app .brand .tag { display: none; }
  .app .brand .mark { width: 22px; height: 30px; }
  .app .bar-title { display: block; position: relative; flex: 1 1 0; min-width: 0; height: var(--bar-h); margin-left: 4px; font-family: var(--display); font-size: 1.5rem; line-height: var(--bar-h); color: var(--mist); }
  .app .bar-title > span { position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease, transform .2s ease; }
  .app .t-page { opacity: 0; transform: translateY(10px); }
  .app .top.titled .t-page { opacity: 1; transform: none; }
  .app .top.titled .t-brand { opacity: 0; transform: translateY(-10px); }
  .app .bar-search { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; margin: 4px 0; border: 0; border-radius: var(--pill);
    background: transparent; color: var(--mist); cursor: pointer; }
  .app .bar-search .ico { width: 24px; height: 24px; }
  .app .top.searching .bar-search { background: rgba(245, 245, 241, .14); color: var(--hivis); }
  /* Closed: still laid out but clipped away (not display:none and never see-through), so a tap on the icon label can focus it and open the keyboard. */
  .app .top .search { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); order: 9; max-width: none; padding: 0; }
  .app .top.searching .search { position: static; width: auto; height: auto; overflow: visible; clip-path: none; flex: 1 1 100%; padding: 0 8px 10px; }
  .app .search input { min-height: 48px; font-size: 16px; }
  .app .desknav { display: none; }
  .app .top-logout { display: none; }
  .phone-only { display: block; }

  /* Bottom tab bar */
  .app .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tab-h) + var(--safe-b)); padding: 6px max(4px, var(--safe-r)) var(--safe-b) max(4px, var(--safe-l));
    background: var(--tab-glass); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--line); }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 48px; padding: 0 1px; color: var(--tab-ink); text-decoration: none; }
  .tab-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: var(--pill); transition: background .2s ease; }
  .tab-ico .ico { width: 24px; height: 24px; }
  .tab-label { max-width: 100%; font-size: .66rem; font-weight: 600; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
  .tab.on { color: var(--ink); }
  .tab.on .tab-ico { color: var(--forest); }
  .tab.on .tab-ico { background: var(--hivis); }
  .tab-ico .count { position: absolute; top: -5px; right: 0; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: .64rem; background: var(--count-bg); color: var(--count-ink); box-shadow: 0 0 0 2px var(--tab-solid); }
  .tab.on .tab-ico .count { background: var(--forest); color: var(--hivis); }

  /* Type and spacing */
  h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); margin-bottom: .4em; }
  h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
  .big { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .eyebrow { margin-bottom: 10px; }
  .card { padding: 16px; border-radius: var(--radius); }
  .btn { min-height: 52px; }
  input, select, textarea { font-size: 16px; min-height: 52px; border-radius: var(--radius); }
  input[type=file] { font-size: 16px; }
  label > input, label > select, label > textarea { font-size: 16px; }
  select, .act > input, .act > select, .adm-form input, .adm-form select, .card > form > p > label > input { width: 100%; }
  textarea { width: 100%; }
  .row > label { flex: 1 1 140px; }
  .row > label select { width: 100%; }
  .muted { line-height: 1.45; }

  /* Sticky action bar: the one primary action sits in the thumb zone, above the tab bar */
  /* No padding: the bar takes exactly the button's space in the flow, so a card with the sticky button lays out like
     every other card. When it sticks, it floats --ab-gap above the tab bar, centred in the glass band drawn by ::before. */
  .app .actionbar { position: sticky; z-index: 15; bottom: calc(var(--tab-h) + var(--safe-b) + var(--ab-gap)); margin: 12px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .app .actionbar.is-stuck::before { content: ""; position: fixed; z-index: -1; height: 74px; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); pointer-events: none; background: var(--bar-glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px var(--bar-shadow); }
  .app .actionbar .btn, .app .actionbar.btn { width: 100%; min-height: 56px; margin: 0; line-height: 1.15; padding-top: 8px; padding-bottom: 8px; text-align: center; }
  .app form.actionbar { margin: 0 0 10px; }
  .app .card > .row > .actionbar { flex: 1 1 100%; }
  .app .take .btn.primary, .app .take .btn.solid, .app .receive .btn.primary { margin-top: 0; }

  /* Lists and cards */
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-card { border-radius: var(--radius); }
  .item-body { padding: 10px 12px 14px; }
  .item-name { font-size: 1rem; }
  .place-cards, .drone-grid { grid-template-columns: 1fr; gap: 10px; }
  .place-card, .drone-card { margin: 0; }
  .result { min-height: 76px; padding: 12px 14px; gap: 14px; flex-wrap: nowrap; }
  .result > span:last-child { min-width: 0; }
  .match { gap: 12px; }
  .match .thumb { width: 72px; height: 72px; }
  .match-text { flex: 1 1 0; }
  .chips { gap: 8px; }
  .tiles { gap: 10px; }
  .tile { border-radius: var(--radius); }
  .quiet a { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .bigsearch { margin-bottom: 16px; }
  .bigsearch input { font-size: 17px; min-height: 56px; }
  .hint { margin-bottom: 20px; }

  /* Tables turn into stacked cards: no sideways scrolling */
  table.stack, table.stack tbody { display: block; }
  table.stack tr:has(> th) { display: none; }
  table.stack tr { display: grid; gap: 8px; padding: 14px 16px; margin: 0 0 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
  table.stack td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  table.stack td[data-label] { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
  table.stack td[data-label]::before { content: attr(data-label); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  table.stack td:empty { display: none; }
  table.stack td[data-label=Item] { order: -1; display: block; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 600; }
  table.stack td[data-label=Item]::before { content: none; }
  table.stack .thumb-link, table.stack .hist-item { display: flex; }
  table.stack td .btn { width: 100%; }
  .scroll { overflow: visible; }
  .adm-table-wrap { overflow: visible; }

  /* Forms */
  .chips.choose .chip { min-height: 52px; }
  .stepper input { font-size: 1.4rem; }
  .what-form { max-width: none; }
  /* My items on phones: the buttons stack (the first Return is the sticky bar, so the card, not the button row,
     must be its container: display contents), then the label, then the amount and Use some side by side */
  .held-card { padding: 16px; }
  .row.held { grid-template-columns: 56px 3rem minmax(0, 1fr); column-gap: 12px; }
  .held-qty { font-size: 2.1rem; }
  .held-qty.long { font-size: 1.5rem; }
  .held-actions { display: contents; }
  .held-actions > form, .app .held-card .actionbar { margin: 0 0 12px; }
  .held-actions > form:last-child { margin-bottom: 0; }
  .usesome { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }

  /* Flash messages become a toast above the tab bar */
  body.app > .flash { position: fixed; z-index: 40; left: max(12px, var(--safe-l)); right: max(12px, var(--safe-r)); bottom: calc(var(--tab-h) + var(--safe-b) + 12px);
    border-radius: var(--radius); text-align: left; padding: 14px 18px; box-shadow: 0 10px 30px -8px var(--shadow), 0 0 0 1px var(--toast-line); animation: toast-in .28s ease-out backwards; transition: opacity .3s ease, transform .3s ease; cursor: pointer; }
  body.app > .flash.over-bar { bottom: calc(var(--tab-h) + var(--safe-b) + 88px); }
  body.app > .flash.gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
  body.app > .flash.ok { background: var(--toast-bg); color: var(--toast-ink); }
  body.app > .flash.error { background: var(--danger); color: var(--white); }

  /* Admin */
  .adm-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 2px 16px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav a { flex: 0 0 auto; scroll-snap-align: start; }
  .adm-form, .adm-form > .btn { max-width: none; width: 100%; justify-self: stretch; }
  .adm-item { padding: 14px; border-radius: var(--radius); }
  .adm-split { width: 100%; }
  .adm-split > form { flex: 1 1 140px; }
  .adm-split .btn { width: 100%; }
  .adm-grid { grid-template-columns: 1fr; }
  .adm-tree { --indent: 8px; }
  .adm-head .grow { flex: 1 1 100%; }
  .adm-small { line-height: 1.4; }
}

/* Small phones: one column of photo cards */
@media (max-width: 340px) { .item-grid { grid-template-columns: 1fr; } }

/* Landscape phone: the tab bar becomes a rail on the left, the page gets the rest */
@media (max-height: 500px) and (orientation: landscape) {
  body.app { padding-left: calc(var(--rail-w) + var(--safe-l)); }
  .app .tabbar { top: 0; right: auto; bottom: 0; width: calc(var(--rail-w) + var(--safe-l)); height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr));
    padding: var(--safe-t) 0 var(--safe-b) var(--safe-l); border-top: 0; border-right: 1px solid var(--line); }
  .app main { padding: 16px 20px 28px; max-width: 760px; }
  .app .top { padding-left: 4px; }
  .app .actionbar { bottom: var(--ab-gap); }
  body.app > .flash { left: calc(var(--rail-w) + var(--safe-l) + 12px); bottom: 12px; }
  body.app > .flash.over-bar { bottom: 84px; }
  .hero { margin-left: -20px; margin-right: -20px; padding-left: 28px; padding-right: 28px; }
  .app h1 { font-size: 2rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app .item-top .photo { max-height: 140px; }
}

/* Phone hero: bleeds to the screen edge inside the padded page */
@media (max-width: 640px) {
  .app .hero { margin: -20px -16px 22px; padding: 56px 20px 28px; min-height: 0; }
  .app .hero.small { min-height: 200px; }
}

/* Tablet: desktop header, but tidier, and the content gets a comfortable measure */
@media (min-width: 641px) and (max-width: 1100px) and (min-height: 501px) {
  .top { padding: 4px 24px; gap: 4px 16px; }
  .top .search { order: 3; flex: 1 1 100%; max-width: none; margin-bottom: 6px; }
  .top nav { gap: 2px 8px; }
  main { padding: 28px 28px 64px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .hero { padding-left: 28px; padding-right: 28px; }
}

/* Mobile pass, round 2 */
.what-art { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .app .hero.small { min-height: 168px; padding-top: 40px; padding-bottom: 22px; }
  .app .card > form.row > .btn, .app .card > .row > .btn { flex: 1 1 100%; }
  .held-text .muted { font-size: .92rem; }
  .app .chips.strip { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 20px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips.strip::-webkit-scrollbar { display: none; }
  .chips.strip .chip { flex: 0 0 auto; }
  .adm-head h3 a, .adm-item > a { min-width: 48px; justify-content: flex-start; }
  .what-form label.btn input { min-height: 0; padding: 0; }
  .app .what-form.fresh { margin: 24px 0 0; }
  .what-art { display: grid; place-items: center; position: relative; height: 200px; margin: 8px 0 0; border-radius: var(--radius); background: var(--deep); color: var(--hivis); box-shadow: inset 0 0 0 1px var(--line); }
  .what-art .ico { width: 56px; height: 56px; stroke-width: 1.25; }
  .what-art::before, .what-art::after { content: ""; position: absolute; width: 44px; height: 44px; background: var(--corner) no-repeat center / contain; }
  .what-art::before { top: 14px; left: 14px; } .what-art::after { bottom: 14px; right: 14px; transform: scale(-1, -1); }
}
@media (max-height: 500px) and (orientation: landscape) { .app .what-form.fresh { bottom: 0; } .what-art { display: none; } }

/* Place page: search, chips, one row per item */
.place-tools .bigsearch { margin-bottom: 10px; }
.place-summary { margin: 0 0 12px; }
.place-row { gap: 14px; flex-wrap: nowrap; min-height: 76px; text-decoration: none; color: inherit; margin: 0 0 10px; }
.place-row[hidden] { display: none; }
.place-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.place-who { font-size: .95rem; }
.place-small { font-size: .82rem; opacity: .85; }
.place-small:empty { display: none; }
.place-qty { flex: 0 0 auto; font-family: var(--display); font-size: 2rem; line-height: 1; text-align: right; }
.place-qty small { display: block; font-family: inherit; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.chips.strip { margin-bottom: 12px; }
.chip .count { margin-left: 8px; background: var(--count-bg); color: var(--count-ink); }
.chip.on .count { background: var(--hivis); color: var(--forest); }
@media (min-width: 641px) { .chips.strip { flex-wrap: wrap; } }
@media (max-width: 640px) { .app .place-tools { position: sticky; top: calc(var(--bar-h) + var(--safe-t)); z-index: 12; margin: -8px -16px 6px; padding: 8px 16px 2px; background: var(--bg); } }

.what-form label.btn { overflow: visible; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { .adm-checks .adm-check { min-height: 48px; } }

@media (max-width: 640px) {
  .app main:has(.what-form.fresh) { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - var(--safe-t)); }
  .app .what-form.fresh { order: 3; margin-top: auto; }
  .app main:has(.what-form.fresh) .what-art { flex: 1 1 auto; height: auto; min-height: 150px; max-height: 340px; margin-bottom: 20px; }
}
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { table.stack td[data-label=Item]:empty { display: none; } }

.adm-head h3 a, .adm-item > a { min-width: 48px; justify-content: flex-start; }
.adm-checks .adm-check { min-height: 48px; }
@media (max-height: 500px) and (orientation: landscape) {
  .app main { padding-top: 12px; }
  .app h1 { font-size: 1.7rem; margin-bottom: .25em; }
  .app .eyebrow { margin-bottom: 4px; }
  .app .big { font-size: 1.5rem; }
  .app .card { padding: 14px; }
  .app .item-top { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
  .app .item-top .photo { width: 72px; height: 72px; max-height: none; object-fit: cover; }
  .app .item-title h1 { font-size: 1.6rem; }
  .app .item-head { padding: 12px 14px; }
  .app .item-head .photo-form { margin-top: 0; }
  .app .card > .shelf-big { font-size: 2rem; }
  .app .card .big + .muted { margin-bottom: .5em; }
}
@media (max-height: 500px) and (orientation: landscape) { .app .card p { margin-bottom: .45em; } .app .card .row { gap: 8px; } }
@media (max-height: 500px) and (orientation: landscape) { .app main > .eyebrow { display: none; } .app .card > .field-label { margin-top: 0; } .app .card .big { font-size: 1.25rem; } }
.adm-nav { scroll-padding-inline: 16px; }

/* ===== Round 3: split pages, form errors, bands, smooth scroll and reveal ===== */
:root { --split-pad: clamp(24px, 7vw, 96px); }

/* One error style for every form: a compact inline notice, left aligned, with an alert icon */
.field-error, p.flash.error { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; text-align: left; background: var(--warn-bg); color: var(--warn-ink);
  border-left: 4px solid var(--danger-line); border-radius: var(--radius); font-size: .95rem; font-weight: 500; line-height: 1.4; }
.field-error::before, p.flash.error::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px; background: var(--alert) center / contain no-repeat; }
.field-error.late { margin: 6px 0 0; }
.split-form .field-error, .split-form p.flash.error { max-width: 420px; }

/* Split pages (login, kiosk): the painting runs the full height from the top; the header floats over the dark side only */
body.split .top { position: absolute; z-index: 6; top: 0; left: 0; width: 50%; background: transparent; padding: 28px var(--split-pad) 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.split .top .brand { padding-left: 0; }
body.split .split-wrap { min-height: 100vh; min-height: 100dvh; }
body.split .split-form { padding: max(120px, var(--split-pad)) var(--split-pad) var(--split-pad); align-items: flex-start; }
.split-form > *, .split-form form { width: 100%; max-width: 420px; }
.split-form form.split-fields { max-width: 420px; }
.split-form .grid { max-width: 520px; }
.split-form h1 { margin-bottom: .35em; }
.split-form form p { margin: 0 0 18px; }
.split-form label { display: block; }
.split-form label > select, .split-form label > input { display: block; width: 100%; margin-top: 8px; }
.kiosk-art .split-art { background-image: url(/static/img/meadow.jpg?v=003e2995d3); background-position: center 60%; }
@media (max-width: 820px) {
  body.split .top { width: 100%; padding: 14px var(--split-pad) 0; background: linear-gradient(180deg, rgba(16, 26, 22, .94) 0%, rgba(16, 26, 22, .82) 60%, rgba(16, 26, 22, 0) 100%); height: 100px; }
  body.split .split-form { padding: 32px var(--split-pad) 48px; }
  .split-art { min-height: 240px; background-image: url(/static/img/clouds-sm.jpg?v=ce8ddfc2e4); }
  .kiosk-art .split-art { background-image: url(/static/img/meadow-sm.jpg?v=18c45e175e); }
  .split-art::before, .split-art::after { top: 76px; }
  body.split .split-wrap { min-height: 0; }
}

/* Page header bands with a painted background */
.band { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; margin: 0 0 24px; padding: 28px 28px 26px; border-radius: var(--radius); overflow: hidden; color: var(--mist);
  background: linear-gradient(180deg, var(--scrim-a) 0%, var(--scrim-m) 40%, var(--scrim-b) 100%), var(--img) center var(--pos, 50%) / cover; background-color: var(--forest); }
.band h1 { color: var(--mist); margin-bottom: .15em; }
.band .eyebrow { color: var(--hivis); }
.band p:last-child { margin-bottom: 0; max-width: 56ch; color: var(--mist); }
.band::before, .band::after { content: ""; position: absolute; width: 44px; height: 44px; background: var(--corner) no-repeat center / contain; opacity: .9; pointer-events: none; }
.band::before { top: 14px; right: 14px; transform: scaleX(-1); }
.band::after { bottom: 14px; right: 14px; transform: scale(-1, -1); }
.band.slim { min-height: 140px; }
.band.slim::after { display: none; }
.band.drone-sky { --img: url(/static/img/drone-sky.jpg?v=fc00ea3d28); --pos: 28%; }
.band.meadow { --img: url(/static/img/meadow.jpg?v=003e2995d3); --pos: 62%; }
.band.radar { --img: url(/static/img/radar.jpg?v=b936843600); --pos: 52%; }
.band.field { --img: url(/static/img/field.jpg?v=04266a9886); --pos: 38%; }
@media (max-width: 820px) {
  .band.drone-sky { --img: url(/static/img/drone-sky-sm.jpg?v=063262e9d8); } .band.meadow { --img: url(/static/img/meadow-sm.jpg?v=18c45e175e); } .band.radar { --img: url(/static/img/radar-sm.jpg?v=734d79f3a1); } .band.field { --img: url(/static/img/field-sm.jpg?v=b0829c84ba); }
}
@media (max-width: 640px) { .band { min-height: 160px; padding: 20px 20px 18px; border-radius: var(--radius); } .band.slim { min-height: 124px; } .band::before, .band::after { width: 32px; height: 32px; } .band p:last-child { font-size: .95rem; } }
@media (max-height: 500px) and (orientation: landscape) { .band, .band.slim { min-height: 110px; padding: 16px 20px; } }

/* Smooth scroll and reveal on scroll (JS adds .rv only when motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rv { opacity: 0; transform: translateY(12px); transition: opacity .38s ease, transform .38s ease; }
  .rv.in { opacity: 1; transform: none; }
}
.kiosk-art .grid .btn { min-height: 64px; text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
@media (max-height: 500px) { body.split .top { padding-top: 14px; } body.split .split-form { padding-top: 76px; padding-bottom: 16px; } .split-form h1 { font-size: 2rem; margin-bottom: .2em; } .split-form form p { margin-bottom: 8px; } .split-form .eyebrow { margin-bottom: 4px; } .split-form label > select, .split-form label > input { margin-top: 4px; min-height: 46px; } .split-form .muted { margin-bottom: 0; } }
@media (max-width: 820px) { body.split .split-wrap { grid-template-columns: minmax(0, 1fr); } .split-form .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ===== Round 4: review fixes ===== */
.code { font-family: "Hanken Grotesk", system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; letter-spacing: 0; }
h1.code, h3.code, .shelf-big.code { font-weight: 600; }
h1.code { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.1; }
.nw { white-space: nowrap; }
.thumb { object-fit: cover; aspect-ratio: 1; }
.stepper button { border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.act .stepper input, .stepper input { border-radius: var(--radius); }
.take .stepper, .receive .stepper { grid-template-columns: 56px 1fr 56px; }
.take .stepper button, .receive .stepper button { width: 56px; height: 56px; }
td .badge, .adm-item .badge { width: fit-content; justify-self: start; }
.strip-fade { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.strip-fade.at-end { -webkit-mask-image: none; mask-image: none; }
.top .bar-back { display: none; }
.adm-item.linked { position: relative; }
.adm-item.linked h3 a::after { content: ""; position: absolute; inset: 0; }
.adm-item .chev { margin-left: auto; color: var(--faint); display: inline-flex; }
.adm-item .chev .ico { width: 18px; height: 18px; }
.adm-reorder { display: flex; gap: 8px; }
.adm-reorder .btn { white-space: nowrap; }
.filepick { display: grid; gap: 8px; margin: 0 0 18px; }
.filepick .field-label { margin: 0; }
.filepick label.btn { position: relative; overflow: hidden; justify-self: start; }
.filepick label.btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; min-height: 0; font-size: 16px; }
.filepick .fname { font-size: .9rem; overflow-wrap: anywhere; }
.kiosk-art #names .btn.on { background: var(--hivis); color: var(--lime-ink); border-color: var(--hivis); }
.kiosk-art #pad h2 { margin-top: 24px; }
.split-form form p > input { display: block; width: 100%; margin-top: 8px; }
.split-form form p > label { display: block; }
.split-form .field-error { margin: 8px 0 0; }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .app .top { height: auto; }
  .app .top.has-back .brand { display: none; }
  .app .top .bar-back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; min-height: 48px; margin-left: -2px; color: var(--mist); }
  .app .bar-back .ico { width: 26px; height: 26px; }
  .app .top.has-back .bar-title { margin-left: 0; }
  .stepper button, .take .stepper button { min-height: 56px; }
  /* codes and links */
  .app .adm-nav, .app .chips.strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .app .adm-nav.at-end, .app .chips.strip.at-end { -webkit-mask-image: none; mask-image: none; }
  /* admin hero: darker scrim, ornaments clear of the text */
  .band.radar { background: linear-gradient(180deg, rgba(16, 24, 20, .55) 0%, rgba(16, 24, 20, .92) 100%), var(--img) center var(--pos, 50%) / cover; background-color: var(--forest); }
  .band { padding-right: 56px; }
  .band::before { top: 10px; right: 10px; }
  .band.slim::before { top: 10px; }
  .adm-reorder { display: grid; grid-template-columns: 1fr 56px 56px; width: 100%; gap: 8px; margin-top: 4px; }
  .adm-reorder form, .adm-reorder .btn { width: 100%; }
  .adm-reorder .btn { padding: 0 8px; }
  .adm-head .adm-reorder { flex: 1 1 100%; }
  .filepick label.btn { justify-self: stretch; }
  /* History cards: item header, one meta line, one detail line */
  table.stack.hist tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 14px; }
  table.stack.hist td { display: inline; grid-template-columns: none; font-size: .92rem; color: var(--muted); }
  table.stack.hist td::before { content: none; }
  table.stack.hist td[data-label=Item] { order: -1; flex: 1 1 100%; display: block; font-size: 1rem; color: var(--ink); padding-bottom: 8px; margin-bottom: 4px; }
  table.stack.hist td[data-label=Item]:empty { display: block; }
  table.stack.hist td[data-label=Detail], table.stack.hist td[data-label=Where] { flex: 1 1 100%; }
  table.stack.hist td[data-label=Detail] { order: 3; color: var(--ink); }
  table.stack.hist td[data-label=Where] { order: 4; font-size: .85rem; }
  table.stack.hist td[data-label=Qty]::before { content: "Qty "; font-weight: 600; }
  /* keyboard open: free the screen */
  body.kb .app .tabbar, body.app.kb .tabbar { display: none; }
  body.kb .actionbar { bottom: var(--ab-gap); }
  body.kb.app main { padding-bottom: 24px; }
  /* login button full width */
  .split-form .btn.primary { width: 100%; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .app .top { display: none; }
  :root { --bar-h: 0px; }
  .app main { padding-top: 14px; }
  .app .actionbar { bottom: var(--ab-gap); }
}

.item-title .eyebrow { display: block; }
.filepick label.btn { overflow: visible; }
.filepick label.btn input { min-height: 0; }

@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { body.app > .flash.over-bar { bottom: auto; top: calc(var(--bar-h) + var(--safe-t) + 10px); } }
@media (max-height: 500px) and (orientation: landscape) { body.app > .flash.over-bar { top: 10px; } }
.field-error, p.flash.error { justify-content: flex-start; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { table.stack.hist tr:has(> th) { display: none; } }

body.kb .app .actionbar.is-stuck::before, body.kb.app .actionbar.is-stuck::before { bottom: 0; }
@media (max-height: 500px) and (orientation: landscape) { .app .actionbar.is-stuck::before { left: calc(var(--rail-w) + var(--safe-l)); bottom: 0; } }
.filepick label.btn { min-height: 52px; }

/* ===== Round 5 ===== */
.item-body .eyebrow { display: block; overflow-wrap: break-word; }
.item-body .eyebrow .code { display: inline; }
.item-stock .nw b { font-weight: 700; }
.place-card .big { display: inline; margin-right: .3em; }
.place-card .big + .muted { display: inline; }
.band.home { min-height: 260px; }
@media (max-width: 640px) { .band.home { min-height: 210px; } }
@media (max-height: 500px) and (orientation: landscape) { .band.home { min-height: 120px; } }
.adm-item.linked { padding: 4px 14px; }
.adm-item.linked .adm-head { flex-wrap: nowrap; min-height: 52px; gap: 8px; }
.adm-item.linked .adm-head .grow { flex: 1 1 0; }
.adm-item.linked h3 a { text-decoration: none; color: var(--ink); min-height: 48px; }
.adm-item.linked .adm-small { margin: 0; }
@media (max-width: 640px) { .adm-item.linked .adm-head .grow { flex: 1 1 0; } .adm-item.linked h3 { font-size: 1.2rem; } }

/* ===== Theme switch: header icon button (desktop) and the Theme row on More ===== */
.theme-form { margin: 0; }
.theme-cycle { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--pill); background: transparent; color: var(--mist); cursor: pointer; }
.theme-cycle .ico { display: none; width: 22px; height: 22px; }
html[data-theme=light] .theme-cycle .i-light, html[data-theme=dark] .theme-cycle .i-dark, html[data-theme=auto] .theme-cycle .i-auto { display: block; }
@media (hover: hover) { .theme-cycle:hover { background: rgba(245, 245, 241, .14); color: var(--hivis); } }
.theme-row { display: grid; gap: 12px; max-width: 560px; margin-top: 16px; padding: 14px 16px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.theme-row .t-head { display: flex; align-items: center; gap: 14px; font-size: 1.02rem; }
.theme-row .t-head .ico { width: 22px; height: 22px; color: var(--accent-ink); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--field-bg); border: 1px solid var(--line); border-radius: var(--pill); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 8px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted);
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.seg button .ico { width: 18px; height: 18px; }
.seg button[aria-pressed=true] { background: var(--seg-bg); color: var(--seg-ink); }
@media (hover: hover) { .seg button[aria-pressed=false]:hover { color: var(--ink); background: var(--line); } }
body.split .top { box-shadow: none; }
@media (max-width: 640px) { .app .top .theme-form { display: none; } }

/* =====================================================================================================
   Exam look. One design language for both themes: square-ish cards on 1px lines, lime serif titles and
   eyebrows, deco corner brackets on the key cards, stat rows with big serif numbers, pill buttons.
   Dark is the exam room palette; Light is the same shapes on Mist and Cloud.
   ===================================================================================================== */
h1 { color: var(--title); font-size: clamp(2.8rem, 7.5vw, 4.8rem); }
h2, h3 { color: var(--ink); }
.eyebrow, label { font-weight: 600; }
.eyebrow { font-size: .74rem; letter-spacing: .14em; color: var(--eyebrow); }
.eyebrow a { color: inherit; }
label, .field-label, th, details summary { font-size: .72rem; letter-spacing: .12em; }
.item-body .eyebrow, .eyebrow.quiet { color: var(--muted); }
.band .eyebrow, .hero .eyebrow, .split-form .eyebrow { color: var(--hivis); }
.band h1, .hero h1 { color: var(--hivis); }
.btn { font-size: .8rem; font-weight: 600; }
.btn.primary::after { font-size: 1rem; }
@media (hover: hover) {
  .btn:not(.primary):not(.danger):hover { border-color: var(--hover-line); }
  .btn.solid:hover { border-color: var(--hover-line); }
}
.card { border-radius: var(--radius); }
.badge { font-weight: 600; letter-spacing: .1em; }
.badge.low, .badge.expired { color: var(--white); }
.brand .word { font-size: 1.6rem; }
.top { box-shadow: 0 1px 0 var(--top-line); }
.search input { border-radius: var(--pill); }
.bigsearch input { border-radius: var(--radius); }
input, select, textarea { border-radius: var(--radius); }
.act .stepper input, .stepper input { border-radius: var(--radius); }
.more-list, .theme-row { border-radius: var(--radius); }
.chip.on:hover, .chip:has(input:checked):hover { border-color: var(--sel-line); }

/* Deco corner brackets, the exam room ornament (static/img/deco.svg). Cards that carry them clear the top. */
.deco { position: relative; --orn-s: 32px; padding-top: calc(var(--orn-s) + 22px); }
.deco::before, .deco::after { content: ""; position: absolute; top: 10px; width: var(--orn-s); height: var(--orn-s); background: var(--orn); opacity: .78; pointer-events: none;
  -webkit-mask: url(/static/img/deco.svg?v=9ecbd135d3) center / contain no-repeat; mask: url(/static/img/deco.svg?v=9ecbd135d3) center / contain no-repeat; }
.deco::before { left: 10px; }
.deco::after { right: 10px; transform: scaleX(-1); }
.card.deco { padding-top: calc(var(--orn-s) + 22px); }
.item-card.deco { padding-top: 0; }

/* Stat rows: big serif numbers, small uppercase labels, thin dividers between, rules above and below */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 16px 0; border-block: 1px solid var(--line); }
.stats.n1 { --n: 1; } .stats.n2 { --n: 2; } .stats.n4 { --n: 4; }
.stats > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 0; }
.stats > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.stats b { font: 400 2.2rem/1 var(--display); color: var(--num); font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.stats span { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.stats small { font: inherit; font-size: .5em; color: var(--muted); margin-left: 4px; }
.card > .stats:first-child { margin-top: 0; }
.card > .stats:last-child { margin-bottom: 0; }
.stats.flat { margin-top: 12px; }
@media (max-width: 400px) { .stats > div + div { padding-left: 10px; } .stats b { font-size: 2rem; } }

/* Home tiles */
.tile { border-radius: var(--radius); }
.tile.deco { --orn-s: 22px; padding-top: 44px; }
.tile.primary { --orn: var(--lime-ink); }
.tile .tile-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.tile .tile-stat i { font: 400 2rem/1 var(--display); font-style: normal; color: var(--num); font-variant-numeric: tabular-nums; }
.tile .tile-stat em { font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Place and drone cards */
.place-card.deco, .drone-card.deco { --orn-s: 28px; }
.place-card .stats, .drone-card .stats { margin: 12px 0; }
.place-card.deco p.muted { margin-bottom: .4em; }

/* Painted bands and photos sit on the night ground: thin line, square corners, ornaments in lime */
.band { border: 1px solid var(--line); border-radius: var(--radius); }
.band .eyebrow { color: var(--hivis); }
.band p:last-child { color: var(--mist); }
.band::before, .band::after { width: 34px; height: 34px; }
.item-card, .drone-card { border-radius: var(--radius); }
.what-art { border-radius: var(--radius); }
.photo, .drone-photo, .thumb { border-radius: var(--radius); }

/* Low stock: in stock and minimum read as a stat row */
table.low td.num { font: 400 1.7rem/1 var(--display); color: var(--num); font-variant-numeric: tabular-nums; }
table.low td.num .nw { white-space: nowrap; }
table.low th.num { text-align: left; }

/* Phone overrides for the exam look */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  h1 { font-size: clamp(2.4rem, 11vw, 3rem); }
  .tile.deco { --orn-s: 20px; padding: 36px 18px 16px; }
  .tile.deco::before, .tile.deco::after { top: 8px; }
  .tile.deco::before { left: 8px; } .tile.deco::after { right: 8px; }
  .card.deco { --orn-s: 28px; padding-top: 50px; }
  .card.deco::before, .card.deco::after { top: 8px; }
  .card.deco::before { left: 8px; } .card.deco::after { right: 8px; }
  .app .hero.small { border-radius: 0; }
  table.stack.low tr { grid-template-columns: 1fr 1fr; gap: 0; padding: 14px 16px 0; }
  table.stack.low td[data-label=Item] { grid-column: 1 / -1; }
  table.stack.low td.num { display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
  table.stack.low td.num + td.num { border-left: 1px solid var(--line); padding-left: 14px; }
  table.stack.low td.num::before { font-size: .66rem; letter-spacing: .12em; }
}
.drone-card.card.deco { padding-top: 22px; }
.drone-card.deco::before, .drone-card.deco::after { z-index: 1; }
.drone-card .drone-thumb + .eyebrow { margin-top: 2px; }
@media (max-width: 640px) { .drone-card.card.deco { padding-top: 18px; } }

table.low td.num::before { font-family: "Hanken Grotesk", system-ui, sans-serif; }
.thumb-link { color: var(--ink); text-decoration: none; }

/* Item page on desktop: keep the take button above the fold */
@media (min-width: 641px) {
  .item-head.deco, .take-card.deco { --orn-s: 24px; padding-top: 40px; }
  main:has(.item-head) { padding-top: 20px; }
  .item-head .item-top { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 20px; }
  .item-head .stats { margin: 10px 0 0; }
  .item-head .stats > div { padding: 8px 0; }
  .item-head .photo-form { margin-top: 0; }
  .item-head.deco { padding-bottom: 12px; }
}

/* Admin, AI */
.ai-privacy { margin: 0 0 16px; }
.ai-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ai-choice .grow { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.ai-moves { display: flex; gap: 8px; }
.ai-moves form { margin: 0; }
.ai-moves .btn { min-width: 56px; }
.ai-result { margin: 10px 0; padding: 12px 16px; border-radius: var(--radius); }
.ai-result.ok { background: var(--ok-bg); color: var(--ok-ink); }
.ai-result.bad { background: var(--warn-bg); color: var(--danger-ink); }
.ai-result ul { margin: 6px 0 0; padding-left: 20px; }
.ai-result li { overflow-wrap: anywhere; }
.ai-ms { font-variant-numeric: tabular-nums; opacity: .85; }
.ai-bad { color: var(--danger-ink); }

/* Photo pickers: thumbnails of what was chosen, each with a remove button (44 px hit area) */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; max-width: 520px; }
.pick-grid:empty { display: none; }
.pick-item { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.pick-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-end; }
.pick-x span { margin: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; background: rgba(16, 26, 22, .82); color: #f2f2ec; border: 1px solid rgba(242, 242, 236, .35); }
.pick-x:focus-visible span { outline: 3px solid var(--hivis); outline-offset: 1px; }

/* =====================================================================================================
   Alignment pass. One spacing scale in 4 px steps for everything stacked; every row inside a card starts on the
   card's content edge; tables are flush with the cards and headings around them; titles and buttons wrap in
   balanced lines (no single orphan word).
   ===================================================================================================== */
p { margin: 0 0 var(--s4); }
h1 { margin-bottom: var(--s6); }
h2 { margin-bottom: var(--s4); }
h3 { margin-bottom: var(--s3); }
/* Eyebrows are their own block (an inline one sits in a line box that adds a few stray pixels above and below) */
.eyebrow { display: flex; width: fit-content; max-width: 100%; margin-bottom: var(--s3); }
.card > :last-child, .adm-item > :last-child, .theme-row > :last-child { margin-bottom: 0; }
.card > :first-child, .adm-item > :first-child { margin-top: 0; }
/* Tables line up with the card or heading around them: no inset on the outer columns */
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
h1, h2, h3, .big, .shelf-big, .eyebrow, .item-name, .tile b, .btn, .chip, .field-label, label, th, summary, .stats span,
.held-text > b, .match-text > b, .place-text > b, .adm-head h3 { text-wrap: balance; }
p, .muted, li, td { text-wrap: pretty; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  h1 { margin-bottom: var(--s4); }
  .eyebrow { margin-bottom: var(--s2); }
}

/* Spacing on the scale: section gaps and the space between controls inside a card */
.act { gap: var(--s3); }
.take-card .eyebrow { margin-bottom: var(--s3); }
.where-row { margin: 0 0 var(--s2); }
.card.where h2 { margin-bottom: var(--s3); }
.field-label { margin-top: var(--s4); }
.act .field-label { margin-top: var(--s1); }
.filepick { margin-bottom: var(--s4); }
.tiles { margin-bottom: var(--s8); }
.drone-thumb { margin-bottom: var(--s4); }
.drone-card .drone-thumb + .eyebrow { margin-top: 0; }
.drone-card .eyebrow { margin-bottom: var(--s1); }
.item-head .stats { margin-top: var(--s3); }
.place-card.deco p.muted { margin-bottom: var(--s2); }
.place-card.deco > p.muted:last-child { margin-bottom: 0; }
h2.adm { margin: var(--s8) 0 var(--s3); }
.adm-item, .adm-tree .adm-item { margin-bottom: var(--s2); }
.adm-list > .adm-item:last-child { margin-bottom: 0; }
.adm-list { margin-bottom: var(--s4); }
main > .flash, p.flash.error { margin-bottom: var(--s4); }
.held-text > b, .place-text > b, .match-text > b { display: block; }
/* Radios and checkboxes sit on the edge they belong to (the browser default adds 3 to 5 px around them) */
input[type=checkbox], input[type=radio] { margin: 0; }
/* Buttons that end each card of a list share one width, so the column lines up whether or not it is the primary */
.match .btn { min-width: 9rem; }
/* Reorder buttons: fixed columns, so the arrows line up on every row (the first row has no "Make first") */
.adm-reorder { display: grid; grid-template-columns: 8.5rem 56px 56px; gap: var(--s2); }
.adm-reorder > form, .adm-reorder .btn { width: 100%; }
.adm-reorder .btn { padding: 0 8px; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .adm-reorder { grid-template-columns: 1fr 56px 56px; }
  table.stack tr { margin-bottom: var(--s3); }
  .app form:has(> .actionbar) > .btn { min-height: 56px; }
}
.card.item-card { padding: 0; }
.big { margin-bottom: var(--s3); }
.filters > form { margin-top: 0; }
@media (max-width: 640px) { .filters[open] > form { margin-top: var(--s1); } }
/* "Used only some?" sits in the first column but reads into its field: right aligned, next to the amount */
.usesome label { text-align: right; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { .usesome label { text-align: left; } }

/* One inset for every card-like box: text in a card, an admin row, a list and a painted band starts on the same line */
.card, .filters, .held-card { padding: var(--pad); }
@media (min-width: 641px) { .filters { padding: var(--pad); } }
.filters { padding-top: 0; padding-bottom: 0; }
@media (min-width: 641px) { .filters, .filters[open] { padding: var(--pad); } }
.adm-item { padding: 16px var(--pad); }
.adm-item.linked { padding: 4px var(--pad); }
.more-row { padding: 0 var(--pad); }
.theme-row { padding: 16px var(--pad); }
.band { padding: 28px var(--pad) 24px; }
.deco, .card.deco { padding-top: calc(var(--orn-s) + 24px); }
.drone-card.card.deco { padding-top: var(--pad); }
.drone-thumb { width: calc(100% + 2 * var(--pad)); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s4); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  :root { --pad: 16px; }
  .card.deco { padding-top: 50px; }
  .band { padding: 20px 56px 16px var(--pad); }
  .drone-card.card.deco { padding-top: var(--pad); }
}
/* Forms that are cards span the column like every other card; their fields keep a readable measure */
.card.adm-form, .card.act { max-width: none; }
.card.adm-form > *, .card.act > * { max-width: 520px; }
.card.act.receive > * { max-width: 560px; }
.card.adm-form > .btn { justify-self: start; }
/* Admin rows: their parts stack on the spacing scale; empty status holders take no room */
.adm-item > :empty:not(br) { display: none; }
.adm-item > .adm-split, .adm-item > form, .adm-item > .adm-head + .ai-choice, .adm-item > p { margin-top: var(--s3); }
.adm-form .adm-split .btn { min-width: 11rem; }
.item-head .photo-form { margin-top: var(--s3); }
.scroll + p, table + p { margin-top: var(--s4); }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) { .app .actionbar .btn { padding-inline: 16px; } }
.adm-item > .adm-head + details, .adm-item > details { margin-top: var(--s2); }
.adm-form > .adm-split { margin-top: var(--s1); }
/* Overview: six cards in two even rows of three */
@media (min-width: 900px) { .adm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Drones: the cards fill the row instead of leaving an empty column */
.drone-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Kiosk: the chosen name is a selection, not a second hi-vis action (OK is the one primary) */
.kiosk-art #names .btn.on { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
/* Tables: the first line of every cell sits on one line; dates and buttons never break */
td .btn { white-space: nowrap; }
@media (min-width: 641px) {
  /* Data tables: every cell's first line sits on one baseline (big serif numbers, small text and badges alike).
     Thumbnails are a line tall, so they sit beside the first line of the name. */
  table.hist td, table.low td, table.lots td { vertical-align: baseline; }
  table.hist .thumb.sm, table.low .thumb.sm, table.lots .thumb.sm { width: 26px; height: 26px; }
  table .hist-item, table .thumb-link { align-items: flex-start; }
  table .hist-item { min-height: 0; }
  table .thumb-link { min-height: var(--tap); }
  .hist-item > span, .thumb-link > span { align-self: baseline; }
  td[data-label=Expiry], td[data-label=Qty], td[data-label=Lot] { white-space: nowrap; }
}
@media (min-width: 1000px) { td[data-label=When] { white-space: nowrap; } }
/* History filters: a grid, so the second row lines up with the first */
.filters > form.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.filters > form.row > * { width: 100%; min-width: 0; }
.filters .days { width: 100%; flex: none; }
@media (min-width: 1000px) { .filters > form.row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Drone page: the amount is a short field, the destination takes the rest */
.drone-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.drone-row > .drone-info { grid-column: 1 / -1; }
.drone-row > input[type=number] { width: 100%; }
@media (max-width: 640px) { .drone-row { grid-template-columns: 96px minmax(0, 1fr); } .drone-row > .btn { grid-column: 1 / -1; } }
/* A heading inside a form card starts a new section */
form.card > h2 { margin-top: var(--s6); }
/* Plain tables (item specs): label and value share a baseline */
table:not(.stack) th, table:not(.stack) td { vertical-align: baseline; }
/* Drafts to review: one row per draft, the action on the right */
.queue-list .adm-head { flex-wrap: nowrap; }
.queue-list h3 { font-size: 1.2rem; }
.queue-list .adm-head > .btn, .queue-list .adm-head > .muted { flex: 0 0 auto; }
@media (max-width: 640px) { .queue-list .adm-head { flex-wrap: wrap; } .queue-list .adm-head > .btn { flex: 1 1 100%; } }
/* Tablets: the admin sections scroll in one row (a wrapped row left "Changes" alone), and the extra jobs on Home
   form an even grid of three */
@media (min-width: 641px) and (max-width: 1000px) {
  .adm-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .adm-nav.at-end { -webkit-mask-image: none; mask-image: none; }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav a { flex: 0 0 auto; }
  .quiet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips.strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .chips.strip.at-end { -webkit-mask-image: none; mask-image: none; }
  .chips.strip::-webkit-scrollbar { display: none; }
  .chips.strip .chip { flex: 0 0 auto; }
}
/* Take: the places and "Into a drone" fit on one row on wide screens */
.act.take { max-width: 680px; }
.chips.choose .chip { padding: 0 18px; }


/* ---------- storage room: floor plan, racks, moving ---------- */
.rack-where { font-weight: 600; }
.room-plan { display: grid; gap: 12px; margin: 16px 0; padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--raised); }
.room-back { display: flex; gap: 8px; flex-wrap: wrap; }
.room-floor { display: grid; grid-template-columns: minmax(96px, 1fr) 2fr; gap: 12px; min-height: 180px; align-items: stretch; }
.room-left { display: grid; }
.room-door { align-self: end; justify-self: center; padding: 6px 28px; border-top: 4px solid var(--faint); color: var(--muted); font-size: .85rem; }
.room-rack { flex: 1 1 96px; display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 12px; border: 1px solid var(--ctl-line); border-radius: 8px; background: var(--card); color: var(--ink); text-decoration: none; }
.room-rack:hover, .room-rack:focus-visible { border-color: var(--hover-line); outline: 2px solid var(--hover-line); }
.room-rack.locked { border-color: var(--danger-line); }
.room-letter { font-size: 1.8rem; line-height: 1; }
.room-n { font-size: .8rem; }
.room-bays { display: flex; gap: 3px; margin-top: auto; }
.room-bays i { flex: 1; height: 6px; border-radius: 2px; background: var(--faint); }
.area-tabs { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; }
.area-tabs a { flex: none; min-width: 48px; padding: 10px 14px; text-align: center; font-weight: 600; border: 1px solid var(--ctl-line); border-radius: 8px; color: var(--ctl-ink); text-decoration: none; }
.area-tabs a.on { background: var(--seg-bg); border-color: var(--seg-bg); color: var(--seg-ink); }
.area-tabs .room-link { margin-left: auto; font-weight: 400; }
.row-actions { margin: 8px 0; }
.undo-bar { margin: 8px 0; }
.rack { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(86vw, 280px), 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
.rack-sec { scroll-snap-align: start; min-width: 0; }
.rack-sec h2 { margin: 0 0 6px; font-size: 1rem; text-align: center; }
.rack-row { padding: 6px 8px; border: 1px solid var(--line); border-bottom-width: 3px; background: var(--card); }
.rack-row + .rack-row { margin-top: 6px; }
.rack-row.here { outline: 3px solid var(--sel-line); }
.rack-row.hazrow { border-bottom-color: var(--danger-line); }
.rack-rowhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8rem; color: var(--muted); }
.rack-rowhead .fill { margin-left: auto; }
.fill { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; vertical-align: middle; }
.fill i { display: block; height: 100%; background: var(--faint); }
.fill i.over { background: var(--danger-line); }
.rack-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 44px; }
.rack-empty { grid-column: 1 / -1; align-self: center; text-align: center; font-size: .8rem; color: var(--muted); border: 1px dashed var(--faint); border-radius: 6px; padding: 12px; }
.tile-box { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--ink); text-decoration: none; font-size: .72rem; line-height: 1.2; }
.tile-box img, .tile-box .noimg { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--thumb-bg); }
.tile-box .ts { position: absolute; left: 5px; top: 5px; padding: 0 4px; border-radius: 3px; background: var(--pill-bg); color: var(--white); font-size: .68rem; }
.tile-box .tn { margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-box .tq { position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; border-radius: 50%; text-align: center; background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; font-size: .68rem; line-height: 16px; }
.tile-box.haz { border-color: var(--danger-line); }
.tile-box.dim { opacity: .3; }
.tile-box.hit { opacity: 1; border-color: var(--sel-line); outline: 3px solid var(--sel-line); animation: box-glow 1.4s ease-in-out infinite alternate; }
.tile-box.pick input { position: absolute; right: 4px; bottom: 26px; width: 22px; height: 22px; accent-color: var(--seg-bg); }
.tile-box.pick:has(input:checked) { outline: 3px solid var(--sel-line); }
@keyframes box-glow { to { box-shadow: 0 0 14px 3px var(--sel-line); } }
@media (prefers-reduced-motion: reduce) { .tile-box.hit { animation: none; } }
.move-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; width: 100%; min-height: 56px; margin-top: 6px; padding: 8px 12px; text-align: left; border: 1px solid var(--ctl-line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.move-row:hover:not(:disabled) { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-line); }
.move-row .fill { grid-column: 1 / -1; width: 100%; }
.move-state { font-size: .8rem; color: inherit; }
.move-row.hazrow { border-left: 4px solid var(--danger-line); }
.move-row:disabled { opacity: .45; cursor: not-allowed; }
.box-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.box-photos { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 8px; overflow-x: auto; margin: 12px 0; }
.box-photos img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }
.box-history { margin: 6px 0; padding-left: 18px; }
.count-line input[type=number] { width: 96px; }
.rack-sticky { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.rack-sticky .rack-where, .rack-sticky .undo-bar { margin: 0; }
@media (max-width: 720px) { .move-rack { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } }
.serial-big { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-ink); }
.tile-box .ts { max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; font-size: .62rem; }
.mini-room { display: flex; gap: 6px; margin: 8px 0; align-items: end; }
.mini-area { flex: 1 1 0; min-width: 0; font-size: .72rem; text-align: center; color: var(--muted); }
.mini-area.left { flex: 0 0 18%; margin-right: 6px; }
.mini-secs { display: flex; gap: 2px; margin-top: 2px; }
.mini-secs i { flex: 1; height: 12px; border-radius: 2px; background: var(--line); }
.mini-secs i.on { background: var(--seg-bg); outline: 2px solid var(--sel-line); }
.live-panel { position: absolute; left: 8px; right: 8px; top: 100%; z-index: 30; max-width: 620px; margin: 4px auto 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 0 8px 24px var(--shadow); max-height: 70vh; overflow-y: auto; }
.live-panel:empty { display: none; }
.live-hit { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--card); }
.live-main { display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; color: var(--ink); text-decoration: none; }
.live-main img, .live-main .noimg { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--thumb-bg); }
.live-text { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; line-height: 1.3; }
.live-where { color: var(--muted); font-size: .78rem; }
.live-move { flex: none; }
.live-none { margin: 0; padding: 12px; font-size: .85rem; color: var(--muted); }
.live-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.import-line .warn { margin: 6px 0 0; }
.import-line.bad { border-color: var(--danger-line); }
/* The panel sits inside the dark header: reset what it would otherwise inherit from the header's links. */
.top .live-panel, .top .live-panel a, .top .live-panel b, .top .live-panel span { color: var(--ink); text-transform: none; letter-spacing: normal; }
.top .live-panel .live-where, .top .live-panel .live-none { color: var(--muted); }
.top .live-panel .code { color: var(--accent-ink); font-weight: 600; }
.top .live-panel a.live-move { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--ctl-line); border-radius: var(--pill); color: var(--ctl-ink); font-size: .85rem; font-weight: 600; background: var(--card); }
.qty-edit { display: grid; gap: 10px; margin-top: 10px; }
.qty-step { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; align-items: center; }
.qty-step input { width: 100%; text-align: center; font-size: 1.25rem; min-height: 56px; }
.qty-btn { min-height: 56px; padding: 0; font-size: 1.6rem; line-height: 1; justify-content: center; }
.qty-set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* ---------- room floor plan that keeps its shape at any width ---------- */
.room-h1 { margin-bottom: 4px; }
.room-lede { margin: 0 0 12px; }
.floor { display: grid; grid-template-columns: minmax(64px, 22%) minmax(0, 1fr); grid-template-rows: auto minmax(132px, auto);
  grid-template-areas: "corner back" "left space"; gap: 8px; padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--raised); }
.floor-back { grid-area: back; display: grid; gap: 6px; }
.floor-left { grid-area: left; display: grid; }
.floor-space { grid-area: space; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 0 2px 8%; }
.floor-door { padding: 4px 22px 0; border-top: 4px solid var(--faint); color: var(--muted); font-size: .78rem; }
.floor .room-rack { container-type: inline-size; min-width: 0; min-height: 84px; padding: 8px; gap: 3px; overflow: hidden; }
.floor .room-rack.side { min-height: 100%; }
.floor .room-rack.side .room-bays { flex-direction: column; flex: none; height: 56px; margin-top: 8px; }
.floor .room-rack.side .room-bays i { width: 6px; height: auto; flex: 1; }
.floor .room-letter { font-size: clamp(1.2rem, 6vw, 1.8rem); }
.floor .room-letter .ico { width: 1.15em; height: 1.15em; }
.room-title { font-size: .82rem; line-height: 1.2; overflow-wrap: anywhere; }
.room-n { font-size: .75rem; color: var(--muted); }
@container (max-width: 96px) { .room-title, .room-n-word { display: none; } }
@container (max-width: 40px) { .room-n { display: none; } .room-bays { display: none; } }
.area-list { display: grid; gap: 8px; margin: 16px 0; }
.area-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; }
.area-list a:hover, .area-list a:focus-visible { border-color: var(--hover-line); }
.area-list a > span { display: flex; flex-direction: column; min-width: 0; }
.area-list .muted { font-size: .82rem; }
.area-letter { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--seg-bg); color: var(--seg-ink); font-size: 1.3rem; }
.area-letter.locked { background: var(--warn-bg); color: var(--danger-ink); }
@media (min-width: 900px) { .area-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- rack: compact on phones, drag to move ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.area-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; overflow: visible; }
.area-tabs a { min-width: 0; min-height: 44px; display: grid; place-items: center; padding: 6px; }
.area-tabs a .ico { width: 20px; height: 20px; }
.sec-jump { display: flex; gap: 6px; margin: 0 0 8px; }
.sec-jump a { flex: 1; min-height: 40px; display: grid; place-items: center; border-radius: 8px; border: 1px dashed var(--line); color: var(--muted); text-decoration: none; font-size: .85rem; }
.sec-jump a.on { border-style: solid; border-color: var(--sel-line); color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .sec-jump { display: none; } }
.rack-help { margin: 4px 0 10px; font-size: .85rem; color: var(--muted); }
.rack-help .hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .rack-help .hint-touch { display: none; } .rack-help .hint-mouse { display: inline; } }
@media (max-width: 600px) { .rack-h1 { font-size: 2.1rem; line-height: 1.05; } .rack-sec h2 { position: sticky; left: 0; } }
.tile-box[data-box] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: grab; touch-action: manipulation; }
.tile-box img { -webkit-user-drag: none; pointer-events: none; }
.drag-src { opacity: .25; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin: 0; box-shadow: 0 12px 28px var(--shadow); outline: 3px solid var(--sel-line); cursor: grabbing; }
body.dragging, body.dragging * { cursor: grabbing; }
body.dragging .rack { scroll-snap-type: none; }
.rack-row.drop-ok { outline: 2px dashed var(--sel-line); outline-offset: -2px; }
.rack-row.drop-no { opacity: .45; }
.rack-row.drop-hover.drop-ok { outline: 4px solid var(--sel-line); outline-offset: -4px; box-shadow: 0 0 0 4px var(--sel-line); }
[data-area-tab].drop-hover { outline: 3px solid var(--sel-line); }
.drag-status { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 61; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-ink); font-size: .9rem; box-shadow: 0 6px 18px var(--shadow); pointer-events: none; }
body.drag-saving .rack { opacity: .6; pointer-events: none; }