:root {
  color-scheme: dark;
  --bg: #101710;
  --panel: #1a2318;
  --field: #10180f;
  --line: #434936;
  --text: #f1eddf;
  --muted: #c5c6af;
  --gold: #ecc982;
  --olive: #b3bb82;
  font-family: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 50% 0%, #273321, var(--bg) 36rem); color: var(--text); }
a { color: var(--gold); }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, p { margin: 0; }
h1, h2, strong { overflow-wrap: anywhere; }
h1 { font-family: Georgia, serif; font-size: clamp(2.2rem, 8vw, 3.8rem); line-height: 1; letter-spacing: -.055em; }
h2 { font-family: Georgia, serif; font-size: 1.47rem; line-height: 1.15; }
h2 small { color: var(--olive); font: 700 .8rem system-ui; margin-left: .45rem; }
p { line-height: 1.55; }
.mast { min-height: 4.25rem; padding: .55rem max(1rem, calc((100vw - 62rem) / 2)); display: flex; align-items: center; justify-content: space-between; background: #121a12; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .65rem; font: 800 .97rem/1.18 system-ui; letter-spacing: .12em; text-decoration: none; }
.brand small { display: block; margin-top: .15rem; font-size: .58rem; color: var(--muted); letter-spacing: .19em; }
.quiet { background: none; color: var(--muted); border: 1px solid var(--line); padding: .5rem .65rem; min-height: 42px; border-radius: .35rem; font: 650 .74rem system-ui; cursor: pointer; }
.shell { max-width: 64rem; margin: auto; padding: 1.3rem 1rem calc(6rem + env(safe-area-inset-bottom)); display: grid; gap: 1rem; }
.login-layout { max-width: 52rem; padding-bottom: 2rem; grid-template-columns: 1fr 1fr; align-items: start; }
.banner { overflow: hidden; display: flex; align-items: center; gap: clamp(.8rem, 3vw, 2rem); border: 1px solid #655b3d; border-radius: .75rem; padding: clamp(1rem, 3vw, 2rem); background: linear-gradient(108deg, #181f17aa, #171f15ee), url("camo.f7a355a02ef7.svg") center / 28rem; }
.banner > img { width: clamp(6.3rem, 27vw, 15rem); height: auto; display: block; border-radius: .5rem; }
.banner p.muted { margin-top: .55rem; }
.banner .button { margin-top: 1rem; }
.login-banner { display: grid; justify-items: center; text-align: center; }
.login-banner > img { width: min(100%, 19rem); }
.login-panel h2 { margin-bottom: 1rem; }
.eyebrow { color: var(--olive); font: 800 .66rem/1.45 system-ui; letter-spacing: .17em; text-transform: uppercase; margin-bottom: .48rem; }
.muted, .entry span, .entry small { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .65rem .82rem; border: 1px solid var(--gold); border-radius: .38rem; background: var(--gold); color: #1c210f; min-height: 44px; font: 800 .84rem system-ui; text-align: center; text-decoration: none; cursor: pointer; }
.button.secondary { background: #232d1d; color: var(--gold); border-color: #66634a; }
.button:hover, .quiet:hover { filter: brightness(1.13); }
.panel { border: 1px solid var(--line); border-radius: .65rem; background: var(--panel); padding: clamp(.85rem, 3vw, 1.35rem); min-width: 0; }
.panel h2 + p, .panel > h2 + .entry { margin-top: .55rem; }
.stats, .split, .inventory { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats.triple, .inventory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: grid; gap: .38rem; text-decoration: none; color: var(--text); }
.stat small, .stock small { color: var(--olive); font: 800 .67rem/1.2 system-ui; letter-spacing: .095em; text-transform: uppercase; }
.stat strong { font: 700 clamp(1.85rem, 6vw, 2.75rem)/1 Georgia, serif; color: var(--gold); }
.stat span { font-size: .84rem; color: var(--muted); }
.entry { display: grid; gap: .25rem; padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.entry:last-child { border: 0; padding-bottom: .1rem; }
.entry small { font-weight: 400; margin-left: .35rem; }
.entry span { font-size: .84rem; overflow-wrap: anywhere; }
a.entry:hover strong { color: var(--gold); }
.heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.heading.compact { margin-bottom: .5rem; }
.back { font-size: .85rem; width: fit-content; padding: .3rem 0; text-underline-offset: .2rem; }
.dock { position: fixed; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 9rem)); justify-content: center; padding: .25rem .4rem calc(.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #141c13; }
.dock a { display: grid; justify-items: center; align-content: center; gap: .23rem; min-height: 3.12rem; border-radius: .35rem; color: var(--muted); font-size: .69rem; font-weight: 700; text-decoration: none; }
.dock a span { font-size: 1.2rem; line-height: 1; }
.dock a[aria-current] { background: #2c3623; color: var(--gold); }
.month { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center; justify-items: center; margin-bottom: .65rem; }
.arrow { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .35rem; font-size: 1.5rem; text-decoration: none; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; margin-bottom: .2rem; text-align: center; }
.weekdays { color: var(--olive); font-size: .72rem; padding: .4rem 0; }
.day { min-height: 2.65rem; position: relative; display: grid; place-items: center; padding: .15rem; background: #222d1e; color: var(--text); border: 1px solid transparent; border-radius: .32rem; font: 750 .9rem system-ui; text-decoration: none; }
.day.outside { color: #aeb196; background: #192117; }
.day.today { border-color: #8b815c; }
.day[aria-current] { border-color: var(--gold); background: #3f4126; color: var(--gold); }
.day small { font-size: .58rem; line-height: 1rem; min-width: 1rem; padding: 0 .18rem; border-radius: 1rem; color: #1b210f; background: var(--olive); }
.jump { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem; }
.jump label { font-size: .85rem; font-weight: 650; }
.jump input { width: auto; max-width: 100%; }
.jump a, .actions a { font-size: .84rem; padding: .35rem 0; text-underline-offset: .2rem; }
.fields, .field, fieldset { display: grid; gap: .45rem; }
.fields, fieldset { gap: .9rem; }
.fields > .button { justify-self: start; }
.field label { font-weight: 700; font-size: .88rem; }
input, textarea, select { width: 100%; min-width: 0; min-height: 44px; padding: .55rem .65rem; color: var(--text); background: var(--field); border: 1px solid #62674f; border-radius: .35rem; font: inherit; }
textarea { resize: vertical; }
input[type=checkbox] { accent-color: var(--gold); width: 1.35rem; height: 1.35rem; min-height: 0; }
.switch { display: flex; align-items: center; gap: .55rem; font-weight: 760; cursor: pointer; padding: .45rem 0; }
fieldset { border: 1px solid var(--line); border-radius: .35rem; padding: .85rem; margin: 0; min-width: 0; }
fieldset[hidden] { display: none; }
legend { color: var(--olive); font-weight: 800; padding: 0 .35rem; }
.errorlist, .error, .danger { color: #f5b19a; }
.errorlist { margin: 0; padding-left: 1rem; font-size: .88rem; }
.danger-button { background: #f5b19a; border-color: #f5b19a; }
.notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: .55rem; }
.equipment { padding: 0; overflow: hidden; }
.weapon-image { background: linear-gradient(125deg, #1c281abd, #0f190fdd), url("camo.f7a355a02ef7.svg") center / 16rem; border-bottom: 1px solid var(--line); height: 8rem; display: grid; place-items: center; }
.weapon-image img { max-width: 80%; }
.weapon-image img.photo { max-width: none; width: 100%; height: 8rem; object-fit: contain; }
.weapon-body { padding: .9rem; }
.weapon-body .muted { margin-top: .45rem; font-size: .83rem; }
.stock { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .75rem; }
.stock strong { display: block; margin-top: .2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem .85rem; margin-top: .45rem; }
@media (max-width: 630px) {
  .login-layout, .inventory { grid-template-columns: 1fr; }
  .login-banner { display: flex; text-align: left; }
  .login-banner > img { width: min(37vw, 10rem); }
  .banner h1 { font-size: clamp(1.04rem, 5.25vw, 2rem); }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .button { justify-self: start; }
}
@media (max-width: 350px) {
  .shell { padding-inline: .7rem; }
  .split { grid-template-columns: 1fr; }
}
