/* The Swiss datasheet, on paper. Tokens mirror apps/Floor/Sources/Cards/Shared.swift:
   Skin.ground / ink / ink2 / ink3 / red / rule, Riso.green / red / orange. Color is
   judgment and identity only; structure is ink and hairline rule. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ground: #EDE2C6;
  --ink:    #26241C;
  --ink2:   #454033;
  --ink3:   #6E6957;
  --red:    #992617;
  --rule:   rgba(38, 36, 28, .55);
  --faint:  rgba(38, 36, 28, .18);
  --wash:   rgba(38, 36, 28, .08);
  --green:  #38944C;
  --amber:  #E68C1A;
  --riso-red: #CC331F;
  --riso-green: #38944C;
  --riso-orange: #E68C1A;
  --riso-blue: #3373D9;
  --title: #26241C;
  --sheen: #8A8272;   /* ink lifted toward the ground */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000;
    --ink:    #F0F0F0;
    --ink2:   #B8B8B8;
    --ink3:   #858585;
    --red:    #EB3329;
    --rule:   rgba(255, 255, 255, .25);
    --faint:  rgba(255, 255, 255, .18);
    --wash:   rgba(255, 255, 255, .08);
    --green:  #66AD75;
    --amber:  #E0A357;
    --riso-red: #D66152;
    --riso-green: #66AD75;
    --riso-orange: #E0A357;
    --riso-blue: #7599DB;
    --title: #C4C4C4;   /* a step below the ink so the sheen has room */
    --sheen: #FFFFFF;
  }
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  font: 13.5px/1.55 var(--mono);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.sheet {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

/* --- head ------------------------------------------------------------------ */

.head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 8px;
}
.title {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1;
  display: inline-block;
}

/* The one indulgence: a narrow highlight passes over the wordmark every few seconds,
   light on brushed metal. One hue (the ink itself, lifted), no spectrum. */
.title {
  color: var(--ink);
  background-image: linear-gradient(
    105deg,
    var(--title) 0%,
    var(--title) 42%,
    var(--sheen) 50%,
    var(--title) 58%,
    var(--title) 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes shimmer {
  0%, 20% { background-position: 100% 0; }
  70%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .title { animation: none; background-position: 50% 0; }
}
.meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font: 600 9.5px/1.4 var(--mono);
  letter-spacing: .12em;
  color: var(--ink3);
}

/* --- sections ---------------------------------------------------------------- */

section { padding: 8px 0; }

/* The section bar: solid ink strip, reversed caps, number then title. */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--ground);
  padding: 3px 8px;
  font: 700 11px/1.5 var(--mono);
  letter-spacing: .18em;
}
.bar .n {
  font-weight: 600;
  opacity: .7;
  letter-spacing: .05em;
}
.bar .tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .7;
}

@media (prefers-color-scheme: dark) {
  .bar { background: #262626; color: var(--ink); }
}

.lede {
  margin: 12px 0 6px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}
.lede em { font-style: normal; font-weight: 800; }

/* Rows: a label column in caps, a value column, a hairline between rows. */
.rows {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 6px;
}
.rows tr { border-bottom: 1px solid var(--faint); }
.rows tr:last-child { border-bottom: 0; }
.rows th, .rows td {
  padding: 8px 0;
  vertical-align: top;
  text-align: left;
}
.rows th {
  width: 9.5em;
  padding-right: 14px;
  font: 600 9px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  padding-top: 11px;
}
.rows td { color: var(--ink2); }
.rows td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.rows td a:hover { border-bottom-color: var(--ink); }

/* Status dots: the judgement colours, and nothing else is coloured. */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red   { background: var(--riso-red); }

/* --- foot -------------------------------------------------------------------- */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  font: 600 9.5px/1.4 var(--mono);
  letter-spacing: .12em;
  color: var(--ink3);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .08em; }

@media (max-width: 480px) {
  .sheet { padding: 20px 14px 32px; }
  .title { font-size: 18px; }
  .rows th { width: 7em; padding-right: 10px; }
  body { font-size: 12.5px; }
  .meta, .foot { flex-direction: column; gap: 3px; }
}

/* Print: it is a datasheet. */
@media print {
  html, body { background: #fff; color: #000; }
  .sheet { max-width: none; padding: 0; }
  .bar { background: #000; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .title { animation: none; background: none; -webkit-text-fill-color: #000; color: #000; }
}