/* =====================================================================
   incd.ink - journal intake & reading.
   A scanned journal is a little book: cover, a stack of sheets, fine
   print. Everything here runs in the browser with nothing leaving the
   device until you choose to publish (offline law).

   GUI pass (GUI.md) — dark greeting band, teal CTA pill, hairline
   rules, tool pills over panels, progressive disclosure.
   ===================================================================== */

:root {
  /* The GUI pass keeps kernel/assets/gui.css as the yardstick: its
     --paper/--wash/--ink/--muted/--line/--accent/--band tokens govern.
     This sheet only adds what the yardstick does not define, and points
     the journal chrome at the same single teal accent. */
  --brand: var(--accent);
  --brand-deep: var(--accent-deep);
  --paper-warm: #fdfaf3;
}

a { color: var(--brand-deep); text-decoration: none; }

.small-caps { text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 700; color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; }

/* ---------- no-bootstrap layout helpers the forms still lean on ---------- */
.muted { color: var(--muted); }
.d-block { display: block; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.fw-bold { font-weight: 700; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 2rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.p-3 { padding: .75rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-5 { padding-bottom: 2rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* ---------- dark greeting band (GUI pass) ---------- */
.journal-band { padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
.journal-band .greeting { font-size: clamp(1.8rem, 6vw, 3rem); max-width: 22ch; }
.journal-band .lede { margin: .9rem 0 1.4rem; }
.band-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.journal-band .brand { margin: 0; }
.band-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.band-links a {
  color: var(--band-muted); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.band-links a:hover { color: var(--band-ink); }

/* disclosure arrow animation */
details .chev { display: inline-block; transition: transform .2s ease; }
details[open] .chev { transform: rotate(90deg); }
.disclosure-body { transition: max-height .3s ease; }

/* ---------- the local shelf (index, GUI pass) ---------- */
#shelf .tool { margin-bottom: .9rem; }
#shelf .tool:last-child { margin-bottom: 0; }

/* ---------- the make door form (GUI pass: pills, teal CTA) ---------- */
.gui-form input[type="file"].form-control,
.gui-form input[type="text"].form-control {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  padding: .6rem 1.1rem; font-size: var(--fs-base); font-family: inherit;
  min-height: var(--tap-min);
}
.gui-form input[type="file"].form-control:focus,
.gui-form input[type="text"].form-control:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(14 116 144 / .16);
}
.gui-cta {
  color: #fff !important; border: 0 !important;
  background: var(--accent) !important;
  border-radius: 10px !important;
  font-size: 1.1rem; font-weight: 700;
  min-height: var(--tap-min);
  transition: background .15s ease;
}
.gui-cta:hover { background: var(--accent-deep) !important; }
.gui-cta:disabled { opacity: .45; cursor: default; }

/* ---------- no-bootstrap form progress ---------- */
.progress { background: var(--wash); border-radius: 10px; overflow: hidden; width: 100%; }
.progress-bar { height: 100%; background: var(--brand); transition: width .15s ease; }

/* ---------- index door: the phone is one screen ---------- */
@media (max-width: 48rem){

  /* the brand bar + greeting slim down; the lede and sibling links
     hand their rows back to the tool pills */
  header.journal-band{ padding:.9rem 0 1.1rem; }
  .journal-band .band-top{ margin-bottom:.35rem; }
  .journal-band .band-links{ display:none; }
  .journal-band .greeting{
    font-size:clamp(1.35rem,5.4vw,1.85rem); letter-spacing:-.02em;
    margin:.05rem 0 .15rem; max-width:none;
  }
  .journal-band .lede{ display:none; }
  .journal-band .cta-pill{
    font-size:.95rem; padding:.55rem 1.2rem; min-height:44px;
  }
  main{ padding-top:1.4rem; }

  /* tool pills tighten to thumb rows */
  .tool{ padding:.85rem 1.1rem; gap:.85rem; }
  .tool .t-ico{ width:40px; height:40px; }
  .tool .t-ico svg{ width:20px; height:20px; }
  .tool .t-body h3{ font-size:1.05rem; }
  .tool .t-body p{ font-size:.92rem; line-height:1.45; }

  .disclosure-body{ padding-left:0 !important; margin-top:1rem; }
}

/* ---------- the reader (read.html) ---------- */
.reader-shell {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; overflow-x: clip;
}
.book-stage {
  position: relative;
  width: min(92vw, 400px);
  height: clamp(300px, 68vh, 560px);
  margin-inline: auto;
}
.paper-book { width: 100%; height: 100%; }
.paper-book .stf__parent, .paper-book .stf__wrapper, .paper-book .stf__block { background: transparent; }

.shp {
  position: relative; box-sizing: border-box;
  width: 100%; height: 100%;
  background: var(--paper-warm, #fdfaf3);
  border: 2px solid #e6e0d4; border-radius: 10px;
  box-shadow: inset 4px 0 10px rgb(0 0 0 / .06);
  padding: clamp(18px, 4.5vw, 28px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  color: var(--ink); font-size: 1rem; line-height: 1.6;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.shp::before {
  content: ""; position: absolute; top: 10px; bottom: 10px; left: 10px;
  width: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0/.06), rgb(0 0 0/.14), rgb(0 0 0/.06));
}
.shp .pg-kicker {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.shp .pg-kicker .rule { flex-grow: 1; height: 2px; background: var(--line); }
.shp h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 10px; }
.shp .pg-body { font-size: 1rem; line-height: 1.65; color: var(--ink); flex-grow: 1; }
.shp .pg-body p { margin: 0 0 12px; }

/* the scanned sheet - a whole paper page, image or ruled placeholder */
.shp-scan { padding: 0; border-radius: 6px; overflow: hidden; background: #fbf7ee; justify-content: center; }
.shp-scan::before { display: none; }
.scan-sheet { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.scan-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f2eddf; }
.scan-ruled { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 34px, rgb(92 64 51/.06) 34px 36px); opacity: .8; }
.scan-art { font-size: 3rem; color: rgb(92 64 51/.14); }
.scan-num { position: absolute; bottom: 14px; right: 16px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: rgb(92 64 51/.3); font-variant-numeric: tabular-nums; }

/* cover sheet in the reader */
.shp-cover {
  background: linear-gradient(160deg, #135e56, #0f766e);
  color: #fff; border-color: rgb(0 0 0 / .2); box-shadow: none;
  justify-content: center; text-align: center;
}
.shp-cover::before { display: none; }
.shp-cover .c-brand { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255/.78); }
.shp-cover h2 { color: #fff; margin: 12px 0 6px; font-size: 1.55rem; line-height: 1.15; }
.shp-cover .c-owner { font-size: .92rem; color: rgb(255 255 255/.9); }
.shp-cover .c-meta { margin-top: auto; padding-bottom: 8px; font-size: .8rem; color: rgb(255 255 255/.75); }

/* fine-print back leaf (served books; an escrow seal leaf joins it) */
.shp-back {
  background: linear-gradient(160deg, #103f4c, #0a2f3a);
  color: rgb(255 255 255/.92); border-color: rgb(0 0 0/.25); box-shadow: none;
  --cov: var(--accent);
}
.shp-back::before {
  background: linear-gradient(180deg, rgb(255 255 255/.05), rgb(255 255 255/.12), rgb(255 255 255/.05));
}
.shp-back .pg-kicker { color: rgb(255 255 255/.65); }
.shp-back .pg-kicker .rule { background: rgb(255 255 255/.18); }
.shp-back h2 { color: #fff; }
.shp-back .pg-body p { color: rgb(255 255 255/.88); }
.esc-seal {
  font-size: .92rem; line-height: 1.7;
  background: rgb(255 255 255/.08); border: 1px dashed rgb(255 255 255/.35);
  border-radius: 8px; padding: 8px 10px; color: #bdf3ea; word-break: break-all;
}
.esc-step { font-size: .9rem; color: rgb(255 255 255/.75) !important; }
.form-control { width: 100%; border: 1px solid rgb(15 23 42/.25); border-radius: 10px; padding: 8px 10px; font-size: .9rem; font-family: inherit; }
.shp-back .form-control { background: rgb(255 255 255/.95); color: #0f172a; }
.esc-file { margin: 8px 0; }
.btn {
  border: 0; border-radius: 10px;
  padding: .7rem 1.3rem; font-size: .95rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--wash); color: var(--ink); font-family: inherit;
}
.btn:hover { opacity: .92; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { padding: .45rem .95rem; font-size: .85rem; min-height: 40px; }
.btn-lg { padding: 1rem 1.5rem; font-size: 1.1rem; }
.btn-brand { background: var(--cov, var(--accent)); color: #fff; }
.btn-outline-secondary {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  min-width: 46px; min-height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-outline-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline-secondary:disabled { opacity: .4; cursor: default; }
.esc-result { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: .88rem; line-height: 1.5; }
.esc-result.esc-ok { background: var(--good-soft); color: var(--good); }
.esc-result.esc-bad { background: var(--bad-soft); color: var(--bad); }
.esc-result.esc-err { background: rgb(255 255 255/.1); color: rgb(255 255 255/.85); }

.flip-controls { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.flip-progress { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.flip-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.flip-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .15s ease; }
.flip-dots .dot.on { background: var(--brand); }

/* ---------- the cover sheet printer (cover.html) ---------- */
.cover-paper {
  width: 100%; max-width: 460px; margin-inline: auto;
  aspect-ratio: 8.5 / 11;
  background: var(--bg); color: #111; border: 1px solid #bbb;
  padding: clamp(20px, 6vw, 34px);
  display: flex; flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 4px 18px rgb(15 23 42/.12);
}
.cover-paper .cp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; color: #555; letter-spacing: .08em; text-transform: uppercase; }
.cover-paper .cp-title { font-size: clamp(20px, 5vw, 30px); font-weight: 700; margin: 14px 0 4px; line-height: 1.15; }
.cover-paper .cp-owner { font-size: 15px; margin-bottom: 6px; }
.cover-paper .cp-dates { font-size: 12px; color: #444; }
.cover-paper .cp-seal { margin-top: 8px; font-size: 11px; color: var(--accent-deep); background: var(--brand-soft); border: 1px dashed #9bc7d4; padding: 6px 8px; word-break: break-all; }
.cover-paper .cp-rule { border: 0; border-top: 2px solid #111; margin: 14px 0; }
.cover-paper .cp-note { font-size: 12px; color: #333; font-family: "Inter", system-ui, sans-serif; }
.cover-paper .cp-loop { margin-top: 6px; font-size: 12px; color: #555; font-family: "Inter", system-ui, sans-serif; line-height: 1.5; }
.cover-paper .cp-sign { margin-top: auto; border-top: 1px solid #999; padding-top: 8px; font-size: 12px; color: #444; display: flex; justify-content: space-between; }
.cover-paper .cp-slug { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #333; background: #f4f4f4; padding: 8px 10px; border: 1px dashed #aaa; margin-top: 10px; }
.cover-paper .cp-stack { margin-top: 8px; font-size: 11px; color: #666; font-family: "Inter", system-ui, sans-serif; }

@media print {
  body { background: var(--bg); }
  .app-nav, .no-print, .wrap > *:not(#sheetWrap) { display: none !important; }
  .cover-paper { max-width: 100%; border: 0; box-shadow: none; padding: 0; }
  .cover-paper::after { content: none; }
  @page { size: letter; margin: 12mm; }
}