/* Status Board — near-black wall, glossy black-to-gray panels, bright white type.
   Primary target: iPad Pro 11" portrait (834×1194). The board always fits one screen. */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 300; font-display: swap; src: url('../fonts/BarlowCondensed-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('../fonts/BarlowCondensed-600.woff2') format('woff2'); }

:root {
  --wall: #0A0A0B;
  --panel-top: #2B2C2F;      /* glossy panel: gray at the top… */
  --panel-bottom: #0F0F10;   /* …falling to near-black */
  --panel-edge: #2E3033;
  --strip-hi: #2A2B2E;       /* row strip, upper half */
  --strip-lo: #17181A;       /* row strip, lower half */
  --ink: #FFFFFF;
  --ink-soft: #C9CCD1;       /* next actions: readable, one step down from white */
  --ink-dim: #8E9298;
  --waiting: #F0A93B;

  --daake: #F28C28;
  --memorial: #3E8EF0;
  --5017: #3DBE5A;
  --personal: #A657D9;
  --rally: #E5483A;

  --gap: 10px;
  --radius: 6px;
  --condensed: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wall);
  color: var(--ink);
  font: 400 18px/1.3 var(--body);
  padding:
    max(var(--gap), env(safe-area-inset-top))
    max(var(--gap), env(safe-area-inset-right))
    max(var(--gap), env(safe-area-inset-bottom))
    max(var(--gap), env(safe-area-inset-left));
}

button { font: inherit; color: inherit; }



:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Header ─────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 6px 8px;
}

.bar-date {
  margin: 0 auto 0 0;
  font: 300 44px/1 var(--condensed);
  text-transform: uppercase;
}

.refresh {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--ink-dim);
  font: 300 24px/1 var(--condensed);
  text-transform: uppercase;
  padding: 8px 4px;
  min-height: 44px;
  cursor: pointer;
}
.refresh[aria-busy="true"] .refresh-icon { opacity: 0.5; }

.status { margin: 0 6px var(--gap); color: var(--waiting); font-size: 16px; }

/* ── Board: two columns filling the rest of the screen ── */

.board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--gap);
}

.column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}

.tile {
  flex: 0 0 auto;         /* fitTiles() sets each tile's height */
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--panel-top), var(--panel-bottom) 70%);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 2px 6px rgb(0 0 0 / 0.6);
  padding: 10px 10px 8px;
  overflow: hidden;
}

.tile-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 0 4px 10px;
  font: 300 38px/1 var(--condensed);
  text-transform: uppercase;
}
.tile-name {
  margin-right: auto;
  padding-left: 12px;
  border-left: 3px solid var(--area);
}
.tile-count { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.tile[data-area="daake"] { --area: var(--daake); }
.tile[data-area="memorial"] { --area: var(--memorial); }
.tile[data-area="5017"] { --area: var(--5017); }
.tile[data-area="personal"] { --area: var(--personal); }
.tile[data-area="rally"] { --area: var(--rally); }

.tile-empty { margin: 4px; color: var(--ink-dim); }

.rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Each project sits on its own glossy strip, as in the reference. */
.row {
  flex: none;
  border-radius: 3px;
  background: linear-gradient(var(--strip-hi), var(--strip-lo) 50%, #121314 51%, #101112);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.row a {
  display: block;
  padding: 10px 12px 11px;
  color: inherit;
  text-decoration: none;
}

.row-name {
  display: block;
  font: 500 21px/1.2 var(--body);
}

.row-next {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ink-soft);
  font: 400 17px/1.3 var(--body);
}

.pill {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 8px;
  padding: 3px 7px 2px;
  border-radius: 3px;
  font: 600 13px/1.1 var(--condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill-waiting { background: var(--waiting); color: #111; }
.pill-idea { border: 1px solid var(--ink-dim); color: var(--ink-soft); padding: 2px 6px 1px; }

.row[data-status="waiting"] .row-name { color: #B5B7BB; }
.row[data-status="waiting"] .row-next { color: #8E9298; }

@media (hover: hover) {
  .row a:hover .row-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}

.tile-more {
  flex: none;
  margin-top: 6px;
  min-height: 44px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(#232427, #151618);
  color: var(--ink-soft);
  font: 300 24px/1 var(--condensed);
  text-transform: uppercase;
  cursor: pointer;
}
.tile-more[hidden] { display: none; }

/* ── iPad landscape / Mac: five columns, slightly tighter type ── */

body[data-layout="wide"] .tile-title { font-size: 34px; }
body[data-layout="wide"] .row-name { font-size: 19px; }
body[data-layout="wide"] .row-next { font-size: 16px; }
body[data-layout="wide"] .row a { padding: 9px 10px 10px; }
body[data-layout="wide"] .tile { padding: 10px 8px 8px; }

/* ── iPhone: one scrolling column, collapsible areas ── */

body[data-layout="phone"] { height: auto; min-height: 100dvh; overflow: visible; }
body[data-layout="phone"] .bar-date { font-size: 32px; }
body[data-layout="phone"] .refresh { font-size: 20px; }
body[data-layout="phone"] .board { display: block; }
body[data-layout="phone"] .tile { flex: none; margin-bottom: var(--gap); }
body[data-layout="phone"] .rows { overflow: visible; }
body[data-layout="phone"] .tile-title { font-size: 32px; padding: 0; }
body[data-layout="phone"] .row-name { font-size: 19px; }
body[data-layout="phone"] .row-next { font-size: 16px; -webkit-line-clamp: 3; }

.tile-toggle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 4px 10px;
  border: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.tile-toggle::after {
  content: "–";
  width: 1ch;
  margin-left: 4px;
  color: var(--ink-dim);
}
.tile.is-collapsed .tile-toggle { padding-bottom: 0; }
.tile.is-collapsed .tile-toggle::after { content: "+"; }
.tile.is-collapsed .rows { display: none; }

/* ── "More" sheet: the full list for one area ──────── */

.more {
  width: min(720px, 92vw);
  max-height: 88dvh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}
.more::backdrop { background: rgb(0 0 0 / 0.75); }
.more-tile { max-height: 88dvh; }
.more-tile .rows { overflow-y: auto; }
.more-close {
  margin-top: 8px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(#2E2F32, #18191B);
  font: 300 24px/1 var(--condensed);
  text-transform: uppercase;
  cursor: pointer;
}

/* ── Motion: one fade-in when fresh data arrives ───── */

.board.is-fresh { animation: fresh 400ms ease-out; }
@keyframes fresh { from { opacity: 0.4; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .board.is-fresh { animation: none; }
}

/* Keep "--flag" etc. exactly as typed. Set after every `font:` shorthand,
   which would otherwise reset ligatures to normal. */
.row-name, .row-next { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }