/* 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(fonts/HankenGrotesk.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --forest: #1c2c26; --pine: #103d1d; --canopy: #275f4b; --sage: #628c7d;
  --mist: #f5f5f1; --cloud: #e0ded7; --grain: #fff1cf; --ice: #baf7ff; --hivis: #e5ff42;
  --white: #fff; --danger: #b3261e;
  --bg: var(--mist); --card: var(--white); --ink: var(--forest); --muted: var(--canopy); --line: var(--cloud);
  --display: "Instrument Serif", "Times New Roman", serif;
  --radius: 4px; --pill: 9999px; --tap: 48px;
  --corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23e5ff42' stroke-width='1.5'%3E%3Cpath d='M1 79V1h78M8 72V8h64M15 60V15h45M1 22h14M22 1v14M8 40h7M40 8v7'/%3E%3C/svg%3E");
  color-scheme: light;
}
* { 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(--canopy); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 2px; box-shadow: 0 0 0 5px var(--forest); }

/* 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(--canopy); margin: 0 0 14px; }
.eyebrow img { width: 16px; height: auto; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--forest); 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; }
.brand .tag { font-size: .68rem; letter-spacing: .14em; color: var(--hivis); border: 1px solid var(--hivis); border-radius: var(--pill); padding: 3px 9px; }
.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, .25); 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(--canopy); }
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(--sage); border-radius: var(--radius); background: var(--white); color: var(--ink); }
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(--forest);
  background: transparent; border: 1px solid var(--forest); 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(--forest); 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(--forest); background: transparent; color: var(--forest); 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(--forest); }
.btn.primary::after { content: "\2192"; font-size: 1.05rem; letter-spacing: 0; }
.btn.solid { background: var(--canopy); border-color: var(--canopy); color: var(--white); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; color: var(--canopy); }

/* 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(--ice); color: var(--forest); }
.flash.error { background: var(--grain); color: var(--danger); }
.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(--cloud); color: var(--forest); }
.badge.hazmat { background: var(--grain); color: var(--danger); }
.badge.soon { background: var(--grain); }
.badge.expired { background: var(--danger); color: var(--white); }
.ai { background: var(--ice) !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%; max-height: 280px; object-fit: contain; background: var(--cloud); 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(--canopy); }
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(--canopy); }

/* 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, rgba(28, 44, 38, .1) 0%, rgba(28, 44, 38, .75) 100%), url(img/field.jpg) 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 .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(--forest); 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, .3); color: var(--mist); }
.split-form select option { color: var(--forest); }
.split-form .btn:not(.primary) { border-color: rgba(245, 245, 241, .4); color: var(--mist); }
.split-art { position: relative; background: url(img/clouds.jpg) center / cover; }
.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(--forest);
  color: var(--forest); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.chip.on { background: var(--forest); color: var(--hivis); }
.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%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cloud); 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(--canopy); background: var(--cloud); }
.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; 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%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }
.photo-form { margin-top: 4px; }
.photo-form summary { display: inline-flex; padding: 0 4px; }
@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(--cloud); border-radius: var(--radius); display: inline-block; }
.thumb.sm { width: 40px; height: 40px; }
.thumb.empty { background: var(--cloud) 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; }
.row.held { align-items: center; gap: 12px; min-height: var(--tap); }
.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); }
.row.held { flex-wrap: nowrap; align-items: center; gap: 12px; }
.row.held > span:last-child { flex: 1 1 auto; min-width: 0; }

/* 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(--forest); color: var(--hivis); 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(--white);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.tile .ico { width: 36px; height: 36px; margin-bottom: 14px; color: var(--canopy); }
.tile b { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.01em; }
.tile span { color: var(--canopy); font-size: .95rem; line-height: 1.35; }
.tile.primary { background: var(--hivis); border-color: var(--hivis); }
.tile.primary .ico, .tile.primary span { color: var(--forest); }
.tile .count { margin: 0 2px; }
.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(--white);
  color: var(--forest); text-decoration: none; font-size: .95rem; }
.quiet .ico { width: 18px; height: 18px; color: var(--canopy); }

/* 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(--forest); }
.bigsearch .btn { min-height: 60px; flex: 0 0 auto; }
.hint { display: flex; gap: 12px; align-items: flex-start; color: var(--canopy); 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(--canopy); }
.result { text-decoration: none; color: inherit; min-height: 72px; }
.item-photo.empty .ico { width: 40px; height: 40px; color: var(--sage); }

/* 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(--grain); color: var(--danger); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0 0; }
.warn .ico { margin-top: 2px; }
.warn span { color: var(--forest); }
.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(--canopy); }
.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(--forest); color: var(--hivis); }
.chip:has(input:focus-visible) { outline: 3px solid var(--hivis); box-shadow: 0 0 0 5px var(--forest); }
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(--forest); color: var(--hivis); }
.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 */
.held-card { padding: 16px; }
.held-card .held { margin-bottom: 12px; }
.held-card .held-text { line-height: 1.3; }
.held-card .thumb { width: 56px; height: 56px; }
.held-qty { font-family: var(--display); font-size: 2.4rem; line-height: 1; min-width: 2ch; }
.held-text { flex: 1 1 auto; min-width: 0; }
.held-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.held-actions form { display: grid; gap: 6px; }
.held-actions .btn { width: 100%; min-height: 56px; }
.held-actions .dest { font-size: .85rem; line-height: 1.3; }
.place-head { display: flex; align-items: center; gap: 10px; }
.place-head .ico { width: 24px; height: 24px; color: var(--canopy); }
.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(--ice); border-radius: var(--radius); font-weight: 500; }
.looking[hidden] { display: none; }
.spin { width: 22px; height: 22px; border: 3px solid var(--forest); 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(--grain); border-radius: var(--radius); }
.notice .ico { margin-top: 2px; color: var(--danger); }
.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(--white); 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(--forest); }
.shelf-choice .muted { grid-column: 2; font-size: .9rem; }
.shelf-choice.first { border: 2px solid var(--forest); padding: 20px; }
.shelf-choice.first .shelf-big { font-size: clamp(2.4rem, 8vw, 3.4rem); }
.shelf-choice:has(input:checked) { border-color: var(--forest); background: var(--ice); }
.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: flex; align-items: center; gap: 10px; margin-top: 10px; }
.usesome label { flex: 1 1 auto; text-transform: none; letter-spacing: normal; font-size: .9rem; font-weight: 400; }
.usesome input { width: 84px; flex: 0 0 auto; text-align: center; }
.usesome .btn { flex: 0 0 auto; }
.held-card details { margin-top: 4px; }
.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(--forest); color: var(--mist); }
  .btn.primary:hover { background: var(--forest); color: var(--hivis); border-color: var(--forest); }
  .btn.solid:hover { background: var(--forest); border-color: var(--forest); }
  .btn.danger:hover { background: var(--danger); color: var(--white); }
  a.card:hover { border-color: var(--sage); }
  .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(--forest); color: var(--mist); }
  .chip:hover { background: var(--forest); color: var(--mist); }
  .chip.on:hover, .chip:has(input:checked):hover { color: var(--hivis); }
  .tile:hover { border-color: var(--forest); }
  .tile.primary:hover { background: var(--forest); border-color: var(--forest); }
  .tile.primary:hover b, .tile.primary:hover span, .tile.primary:hover .ico { color: var(--hivis); }
  .quiet a:hover { border-color: var(--forest); }
  .result:hover { border-color: var(--sage); }
}

/* 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(--forest); border-radius: var(--pill);
  color: var(--forest); text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.adm-nav a:focus-visible { background: var(--forest); color: var(--mist); }
.adm-nav a[aria-current=page] { background: var(--forest); color: var(--hivis); }
.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 { opacity: .65; }
.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(--white); }
.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); }
.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); box-shadow: 0 0 0 1px var(--danger); }
.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(--white); border: 1px solid var(--line); border-radius: 14px; 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(--canopy); }
.more-row .ico:last-child { width: 18px; height: 18px; color: var(--sage); }
.more-row:active { background: var(--mist); }
.more-out { margin-top: 20px; max-width: 560px; }
.more-out .btn { width: 100%; }
.stack td[data-label]::before { content: attr(data-label); }
.adm-tree .adm-item { margin-left: calc(var(--d, 0) * var(--indent, 18px)); }

/* 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: rgba(28, 44, 38, .96); -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); }
  .app .top .search { display: none; order: 9; flex: 1 1 100%; max-width: none; padding: 0 8px 10px; }
  .app .top.searching .search { display: block; animation: rise .18s ease-out backwards; }
  .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: rgba(255, 255, 255, .94); -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(--canopy); 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(--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(--forest); color: var(--hivis); box-shadow: 0 0 0 2px var(--white); }

  /* 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: 12px; }
  .btn { min-height: 52px; }
  input, select, textarea { font-size: 16px; min-height: 52px; border-radius: 10px; }
  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 */
  .app .actionbar { position: sticky; z-index: 15; bottom: calc(var(--tab-h) + var(--safe-b)); margin: 12px 0 0; padding: 8px 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: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgba(28, 44, 38, .35); }
  .ab-sentinel { height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
  .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; }
  .app .row.held { margin-bottom: 4px; }

  /* Lists and cards */
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .item-card { border-radius: 12px; }
  .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: 14px; }
  .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: 12px; }
  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 { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--canopy); }
  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; }
  .usesome { flex-wrap: wrap; }
  .usesome label { flex: 1 1 100%; }
  .usesome input { flex: 1 1 90px; width: auto; }
  .usesome .btn { flex: 1 1 130px; }
  .held-actions { display: contents; }
  .held-actions > form:not(.actionbar) { margin: 0 0 10px; }
  .held-actions > form:not(.actionbar) .btn { width: 100%; }
  .app .held-card .actionbar { margin-bottom: 10px; }
  .held-card details { margin-top: 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: 14px; text-align: left; padding: 14px 18px; box-shadow: 0 10px 30px -8px rgba(28, 44, 38, .45); 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(--forest); color: var(--mist); }
  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: 12px; }
  .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: 0; }
  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: center; }
  .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: 16px; background: var(--forest); color: var(--hivis); }
  .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(--canopy); margin-top: 4px; }
.chips.strip { margin-bottom: 12px; }
.chip .count { margin-left: 8px; background: var(--forest); }
.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 main:has(.what-form.fresh) > .ab-sentinel { order: 3; margin-top: auto; }
  .app .what-form.fresh { order: 3; margin-top: 0; }
  .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: center; }
.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); --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"); }

/* 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(--grain); color: var(--forest);
  border-left: 4px solid var(--danger); border-radius: 6px; 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(img/meadow.jpg); 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, 24, 20, .8), rgba(16, 24, 20, 0)); height: 96px; }
  body.split .split-form { padding: 32px var(--split-pad) 48px; }
  .split-art { min-height: 240px; background-image: url(img/clouds-sm.jpg); }
  .kiosk-art .split-art { background-image: url(img/meadow-sm.jpg); }
  .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: 16px; overflow: hidden; color: var(--mist);
  background: linear-gradient(180deg, rgba(28, 44, 38, .12) 0%, rgba(28, 44, 38, .8) 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(img/drone-sky.jpg); --pos: 28%; }
.band.meadow { --img: url(img/meadow.jpg); --pos: 62%; }
.band.radar { --img: url(img/radar.jpg); --pos: 52%; }
.band.field { --img: url(img/field.jpg); --pos: 38%; }
@media (max-width: 820px) {
  .band.drone-sky { --img: url(img/drone-sky-sm.jpg); } .band.meadow { --img: url(img/meadow-sm.jpg); } .band.radar { --img: url(img/radar-sm.jpg); } .band.field { --img: url(img/field-sm.jpg); }
}
@media (max-width: 640px) { .band { min-height: 160px; padding: 20px 20px 18px; border-radius: 14px; } .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: 16px; }
.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(--sage); 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(--forest); 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; }
  .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(--canopy); }
  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: 0; }
  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: 0; }
}

.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; } }