/* Newsprint.
 *
 * Following design.md, written for the cribbage client and applying almost
 * unchanged here. Typography carries the hierarchy; hairline rules separate
 * things; colour is rationed; there are no fills and no shadows.
 *
 * The one thing that document could not have anticipated: a slip is column
 * -aligned ASCII, 48 or 64 characters wide, and its boards only line up in a
 * monospace face. So the slip body keeps its mono; everything around it takes
 * the scale. That is the same shape of exception the card was there -- the one
 * object with a ground of its own -- and it is handled the same way, with its
 * own ink token so it stays a light object in both modes.
 *
 * Contrast was measured rather than eyeballed. Faint tier: 5.14:1 by day,
 * 4.94:1 at night; 4.75 and 4.57 against the inset ground. All clear of 4.5.
 */

:root {
  --paper:      #fbfbf9;
  --paper-2:    #f2f2ee;
  --ink:        #121212;   /* near-black, never #000 */
  --ink-muted:  #5a5a5a;
  --ink-faint:  #6b6b6b;   /* 5.14:1 */
  --rule:       #e2e2de;
  --rule-heavy: #121212;

  /* A slip is a light object in both modes, so it carries its own ink. */
  --slip:       #f6f4ef;
  --slip-ink:   #161513;
  --slip-edge:  #dcdcd6;   /* cream on cream needs an edge to read as an object */

  /* The only colour in the design: the two seats. */
  --p1:         #b03030;
  --p2:         #2f5f8f;

  --font-display: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter,
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-masthead: clamp(2rem, 6vw, 2.8rem);
  --t-title:    1.5rem;
  --t-lede:     1.05rem;
  --t-body:     .95rem;
  --t-small:    .82rem;
  --t-kicker:   .7rem;

  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #100f0e;   /* near-black, faintly warm */
    --paper-2:    #191817;
    --ink:        #f2f0ea;
    --ink-muted:  #a8a49c;
    --ink-faint:  #85817a;   /* 4.94:1 */
    --rule:       #2e2c29;
    --rule-heavy: #f2f0ea;
    --slip:       #e8e5dc;   /* toned: slips are the largest light mass */
    --slip-edge:  #cfccc2;
    --p1:         #d9575c;
    --p2:         #7aa7d9;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

main, .wrap { max-width: 660px; margin: 0 auto; padding: 0 22px 72px; }

a { color: inherit; }
a:hover { text-decoration-thickness: 2px; }

/* --- headings ---------------------------------------------------------- */

h1 {
  font: 400 var(--t-masthead)/1.1 var(--font-display);
  letter-spacing: -.01em;
  margin: 40px 0 6px;
}

/* The first kicker on a page follows the masthead rule, so it does not need
   one of its own. */
main > h2:first-of-type, .wrap > h2:first-of-type { border-top: 0; padding-top: 0; }

h2 {
  font: 600 var(--t-kicker)/1.4 var(--font-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 34px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);   /* the kicker sits under its own rule */
}

.lede {
  font: italic 400 var(--t-lede)/1.55 var(--font-display);
  color: var(--ink-muted);
  margin: 0 0 6px;
}

/* --- the masthead rule -------------------------------------------------- */

header {
  border-bottom: 1px solid var(--rule);
  padding: 14px 22px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
header b {
  font: 400 1.15rem/1 var(--font-display);
  letter-spacing: .01em;
}
header .vs, header span:not(.turn):not(.spacer) {
  color: var(--ink-faint);
  font-size: var(--t-small);
}
.spacer { flex: 1; }

/* --- rows, not boxes ---------------------------------------------------- */

.card, .game, .row, .job {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  background: none;
}
.card:last-of-type { border-bottom: 1px solid var(--rule); }
.row { display: flex; align-items: baseline; gap: 14px; }
.grow { flex: 1; min-width: 0; }

.game { display: block; text-decoration: none; }
.game b, .who b {
  font: 400 1.15rem/1.3 var(--font-display);   /* a name is a thing named */
  display: block;
}
.meta, .note, .hint, .sub, .updated {
  color: var(--ink-faint);
  font-size: var(--t-small);
}
.empty { color: var(--ink-faint); padding: 14px 0; }

/* State is a rule, never a wash. */
.tag {
  font: 600 var(--t-kicker)/1 var(--font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 0;
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 9px;
  white-space: nowrap;
}
.tag.on   { color: var(--p1); border-left-color: var(--p1); }
.tag.done { color: var(--ink-muted); border-left-color: var(--ink-muted); }

.turn {
  font: 600 var(--t-kicker)/1 var(--font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: 2px solid var(--rule);
  padding-left: 9px;
}
.turn.on { color: var(--p1); border-left-color: var(--p1); }

/* --- controls ----------------------------------------------------------- */
/* A field is the line it sits on. */

input[type=text], input[type=number], input:not([type]), select {
  font: var(--t-body) var(--font-text);
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink-muted);
  border-radius: 0;
  padding: 7px 2px;
  width: 100%;
}
input:focus, select:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}
select {
  -webkit-appearance: none; appearance: none;
  border-bottom: 1px solid var(--ink-muted);
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 7px center, right 2px center;
  background-repeat: no-repeat;
}

button {
  font: 600 var(--t-small)/1 var(--font-text);
  letter-spacing: .04em;
  background: var(--ink);          /* the one loud control */
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 11px 18px;
  cursor: pointer;
}
button:hover { opacity: .85; }
button:disabled { opacity: .35; cursor: not-allowed; }
button.ghost {
  background: none; color: var(--ink);
  border: 1px solid var(--rule); font-weight: 400;
}

.field { margin-bottom: 18px; }
.field > label {
  display: block;
  font: 600 var(--t-kicker)/1.4 var(--font-text);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
/* In a flex row a field must not also demand width:100%, or the two fight
   and one collapses. Let flex do the sizing. */
.row > input, .row > select { width: auto; flex: 1; min-width: 0; }
.row > button { flex: none; }

.two { display: flex; gap: 22px; }
.two > * { flex: 1; }
.check {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px; font-size: var(--t-body);
}
.check input { width: 15px; height: 15px; accent-color: var(--ink); }
form.inline { display: flex; gap: 12px; align-items: flex-end; }
form.inline input { flex: 1; }

/* --- the slip: our one object with a ground of its own ------------------ */

.slip {
  background: var(--slip);
  color: var(--slip-ink);
  border: 1px solid var(--slip-edge);   /* cream on cream needs the edge */
  border-radius: var(--radius);
  padding: 15px 17px;
  overflow-x: auto;
}
.slip pre {
  margin: 0;
  /* Non-negotiable: slips are column-aligned ASCII and only line up in mono. */
  font: 12.5px/1.45 var(--font-mono);
  white-space: pre;
}
.slip img {
  display: block; margin: 6px auto; max-width: 100%; height: auto;
  image-rendering: pixelated;
}
.slip img.qr { max-width: 150px; }

code, .pair code { font: 13px var(--font-mono); }
.pair {
  border-left: 2px solid var(--ink);
  padding: 3px 0 3px 12px;
  margin: 9px 0 4px;
  overflow-x: auto;
}
.pair code { white-space: nowrap; }

/* --- landing ------------------------------------------------------------ */

.cta { border-left: 2px solid var(--ink); padding: 2px 0 2px 16px; margin: 4px 0 8px; }
.cta-do { font: 400 var(--t-title)/1.35 var(--font-display); margin: 0 0 10px; }
.cta p:last-child { margin-bottom: 0; }
.samples p {
  border-top: 1px solid var(--rule);
  padding: 11px 0 0; margin: 0 0 11px;
  color: var(--ink-muted); font-size: var(--t-small);
}
ul { padding-left: 18px; margin: 10px 0; }
li { margin-bottom: 7px; }
li::marker { color: var(--ink-faint); }

.foot {
  margin-top: 46px; padding-top: 16px;
  border-top: 1px solid var(--rule-heavy);
  font-size: var(--t-small); color: var(--ink-faint);
}
.flash {
  border-left: 2px solid var(--p2);
  padding: 4px 0 4px 14px; margin: 20px 0 0;
  font-size: var(--t-small);
}

/* --- terminal ----------------------------------------------------------- */

/* height, not min-height: a minimum still lets the body grow past the
   viewport, which leaves the composer floating mid-page instead of pinned.
   dvh so it sits on the keyboard edge on a phone rather than under it. */
body.terminal { display: flex; flex-direction: column; height: 100vh; }
@supports (height: 100dvh) { body.terminal { height: 100dvh; } }
/* min-height:0 lets this shrink below its content and actually scroll;
   without it a flex child grows to fit and the page scrolls instead. */
body.terminal main { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 8px; max-width: none; }
.feed { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.sent {
  align-self: flex-end;
  font: var(--t-body) var(--font-mono);
  border-right: 2px solid var(--ink);
  padding: 2px 12px 2px 0;
  text-align: right;
  max-width: 75%;
}
.reply, .system {
  color: var(--ink-muted); font-size: var(--t-small); max-width: 80%;
}
.reply.bad { color: var(--p1); }

body.terminal footer {
  border-top: 1px solid var(--rule);
  padding: 14px 22px 18px;
}
body.terminal form { max-width: 660px; margin: 0 auto; display: flex; gap: 14px; }
body.terminal form input { flex: 1; }
.hint { max-width: 660px; margin: 9px auto 0; }
kbd {
  font: var(--t-small) var(--font-mono);
  border-bottom: 1px solid var(--ink-muted); padding: 0 2px;
}

a.back { color: var(--ink-faint); font-size: var(--t-small); text-decoration: none; }
a.back:hover { text-decoration: underline; }

/* --- documents ---------------------------------------------------------- */

body.doc { padding: 0; }
body.doc h2 { margin-top: 30px; }
body.doc p, body.doc li { color: var(--ink); }
body.doc b { font-weight: 600; }