@font-face {
  font-family: Roboto;
  src: url('/web/fonts/roboto.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #091e19;
  --surface: #102b23;
  --forest: #12392e;
  --surface-raised: #143128;
  --text: #f9f3ea;
  --muted: #cbded4;
  --copper: #f0bd94;
  --copper-ink: #291b13;
  --outline: #92ad9f;
  --outline-muted: #426454;
  --error: #ffb4ab;
  --width: 41.25rem;
  --gutter: 1.25rem;
  font: 1rem/1.4 Roboto, system-ui, sans-serif;
  background: var(--background);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
main, .header-inner, .bottom-nav > div {
  width: min(100%, var(--width));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

main {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding-block: 1.25rem max(1.625rem, env(safe-area-inset-bottom));
}
main.narrow { max-width: 36.875rem; gap: 1rem; }
.with-nav main { padding-bottom: calc(6.625rem + env(safe-area-inset-bottom)); }

h1, h2, h3, p { margin: 0; overflow-wrap: anywhere; }
h1 { font-size: 2rem; line-height: 1.16; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p, small { max-width: 100%; }
a { color: var(--copper); }
a, button, summary { -webkit-tap-highlight-color: transparent; }
ul { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.icon { width: 1.375rem; height: 1.375rem; flex: none; vertical-align: middle; }
.icon-action, .text-action, button, .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  border: 0;
  border-radius: 999px;
  padding: .5rem 1rem;
  background: var(--copper);
  color: var(--copper-ink);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.icon-action, .text-action { background: transparent; color: var(--copper); padding-inline: .5rem; }
.icon-action { min-width: 3rem; }
.text-action .icon { width: 1rem; height: 1rem; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: .16rem solid currentColor; outline-offset: .15rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--surface);
  padding-top: env(safe-area-inset-top);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 4.25rem;
  padding-block: .625rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.brand img { border-radius: .6875rem; flex: none; }
.app-title { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.app-title small { display: block; font-size: .75rem; color: var(--muted); }
.settings { position: relative; margin-inline-start: auto; }
.settings form {
  position: absolute;
  inset-inline-end: 0;
  min-width: max-content;
  padding: .5rem;
  border: 1px solid var(--outline-muted);
  border-radius: .875rem;
  background: var(--surface);
}
.bottom-nav {
  position: fixed;
  z-index: 1;
  inset: auto 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
}
.bottom-nav > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.bottom-nav a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .25rem;
  min-height: 5rem;
  padding: .5rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
}
.bottom-nav a span { display: grid; place-items: center; width: 4rem; height: 2rem; border-radius: 999px; }
.bottom-nav a[aria-current] { color: var(--text); }
.bottom-nav a[aria-current] span { background: #304f42; color: #e1f4ea; }

.eyebrow { color: var(--copper); font-size: .75rem; font-weight: 600; letter-spacing: .125rem; text-transform: uppercase; }
.muted, .section-heading p { color: var(--muted); }
.screen-title, .section-heading, .box-identity { display: flex; justify-content: space-between; align-items: center; gap: .375rem; }
.screen-title { gap: .625rem; margin-bottom: .25rem; }
.screen-title h1 { margin-top: .125rem; }
.section-heading { flex-wrap: wrap; }
.section-heading > div { flex: 1 1 8rem; }
.section-heading p { font-size: .75rem; }
.section-heading > details[open], .box-identity > details[open] { flex: 1 0 100%; }
.clear-location { justify-self: start; }

form { margin: 0; }
label { display: block; font-size: .875rem; }
input:not([type=hidden]), select, textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: .25rem 0 .75rem;
  padding: .625rem .75rem;
  border: 1px solid var(--outline);
  border-radius: .75rem;
  background: var(--background);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.search {
  position: relative;
  display: grid;
  min-height: 3.5rem;
  padding-inline-end: .375rem;
  border: 1px solid var(--outline);
  border-radius: 1rem;
}
.search label {
  position: absolute;
  top: 50%;
  inset-inline-start: 3.2rem;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  cursor: text;
}
.search:focus-within label, .search.has-query label {
  top: 0;
  inset-inline-start: .75rem;
  padding-inline: .25rem;
  background: var(--background);
  font-size: .75rem;
}
.search > div { display: flex; align-items: center; gap: .125rem; }
.search input { margin: 0; min-width: 0; min-height: 2.25rem; padding: .125rem 0; border: 0; border-radius: .25rem; }
.search:not(:focus-within) input::placeholder { color: transparent; }
.search input::-webkit-search-cancel-button { display: none; }
.search .icon-action, .search .text-action { min-height: 2.25rem; }

.login-hero, .box-hero { display: grid; gap: .625rem; padding: 1.125rem; border-radius: 1.5rem; background: var(--forest); }
.login-hero { padding: 1.5rem; border-radius: 1.625rem; }
.login-hero > .icon { width: 2.1875rem; height: 2.1875rem; color: var(--copper); }
.login-hero p:not(.eyebrow), .box-hero > p:not(.box-location) { color: var(--muted); }
.panel {
  display: grid;
  gap: .375rem;
  padding: .9375rem;
  border: 1px solid var(--outline-muted);
  border-radius: 1.125rem;
  background: var(--surface);
}
.login-form { gap: .8125rem; padding: 1.125rem; border-radius: 1.375rem; }
.login-form button { width: 100%; min-height: 3.125rem; }
.label-card h2 { font-size: 1rem; }
.label-card > p { color: var(--muted); font-size: .875rem; }
.label-card summary { margin-inline-start: -.5rem; }
.qr-label { display: grid; justify-items: center; gap: .625rem; text-align: center; }
.qr-label img { display: block; width: min(100%, 12.5rem); height: auto; border-radius: .625rem; background: #fff; }
.qr-label .button { width: 100%; }
.outline-button { box-shadow: inset 0 0 0 1px var(--outline); background: transparent; color: var(--copper); }
.disclosure-body { padding: .75rem; border-radius: .75rem; background: var(--surface-raised); color: var(--text); }
.disclosure-body p + p { margin-top: .5rem; }

.scan-card {
  display: grid;
  gap: .375rem;
  padding: .75rem 1rem;
  border-radius: 1.625rem;
  color: var(--copper-ink);
  background: linear-gradient(90deg, #cd976f, #f3c9a6, #dfad86);
}
.scan-card h2 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.scan-button { width: 100%; background: var(--forest); color: var(--text); }
.scan-card .disclosure-body { margin-top: .375rem; }
.scan-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.scan-options details { flex: 1 1 6rem; }
.scan-options details[open] { flex-basis: 100%; }
.scan-options summary { width: 100%; color: var(--copper-ink); }
.code-error, [role=alert] { color: var(--error); }
.code-error { margin-bottom: .5rem; }

.empty-card { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .75rem; border-radius: 1rem; background: var(--surface); }
.empty-card p { color: var(--muted); font-size: .875rem; }
.tile-icon { display: grid; place-items: center; flex: none; width: 2.6875rem; height: 2.6875rem; border-radius: .8125rem; color: #ffe1ca; background: #62452f; }
.inventory-row { display: flex; flex-wrap: wrap; align-items: center; border-radius: .75rem; background: var(--surface); }
.inventory-row.copper { background: var(--copper); color: var(--copper-ink); }
.inventory-row > a {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 4rem;
  align-items: center;
  gap: .5625rem;
  padding: .5rem .75rem;
  color: inherit;
  text-decoration: none;
}
.inventory-row .row-copy { display: grid; flex: 1; min-width: 0; gap: .125rem; overflow-wrap: anywhere; }
.inventory-row strong, .item strong { font-size: 1rem; font-weight: 600; }
.inventory-row small { font-size: .75rem; color: var(--muted); }
.inventory-row.copper small { color: var(--copper-ink); }
.inventory-row .row-count { max-width: 4.625rem; text-align: end; }
.inventory-row > a > .icon:last-child { width: .9375rem; height: .9375rem; }
.inventory-row > details[open] { flex-basis: 100%; padding: 0 .5rem .5rem; }

.box-identity { flex-wrap: wrap; color: var(--copper); }
.box-identity > span, .box-location { display: flex; align-items: center; gap: .5625rem; }
.box-identity > span { font-weight: 600; font-size: .875rem; letter-spacing: .125rem; }
.box-identity .icon-action { color: var(--text); }
.box-location > .icon { width: 1.125rem; height: 1.125rem; color: var(--muted); }
.box-count { font-weight: 600; font-size: .875rem; }
.contents > summary { width: 100%; min-height: 3.25rem; }
.contents > summary span { display: flex; align-items: center; gap: .5rem; }
.contents:not([open]) .hide-contents, .contents[open] .show-contents { display: none; }
.contents[open] > summary { background: transparent; color: var(--copper); box-shadow: inset 0 0 0 1px var(--outline); }
.contents > section { display: grid; gap: .5rem; padding-top: .5rem; }
.item { padding: .5rem .75rem; border-radius: .75rem; background: var(--copper); color: var(--copper-ink); overflow-wrap: anywhere; }
.item.archived { background: #29312f; color: #d2d7d5; }
.item-main { display: flex; flex-wrap: wrap; align-items: center; gap: .5625rem; min-height: 3rem; }
.item-main > div { flex: 1; min-width: 0; }
.item p { margin-top: .1875rem; font-size: .75rem; }
.item .quantity { flex: none; padding: .375rem .5625rem; border-radius: .625rem; font-size: .75rem; font-weight: 600; background: #291b131f; }
.item.archived .quantity { background: #d2d7d51f; }
.item-main > details[open] { flex-basis: 100%; }
.item-main > details > summary { color: var(--copper-ink); }