/* wireframe.css · the flicks wire layer, lifted out so any project can take it.
   source: flicks app.css, the map block (FL-22 to FL-25), and the idioms block above it.
   read README.md first. this file is the whole layer: tokens, then parts, then the phone.

   the grammar in one line: two inks on one paper, hairlines, no fill, no radius,
   no shadow, no colour. state is dotted against solid, never a fill.

   every class starts wf-. put class="wf" on the root of the surface. */

:root {
  --paper:     #fdfcf8;
  --ink:       #1c1b18;   /* 16.8 : 1 on paper */
  --ink-light: #6b675c;   /* 5.5 : 1 on paper. the floor. never lighter for text */

  /* optional. one dark ground, for one surface (flicks: the voyage). a project may
     leave these out and lose nothing. */
  --sky:  #0b0b0d;
  --star: #f4f2ec;        /* 17.6 : 1 on sky */
  --dim:  #7e7a71;        /* 4.6 : 1 on sky */

  /* the face. the wire layer is the system font on purpose: it reads as unfinished
     geometry. a project that wants a dressed layer sets this one token to a serif. */
  --face: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --hit: 44px;            /* the smallest target, in both directions */
  --tap: 56px;            /* a target above 44px, where a miss costs (polo: the log form) */
}

/* the host's own sizing is untouched outside the layer. */
.wf, .wf * { box-sizing: border-box; }

.wf {
  font: 13px/1.45 var(--face);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.wf * { font-family: inherit; }
/* a class that sets display must give the hidden attribute its say back. */
.wf [hidden] { display: none !important; }
.wf ::placeholder { color: var(--ink-light); opacity: 1; }

/* the only motion in the file. colour and border, 150ms, linear. */
.wf a, .wf button, .wf input, .wf select, .wf textarea {
  transition: color 150ms linear, border-color 150ms linear;
}

/* keyboard first, so focus is never guessed at. */
.wf :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wf input:focus-visible, .wf select:focus-visible, .wf textarea:focus-visible { outline-offset: 1px; }

/* --- text ----------------------------------------------------------------- */
.wf-h  { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 var(--s2); }
.wf-h4 { font-size: 12px; font-weight: 600; color: var(--ink-light); margin: var(--s4) 0 var(--s1); }
.wf-dim  { color: var(--ink-light); margin: 0 0 var(--s2); }
.wf-line { margin: 0 0 var(--s2); }
.wf-a { color: var(--ink); }
/* optional. a label in capitals with tracking, for a project that dresses the layer. */
.wf-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); }

/* --- the box · opaque, one hairline, no shadow ---------------------------- */
/* a see-through box is banned: it is a frosted panel, and the hygiene skill names
   that a tell. a box is paper, and the line round it is the whole of it. */
.wf-box {
  background: var(--paper);
  border: 1px solid var(--ink-light);
  border-radius: 0;
}
.wf-box:focus-within { border-color: var(--ink); }
.wf-box > .wf-sub { border-top: 1px solid var(--ink-light); padding: var(--s2) var(--s3) var(--s3); }

/* --- state · dotted off, solid on ----------------------------------------- */
/* one pair for chips, tabs, filters, ticks. off is dotted and light. on is solid
   and dark. never a fill, never a step of background. */
.wf-chip {
  font-size: 12px; color: var(--ink-light);
  background: none; border: 1px dotted var(--ink-light); border-radius: 0;
  padding: 0 var(--s2); min-height: var(--hit); min-width: var(--hit);
  cursor: pointer;
}
.wf-chip[aria-pressed="true"] { color: var(--ink); border: 1px solid var(--ink); }
.wf-chip:hover { color: var(--ink); }

/* --- actions -------------------------------------------------------------- */
/* a button is a hairline box on paper. its border darkens on hover. */
.wf-btn {
  font-size: 12px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-light); border-radius: 0;
  padding: 0 var(--s3); min-height: var(--hit); min-width: var(--hit);
  cursor: pointer;
}
.wf-btn:hover { border-color: var(--ink); }

/* an action may be an underlined word instead. never a filled shape. */
.wf-act {
  font: inherit; color: var(--ink); background: none; border: 0; border-radius: 0;
  padding: 0; min-height: var(--hit); min-width: var(--hit); text-align: left; cursor: pointer;
  display: inline-flex; align-items: center;
  text-decoration: underline; text-underline-offset: 2px;
}
.wf-act:hover { color: var(--ink-light); }

/* a key letter, always quiet, always beside the thing it drives. */
.wf-key { color: var(--ink-light); font-size: 12px; }

/* --- fields --------------------------------------------------------------- */
.wf-in {
  font-size: 13px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-light); border-radius: 0;
  padding: var(--s2); min-height: var(--hit); width: 100%; max-width: 100%;
}
.wf-in:focus { outline: none; border-color: var(--ink); }
/* the field inside a wf-box takes no line of its own: the box is the line. */
.wf-box > .wf-in { border: 0; padding: 0 var(--s3); }
.wf-box > .wf-in:focus-visible { outline: none; }   /* the box's own border is the signal */

/* --- lists and rows · dotted between, solid under the pointer ------------- */
.wf-list { list-style: none; margin: 0; padding: 0; }
.wf-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: var(--hit); padding: 6px 0;
  background: none; border: 0; border-top: 1px dotted var(--ink-light); border-radius: 0;
  color: var(--ink); text-align: left; font-size: 13px; cursor: pointer;
}
.wf-list > li:first-child .wf-row { border-top: 0; }
.wf-row:hover .wf-name, .wf-row:focus .wf-name { text-decoration: underline; text-underline-offset: 2px; }
.wf-head { display: flex; gap: var(--s2); align-items: baseline; }
.wf-no   { font-weight: 600; min-width: 1ch; }      /* the numeral of a chosen row */
.wf-name { font-weight: 600; }
.wf-sub-line { display: block; color: var(--ink-light); font-size: 12px; line-height: 1.4; }

/* --- a table · the head is the solid rule, a row is a dotted rule --------- */
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table th {
  text-align: left; font-weight: 400; font-size: 12px; color: var(--ink-light);
  padding: 0 var(--s4) var(--s2) 0; border-bottom: 1px solid var(--ink); height: var(--hit);
}
.wf-table td {
  padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px dotted var(--ink-light);
  vertical-align: baseline; height: var(--hit);
}
.wf-table tr:hover td { border-bottom: 1px solid var(--ink); }
.wf-table .wf-num { color: var(--ink-light); font-size: 12px; }

/* --- two small marks the law allows where a sentence is banned ------------ */
/* a one-word status, set as a mark: a solid underline, nothing else. */
.wf-mark {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
/* a fact that is missing. the slot is printed, the guess is not. put `owed ·` in it. */
.wf-owed { color: var(--ink-light); border-bottom: 1px dotted var(--ink-light); }

/* --- the foot · one quiet line: the count, the marks, where the data came from */
.wf-foot {
  margin: 0; padding: 6px var(--s4);
  background: var(--paper); border-top: 1px solid var(--ink-light);
  color: var(--ink-light); font-size: 11px;
}
.wf-foot .wf-status { color: var(--ink); margin-right: var(--s2); }
.wf-foot .wf-status:empty { display: none; }

/* --- the hover · the name and one line, cut and never wrapped ------------- */
.wf-hover { padding: var(--s1) var(--s2); max-width: 280px; pointer-events: none; }
.wf-hover > * { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- the phone · 700px and under ------------------------------------------ */
@media (max-width: 700px) {
  /* 16px stops ios zooming the page when a field takes focus. */
  .wf .wf-in { font-size: 16px; }
  .wf-foot { padding: 4px var(--s2) calc(4px + env(safe-area-inset-bottom)); }
}

/* nothing moves for anyone who asked for that. */
@media (prefers-reduced-motion: reduce) {
  .wf *, .wf *::before, .wf *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
}