/* fink-kit.css -- Fink's look for a game behind a door. Generated from
 * server/static/fink.css by scripts/maker_kit.py; edit that, not this. */
/* fink.css — the one stylesheet every Fink web page links, before its own.
 *
 * The look is borrowed, on purpose, from the Public Domain Image Archive
 * (pdimagearchive.org): warm paper, white sheets, hairline rules, square
 * corners, Alegreya for reading and Open Sans for small chrome, and old
 * engravings shown as the objects they are. Every image on a Fink page comes
 * from that archive and carries its maker's name. Fink is a celebration of
 * upskilling; the plates celebrate the people who did the skilling first.
 * Rules and how to add a plate: docs/AESTHETIC.md.
 *
 * This file owns tokens, type, plain elements, and the f-* components.
 * Pages keep their own layout in their own <style>.
 */
/* The kit's own fonts (maker-kit/assets/fonts, SIL Open Font License),
 * so a game needs this one stylesheet and nothing from anywhere else. */
@font-face { font-family: "Alegreya"; src: url("fonts/Alegreya.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/Alegreya-Italic.ttf") format("truetype"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans.ttf") format("truetype"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  --paper:   #f4e6db;   /* the archive's page tint */
  --sheet:   #ffffff;   /* a printed sheet: cards, inputs */
  --sheet-2: #faf5f0;   /* a quieter sheet: wells, stripes */
  --ink:     #1d2731;   /* text */
  --ink-2:   #5b646e;   /* secondary text */
  --ink-3:   #8b939c;   /* tertiary: hints, disabled */
  --rule:    #dccfc3;   /* hairlines on paper */
  --rule-2:  #e7e0d9;   /* hairlines on a sheet */
  --link:    #0b3c5d;   /* the archive's link blue */
  --good: #2f6b46;  --bad: #963b2f;  --warn: #8a6314;  --gold: #a97a1c;
  --good-wash: #e4efe6;  --bad-wash: #f4e1dd;  --warn-wash: #f5ecd7;  --link-wash: #e5ecf2;
  --pro: var(--link);  --con: #a2552b;  --pro-wash: #e5ecf2;  --con-wash: #f6e8de;
  /* The names the game pages were written with. Same colours, older names. */
  --bg: var(--paper);  --fg: var(--ink);  --dim: var(--ink-2);  --accent: var(--link);
  --card: var(--sheet);  --line: var(--rule);  --bar: var(--link);
  --serif: Alegreya, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- plain elements ------------------------------------------------------ */
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 17px/1.55 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: 0; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
small { color: var(--ink-2); }
code, pre, kbd { font-family: var(--mono); }
code { font-size: .88em; background: var(--sheet-2); border: 1px solid var(--rule-2); padding: 0 .3em; border-radius: 2px; }
::selection { background: #dfcbb8; }

button, .f-btn {
  font: 600 13px/1.2 var(--sans); letter-spacing: .02em; padding: 9px 16px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--sheet); color: var(--ink);
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .f-btn:hover { background: var(--ink); color: var(--sheet); }
button:disabled { opacity: .4; cursor: default; }
button:disabled:hover { background: var(--sheet); color: var(--ink); }
.f-btn--primary, button.primary, button.go { background: var(--ink); color: var(--sheet); }
.f-btn--primary:hover, button.primary:hover, button.go:hover { background: var(--link); border-color: var(--link); color: #fff; }
.f-btn--quiet { border-color: var(--rule); color: var(--ink-2); }

input, textarea, select {
  font: 15px/1.4 var(--sans); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 2px; padding: 6px 8px; box-sizing: border-box;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); }

/* ---- type ---------------------------------------------------------------- */
.f-title { font: 700 36px/1.1 var(--serif); }
.f-subtitle { font: italic 400 19px/1.3 var(--serif); color: var(--ink-2); }
.f-nav { font: 400 19px/1 var(--serif); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.f-nav:hover { color: var(--link); }
.f-label { font: 600 11.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.f-label i, .f-label em { font: italic 400 15px/1 var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.f-meta { font: 400 12.8px/1.45 var(--sans); color: var(--ink-2); }
.f-meta b { font-weight: 600; color: var(--ink); }
.f-glyphs { letter-spacing: 4px; }
.f-num { font-variant-numeric: tabular-nums; }
.f-empty { color: var(--ink-3); font-style: italic; }

/* A section head: small-caps label, hairline beneath, optional italic aside. */
.f-head { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.f-head .f-label { color: var(--ink); }

/* ---- sheets -------------------------------------------------------------- */
.f-sheet { background: var(--sheet); border: 1px solid var(--rule); padding: 18px 20px; }
.f-sheet--framed { padding: 34px 36px; box-shadow: inset 0 0 0 12px var(--sheet), inset 0 0 0 13px var(--rule-2); }
.f-well { background: var(--sheet-2); border: 1px solid var(--rule-2); padding: 12px 14px; }

/* ---- plates: an engraving shown as the object it is, with its credit ---- */
.f-plate { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-plate img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); background: var(--sheet); }
.f-plate figcaption { font: 400 12.8px/1.4 var(--sans); color: var(--ink-2); }
.f-plate figcaption b { display: block; font-weight: 600; color: var(--ink); }
.f-plate figcaption i { font-style: italic; }
.f-plate figcaption a { color: inherit; text-decoration: none; }
.f-plate figcaption a:hover { color: var(--link); text-decoration: underline; }
.f-plate--thumb img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; }
.f-plate--tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.f-plate--vignette { width: 150px; flex: none; }
.f-plate--vignette img { border: 0; }
.f-plate--quiet figcaption { display: none; }

/* ---- masthead ------------------------------------------------------------ */
.f-mast { display: flex; align-items: flex-end; gap: 24px; padding: 28px 0 16px; border-bottom: 1px solid var(--ink); margin-bottom: 24px; }
.f-mast .f-brand { text-decoration: none; color: var(--ink); }
.f-mast .f-brand .f-title { display: block; }
.f-mast .f-subtitle { display: block; margin-top: 2px; }
.f-mast .f-who { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 400 13px/1.3 var(--sans); color: var(--ink-2); }
.f-mast .f-who .f-glyphs { font-size: 22px; }

/* ---- tables -------------------------------------------------------------- */
.f-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.f-table th { font: 600 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); text-align: left; padding: 8px 8px 6px; border-bottom: 1px solid var(--ink); }
.f-table td { padding: 8px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.f-table tr:last-child td { border-bottom: 0; }
.f-table .r { text-align: right; }

/* ---- chips --------------------------------------------------------------- */
.f-chip { display: inline-block; font: 600 10.5px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); vertical-align: middle; }
.f-chip--good { color: var(--good); background: var(--good-wash); border-color: transparent; }
.f-chip--bad { color: var(--bad); background: var(--bad-wash); border-color: transparent; }
.f-chip--warn { color: var(--warn); background: var(--warn-wash); border-color: transparent; }
.f-chip--link { color: var(--link); background: var(--link-wash); border-color: transparent; }

/* ---- ornaments ----------------------------------------------------------- */
.f-orn { text-align: center; color: var(--ink-3); letter-spacing: .6em; margin: 28px 0; font-size: 14px; }
.f-orn::before { content: "· · ❦ · ·"; }
.f-credits { font: 400 12.8px/1.5 var(--sans); color: var(--ink-2); text-align: center; margin: 40px 0 24px; }
.f-credits a { color: inherit; }

/* ---- grid of plates, the archive's catalogue view ------------------------ */
.f-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
.f-catalogue > a, .f-catalogue > div { color: inherit; text-decoration: none; display: block; }
.f-catalogue > a:hover img { border-color: var(--ink); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .f-title { font-size: 30px; }
  .f-sheet--framed { padding: 22px 20px; box-shadow: inset 0 0 0 8px var(--sheet), inset 0 0 0 9px var(--rule-2); }
  .f-mast { flex-wrap: wrap; }
  .f-plate--vignette { width: 110px; }
}

/* ---- a small plate in a game's header --------------------------------- */
.f-vig { display: block; height: 76px; width: auto; margin: 0 auto 12px; border: 1px solid var(--rule-2); background: var(--sheet); }
.f-vig--inline { display: inline-block; height: 40px; margin: 0 4px 0 0; align-self: center; vertical-align: middle; }

/* ---- the companion: a folk toy the server draws from the ledger --------- */
/* The corner badge (.f-pet-badge) is styled inline by fink.badge() in fink.js,
 * because a game may include fink.js without this sheet. Only the record
 * page's picture lives here. The SVG is not a plate; it comes from
 * /pets/{handle}/chibi.svg and carries no maker but the finker's own ledger. */
.f-pet-rec { display: inline-block; width: 96px; height: auto; vertical-align: middle; border: 1px solid var(--rule-2); background: var(--sheet); }
a > .f-pet-rec:hover { border-color: var(--ink); }

/* ---- for games (the kit only) ---------------------------------------------
 * A board to play on, a big number, a row of choices, and the result line.
 * Built from the tokens above, so a game looks like the rest of Fink. */
.k-stage { max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; }
.k-board { background: var(--sheet); border: 1px solid var(--rule); padding: 22px 24px; }
.k-big { font: 700 44px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.k-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.k-choices button { min-width: 64px; }
.k-choices button.k-right { background: var(--good); border-color: var(--good); color: var(--sheet); }
.k-choices button.k-wrong { background: var(--bad); border-color: var(--bad); color: var(--sheet); }
.k-result { font: 400 14px/1.4 var(--sans); color: var(--ink-2); margin: 14px 0 0; min-height: 1.4em; }
.k-meter { height: 6px; background: var(--sheet-2); border: 1px solid var(--rule-2); }
.k-meter > i { display: block; height: 100%; background: var(--link); }