/* Why Doghouse — chassis styles.
   Brand tokens are rewritten by `appfactory new`; everything else is structure. */

/* >>> tokens */
:root {
  --bg: #241a12;
  --surface: #33251a;
  --text: #f5ece1;
  --dim: #b19a84;
  --accent: #e8a33d;
  --radius: 14px;
  --pad: 16px;
}
/* <<< tokens */

/* Dark-brown dossier palette, derived from the brand tokens above. */
:root {
  --bg-deep: #1a120c;            /* the reveal screen's field */
  --line: rgba(245,236,225,.10);
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --measure: 34ch;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at UA priority, so ANY author rule
   that sets display beats it — .btn-block{display:block} or a flex row keeps
   rendering while `el.hidden = true` quietly reports success. It fails silently
   and only in the browser, which makes it expensive to find. Declared once here
   so app code can toggle .hidden on anything without also remembering to write
   a matching [hidden] variant for every component it styles. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  /* --app-height is set ONLY while a field is focused (see index.html).
     Unset, this falls through to 100dvh, which is what we want the rest of
     the time because it survives rotation without stale pixel values. */
  height: var(--app-height, 100dvh);
  overflow: hidden;
}

body {
  background: var(--bg);
  transition: background 400ms ease;
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Never let a rubber-band scroll expose the page behind the app. */
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#appBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pad);
  padding: var(--pad);
  flex: 0 0 auto;
}

#appTitle { font-size: 1.15rem; margin: 0; font-weight: 650; }

.screen { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--pad) var(--pad); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--pad);
}
.card h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.card p { margin: 0 0 .75rem; }
.dim { color: var(--dim); }
code { background: rgba(255,255,255,.07); padding: .1em .4em; border-radius: 6px; font-size: .9em; }

.icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}
.icon-btn:active { background: rgba(255,255,255,.08); }

/* --- sheets --------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  z-index: 40;
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  background: var(--surface);
  width: 100%;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  max-height: 85%;
  overflow-y: auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 1.05rem; }
.sheet-foot { margin-top: var(--pad); display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.sheet-foot a { color: var(--dim); }
#appVersion { margin-left: auto; font-variant-numeric: tabular-nums; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.row:last-of-type { border-bottom: 0; }

/* --- floating pills ------------------------------------------------------- */
.pill {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.pill[hidden] { display: none; }

.update-toast { bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--accent); color: #fff; }
.install-hint { bottom: calc(74px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--text); }

#toast, #syncStatus {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top));
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: .9rem;
  z-index: 70;
  pointer-events: none;
}
#toast[hidden], #syncStatus[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* >>> addon-styles */
/* <<< addon-styles */


/* --- Why Doghouse --------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* The reveal drops the warm brown for a near-black field so it reads as an
   ending rather than another chapter. */
body[data-kind="reveal"] { background: var(--bg-deep); }
body[data-kind="reveal"] #appBar { opacity: .35; }

/* --- chrome (the counter and the bar, both of which lie) ------------------- */

#chrome { flex: 0 0 auto; padding: 0 var(--pad) 14px; }

#counter {
  margin: 0 0 8px;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

#progressTrack {
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

#progressFill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  /* Slow enough that the fall from 97% back to 40% is visibly a retreat. */
  transition: width 700ms cubic-bezier(.22,.8,.28,1);
}
#progressFill.unknown {
  width: 100% !important;
  background: repeating-linear-gradient(
    90deg, var(--dim) 0 5px, transparent 5px 10px);
  opacity: .5;
}

/* --- the panel ------------------------------------------------------------ */

#stage { display: flex; }

.panel {
  margin: auto 0;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: 8px 0 4px;
  animation: enter 320ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.kicker {
  margin: 0 0 .9rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.65rem, 6.5vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  max-width: var(--measure);
}

.body {
  margin: 0 0 .85rem;
  color: var(--dim);
  font-size: 1.02rem;
  line-height: 1.62;
  max-width: var(--measure);
}

/* Redactions are readable as blocks and announced as "redacted", not as a
   wall of █ characters. */
.redacted {
  color: transparent;
  background: var(--accent);
  opacity: .55;
  border-radius: 3px;
  padding: 0 1px;
  user-select: none;
}

/* --- the title screen ----------------------------------------------------- */

.panel-title .headline {
  font-size: clamp(3.2rem, 17vw, 5.5rem);
  letter-spacing: -.035em;
  margin-bottom: 1rem;
}

/* --- the reveal ----------------------------------------------------------- */

.panel-reveal { text-align: center; }
.panel-reveal .headline {
  font-size: clamp(2.6rem, 13vw, 4.2rem);
  letter-spacing: -.03em;
  margin: 0 auto;
  max-width: 12ch;
}

.report { margin: 1.6rem auto 0; }
.report .rule {
  width: 44px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 1.1rem;
}
.stats {
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.stats.dim { opacity: .6; }

/* --- actions -------------------------------------------------------------- */

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2rem;
}

.btn {
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 54px;
  padding: 15px 20px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 90ms ease, filter 140ms ease;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-primary { background: var(--accent); color: #241109; }
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Reads as an escape hatch. Is not one. */
.link-skip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: .85rem;
  padding: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: center;
}
.link-skip:hover { color: var(--text); }
.link-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  #progressFill { transition: none; }
}