/* Reset + layout primitives + press-kit base (fonts, grain, zine bits).
   Sibling of journal/static/css/base.css — same material rules. */

/* Self-hosted faces — no CDNs, the app must work offline. ~52KB total. */
@font-face {
  font-family: "Archivo Black";
  src: url(../fonts/archivo-black.woff2) format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url(../fonts/space-mono.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url(../fonts/space-mono-bold.woff2) format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; height: 100%;
  font: 14px/1.45 var(--font);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
@media (max-width: 768px) { body { font-size: 15px; } }

/* Photocopy grain: one fixed, non-interactive overlay above everything. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
a { color: var(--accent); text-decoration: none; }
a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
svg.icon { width: 18px; height: 18px; vertical-align: -4px; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 0; }
::placeholder { color: var(--faint); }
::selection { background: var(--sel); }
table { border-collapse: collapse; }

/* App grid: sidebar + topbar + scrollable view; mobile collapses the
   sidebar to a fixed bottom tab bar (house shape). The desk switcher
   expects #sidebar and pads its own clearance. */
#app { height: 100%; display: grid; grid-template-columns: 210px 1fr; }
#sidebar {
  border-right: 2px solid var(--bd-strong); background: var(--surface);
  padding: 14px 10px; overflow-y: auto;
  display: flex; flex-direction: column;
}
#main { display: flex; flex-direction: column; min-width: 0; height: 100%; }
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 2px solid var(--bd-strong); background: var(--surface);
  position: sticky; top: 0; z-index: 30; flex-wrap: wrap;
}
#view { flex: 1; overflow-y: auto; padding: 18px; padding-bottom: 40px; }
#tabbar { display: none; }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { display: none; }
  #tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--surface); border-top: 2px solid var(--bd-strong);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: auto;
  }
  #view { padding: 12px; padding-bottom: 96px; }
  #topbar { padding: 8px 12px; }
}

/* Scrollbars: square, quiet */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 0; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.mut { color: var(--mut); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: .92em; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* View titles set in the display face — the per-screen masthead. */
h2.view-title {
  font-family: var(--display); font-weight: 900; font-size: 21px;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.05;
  margin: 4px 0 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
h2.view-title .count {
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 13px;
}
h2.view-title .count::before { content: "["; }
h2.view-title .count::after { content: "]"; }

/* Zine label: tiny mono caps, for straplines and section markers. */
.zine-label {
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mut);
}

/* Stamps: the house status treatment. Rotation allowed HERE and on
   empty-state art only. */
.stamp {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  border: 2px solid currentColor; padding: 2px 7px; white-space: nowrap;
  transform: rotate(-2deg); color: var(--mut);
}
.stamp.warn { color: var(--over); }
.stamp.ok { color: var(--ok); }
.stamp.accent { color: var(--accent); }
.stamp.amber { color: var(--amber); }
.stamp.flat { transform: none; }

.empty {
  color: var(--mut); text-align: center; padding: 44px 16px;
  border: 2px dashed var(--bd-strong); border-radius: 0; margin-top: 10px;
}
.empty b {
  display: block; margin-bottom: 8px; color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stamp { transform: none; }
}