/* The zine look, layered over application.css. From prototype/missions/zine.css (Sep 22 sketch).
   Two riso inks: the blue we have, and a little yellow.
   Rubik, semibold, for titles; Space Mono for bold small labels; Helvena carries the rest.
   Delete this file and the app is back to plain. */
@font-face { font-family: Rubik; src: url("/assets/Rubik-8104fbe9.woff2") format("woff2"); font-weight: 300 900; }
@font-face { font-family: "Space Mono"; src: url("/assets/SpaceMono-Regular-6d6f4004.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Space Mono"; src: url("/assets/SpaceMono-Bold-47df4379.woff2") format("woff2"); font-weight: 700; }

:root {
  --paper: #f3f0e8; --sheet: #fbfaf6; --rule: #e0dcd2; --yellow: #ffe93b; --pen: #1c3582;
  --mono: "Space Mono", ui-monospace, monospace; --display: Rubik, Helvena, sans-serif;
  /* hand-drawn marks */
  --hd-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 160' preserveAspectRatio='none'%3E%3Cpath d='M4 0C3 30 5.2 55 4.3 80S3.1 130 4 160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  --hd-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M1 3.4C4 2.6 8 3.6 13 2.8' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
  --hd-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5C5.5 2.3 2.4 6.5 2.6 11.4S6.8 19.6 11.6 19.4 19.7 15 19.3 10.2 14.8 2.6 8.6 3.6' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E");
  --hd-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.8 2.6C5 2 9 2.1 12.4 1.9 12.2 5.5 12.5 9 12.1 12.3 8.6 12.1 5 12.4 1.7 12.1 1.9 8.6 1.6 5.4 2.3 1.4' fill='none' stroke='%23202525' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/svg%3E");
  --hd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M2 8.5c1.6 1.2 3 3 4 5.3C8 8.6 11.5 4 16.5 1.5' fill='none' stroke='%231c3582' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* riso grain over everything */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .16; mix-blend-mode: multiply; background: var(--grain); }

/* ---------- the cover: the blue header ---------- */
.mission { position: relative; overflow: hidden; isolation: isolate; }
/* one-ink halftone out of the top-right corner */
.mission::before { content: ""; position: absolute; top: 0; right: 0; width: min(80vw, 420px); height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #4a6fd6 0 .8px, transparent 1.1px) 100% 0 / 3.5px 3.5px;
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0, #000a 30%, transparent 62%); mask: radial-gradient(circle at 100% 0, #000 0, #000a 30%, transparent 62%); }
.mission-title { font: 600 clamp(38px, 8.5vw, 58px)/1 var(--display); letter-spacing: -.02em; margin: 6px 0 10px; }
.mission .eyebrow { font-weight: 400; }
.measure { font-size: 14px; }
.measure b { font-weight: 600; }
/* the bar: a quiet track, cream for what's real, fainter cream for what's in play */
.mbar { height: 5px; margin-top: 10px; background: #ffffff1f; border-radius: 999px; }
.mbar .base, .mbar .sec { background: var(--deep-ink); }
.mbar .play { background: #f3f0e88c; margin-left: 2px; }
/* what's in play reads in the same faint cream as its stretch of bar */
.measure { color: #f3f0e8a6; }
.measure b ~ b { color: inherit; font-weight: 400; }
.mends { font-size: 12px; margin-top: 6px; color: #8ea3dd; }
.next-goal span { font: 700 10.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--yellow); }
.tabs a { font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0 14px; }
.tabs a.on { border-bottom-width: 2px; }
.new-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin: -4px 0 -4px 6px; vertical-align: 1px; background: #ffffff26; color: var(--deep-ink); border-radius: 999px; font: 700 10px/1 var(--mono); letter-spacing: 0; }

/* ---------- small labels: mono, always bold ---------- */
.section-label, .label, .kicker, .foot-label, .day-pill, .q-num, .ask-l,
.col-head h2, .rcard .tag, .record .tag, .record .why span, .nextbox > span, .gl dt, .ds h4,
.nextbox .prepared > em, .nextbox .where em, .cu .who, .chat-card-kind, .thread-label, .paid th, .rwho {
  font-family: var(--mono); font-weight: 700; letter-spacing: .1em;
}
.section-label, .your-turn .section-label { font-size: 11px; }

/* ---------- Catch up and Waiting on you: flat paper, no shadows ---------- */
.catch { border-radius: 0; box-shadow: none; }
.catch b { font: 600 24px/1.1 var(--display); letter-spacing: -.01em; }
/* one big drawn arrow to go */
.catch .catch-arrow { background: none; padding: 0; border-radius: 0; color: var(--deep-ink); width: 64px; height: 44px; transition: transform .15s; }
.catch .catch-arrow svg { display: block; width: 100%; height: 100%; }
.catch:hover .catch-arrow { background: none; transform: translateX(4px); }
.your-turn { background: var(--sheet); border: 1px solid var(--rule); box-shadow: none; }
@media (max-width: 480px) { .your-turn { border-width: 1px 0; box-shadow: none; } }
.your-turn .section-label::after { font-family: var(--mono); border-radius: 0; }
.turn-total { font-family: Helvena, sans-serif; font-weight: 400; letter-spacing: 0; }
.turn { border-bottom: 1px solid var(--rule); }
.turn::before { background: none; border-radius: 0; font: 700 12px/1 var(--mono); color: var(--muted); place-items: start; padding-top: 4px; }
.turn::before { content: counter(turn, decimal-leading-zero); }

/* ---------- milestones: the blue number beside each title, titles in Rubik ---------- */
.ms-num { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; color: var(--deep); }
.milestone h2 { font: 600 24px/1.18 var(--display); letter-spacing: -.01em; }
.ms-track { border-radius: 0; height: 7px; }
.milestone .rows { background: var(--sheet); border: 1px solid var(--rule); padding: 2px 14px; margin-top: 14px; }
.milestone .rows > li { border-bottom: 1px dashed var(--rule); }
.milestone .rows > li:last-child { border-bottom: 0; }

/* finished pieces: a drawn box with a pen tick */
.mark { width: 18px; height: 18px; border: 0; color: transparent; background: var(--hd-check) no-repeat 3px -3px / 18px 16px, var(--hd-box) no-repeat 0 2px / 14px 14px; overflow: visible; }
.plan li.done::before { content: ""; background: var(--hd-check) no-repeat 3px -3px / 18px 16px, var(--hd-box) no-repeat 0 1px / 14px 14px; border: 0; border-radius: 0; }

/* ---------- relationships: paper slips, not floating cards ---------- */
.boardbar h2 b { font: 700 12px var(--mono); }
.rcard { background: var(--sheet); border: 1px solid var(--rule); box-shadow: none; }
.rcard:hover { box-shadow: none; transform: none; --blk-line: var(--ink); }
.rcard b, .col.ours .rcard b, .col.theirs .rcard b { font: 600 16.5px/1.2 var(--display); letter-spacing: -.005em; margin: 6px 0 3px; }
.rcard .val, .rcard .min { font-family: var(--mono); font-weight: 700; }
.rcard .min { border-radius: 0; }
.rcard .move { border-top: 1px dashed var(--rule); }
.rcard .steps i { border-radius: 0; }
.record h3 { font: 600 clamp(26px, 4.6vw, 34px)/1.1 var(--display); letter-spacing: -.015em; }
dialog.record { box-shadow: none; outline: 1px solid var(--ink); background: var(--sheet); }
.nextbox { background: #eef1fa; }

/* ---------- activity ---------- */
.day-pill span { font-weight: 400; }
.timeline::before { border-left: 1.5px dotted #6f6a5c; }
.event .dot { border-radius: 50%; }
/* finished work: a round icon with the pen tick, drawn in paper */
.event.work .dot { color: transparent; background: var(--yes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M2 8.5c1.6 1.2 3 3 4 5.3C8 8.6 11.5 4 16.5 1.5' fill='none' stroke='%23f3f0e8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 55% 45% / 13px 12px; }

/* ---------- the composer and conversations ---------- */
.att, .chat-card, .cu blockquote, .choose-list a { border-radius: 0; box-shadow: none; border: 1px solid var(--rule); background: var(--sheet); }
.att:hover { box-shadow: none; transform: none; border-color: var(--ink); }
.att .thumb { border-radius: 0; box-shadow: 0 0 0 1px var(--rule); }
.convo-top b { font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.doc, .table-scroll, .pdf-pages img, .page-frame { border-color: var(--rule); }
dialog.viewer { border-radius: 0; }

/* ---------- sign in ---------- */
.gate-mark { font: 600 34px/1 var(--display); letter-spacing: -.02em; }
.gate-form { background: var(--sheet); }

/* ---------- riso edges: each block's ink sits on a layer behind it, roughened by #riso-edge (in the layout); the text stays crisp ---------- */
.catch { --blk: var(--deep); }
.your-turn, .milestone .rows, .rcard { --blk: var(--sheet); --blk-line: var(--rule); }
.col { --blk: #e9e5db; } .col.yours, .col.maybe { --blk: #e1e7f6; }
.day-pill span { --blk: var(--ink); }
.catch, .your-turn, .milestone .rows, .rcard, .col, .day-pill span { position: relative; isolation: isolate; background: none; border-color: transparent; }
.catch::before, .your-turn::before, .milestone .rows::before, .rcard::before, .col::before, .day-pill span::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--blk); box-shadow: inset 0 0 0 1px var(--blk-line, transparent); filter: url(#riso-edge);
}
/* the cover's bottom edge, torn the same way */
.mission .wrap { padding-bottom: 5px; }
.mission::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -4px; height: 8px; background: var(--paper); filter: url(#riso-edge); pointer-events: none; }
.sheet-top b { font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }