/* ---- Landing page: the two sections a reader operates ---------------------
   "Try it" and "Who it is for" are both driven by hidden form controls and
   `:checked ~`, so they work with scripting off and need no JavaScript at all.
   They live in their own file because they are the only rules on the page that
   encode *state* rather than layout.

   Tokens only, canonical names: see `tokens.css`. */

/* ---- Try it: link evidence, watch the status compute ---------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-20);
  margin-top: var(--sp-32);
  align-items: start;
}
/* Kept in the layer rather than removed: `display: none` would take the
   control out of the tab order and the section would stop being operable by
   keyboard. */
.demo-switch, .aud-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.demo-rows {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.demo-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 6rem 8.5rem;
  gap: var(--sp-20);
  align-items: center;
  padding: var(--sp-12) var(--sp-20);
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
}
.demo-row:first-child { border-top: 0; }
.demo-row:hover { background: var(--surface-sunk); }
.demo-id { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent-deep); }
.demo-what { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.demo-what small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--slate);
}
/* The demo's own chips. Namespaced, because this file used to define `.chip`
   and `.demo-chip--gap` a second time, with opposite weights, on a page that also
   loads `primitives.css`: the landing showed one chip family and the product
   another. These three are a scripted animation of three states in one slot,
   which is why they carry `display` at all; the real vocabulary is
   `primitives.css`. */
.demo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-8);
}
.demo-chip--gap { background: var(--crit-soft); color: var(--crit); }
.demo-chip--ok { background: var(--ok-soft); color: var(--ok); display: none; }
.demo-chip--expired { background: var(--crit-soft); color: var(--crit); display: none; }
.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The drawn stand-in for `.btn-small` (buttons.css): a span, because the
     row is a label and a button inside a label is not clickable through it. */
  min-height: 1.875rem;
  padding: 0 var(--sp-12);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.demo-btn--linked {
  display: none;
  color: var(--slate);
  font-weight: var(--fw-regular);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  border-color: transparent;
  background: transparent;
  justify-content: flex-start;
}

/* A linked row: the gap chip gives way to the satisfied one and the button
   becomes the artifact it linked. Four rows, one rule each, because the
   selector has to name the row the control belongs to. */
#demo-1:checked ~ .demo-rows .demo-row--1 .demo-chip--gap,
#demo-2:checked ~ .demo-rows .demo-row--2 .demo-chip--gap,
#demo-3:checked ~ .demo-rows .demo-row--3 .demo-chip--gap,
#demo-4:checked ~ .demo-rows .demo-row--4 .demo-chip--gap { display: none; }
#demo-1:checked ~ .demo-rows .demo-row--1 .demo-chip--ok,
#demo-2:checked ~ .demo-rows .demo-row--2 .demo-chip--ok,
#demo-3:checked ~ .demo-rows .demo-row--3 .demo-chip--ok,
#demo-4:checked ~ .demo-rows .demo-row--4 .demo-chip--ok { display: inline-flex; }
#demo-1:checked ~ .demo-rows .demo-row--1 .demo-btn,
#demo-2:checked ~ .demo-rows .demo-row--2 .demo-btn,
#demo-3:checked ~ .demo-rows .demo-row--3 .demo-btn,
#demo-4:checked ~ .demo-rows .demo-row--4 .demo-btn { display: none; }
#demo-1:checked ~ .demo-rows .demo-row--1 .demo-btn--linked,
#demo-2:checked ~ .demo-rows .demo-row--2 .demo-btn--linked,
#demo-3:checked ~ .demo-rows .demo-row--3 .demo-btn--linked,
#demo-4:checked ~ .demo-rows .demo-row--4 .demo-btn--linked { display: inline-flex; }

/* The review date passes and row three is a gap again, whatever it linked. */
#demo-expire:checked ~ .demo-rows .demo-row--3 .demo-chip--ok,
#demo-expire:checked ~ .demo-rows .demo-row--3 .demo-chip--gap { display: none; }
#demo-expire:checked ~ .demo-rows .demo-row--3 .demo-chip--expired { display: inline-flex; }

.demo-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.demo-side h3 { margin: 0; }
.demo-bar { display: flex; gap: var(--sp-4); height: var(--sp-12); margin: 0; }
.demo-seg { flex: 1; border-radius: var(--radius-cell); background: var(--neutral-soft); transition: background-color var(--dur-2) var(--ease); }
#demo-1:checked ~ .demo-side .demo-seg--1,
#demo-2:checked ~ .demo-side .demo-seg--2,
#demo-3:checked ~ .demo-side .demo-seg--3,
#demo-4:checked ~ .demo-side .demo-seg--4 { background: var(--ok); }
#demo-expire:checked ~ .demo-side .demo-seg--3 { background: var(--crit); }
.demo-status { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate); }
.demo-done {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ok);
  font-weight: var(--fw-medium);
}
.demo-done svg { width: 1rem; height: 1rem; flex: none; }
.demo:has(#demo-1:checked):has(#demo-2:checked):has(#demo-3:checked):has(#demo-4:checked):not(:has(#demo-expire:checked)) .demo-done {
  display: inline-flex;
}
.demo-expire {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--ink-2);
  padding: var(--sp-12);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}
.demo-toggle {
  /* A drawn switch, sized off the space scale so it stays on the 4px base. */
  width: calc(var(--sp-32) + var(--sp-4));
  height: var(--sp-20);
  border-radius: var(--radius-pill);
  background: var(--neutral);
  position: relative;
  flex: none;
  transition: background-color var(--dur-1) var(--ease);
}
.demo-toggle i {
  position: absolute;
  top: calc(var(--sp-4) * 0.75);
  left: calc(var(--sp-4) * 0.75);
  width: calc(var(--sp-16) - var(--sp-4) * 0.5);
  height: calc(var(--sp-16) - var(--sp-4) * 0.5);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: left var(--dur-1) var(--ease);
}
#demo-expire:checked ~ .demo-side .demo-toggle { background: var(--crit); }
#demo-expire:checked ~ .demo-side .demo-toggle i { left: calc(100% - var(--sp-16) - var(--sp-4) * 0.25); }
.demo-note { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--slate); }
/* Proxy rings, not a second recipe: the checkbox each of these stands in for
   is visually hidden, so `base.css`'s rule has nothing to draw on and the ring
   is drawn on the label the reader actually sees. */
#demo-1:focus-visible ~ .demo-rows .demo-row--1,
#demo-2:focus-visible ~ .demo-rows .demo-row--2,
#demo-3:focus-visible ~ .demo-rows .demo-row--3,
#demo-4:focus-visible ~ .demo-rows .demo-row--4,
#demo-expire:focus-visible ~ .demo-side .demo-expire { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---- Who it is for: three tabs -------------------------------------------- */

.aud { margin-top: var(--sp-32); position: relative; }
.aud-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.aud-tab {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-20);
  border: 1px solid var(--line);
  border-bottom: 0;
  /* The selected tab's underline, drawn at the top of the tab (style guide
     7.7): thicker than a hairline because it is a state, not a border. */
  border-top: 3px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-sunk);
  cursor: pointer;
}
.aud-tab b { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.aud-tab span { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--slate); }
#aud-1:checked ~ .aud-tabs .aud-tab--1,
#aud-2:checked ~ .aud-tabs .aud-tab--2,
#aud-3:checked ~ .aud-tabs .aud-tab--3 {
  background: var(--surface);
  border-color: var(--accent);
  border-top-color: var(--accent);
}
#aud-1:focus-visible ~ .aud-tabs .aud-tab--1,
#aud-2:focus-visible ~ .aud-tabs .aud-tab--2,
#aud-3:focus-visible ~ .aud-tabs .aud-tab--3 { outline: 2px solid var(--accent); outline-offset: 2px; }
.aud-panels {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--sp-20);
}
.aud-panel { display: none; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sp-32); align-items: start; }
#aud-1:checked ~ .aud-panels .aud-panel--1,
#aud-2:checked ~ .aud-panels .aud-panel--2,
#aud-3:checked ~ .aud-panels .aud-panel--3 { display: grid; }
.aud-pic {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* An illustration rather than an interface icon, so it is sized to its
   plate (6rem) rather than to the 16/20/24 icon steps of style guide 5.8. */
.aud-pic svg { width: 3.5rem; height: 3.5rem; }
.aud-panel p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); margin: 0 0 var(--sp-12); max-width: 60ch; }
.week-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
  color: var(--slate);
  margin: 0 0 var(--sp-8);
}
.week { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: 0; }
.week span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--sp-4) var(--sp-12);
}
.week span svg { width: 1rem; height: 1rem; color: var(--ok); flex: none; }

@media (max-width: 64rem) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .aud-tabs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aud-tab { border-bottom: 1px solid var(--line); border-radius: 0; }
  .aud-tab:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

@media (max-width: 48rem) {
  .demo-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-12); }
  .demo-id { grid-column: 1; }
  .demo-what { grid-column: 1; }
  .demo-chips { grid-column: 2; grid-row: 1; justify-self: end; }
  .demo-actions { grid-column: 2; grid-row: 2; justify-self: end; }
  .aud-panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
}