/* ============================================================
   Simpan — Said Kues house style
   Oat paper, Federal Blue ink, Vermilion fills, Moss for "still good".
   Hard offset shadows, rubber-stamp chops, one misregistration per screen.
   ============================================================ */

:root {
  --paper:      #F4EFE2;
  --paper-2:    #EAE2CF;
  --paper-3:    #FBF8F1;
  --ink:        #12224E;   /* Federal Blue — all body text */
  --ink-soft:   #4A5678;
  --line:       #12224E;

  --vermilion:  #E8452C;   /* fills only — never put text on this */
  --vermilion-deep: #CC3520; /* same chop, dark enough to carry white text at AA */
  --flame-ink:  #A8280F;   /* text-safe red */
  --federal:    #12224E;   /* stays blue in both themes, used as a fill */
  --moss:       #4F6B3A;   /* fills */
  --moss-ink:   #2F4423;   /* text-safe green */
  --amber:      #C98A00;
  --amber-ink:  #7A5200;

  --on-fill:    #FFFBF2;   /* text sitting on vermilion / moss / blue */

  --radius: 4px;
  --shadow: 4px 4px 0 var(--line);
  --shadow-sm: 2px 2px 0 var(--line);
  --tap: 44px;

  --display: 'Unbounded', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Azeret Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #1A1814;
    --paper-2:  #262219;
    --paper-3:  #211E18;
    --ink:      #F3EEDF;
    --ink-soft: #B9B2A0;
    --line:     #F3EEDF;
    --flame-ink:#FF9478;
    --moss-ink: #A9CE8C;
    --amber-ink:#EBBE55;
    --on-fill:  #FFFBF2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  /* riso halftone: a faint dot grid so the paper never reads as flat white */
  background-image: radial-gradient(currentColor 0.5px, transparent 0.6px);
  background-size: 5px 5px;
  background-blend-mode: normal;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 8%, rgba(232, 69, 44, 0.07), transparent 45%),
              radial-gradient(circle at 88% 92%, rgba(79, 107, 58, 0.07), transparent 45%);
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 16px;
  background: var(--paper-3); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 700; cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--vermilion-deep); color: var(--on-fill); border-color: var(--line); }
.btn-danger  { background: transparent; color: var(--flame-ink); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-google { background: var(--paper-3); width: 100%; max-width: 340px; }

.icon-btn {
  min-height: 36px; padding: 4px 10px;
  background: transparent; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.linkish {
  background: none; border: 0; padding: 8px 0;
  color: var(--flame-ink); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; min-height: var(--tap);
}

/* ---------- sign-in gate ---------- */
.gate { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.gate-inner { max-width: 560px; width: 100%; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.gate-title {
  font-size: clamp(48px, 12vw, 92px); line-height: 0.92; margin-bottom: 4px;
  /* the one misregistration on this screen */
  text-shadow: 3px 3px 0 var(--vermilion);
}
.gate-sub { font-size: 18px; max-width: 42ch; margin: 12px 0 28px; }
.gate-points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.gate-points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.chip {
  display: inline-block; padding: 3px 10px; border: 2px solid var(--line);
  border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-fill);
}
.chip-scan { background: var(--vermilion-deep); }
.chip-snap { background: var(--moss); }
.chip-share { background: var(--federal); }
.gate-fine { font-size: 13px; color: var(--ink-soft); margin-top: 14px; max-width: 46ch; }

/* ---------- app frame ---------- */
.app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--paper); border-bottom: 2px solid var(--line);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.logo { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; }
.house-pill {
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--paper-2); border: 2px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.avatar { border-radius: 50%; border: 2px solid var(--line); background: var(--paper-2); }

.offline-bar {
  background: var(--amber); color: #1A1408; font-weight: 700; font-size: 14px;
  padding: 8px 16px; border-bottom: 2px solid var(--line);
}

.tabs {
  position: sticky; top: 57px; z-index: 25;
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--paper-2); border-bottom: 2px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-height: 46px; padding: 10px 18px;
  background: transparent; border: 0; border-bottom: 4px solid transparent;
  font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
  color: var(--ink-soft);
}
.tab.is-on { color: var(--ink); border-bottom-color: var(--vermilion); }

.sheetless { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* ---------- alerts ---------- */
.alert-strip {
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: var(--paper-3);
  padding: 12px 14px; margin-bottom: 16px;
  display: grid; gap: 6px;
}
.alert-strip b { font-family: var(--display); font-size: 15px; }
.alert-line { font-size: 14px; }
.alert-line .n { font-family: var(--mono); font-weight: 600; }
.alert-red .n { color: var(--flame-ink); }
.alert-amber .n { color: var(--amber-ink); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search, .select, .input {
  min-height: var(--tap); padding: 10px 12px;
  background: var(--paper-3); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius); width: 100%;
}
.search { flex: 1 1 220px; }
.select { flex: 0 1 220px; }
.mono-in { font-family: var(--mono); letter-spacing: 0.08em; }

/* ---------- item cards ---------- */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--paper-3);
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  text-align: left; width: 100%; cursor: pointer;
  display: grid; gap: 8px;
  /* torn ticket stub down the left edge */
  background-image: radial-gradient(circle at 0 0, transparent 3px, var(--paper-3) 3.5px);
  background-size: 100% 9px;
}
.card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-name { font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.25; }
.card-brand { font-size: 13px; color: var(--ink-soft); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 2px 8px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--paper-2);
}
.card-date { font-family: var(--mono); font-size: 13px; }
.card-qty { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }

/* the signature: a rubber chop, deliberately off-register */
.chop {
  flex: 0 0 auto;
  transform: rotate(-6deg);
  border: 2.5px solid currentColor; border-radius: 3px;
  padding: 3px 8px;
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.92;
  white-space: nowrap;
}
.chop-expired { color: var(--flame-ink); transform: rotate(-8deg); }
.chop-today   { color: var(--flame-ink); }
.chop-soon    { color: var(--amber-ink); transform: rotate(-4deg); }
.chop-ok      { color: var(--moss-ink); transform: rotate(-3deg); }
.chop-none    { color: var(--ink-soft); transform: rotate(-2deg); }

.card.is-expired { background: color-mix(in srgb, var(--vermilion) 10%, var(--paper-3)); }
.card.is-soon    { background: color-mix(in srgb, var(--amber) 12%, var(--paper-3)); }
.card.is-done    { opacity: 0.55; }

.empty {
  text-align: center; padding: 40px 20px; color: var(--ink-soft);
  border: 2px dashed var(--line); border-radius: var(--radius);
}

/* ---------- panels ---------- */
.panel {
  background: var(--paper-3); border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.panel-quiet { box-shadow: none; background: transparent; }
.panel-title { font-size: 17px; margin-bottom: 4px; }
.panel-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row .input { flex: 1 1 180px; }
.hint { font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; }

.code-chop {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  border: 2.5px dashed var(--line); border-radius: var(--radius);
  padding: 14px; background: var(--paper-2);
}
.code {
  font-family: var(--mono); font-size: clamp(28px, 8vw, 40px); font-weight: 600;
  letter-spacing: 0.18em; color: var(--flame-ink);
}
.code-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.members { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.member { display: flex; align-items: center; gap: 12px; }
.member img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); }
.member-name { font-weight: 700; }
.member-mail { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.member-role {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 1px 8px;
}

.stamp-foot {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center; padding: 24px 0;
}

/* ---------- FAB ---------- */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40; min-height: 52px; padding: 12px 22px;
  background: var(--vermilion-deep); color: var(--on-fill);
  border: 2px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow); font-family: var(--display); font-weight: 600; font-size: 16px;
  cursor: pointer;
}
.fab:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line); }

/* ---------- sheets ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(18, 34, 78, 0.45);
  display: grid; align-items: end; justify-items: center;
  overflow-y: auto; padding: 0;
}
@media (min-width: 720px) { .sheet { align-items: center; padding: 24px; } }
.sheet-card {
  width: 100%; max-width: 760px;
  background: var(--paper); border: 2px solid var(--line);
  border-radius: 12px 12px 0 0;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
}
@media (min-width: 720px) { .sheet-card { border-radius: 8px; box-shadow: var(--shadow); } }
.sheet-card-narrow { max-width: 480px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet-head h2 { font-size: 20px; }

.kindswitch { display: flex; gap: 0; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.kind {
  flex: 1; min-height: var(--tap); padding: 10px;
  background: var(--paper-3); border: 0; border-right: 2px solid var(--line);
  font-weight: 700; cursor: pointer; font-size: 14px;
}
.kind:last-child { border-right: 0; }
.kind.is-on { background: var(--vermilion-deep); color: var(--on-fill); }

.capture-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.btn-capture { flex: 1 1 160px; background: var(--paper-2); }

.field { display: grid; gap: 4px; margin-bottom: 12px; flex: 1 1 160px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
textarea.input { min-height: 64px; resize: vertical; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.form-actions .btn-primary { flex: 1 1 200px; }

.ocr-dump { margin: 8px 0 12px; font-size: 13px; }
.ocr-dump pre {
  white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto;
  background: var(--paper-2); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px; font-family: var(--mono); font-size: 12px;
}

/* ---------- scanner ---------- */
.sheet-dark { background: #0B1020; align-items: stretch; }
.scan-wrap { position: relative; width: 100%; height: 100dvh; display: grid; place-items: center; }
#scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
  position: relative; width: min(78vw, 340px); aspect-ratio: 4 / 3;
  border: 3px solid var(--vermilion); border-radius: 6px;
  box-shadow: 0 0 0 100vmax rgba(11, 16, 32, 0.6);
}
.scan-frame span {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--vermilion);
  animation: sweep 2.2s ease-in-out infinite;
}
@keyframes sweep { 0%,100% { top: 8% } 50% { top: 92% } }
.scan-note {
  position: absolute; bottom: calc(112px + env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: #FFFBF2; font-weight: 700; padding: 0 20px;
}
.scan-actions {
  position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0;
  display: flex; gap: 10px; justify-content: center; padding: 0 16px;
}
.scan-actions .btn-danger { background: var(--paper-3); }

/* ---------- install steps ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--vermilion-deep); color: var(--on-fill);
  border: 2px solid var(--line); border-radius: 50%;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}

/* ---------- toasts ---------- */
.toast-stack {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90;
  display: grid; gap: 8px; width: min(92vw, 440px);
}
.toast {
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.toast-bad { background: var(--vermilion-deep); color: var(--on-fill); }

/* ============================================================
   Last rule in the file, deliberately.

   Classes above set `display` (.sheet, .gate, .field-row, .alert-strip), and an
   author rule beats the browser's built-in [hidden] { display: none } whatever
   the specificity. Without this, every sheet, the sign-in gate and the
   conditional form rows stay on screen while the JS believes it has hidden
   them — you get the install sheet and the scanner stuck over the app with no
   way to dismiss them.

   It sits at the end AND carries !important so it wins on source order as well
   as on the cascade. Keep it last. Do not remove it.
   ============================================================ */
[hidden] { display: none !important; }