/* cashcow.exe — cartoon design system.
   Neo-brutalist: hard 3-4px ink borders, solid offset shadows, no blur.
   Light by design; the artboards commit to it and so does this. */

/* Self-hosted so the strict CSP (`font-src 'self'`) stays intact and the
   dashboard works with no network. Latin subset only, ~55KB total. */
@font-face {
  font-family: "Bagel Fat One";
  src: url("/fonts/bagel-fat-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;
  --milk: #fffdf5;
  --cream: #fff3d6;
  --grass: #7dbb2e;
  --leaf: #a9de5b;
  --pink: #ff9eb5;
  --sun: #ffd645;
  --sky: #bfe6f5;
  --deep: #2c6b12;
  --red: #c2405f;
  --grey: #5b5b5b;
  --dash: #e2d8b4;
  --row-win: #edf9d8;

  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);

  --display: "Bagel Fat One", "Comic Sans MS", cursive;
  --body: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--deep); text-decoration: none; border-bottom: 3px solid var(--leaf); }
a:hover { color: var(--ink); border-bottom-color: var(--pink); }
::selection { background: var(--sun); }

@keyframes ccblink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .1 } }
@keyframes ccchew {
  0%, 100% { transform: rotate(-2deg) translateY(0) }
  50% { transform: rotate(2deg) translateY(-4px) }
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 26px; }

/* ------------------------------------------------------------- primitives */

.card {
  background: var(--milk);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.pill {
  font-family: var(--display);
  font-size: 15px;
  padding: 7px 14px;
  background: var(--milk);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pill.sun { background: var(--sun); }
.pill.sky { background: var(--sky); }
.pill.leaf { background: var(--leaf); }
.pill.pink { background: var(--pink); }
.pill.num { font-variant-numeric: tabular-nums; }

.tag {
  font-family: var(--display);
  font-size: 12.5px;
  padding: 3px 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--milk);
  display: inline-block;
  white-space: nowrap;
}
.tag.leaf { background: var(--leaf); }
.tag.sun { background: var(--sun); }
.tag.pink { background: var(--pink); }
.tag.grey { color: var(--grey); }

.blinker {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); flex: none;
  animation: ccblink 1.1s steps(1, end) infinite;
}

h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 400; margin: 0; }

h2.big {
  font-size: 40px;
  color: var(--deep);
  text-shadow: 3px 3px 0 var(--sun);
  line-height: 1.05;
}
/* NOT `.panel` -- that name belongs to the tab panels below, whose
   `display: none` was silently hiding every card heading on both pages. */
h4.cardtitle { font-size: 25px; }

.section-head {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 18px; flex-wrap: wrap;
}

.label {
  font-weight: 800; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey);
}

.num { font-variant-numeric: tabular-nums; }
.grey { color: var(--grey); }
.deep { color: var(--deep); }
.red { color: var(--red); }
.strong { font-weight: 800; }
.note { font-weight: 600; font-size: 14px; color: var(--grey); margin: 12px 0 0; }

/* ---------------------------------------------------------------- buttons */

button, .btn {
  font-family: var(--display);
  font-size: 15px;
  padding: 8px 14px;
  background: var(--milk);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
button:hover:not(:disabled) { box-shadow: 5px 5px 0 var(--ink); }
/* Physical press: the button moves into its own shadow. */
button:active:not(:disabled) { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: var(--shadow-sm); }

button.sun { background: var(--sun); }
button.leaf { background: var(--leaf); }
button.pink { background: var(--pink); }
button.lever {
  font-size: 18px; padding: 11px 14px; border-width: 4px;
  border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); color: var(--red);
  width: 100%;
}
button.sm { font-size: 14px; padding: 6px 12px; }

input[type="password"], input[type="text"] {
  font-family: var(--body); font-weight: 600; font-size: 16px;
  padding: 11px 14px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--milk); color: var(--ink);
  width: 100%;
}
input:focus { outline: none; box-shadow: var(--shadow-sm); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--deep); outline-offset: 3px;
}

/* ----------------------------------------------------------------- header */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--milk);
  border-bottom: 4px solid var(--ink);
}
.topbar .inner {
  max-width: 1400px; margin: 0 auto;
  padding: 12px 26px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--display);
  font-size: 34px; line-height: 1;
  color: var(--deep);
  text-shadow: 3px 3px 0 var(--sun);
  margin-right: auto;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--sky);
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 26px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: end; min-height: 300px;
}
.hero-copy { padding: 30px 30px 40px; position: relative; z-index: 2; }
.hero-copy p { max-width: 52ch; font-size: 17px; margin: 32px 0 0; font-weight: 600; }

.bubble {
  display: inline-block; position: relative;
  background: var(--milk);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 22px;
  font-family: var(--display);
  font-size: 26px; line-height: 1.15;
}
.bubble::after {
  content: ""; position: absolute; left: 44px; bottom: -20px;
  width: 0; height: 0;
  border: 10px solid transparent;
  border-top-color: var(--ink);
  border-right-width: 22px;
}

.hero-cow { position: relative; height: 300px; }
.hero-cow svg {
  position: absolute; left: 8%; bottom: 26px; width: 64%; height: 215px;
  animation: ccchew 2.6s ease-in-out infinite;
  transform-origin: 60% 100%;
}

.grass-strip {
  height: 56px; background: var(--grass);
  border-top: 4px solid var(--ink);
  position: relative;
}
.grass-strip .tips {
  position: absolute; inset: -14px 0 auto 0; height: 18px; background: var(--grass);
}
.grass-strip .readout {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  font-family: var(--display); font-size: 17px;
  color: var(--milk); text-shadow: 2px 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
  gap: 8px; flex-wrap: wrap;
}
.footer-grass {
  height: 70px; background: var(--grass);
  border-top: 4px solid var(--ink);
  position: relative; overflow: hidden; margin-top: 44px;
}
.footer-grass .tips { position: absolute; inset: -12px 0 auto 0; height: 16px; background: var(--grass); }

/* ------------------------------------------------------------- the funnel */

.gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.gate {
  border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px 18px 15px;
  display: flex; flex-direction: column; min-height: 186px;
  background: var(--milk);
}
.gate.jam { background: var(--pink); }
.gate.win { background: var(--grass); color: var(--milk); }
.gate-top { display: flex; align-items: center; justify-content: space-between; }
.gate-idx {
  font-family: var(--display); font-size: 15px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  border: 3px solid var(--ink);
  display: grid; place-items: center;
}
.gate.jam .gate-idx { background: var(--milk); }
.gate-tag { font-family: var(--display); font-size: 13px; letter-spacing: .04em; }
.gate-label { font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-top: 12px; }
.gate-pass { font-family: var(--display); font-size: 40px; line-height: .95; margin-top: 4px; font-variant-numeric: tabular-nums; }
.gate.jam .gate-pass { font-size: 48px; }
.gate.win .gate-pass { font-size: 56px; }
.gate-unit { font-weight: 600; font-size: 14px; opacity: .85; }
.gate-drop { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--grey); }
.gate.jam .gate-drop, .gate.win .gate-drop { color: inherit; }

/* ----------------------------------------------------------------- plates */

.plate { background: var(--milk); border: 4px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: 20px; }
.plate .value { font-family: var(--display); font-size: 42px; line-height: .98; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.plate .sub { font-weight: 600; font-size: 14.5px; color: #3a3a3a; }
.plate.hero-plate { background: var(--grass); color: var(--milk); box-shadow: var(--shadow-lg); padding: 22px; }
.plate.hero-plate .cap { font-family: var(--display); font-size: 16px; text-shadow: 2px 2px 0 var(--ink); }
.plate.hero-plate .value { font-size: 72px; line-height: .92; text-shadow: 4px 4px 0 var(--ink); }
.plate.hero-plate .sub { color: inherit; font-size: 15.5px; }

/* ------------------------------------------------------------------- bars */

.bar {
  height: 16px; background: var(--cream);
  border: 3px solid var(--ink); border-radius: 999px;
  overflow: hidden; display: block;
}
.bar > span, .bar > div { display: block; height: 100%; background: var(--grass); }

.feedrow {
  display: grid; grid-template-columns: 104px 1fr 46px;
  align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px;
}
.feedrow .n { text-align: right; font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }

.chart { width: 100%; height: 200px; display: block; }
.chart-axis {
  display: flex; justify-content: space-between;
  font-weight: 800; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grey); margin-top: 8px;
}
.chart-empty {
  height: 200px; display: grid; place-items: center;
  color: var(--grey); font-weight: 600;
}

/* ------------------------------------------------------------------- rows */

.launch-row {
  display: grid;
  grid-template-columns: 150px 1.3fr 74px 1.3fr 104px 104px 112px 60px 78px;
  gap: 0 14px; align-items: center;
  background: var(--milk);
  border: 4px solid var(--ink); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 12px 18px;
  transition: box-shadow .1s ease;
}
.launch-row:hover { box-shadow: 7px 7px 0 var(--ink); }
.launch-row.win { background: var(--row-win); }
.launch-row .sym { font-family: var(--display); font-size: 22px; line-height: 1; }
.launch-row .nm { font-weight: 600; font-size: 15.5px; }
.launch-row .score {
  text-align: center; font-family: var(--display); font-size: 17px;
  background: var(--sun); border: 3px solid var(--ink);
  border-radius: 999px; padding: 2px 0; font-variant-numeric: tabular-nums;
}
.launch-row .score.hot { background: var(--leaf); }
.launch-row .r { text-align: right; font-variant-numeric: tabular-nums; }

.dashrow {
  display: grid; align-items: center; gap: 0 14px;
  padding: 9px 0; border-bottom: 3px dashed var(--dash);
  font-weight: 600;
}
.dashrow:last-child { border-bottom: none; }

.thead {
  display: grid; gap: 0 12px;
  font-weight: 800; font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey);
  padding-bottom: 8px; border-bottom: 3px solid var(--ink);
}

.tablescroll { overflow-x: auto; }

/* ---------------------------------------------------------------- banners */

.banner {
  border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: var(--shadow); padding: 16px 20px;
  font-weight: 600; font-size: 16.5px;
  background: var(--milk);
}
.banner.pink { background: var(--pink); }
.banner.sun { background: var(--sun); }
.banner .cap { font-family: var(--display); font-size: 15px; }

.disclaimer {
  background: var(--sun);
  border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 20px 24px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px;
}
.disclaimer p { margin: 0; font-weight: 600; font-size: 15.5px; }
.disclaimer .meta {
  text-align: right; font-weight: 800; font-size: 13.5px;
  letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- social links */
/* NOT named .panel -- that class sets display:none for tab panels and silently
   hides anything else that borrows the name. */
.social {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px;
}
.social-label {
  font-family: var(--display);
  font-size: 15px;
  color: var(--grey);
}
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 15px;
  padding: 7px 15px;
  background: var(--milk);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
/* flex: none so the icon cannot be squeezed by a long label at narrow widths.
   The matching width/height attributes in the markup are the fallback for a
   stale stylesheet -- see the comment above nav.social in index.html. */
.social-link svg { width: 17px; height: 17px; flex: none; fill: currentColor; display: block; }
.social-link:hover { background: var(--leaf); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.social-link:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.social-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* At phone widths the row wraps after "Follow the herd · Source", stranding
   @cashcowEXE alone on a second line. Giving the label its own full-width row
   keeps the two pills paired -- they measure 283px together, which clears a
   375px viewport minus the 15px .wrap padding. */
@media (max-width: 640px) {
  .social-label { flex-basis: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
  .social-link:hover, .social-link:active { transform: none; }
}

/* -------------------------------------------------------- analogy popup */
/* Toggled via the [hidden] attribute (already !important in this stylesheet,
   see the .panel gotcha in CLAUDE.md) -- never via a display-setting class. */
.popup-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 26, 26, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.popup {
  max-width: 480px;
  width: 100%;
  position: relative;
  background: var(--sky);
}
.popup .cardtitle { margin: 0 34px 10px 0; font-size: 21px; }
.popup p { margin: 0 0 10px; font-weight: 600; font-size: 15.5px; }
.popup p:last-child { margin-bottom: 0; }
.popup-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%;
  font-family: var(--display); font-size: 18px; line-height: 1;
}
@media (max-width: 640px) {
  .popup { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-close { transition: none; }
}

/* ------------------------------------------------------------- admin shell */

.shell { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--milk);
  border-right: 4px solid var(--ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 16px 18px 14px; background: var(--grass);
  border-bottom: 4px solid var(--ink);
}
.sidebar .brand .name {
  font-family: var(--display); font-size: 27px; line-height: 1;
  color: var(--milk); text-shadow: 3px 3px 0 var(--ink);
}
.sidebar .brand .sub {
  font-weight: 800; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; margin-top: 5px;
}
.sidebar .mode {
  padding: 12px 16px; border-bottom: 4px solid var(--ink);
  background: var(--sun); display: flex; align-items: center; gap: 10px;
}
.sidebar .mode .t1 { font-family: var(--display); font-size: 16px; }
.sidebar .mode .t2 { font-weight: 600; font-size: 13.5px; }

.sidenav { display: flex; flex-direction: column; gap: 8px; padding: 14px; flex: 1; overflow: auto; }
.sidenav button {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px; text-align: left;
  padding: 10px 14px; border-radius: 14px; font-size: 16px; line-height: 1.15;
  width: 100%;
}
.sidenav button.active { background: var(--sun); box-shadow: 5px 5px 0 var(--ink); }
.sidenav .badge {
  font-family: var(--body); font-weight: 800; font-size: 12.5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--milk); border: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

.lever-box {
  border-top: 4px solid var(--ink); padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--pink);
}
.lever-box .cap { font-family: var(--display); font-size: 15px; }
.lever-box p { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.35; }

.adminbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--milk); border-bottom: 4px solid var(--ink);
  padding: 14px 26px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.adminbar .title {
  margin: 0; font-family: var(--display); font-size: 32px;
  color: var(--deep); text-shadow: 3px 3px 0 var(--sun);
}
.cowbadge { width: 46px; height: 46px; flex: none; animation: ccchew 2.6s ease-in-out infinite; transform-origin: 60% 100%; }

.panel { display: none; }
.panel.active { display: block; }

/* ------------------------------------------------------------------ login */

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login {
  width: 100%; max-width: 400px;
  background: var(--milk); border: 4px solid var(--ink);
  border-radius: 26px; box-shadow: var(--shadow-lg);
  padding: 30px;
}
.login .name {
  font-family: var(--display); font-size: 34px; text-align: center;
  color: var(--deep); text-shadow: 3px 3px 0 var(--sun);
}
.login .sub { text-align: center; font-weight: 600; color: var(--grey); margin: 4px 0 22px; }
.login button { width: 100%; margin-top: 13px; font-size: 18px; padding: 11px; }

.msg { border: 3px solid var(--ink); border-radius: 14px; padding: 11px 14px; font-weight: 600; margin-bottom: 14px; }
.msg.err { background: var(--pink); }
.msg.ok { background: var(--leaf); }

/* The `hidden` attribute is a low-specificity UA rule; any class setting an
   explicit display beats it and the element stays visible. */
[hidden] { display: none !important; }

.empty { color: var(--grey); font-weight: 600; padding: 26px 0; text-align: center; }
.stale { opacity: .45; transition: opacity .3s ease; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mb-l { margin-bottom: 44px; }
.mb-m { margin-bottom: 22px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.btnrow { display: flex; gap: 9px; flex-wrap: wrap; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1200px) {
  .gates { grid-template-columns: repeat(2, 1fr); }
  .launch-row { grid-template-columns: 110px 1fr 64px 92px 92px 96px; }
  .launch-row .hide-md { display: none; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cow { height: 200px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .disclaimer { grid-template-columns: 1fr; }
  .disclaimer .meta { text-align: left; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 4px solid var(--ink); }
  .sidenav { flex-direction: row; overflow-x: auto; }
  .sidenav button { min-width: 150px; }
}

@media (max-width: 640px) {
  .wrap, .topbar .inner { padding-left: 15px; padding-right: 15px; }
  .wordmark { font-size: 26px; }
  h2.big { font-size: 30px; }
  .gates { grid-template-columns: 1fr; }
  .plate.hero-plate .value { font-size: 54px; }
  .launch-row { grid-template-columns: 92px 1fr 84px; }
  .bubble { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- the purse */

#purse .dashrow { padding: 11px 0; }
#purse a { font-size: 15px; }
#purse button { margin-left: 10px; vertical-align: middle; }

.sidebar .purse {
  border-top: 4px solid var(--ink);
  padding: 12px 16px;
  background: var(--sky);
}
.sidebar .purse .bal {
  font-family: var(--display); font-size: 26px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.sidebar .purse .addr {
  font-size: 12.5px; font-weight: 600; word-break: break-all;
}
.sidebar .purse a { border-bottom-width: 2px; }

/* ---------------------------------------------------- clickable gate cards */

/* The gates are anchors now, so the link defaults have to be undone. */
a.gate {
  color: inherit;
  text-decoration: none;
  border-bottom: 4px solid var(--ink);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
a.gate:hover {
  color: inherit;
  border-bottom-color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--ink);
}
a.gate:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
a.gate:focus-visible { outline: 4px solid var(--deep); outline-offset: 4px; }

.gate-more {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 12.5px;
  opacity: 0;
  transition: opacity .12s ease;
}
a.gate:hover .gate-more, a.gate:focus-visible .gate-more { opacity: .75; }
/* Touch devices get no hover, so always show the affordance there. */
@media (hover: none) { .gate-more { opacity: .7; } }

/* ------------------------------------------------------------ gate detail */

/* The panel is a grid item spanning every column, so it slots in directly
   beneath the row of the gate that was clicked. That adjacency is what removes
   the need to scroll the reader's page for them. */
#gate-detail { grid-column: 1 / -1; }
.gd { border-width: 4px; box-shadow: var(--shadow-lg); }

/* The gate whose panel is open, so the second click has something to undo. */
a.gate.open {
  background: var(--sun);
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--ink);
}
a.gate.open.jam { background: var(--pink); }
a.gate.open.win { background: var(--grass); }
a.gate.open .gate-more { opacity: 1; }
a.gate.open .gate-more::after { content: " (click to close)"; }
.gd .gate-idx { width: 36px; height: 36px; font-size: 17px; }

.gd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.gd-stat {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 11px 13px;
}
.gd-val {
  font-family: var(--display);
  font-size: 27px;
  line-height: 1.05;
  margin-top: 2px;
}

/* ------------------------------------------------------- what it is reading */

.readrow {
  display: grid;
  grid-template-columns: 190px 1fr 60px;
  gap: 0 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 3px dashed var(--dash);
}
.readrow:last-of-type { border-bottom: none; }

.readrow .src { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.src-name {
  font-family: var(--display);
  font-size: 13.5px;
  color: var(--deep);
  white-space: nowrap;
}
.src-pub {
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.read-link {
  font-weight: 600; font-size: 15.5px;
  color: var(--ink);
  border-bottom: 2px solid var(--leaf);
}
.read-link:hover { color: var(--deep); border-bottom-color: var(--pink); }

.read-age { text-align: right; font-size: 12.5px; }

@media (max-width: 700px) {
  .readrow { grid-template-columns: 1fr auto; }
  .readrow .src { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .read-age { text-align: right; }
}