/* ============================================================
   Channel OS — shared design system
   One geometry, two skins. Type carried over from
   Missed-Detail Studio so the whole operation reads as one house.
   ============================================================ */

:root{
  --r-xl: 26px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --blur: 26px;
  --pad: clamp(16px, 3.2vw, 34px);
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* YTA Agency brand. The T is the mark — one fixed colour on
     every skin, so it reads the same wherever it appears. */
  --brand-t: #E8472F;
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  display: inline-block;
}
.wordmark .t{
  color: var(--brand-t);
  font-weight: 900;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.wordmark .agency{
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: none;
  color: var(--muted);
}

/* ---------- SKIN: graphite (the gate) ---------- */
[data-skin="gate"]{
  --bg: #0B0A0E;
  --bg-2: #121017;
  --veil: rgba(11,10,14,.62);
  --glass: rgba(34,31,42,.58);
  --glass-2: rgba(46,42,56,.5);
  --brd: rgba(255,255,255,.13);
  --brd-2: rgba(255,255,255,.07);
  --sheen: rgba(255,255,255,.055);
  --text: #F4F2F7;
  --muted: #A29EAF;
  --faint: #9793A4;
  --accent: #C9A227;
  --accent-ink: #1A1405;
  --accent-soft: rgba(201,162,39,.16);
  --ok: #62D690;
  --ok-ink: #04170C;
  --warn: #E0A33A;
  --bad: #E0614A;
  --field: rgba(12,11,16,.5);
  color-scheme: dark;
}

/* ---------- SKIN: dark / English clip-commentary ---------- */
[data-skin="dark"]{
  --bg: #0C0B10;
  --bg-2: #141221;
  --veil: rgba(12,11,16,.58);
  --glass: rgba(32,29,42,.56);
  --glass-2: rgba(45,40,60,.48);
  --brd: rgba(255,255,255,.13);
  --brd-2: rgba(255,255,255,.07);
  --sheen: rgba(255,255,255,.06);
  --text: #F3F1F7;
  --muted: #A29EB2;
  --faint: #9A95A8;
  --accent: #A57BFF;
  --accent-ink: #140A30;
  --accent-soft: rgba(165,123,255,.18);
  --ok: #62D690;
  --ok-ink: #04170C;
  --warn: #E0A33A;
  --bad: #E0614A;
  --field: rgba(12,11,16,.5);
  color-scheme: dark;
}

/* ---------- SKIN: warm / El Pasado archive ---------- */
[data-skin="warm"]{
  --bg: #E4DCCC;
  --bg-2: #D6CBB6;
  --veil: rgba(233,226,213,.34);
  --glass: rgba(252,249,242,.60);
  --glass-2: rgba(255,253,248,.52);
  --brd: rgba(255,255,255,.72);
  --brd-2: rgba(120,100,70,.14);
  --sheen: rgba(255,255,255,.46);
  --text: #241D16;
  --muted: #544A3C;
  --faint: #4A4234;
  --accent: #A33223;
  --accent-ink: #FFF7EC;
  --accent-soft: rgba(163,50,35,.12);
  --ok: #22593B;
  --ok-ink: #F2FBF5;
  --warn: #5A420E;
  --bad: #8E2A1D;
  --field: rgba(255,255,255,.6);
  color-scheme: light;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }

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

body{
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BACKDROP — a photograph if one is present, atmosphere if not.
   The image sits in its own layer above the gradient, so a
   missing file simply reveals the CSS atmosphere underneath.
   ============================================================ */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.backdrop .atmos{
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(58% 44% at 22% 18%, var(--atm-1, rgba(140,110,200,.5)) 0%, transparent 62%),
    radial-gradient(52% 48% at 82% 26%, var(--atm-2, rgba(210,160,90,.36)) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 108%, var(--atm-3, rgba(30,26,48,.72)) 0%, transparent 70%),
    linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 68%);
  filter: saturate(1.05);
}
.backdrop .photo{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.backdrop .veil{
  position: absolute;
  inset: 0;
  background: var(--veil);
  backdrop-filter: saturate(1.1);
}
/* film grain, drawn not loaded */
.backdrop .grain{
  position: absolute;
  inset: -50%;
  opacity: .16;
  background-image: repeating-conic-gradient(rgba(255,255,255,.9) 0% 25%, transparent 0% 50%);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference){
  .backdrop .atmos{ animation: drift 34s var(--ease) infinite alternate; }
}
@keyframes drift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}

/* ============================================================
   STAGE + GLASS
   ============================================================ */
.stage{
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: clamp(14px, 3vw, 28px);
  padding-block: clamp(18px, 3vw, 30px) 120px;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25);
  box-shadow:
    0 1px 0 var(--sheen) inset,
    0 18px 44px rgba(0,0,0,.26);
  padding: var(--pad);
}
.glass.tight{ padding: clamp(14px, 2vw, 20px); }
.glass.lift{ transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.glass.lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 1px 0 var(--sheen) inset, 0 26px 56px rgba(0,0,0,.32);
}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.eyebrow.plain{ color: var(--faint); }

h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; text-wrap: balance; }
h1{ font-weight: 900; font-size: clamp(30px, 5.4vw, 52px); line-height: 1.02; letter-spacing: -.022em; }
h2{ font-weight: 900; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.1; letter-spacing: -.015em; }
h3{ font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.005em; }
h4{ font-weight: 700; font-size: 13px; letter-spacing: -.002em; }

p{ margin: 0; }
.lede{ color: var(--muted); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.55; max-width: 62ch; }
.small{ font-size: 13px; color: var(--muted); line-height: 1.5; }
.tiny{ font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); letter-spacing: .04em; }
.num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a{ color: var(--accent); text-underline-offset: 3px; }

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--brd);
  background: var(--glass-2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); border-color: var(--accent); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover{ filter: brightness(1.08); }
.btn.quiet{ background: transparent; color: var(--muted); }
.btn.quiet:hover{ color: var(--text); }
.btn.sm{ font-size: 11.5px; padding: 7px 13px; }
.btn.block{ width: 100%; }
.btn[disabled]{ opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn{
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--brd);
  background: var(--glass-2);
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.icon-btn:hover{ background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.icon-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
input, select, textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--brd-2);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
input::placeholder, textarea::placeholder{ color: var(--faint); }
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--accent); background: var(--field); }
textarea{ resize: vertical; min-height: 72px; line-height: 1.5; }
select{ cursor: pointer; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field{ margin-bottom: 14px; }
.field .err{ font-family: var(--font-mono); font-size: 10.5px; color: var(--bad); margin-top: 5px; min-height: 13px; display: block; }
.row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--brd); color: var(--muted);
  white-space: nowrap;
}
.pill.on{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pill.ok{ color: var(--ok); border-color: var(--ok); }
.pill.warn{ color: var(--warn); border-color: var(--warn); }
.pill.bad{ color: var(--bad); border-color: var(--bad); }

.dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: clamp(16px, 2.4vw, 26px);
}
.mark{ display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.mark .glyph{
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--glass-2); border: 1px solid var(--brd);
  color: var(--text);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 13px;
  letter-spacing: -.03em;
}
.mark .glyph .t{ color: var(--brand-t); }
.mark b{ font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: -.01em; display: block; line-height: 1.15; }
.mark .kicker{ display: block; font-family: var(--font-mono); font-size: 10px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }

.who{ display: flex; align-items: center; gap: 10px; }
.avatar{
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--text);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 12px;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.cols{ display: grid; gap: 14px; }
.cols.c2{ grid-template-columns: repeat(2, 1fr); }
.cols.c3{ grid-template-columns: repeat(3, 1fr); }
.cols.c4{ grid-template-columns: repeat(4, 1fr); }
.cols.main{ grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); align-items: start; }
.stack{ display: flex; flex-direction: column; gap: 14px; }
.inline{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer{ flex: 1; }

.sec-head{ display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head .rule{ flex: 1 1 30px; height: 1px; background: var(--brd); min-width: 16px; }

/* ============================================================
   STAT TILES
   ============================================================ */
.stat{ display: flex; flex-direction: column; gap: 4px; }
.stat b{
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(22px, 3vw, 30px); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat b.hero{ color: var(--accent); font-size: clamp(28px, 4vw, 40px); }
.stat span{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
}

.meter{ height: 4px; border-radius: 999px; background: var(--brd-2); overflow: hidden; margin-top: 9px; }
.meter i{ display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s var(--ease); }
.meter i.ok{ background: var(--ok); }
.meter i.warn{ background: var(--warn); }

/* ============================================================
   HOVER LIST — the production queue
   ============================================================ */
.list{ display: flex; flex-direction: column; gap: 2px; }
.item{
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  text-align: left;
  width: 100%;
  background: transparent;
  color: inherit;
  font: inherit;
}
.item + .item{ box-shadow: 0 -1px 0 var(--brd-2); }
.item:hover, .item:focus-visible{
  background: var(--glass-2);
  border-color: var(--brd);
  box-shadow: none;
  transform: translateX(3px);
  outline: none;
}
.item:hover + .item{ box-shadow: none; }
.item .idx{
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.item .body{ min-width: 0; display: block; }
.item .title{
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  line-height: 1.25; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .meta{
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
  letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .right{ display: flex; align-items: center; gap: 9px; }
.item .reveal{
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.item:hover .reveal, .item:focus-visible .reveal, .item.open .reveal{ opacity: 1; transform: translateX(0); }

.item-detail{
  padding: 0 14px 14px 57px;
  display: grid;
  gap: 10px;
}
.item-detail .kv{ display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: baseline; }
.item-detail .kv dt{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.item-detail .kv dd{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ============================================================
   HOURS LOG
   ============================================================ */
.log-row{
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) 64px 52px 30px;
  gap: 11px; align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--brd-2);
  font-size: 13px;
}
.log-row:first-of-type{ border-top: none; }
.log-row .d{ font-family: var(--font-mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.log-row .t{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row .h{ font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.log-row .del{
  border: none; background: transparent; color: var(--faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px; border-radius: 6px; opacity: 0;
  transition: opacity .18s var(--ease), color .18s var(--ease);
}
.log-row:hover .del, .del:focus-visible{ opacity: 1; }
.del:hover{ color: var(--bad); }

.week{ display: flex; gap: 4px; align-items: flex-end; height: 46px; margin: 4px 0 2px; }
.week .bar{
  flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; min-height: 3px;
  position: relative; transition: height .4s var(--ease);
}
.week .bar.has{ background: var(--accent); }
.week-labels{ display: flex; gap: 4px; }
.week-labels span{
  flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 9px; color: var(--faint); letter-spacing: .04em;
}

/* ============================================================
   EMPTY / TOAST
   ============================================================ */
.empty{
  padding: 26px 18px; text-align: center;
  border: 1px dashed var(--brd); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  line-height: 1.7; letter-spacing: .03em;
}
.toast{
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 12px);
  z-index: 60;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   DOCK — bottom pill bar (reference: floating toolbar)
   ============================================================ */
.dock{
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex; align-items: center; gap: 6px;
  padding: 7px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--brd);
  backdrop-filter: blur(var(--blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
  box-shadow: 0 1px 0 var(--sheen) inset, 0 14px 40px rgba(0,0,0,.36);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar{ display: none; }
/* The dock floats over whatever the page is showing, so its own
   translucent ground is the darkest thing any label sits on. Muted
   measured 2.08:1 there — these are the site's main navigation and
   have to be read, not guessed at. */
.dock a, .dock button{
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  padding: 9px 15px; border-radius: 999px;
  border: none; background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dock a:hover, .dock button:hover{ color: var(--text); background: var(--glass-2); }
.dock a.on{ background: var(--accent); color: var(--accent-ink); }
.dock a:focus-visible, .dock button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.dock .sep{ width: 1px; height: 20px; background: var(--brd); flex: none; margin: 0 3px; }

/* ============================================================
   AUTH / QUIZ PANELS
   ============================================================ */
.panel-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px 40px;
  position: relative;
  z-index: 1;
}
.panel{ width: 100%; max-width: 430px; }
.panel.wide{ max-width: 620px; }

.tabs2{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--brd-2);
  margin-bottom: 20px;
}
.tabs2 button{
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  padding: 9px; border-radius: 999px; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tabs2 button[aria-selected="true"]{ background: var(--accent); color: var(--accent-ink); }
.tabs2 button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* quiz options */
.opts{ display: grid; gap: 9px; }
.opt{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; border-radius: var(--r-md);
  border: 1px solid var(--brd-2); background: var(--field);
  cursor: pointer; text-align: left; width: 100%;
  color: inherit; font: inherit;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.opt:hover{ border-color: var(--accent); transform: translateX(3px); }
.opt:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.opt[aria-pressed="true"]{ border-color: var(--accent); background: var(--accent-soft); }
.opt .key{
  width: 24px; height: 24px; flex: none; border-radius: 7px;
  border: 1px solid var(--brd); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.opt[aria-pressed="true"] .key{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.opt .txt b{ font-family: var(--font-display); font-weight: 700; font-size: 14px; display: block; margin-bottom: 2px; }
.opt .txt span{ font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.steps{ display: flex; gap: 5px; margin-bottom: 18px; }
.steps i{ height: 3px; flex: 1; border-radius: 999px; background: var(--brd-2); transition: background .3s var(--ease); }
.steps i.done{ background: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px){
  .cols.main{ grid-template-columns: 1fr; }
  .cols.c4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .cols.c3{ grid-template-columns: 1fr; }
  .cols.c2{ grid-template-columns: 1fr; }
  .log-row{ grid-template-columns: 62px minmax(0,1fr) 52px 30px; }
  .log-row .lang{ display: none; }
  .item-detail{ padding-left: 14px; }
  .item{ grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; }
  .item .reveal{ opacity: 1; transform: none; }
  .log-row .del{ opacity: 1; }
  .stage{ padding-bottom: 104px; }
}
@media (max-width: 440px){
  .row2{ grid-template-columns: 1fr; }
  .who .name{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .item:hover{ transform: none; }
  .glass.lift:hover{ transform: none; }
}

/* ============================================================
   THE SKIN SWITCH, EARNINGS, PICTURE AND PAY
   Added late; kept together so they are easy to find and easy to
   lift out. Everything here reads from the same tokens as the rest,
   so it follows whichever skin is on without a second palette.
   ============================================================ */

/* ---------- light / dark ---------- */
.skin-switch{
  border:0; background:transparent; padding:4px; cursor:pointer; line-height:0;
  border-radius:999px;
}
.skin-switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.skin-track{
  display:block; width:46px; height:25px; border-radius:999px;
  background:color-mix(in srgb, var(--text) 14%, transparent);
  border:1px solid var(--brd);
  position:relative; transition:background .24s ease, border-color .24s ease;
}
/* A sun at one end and a moon at the other, so which way is which is
   readable before the switch is thrown rather than after. */
.skin-track::before, .skin-track::after{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:10px; line-height:1; opacity:.75; pointer-events:none;
}
.skin-track::before{ content:"☀"; left:6px; }
.skin-track::after{ content:"☾"; right:6px; }
.skin-knob{
  position:absolute; top:2.5px; left:2.5px; width:19px; height:19px; border-radius:50%;
  background:var(--bg); border:1px solid var(--brd);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .26s cubic-bezier(.4,1.3,.5,1), background .24s ease;
}
/* Dark is the switch thrown: the knob travels to the moon. */
[data-skin="dark"] .skin-knob{ transform:translateX(21px); }
[data-skin="dark"] .skin-track{ background:color-mix(in srgb, var(--accent) 30%, transparent); }
.skin-switch:hover .skin-track{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- the money switch ---------- */
/* Reading the dashboard in public. Everything keeps its place; the
   digits become stars. The button says which state it is in rather
   than which state it would move to, so it can be read at a glance. */
.eye-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;
  height:34px; padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--brd); background:var(--glass-2); color:var(--muted);
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.eye-btn:hover{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); color:var(--text); }
.eye-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.eye-btn .eye{
  width:17px; height:17px; flex:none; border-radius:50%;
  border:1.5px solid currentColor; position:relative;
}
.eye-btn .eye::before{
  content:""; position:absolute; inset:4.5px; border-radius:50%; background:currentColor;
}
/* Pressed is hidden: the pupil goes out and a line is drawn through. */
.eye-btn[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.eye-btn[aria-pressed="true"] .eye::before{ background:transparent; }
.eye-btn[aria-pressed="true"] .eye::after{
  content:""; position:absolute; left:-2px; right:-2px; top:50%;
  height:1.5px; background:currentColor; transform:rotate(-45deg);
}
/* Both words sit in the same grid cell, so the button is always as
   wide as the longer one and swapping them moves nothing. Changing
   the text alone re-flowed the whole header row and slid the search
   box sideways — which is exactly the kind of shift this switch is
   supposed to avoid. */
.eye-btn .eye-word{ display:grid; font-style:normal; }
.eye-btn .eye-word > b, .eye-btn .eye-word > i{
  grid-area:1 / 1; font-style:normal; font-weight:600; text-align:center;
}
.eye-btn[aria-pressed="false"] .eye-word > b{ visibility:hidden; }
.eye-btn[aria-pressed="true"]  .eye-word > i{ visibility:hidden; }


/* ---------- earnings ---------- */
.earn-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.earn-now{
  font-family:var(--font-mono); font-size:clamp(24px,3.4vw,32px); font-weight:600;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.earn-run{
  display:flex; align-items:center; gap:7px; margin-top:9px;
  font-size:11.5px; color:var(--ok);
}
.earn-run i{
  width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;
  animation:earnpulse 1.6s ease-in-out infinite;
}
@keyframes earnpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@media (prefers-reduced-motion: reduce){ .earn-run i{ animation:none } }

.bonus{ margin-top:16px; padding-top:14px; border-top:1px solid var(--brd); }
.bonus-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.bonus-head .spacer{ flex:1; }
.bonus-bar{
  height:7px; border-radius:99px; background:var(--glass-2);
  border:1px solid var(--brd); overflow:hidden;
}
.bonus-bar.big{ height:12px; margin:12px 0; }
.bonus-bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  transition:width .5s ease;
}
.bonus-note{ display:block; margin-top:7px; }

.earn-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:22px; }
.earn-cell{ background:var(--glass-2); border:1px solid var(--brd); border-radius:var(--r-md,12px); padding:13px 15px; }
.earn-cell .k{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.earn-cell .v{ display:block; font-family:var(--font-mono); font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; }

/* ---------- the channel kit ---------- */
.kit{ display:flex; flex-direction:column; gap:10px; }
.kit-item{
  display:flex; align-items:center; gap:12px;
  background:var(--glass-2); border:1px solid var(--brd); border-radius:var(--r-md,12px);
  padding:10px 12px; text-decoration:none; color:var(--text);
}
.kit-item:hover{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); }
.kit-thumb{
  width:62px; height:32px; border-radius:6px; flex:none; object-fit:cover;
  background:#000; border:1px solid var(--brd);
}
.kit-txt b{ display:block; font-size:12.5px; }
.kit-txt span{ display:block; font-size:11.5px; color:var(--faint); font-family:var(--font-mono); }

/* ---------- picture ---------- */
.who{
  border:0; background:transparent; padding:0; cursor:pointer; font:inherit; color:inherit;
  display:flex; align-items:center; gap:8px;
}
.who:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:999px; }
.who img.face{
  width:34px; height:34px; border-radius:50%; display:block; flex:none;
  border:1px solid var(--brd); background:var(--glass-2); object-fit:cover;
}
.pick-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); }
.pick{
  border:2px solid transparent; background:transparent; border-radius:14px; padding:7px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pick img{ width:62px; height:62px; border-radius:50%; display:block; }
.pick span{ font-size:12.5px; color:var(--muted); font-weight:500; }
.pick:hover{ background:var(--glass); }
.pick[aria-pressed="true"]{ border-color:var(--accent); background:var(--glass); }
.pick-own{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--brd); }

/* ---------- pay ---------- */
.pay-form{ max-width:420px; }
.pay-acts{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.sub{ font-size:13px; margin:22px 0 8px; }

/* ---------- picking days out of the calendar ---------- */
.cal-cell{ cursor:pointer; }
.cal-cell.future{ cursor:default; }
.cal-cell:hover{ outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:1px; }
.cal-cell.picked{
  outline:2px solid var(--accent); outline-offset:1px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cal-pick{
  margin-top:18px; padding:15px 17px;
  background:var(--glass-2); border:1px solid var(--brd); border-radius:var(--r-lg);
}
.cal-pick-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.cal-pick-head .spacer{ flex:1 1 20px; }
.cal-pick-head b{ font-size:14px; }
.cal-pick-tiles{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); margin-bottom:14px; }
.cal-pick-tiles .t{ background:var(--glass); border:1px solid var(--brd); border-radius:10px; padding:10px 12px; }
.cal-pick-tiles .t span{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.cal-pick-tiles .t b{ font-family:var(--font-mono); font-size:17px; font-variant-numeric:tabular-nums; }
.cal-pick-rows{ display:flex; flex-direction:column; gap:7px; max-height:270px; overflow-y:auto; }
.cal-pick-row{
  display:grid; gap:10px; align-items:baseline;
  grid-template-columns:78px 1fr auto auto;
  font-size:12.5px; padding-bottom:7px; border-bottom:1px solid var(--brd);
}
.cal-pick-row:last-child{ border-bottom:none; }
.cal-pick-row .d{ font-family:var(--font-mono); font-size:11.5px; color:var(--faint); }
.cal-pick-row .n{ font-size:11.5px; color:var(--faint); }
.cal-pick-row .h, .cal-pick-row .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:560px){
  .cal-pick-row{ grid-template-columns:70px 1fr auto; }
  .cal-pick-row .v{ display:none; }
}

/* ---------- pace against the target ----------
   Three states, one shape. Colour alone would say nothing to anyone
   who cannot separate red from green, so the words carry the meaning
   and the dot only reinforces it. */
.pace-line{ margin-top:12px; }
.pace{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; line-height:1.3;
  padding:5px 11px 5px 9px; border-radius:999px;
  border:1px solid var(--brd); background:var(--glass-2);
}
.pace i{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted); }
.pace-on{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.pace-on i{ background:var(--ok); }
.pace-near{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.pace-near i{ background:var(--warn); }
.pace-behind{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 50%, transparent);
  background:color-mix(in srgb, var(--bad) 10%, var(--glass-2)); }
.pace-behind i{ background:var(--bad); }
.inline-pace{ margin-top:0; }
.inline-pace .pace{ font-size:11.5px; padding:3px 9px 3px 7px; }

/* on a log row, where space is tight */
.log-pace{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; }
.log-pace i{ width:7px; height:7px; border-radius:50%; flex:none; }
.log-pace.pace-on{ color:var(--ok); } .log-pace.pace-on i{ background:var(--ok); }
.log-pace.pace-near{ color:var(--warn); } .log-pace.pace-near i{ background:var(--warn); }
.log-pace.pace-behind{ color:var(--bad); } .log-pace.pace-behind i{ background:var(--bad); }

/* ---------- the payment card ---------- */
.wise-card{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 14px; border-radius:var(--r-md,12px);
  background:var(--glass-2); border:1px solid var(--brd);
  color:var(--text); cursor:pointer; font:inherit;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.wise-card:hover{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.wise-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.wise-mark{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:grid; place-items:center; overflow:hidden;
  background:var(--glass); border:1px solid var(--brd);
}
/* A supplied mark is a square brand tile, so it fills the corner
   edge to edge rather than floating inside a bordered box. The tile
   drops its own background and border to get out of its way. */
.wise-mark.has-logo{ background:none; border:0; padding:0; }
.wise-mark img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.wise-mark svg{ width:22px; height:22px; display:block; }
.wise-txt{ flex:1 1 auto; min-width:0; }
.wise-txt b{ display:block; font-size:13.5px; line-height:1.25; }
.wise-txt span{ display:block; font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The card lives in a narrow column whatever the window is doing, so
   it wraps on its own terms rather than on the viewport's: the status
   drops to its own line the moment the name and address need the
   width more than it does. */
.wise-card{ flex-wrap:wrap; row-gap:9px; }
.wise-txt{ flex:1 1 130px; }
.wise-card > .wise-state{ margin-left:auto; }
.wise-state{
  flex:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px;
  border:1px solid var(--brd); color:var(--muted); white-space:nowrap;
}
/* Connected is the state worth seeing across the room. */
/* Full strength rather than a wash. Mixed halfway into transparency
   the deep green of the warm palette read as brown over cream, which
   says nothing about being connected. */
.wise-card.on{ border-color:var(--ok);
  background:color-mix(in srgb, var(--ok) 10%, var(--glass-2)); }
.wise-card.on .wise-state{
  color:var(--ok-ink); background:var(--ok);
  border-color:var(--ok); font-weight:600;
}
.wise-card.on .wise-mark{ border-color:color-mix(in srgb, var(--ok) 40%, transparent); }

/* ---------- a second currency ---------- */
.earn-alt{
  margin-top:7px; font-family:var(--font-mono); font-size:14px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.earn-alt small{ font-family:var(--font-sans); font-size:11.5px; display:block; margin-top:3px; }
.pick-lang{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); }

/* ---------- what is happening on a desk right now ---------- */
.live-strip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 14px; padding:10px 15px;
  border-radius:999px; border:1px solid var(--brd); background:var(--glass-2);
  font-size:12.5px; color:var(--text);
}
.live-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted); }
.live-dot.on{ background:var(--ok); animation:livepulse 1.8s ease-in-out infinite; }
.live-dot.amber{ background:var(--warn); }
.live-dot.off{ background:var(--muted); opacity:.6; }
@keyframes livepulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@media (prefers-reduced-motion: reduce){ .live-dot.on{ animation:none } }

/* ---------- behind on the day ---------- */
.behind-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 16px; padding:14px 18px;
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--bad) 55%, transparent);
  background:color-mix(in srgb, var(--bad) 13%, var(--glass-2));
}
.behind-mark{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--bad); color:var(--ok-ink);
  font-family:var(--font-display); font-weight:900; font-size:15px;
}
[data-skin="dark"] .behind-mark{ color:#1A0806; }
.behind-txt{ flex:1 1 260px; min-width:0; }
.behind-txt b{ display:block; font-size:14px; line-height:1.3; }
.behind-txt span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.behind-bar .btn{ flex:none; }
/* Just-under is a nudge, not an alarm. */
.behind-bar.soft{
  border-color:color-mix(in srgb, var(--warn) 55%, transparent);
  background:color-mix(in srgb, var(--warn) 12%, var(--glass-2));
}
.behind-bar.soft .behind-mark{ background:var(--warn); }

/* ---------- marking a video finished ----------
   The button pressed most often in a shift, so it is the one that
   looks like the main action while the stopwatch is running. */
.btn.done{
  background:var(--ok); border-color:var(--ok); color:var(--ok-ink);
  font-weight:700; display:inline-flex; align-items:center; gap:9px;
}
.btn.done:hover{ filter:brightness(1.06); }
.btn.done:active{ transform:translateY(1px); }
.done-tick{ font-size:14px; line-height:1; }
.done-n{
  font-family:var(--font-mono); font-size:12px; font-variant-numeric:tabular-nums;
  padding:2px 8px; border-radius:999px; min-width:24px; text-align:center;
  background:color-mix(in srgb, var(--ok-ink) 18%, transparent);
}
/* A press should be felt, not just counted. */
@keyframes donepop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.14) } 100%{ transform:scale(1) } }
.btn.done.pop .done-n{ animation:donepop .34s var(--ease); }
@media (prefers-reduced-motion: reduce){ .btn.done.pop .done-n{ animation:none } }

/* ============================================================
   THE SHELL, REWORKED

   Taken from the reference: a standing rail rather than a floating
   bar, softer and larger corners, more air between things, and one
   card carrying the headline number in reverse so the eye lands on it
   first. Nothing inside any panel has changed — this is the furniture
   the same content sits in.
   ============================================================ */

/* ---------- the greeting ---------- */
.mark-txt{ min-width:0; }
.hello{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(18px,2.2vw,25px); letter-spacing:-.02em; line-height:1.12;
}
.topbar{ gap:14px; }

/* ---------- the rail ----------
   The dock keeps its markup and its behaviour; on a wide screen it
   simply stands up at the side instead of floating at the bottom.
   Below that width it is a bar again, because a rail on a phone eats
   the screen. */
@media (min-width:1180px){
  .dock{
    left:clamp(14px,1.6vw,24px);
    top:clamp(14px,2vw,22px); bottom:clamp(14px,2vw,22px);
    transform:none;
    flex-direction:column; align-items:stretch;
    gap:3px; padding:16px 12px;
    border-radius:var(--r-xl);
    max-width:none; width:186px;
    max-height:none; overflow-y:auto; overflow-x:hidden;
  }
  /* Sign out belongs at the foot of the rail. Only the divider above
     it takes the free space — giving it to two elements split the gap
     and left a rule stranded in the middle of the rail. */
  .dock .sep:last-of-type{ margin-top:auto; }
  .dock .sep{ width:100%; height:1px; margin:9px 0; }
  .dock a, .dock button{
    text-align:left; padding:10px 13px; border-radius:12px; width:100%;
  }
  .dock .dock-mark{ padding:4px 13px 12px; }
  /* room for the rail, and a stage that no longer needs to clear a
     floating bar at the bottom */
  .stage{
    max-width:1500px;
    padding-left:calc(186px + clamp(26px,3vw,46px));
    padding-block:clamp(18px,3vw,30px) 46px;
  }
}
@media (min-width:1180px) and (max-width:1340px){
  .dock{ width:164px; }
  .stage{ padding-left:calc(164px + 26px); }
}

/* ---------- softer, larger, airier ---------- */
:root{ --r-xl: 30px; --r-lg: 22px; --r-md: 15px; }
.pane, .glass{
  box-shadow:
    0 1px 0 var(--sheen) inset,
    0 2px 6px rgba(0,0,0,.04),
    0 20px 46px rgba(0,0,0,.20);
}
[data-skin="warm"] .pane, [data-skin="warm"] .glass{
  box-shadow:
    0 1px 0 var(--sheen) inset,
    0 2px 6px rgba(90,70,40,.05),
    0 18px 44px rgba(90,70,40,.13);
}

/* ---------- the card that carries the number ----------
   One panel in reverse, so what somebody is actually here to see is
   the first thing the eye reaches. Every colour inside it is set
   explicitly rather than inherited, because a reversed card that
   borrows the page's text colour is how contrast quietly breaks. */
#earnPane{
  --card-ink: #F6F4FA;
  --card-dim: #C6C0D4;
  /* A solid colour as well as the gradient. A gradient is a
     background-IMAGE, so anything reading the computed background
     colour of this card — the readability audit included — sees
     transparent and judges the text against the page behind it. It is
     also the right fallback if the gradient ever fails to paint. */
  background-color:#15121F;
  background-image:linear-gradient(160deg, #1B1726 0%, #12101B 100%);
  border-color:rgba(255,255,255,.10);
  color:var(--card-ink);
}
[data-skin="warm"] #earnPane{
  background-color:#1C1613;
  background-image:linear-gradient(160deg, #241D16 0%, #171210 100%);
  border-color:rgba(255,255,255,.08);
}
#earnPane h3{ color:var(--card-ink); }
#earnPane .tiny,
#earnPane .earn-alt,
#earnPane .earn-alt small{ color:var(--card-dim); }
#earnPane .earn-now{ color:var(--card-ink); }
#earnPane .bonus{ border-top-color:rgba(255,255,255,.14); }
#earnPane .bonus-bar{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); }
#earnPane .expand{ color:var(--card-dim); border-color:rgba(255,255,255,.18); }
#earnPane .expand:hover{ color:var(--card-ink); background:rgba(255,255,255,.10); }
#earnPane .earn-run{ color:#7BE3A6; }
#earnPane .earn-run i{ background:#7BE3A6; }
#earnPane .pace{ border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.06); }