/* Tuftrow — a drafting sheet. Cream paper, a fine blue grid, navy ink linework. The body is the grid; nothing wraps it. */
:root {
  --paper: #F2EEE3; --paper2: #EAE5D7; --ink: #152238; --ink2: rgba(21, 34, 56, .62); --ink3: rgba(21, 34, 56, .38);
  --line: rgba(21, 34, 56, .22); --grid: rgba(36, 86, 200, .11); --blue: #2456C8; --blue2: rgba(36, 86, 200, .14);
  --strip: #152238; --striptext: #F2EEE3;
  --disp: "Jura", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --striph: 62px;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink); background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  font-family: var(--body); font-size: 15px; line-height: 1.5;
  padding: calc(var(--striph) + 14px) 14px 28px; min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.fig, code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.gone { display: none !important; }
b { font-weight: 600; }

/* ---------- the drafting strip (fixed, top, every width) ---------- */
.strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; min-height: var(--striph);
  background: var(--strip); color: var(--striptext);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 14px;
  border-bottom: 2px solid var(--blue); box-shadow: 0 2px 0 rgba(21, 34, 56, .12);
}
.striptag { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.striptag em { font-style: normal; font-weight: 500; opacity: .55; margin-left: 4px; letter-spacing: .02em; text-transform: none; }
.stripca { font-family: var(--mono); font-size: 11.5px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-all; user-select: all; -webkit-user-select: all; flex: 1 1 100%; order: 3; opacity: .92; }
.stripca[data-live="0"] { opacity: .62; user-select: text; -webkit-user-select: text; }
.stripcopy {
  font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--blue); color: #fff; border: 0; border-radius: 3px; padding: 6px 12px; cursor: pointer; order: 2; margin-left: auto;
}
.stripcopy:disabled { background: rgba(242, 238, 227, .16); color: rgba(242, 238, 227, .55); cursor: default; }
.stripcopy[data-done="1"] { background: #F2EEE3; color: var(--ink); }
.stripgmgn { font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--striptext); opacity: .7; border: 1px solid rgba(242, 238, 227, .35); border-radius: 3px; padding: 5px 9px; order: 2; }
.stripgmgn:hover { opacity: 1; text-decoration: none; }
@media (min-width: 700px) {
  .strip { flex-wrap: nowrap; }
  .stripca { flex: 1 1 auto; order: 0; font-size: 13px; }
  .stripcopy { order: 0; margin-left: 0; }
  .stripgmgn { order: 0; }
}

/* ---------- general notes (the hero: a block of text, no headline) ---------- */
.notes {
  background: var(--paper2); border: 1px solid var(--line); border-left: 4px solid var(--ink);
  padding: 12px 14px 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.notestag { margin: 0 0 6px; font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.notes ol { margin: 0; padding-left: 20px; }
.notes li { margin: 0 0 3px; padding-left: 4px; }
.notes li::marker { font-family: var(--mono); font-size: 12px; color: var(--blue); }
.notes p.leafnote { margin: 0; }

/* ---------- the gauge ---------- */
.gauge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cell { background: var(--paper); padding: 10px 12px; min-width: 0; }
.cell i { display: block; font-style: normal; font-family: var(--disp); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.cell b { display: block; font-family: var(--mono); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.cell b.live { color: var(--blue); }
.cell small { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; }
@media (min-width: 700px) { .gauge { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cell b { font-size: 26px; } }

/* ---------- the row: two panes, the two tufts ---------- */
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuft {
  background: var(--paper); border: 1px solid var(--ink); position: relative; min-width: 0;
  display: flex; flex-direction: column; padding: 10px 10px 12px;
}
.tuft[data-state="met"] { background: var(--blue2); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.tuft[data-state="missed"] { opacity: .72; }
.tuft[data-mine="1"] { outline: 2px dashed var(--blue); outline-offset: 3px; }
.tufthead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tufthead b { font-family: var(--disp); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.tufthead small { font-size: 11px; color: var(--ink2); white-space: nowrap; }
.tuftart { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.leans { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.lean { font-family: var(--disp); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); color: var(--ink2); padding: 2px 6px; border-radius: 2px; }
.lean[data-on="1"] { border-color: var(--blue); color: var(--blue); }
.lean[data-meet="1"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.heads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.heads div { border-top: 2px solid var(--ink); padding-top: 4px; min-width: 0; }
.heads i { display: block; font-style: normal; font-family: var(--disp); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heads b { display: block; font-family: var(--mono); font-weight: 600; font-size: 20px; line-height: 1.15; }
.heads em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink2); overflow-wrap: anywhere; }
.standbtn {
  margin-top: auto; width: 100%; font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.standbtn span { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .75; }
.standbtn:disabled { background: var(--paper2); color: var(--ink3); cursor: default; border: 1px dashed var(--line); }
.tuft[data-state="met"] .standbtn { background: var(--blue); }
.tuftnote { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink2); }
@media (min-width: 700px) {
  .tuft { padding: 14px 16px 16px; }
  .tufthead b { font-size: 22px; }
  .heads b { font-size: 26px; }
  .standbtn { font-size: 15px; padding: 14px 10px; }
  .tuftnote { font-size: 13px; }
}

/* ---------- the tape + the ledger ---------- */
.tape, .ledger { border: 1px solid var(--line); background: var(--paper); padding: 10px 12px 12px; min-width: 0; }
.blockhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.blockhead b { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.blockhead span { font-size: 12px; color: var(--ink2); font-family: var(--mono); }
.tapeline { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--grid); font-size: 13px; }
.tapeline i { font-style: normal; font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--blue); }
.tapeline em { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
.tapeline em code { font-size: 12px; }
.tapeline u { text-decoration: none; font-family: var(--mono); font-size: 11px; color: var(--ink3); white-space: nowrap; }
.logrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--grid); font-size: 13px; }
.logrow b { font-family: var(--mono); font-weight: 600; color: var(--ink2); }
.logrow em { font-style: normal; min-width: 0; }
.logrow em strong { font-family: var(--disp); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.logrow[data-met="1"] em strong { color: var(--blue); }
.logrow u { text-decoration: none; font-family: var(--mono); font-weight: 600; font-size: 13px; white-space: nowrap; }
.hush { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }

/* ---------- leaves (log, notes, flock, 404) ---------- */
.leaf { grid-column: 1 / -1; border: 1px solid var(--ink); background: var(--paper); padding: 14px 14px 16px; min-width: 0; }
.leaf h2 { margin: 0 0 8px; font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.leaf h3 { margin: 16px 0 6px; font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.leaf p { margin: 0 0 8px; font-size: 14.5px; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet { border-collapse: collapse; width: 100%; font-size: 13px; }
.sheet th, .sheet td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.sheet th { font-family: var(--disp); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); background: var(--paper2); }
.sheet td { font-family: var(--mono); font-size: 12.5px; }
.sheet td.met { color: var(--blue); font-weight: 600; }
.matrix { border-collapse: collapse; margin: 6px 0 4px; font-size: 13px; }
.matrix th, .matrix td { border: 1px solid var(--ink); padding: 8px 10px; text-align: center; }
.matrix th { font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.matrix td { font-family: var(--mono); font-weight: 600; }
.matrix td.meet { background: var(--blue2); color: var(--blue); }
.eatbtn { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--blue); color: #fff; border: 0; padding: 6px 10px; cursor: pointer; }
.eatbtn:disabled { opacity: .5; cursor: default; }

/* ---------- the title block ---------- */
.titleblock {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 2px solid var(--ink);
}
.tbcell { background: var(--paper); padding: 8px 10px; min-width: 0; font-size: 12px; }
.tbcell i { display: block; font-style: normal; font-family: var(--disp); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-bottom: 3px; }
.tbcell small { display: block; color: var(--ink3); font-size: 11px; }
.tbname { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.tbname img { width: 34px; height: 34px; border-radius: 3px; grid-row: 1 / 3; border: 1px solid var(--line); }
.tbname span { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; }
.routes { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.routes a { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.routes a[aria-current="page"] { color: var(--blue); border-bottom: 2px solid var(--blue); }
.signer { font-family: var(--mono); font-size: 12px; background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 4px 8px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signer[data-on="1"] { border-color: var(--blue); color: var(--blue); }
.signerflock { display: block; font-size: 11px; color: var(--ink2); margin-top: 2px; }
.tblinks a { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-right: 10px; }
.tbref code { display: block; font-size: 10.5px; color: var(--ink2); overflow-wrap: anywhere; word-break: break-all; line-height: 1.35; }
.tbref code b { color: var(--ink); font-weight: 600; }
@media (min-width: 700px) { .titleblock { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the hatch + the ripple ---------- */
.hatch { position: fixed; inset: 0; z-index: 60; background: rgba(21, 34, 56, .55); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.hatch[hidden] { display: none; }
.hatchcard { background: var(--paper); border: 2px solid var(--ink); width: 100%; max-width: 480px; padding: 12px 14px 16px; max-height: 88vh; overflow: auto; }
.hatchhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; margin-bottom: 8px; }
.hatchhead b { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.hatchhead button { background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: 18px; line-height: 1; width: 30px; height: 30px; cursor: pointer; }
.hatchbody p { margin: 0 0 8px; font-size: 14px; }
.hatchbody p.dim { color: var(--ink2); font-size: 13px; }
.hatchbody .standbtn { margin-top: 6px; }
.walletpick { display: grid; gap: 6px; }
.walletpick button { display: flex; align-items: center; gap: 10px; background: var(--paper2); border: 1px solid var(--line); padding: 10px; font-family: var(--body); font-size: 14px; cursor: pointer; text-align: left; }
.walletpick img { width: 22px; height: 22px; }
@media (min-width: 700px) { .hatch { align-items: center; } }
.ripple { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12.5px; padding: 8px 14px; border-left: 3px solid var(--blue); max-width: calc(100vw - 32px); animation: rip 2.8s ease forwards; }
@keyframes rip { 0% { opacity: 0; transform: translate(-50%, 8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- wider sheets ---------- */
@media (min-width: 700px) {
  body { padding: calc(var(--striph) + 20px) 22px 32px; gap: 16px; font-size: 16px; }
  .notes { font-size: 15.5px; padding: 14px 18px; }
  .row { gap: 16px; }
}
/* the sheet recomposes at desk width: notes down the left margin (with the tape under them), the graze and the two
   tufts in the drawing area, the ledger beside the tape, the title block spanning the foot like a real drawing */
@media (min-width: 1000px) {
  body {
    max-width: 1180px; margin: 0 auto; padding: calc(var(--striph) + 24px) 28px 36px; gap: 18px;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas: "notes gauge" "notes row" "tape ledger" "title title";
    align-content: start;
  }
  .notes { grid-area: notes; align-self: start; position: sticky; top: calc(var(--striph) + 24px); }
  .gauge { grid-area: gauge; }
  .row { grid-area: row; gap: 18px; }
  .tape { grid-area: tape; }
  .ledger { grid-area: ledger; }
  .titleblock { grid-area: title; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .leaf { grid-area: row; }
  body[data-view="notes"] .notes, body[data-view="log"] .notes, body[data-view="flock"] .notes, body[data-view="404"] .notes { position: static; }
  .tufthead b { font-size: 24px; }
  .heads b { font-size: 30px; }
  .cell b { font-size: 30px; }
}