/* JediDoodle layout — the only stylesheet JediDoodle authors that ships to the browser.
   Loads LAST, after tokens, bridge and bricks, so it composes them rather than fighting them.
   Token-only: no raw values, per the suite rule that raw values live in tokens.css alone.

   Deliberately small. Anything that looks like a reusable component belongs upstream in
   jotf-ui as a brick, not here. */

body {
  margin: 0;
  background: var(--jd-canvas);
  color: var(--color-foreground);
  font-family: var(--font-body);
}

/* The calm, centered, roomy container the JOTF guide specifies for anonymous surfaces. */
.jd-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.jd-page__header { margin-bottom: var(--space-6); }

.jd-page__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-headline);
  /* The style guide sets headlines at 600. The browser's default h1 weight is bold, which
     renders Clash Display heavier than the guide intends. */
  font-weight: 600;
  color: var(--color-foreground);
}

.jd-page__lede { margin: 0; color: var(--color-muted-foreground); }

/* A stack of options; strongly separated rows rather than visual clutter. */
.jd-options { display: flex; flex-direction: column; gap: var(--space-3); }

.jd-option > .form-field { display: block; }

.jd-option:last-child { border-bottom: 0; padding-bottom: 0; }

/* Touch targets stay comfortable at 320px; the visual gate asserts this. Applied in our own
   layer because the vendored bricks must not be edited. */
.jd-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.btn,
.form-field__control {
  min-height: var(--jd-touch-target);
}

.btn { display: inline-flex; align-items: center; justify-content: center; }

/* Option rows are real fieldsets now, so the browser's default fieldset chrome has to be
   cleared before our own layout applies. */
.jd-option {
  margin: 0;
  padding: 0 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-border);
}

.jd-option__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

/* A capability link and its copy button. The field must stay readable at 320px, so the
   button drops below it rather than squeezing the link into a few characters. */
.jd-link__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.jd-link__value {
  flex: 1 1 18rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.jd-link__copy { flex: 0 0 auto; }

.jd-link__status {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-muted-foreground);
}

.jd-link + .jd-link { margin-top: var(--space-5); }

/* Offered times read as a list, not a table: at 320px a table of four columns is unreadable
   and this carries the same information in one line each. */
.jd-times {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jd-times__item {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--jd-surface);
  font-size: var(--text-small);
}

.jd-secret {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--jd-surface);
}

.jd-secret__link {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  word-break: break-all;
}

@media (min-width: 481px) {
  .jd-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: end;
  }
  .jd-option__legend { grid-column: 1 / -1; }
}

/* One offered time and its three answers. The row must stay readable at 320px, so the
   choices wrap under the legend rather than compressing into unreadable columns. */
.jd-vote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--jd-surface);
}

.jd-vote__legend {
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-foreground);
}

.jd-vote__hint { margin: 0 0 var(--space-2); color: var(--color-muted-foreground); }

.jd-vote__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The whole choice is the target, not just the dot: a 44px row is reachable with a thumb. */
.jd-vote__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 6rem;
  min-height: var(--jd-touch-target);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-card);
  cursor: pointer;
}

/* Selection is never colour alone: the border weight and the control itself both change. */
.jd-vote__choice:has(.jd-vote__input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.jd-vote__choice:focus-within {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.jd-vote__input { min-height: 0; margin: 0; }

.jd-vote__label { font-size: var(--text-small); }

/* The alert the enhancement layer inserts when an enhanced write is rejected. */
.jd-form-alert { margin: 0 0 var(--space-4); }

/* A text link is still a touch target. Given as an inline-flex row with the same minimum
   height every other control uses, so it is reachable with a thumb rather than aimed at. */
.jd-link__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--jd-touch-target);
  color: var(--color-primary);
}

/* The ranking. Rank and badges are text; colour is an extra cue on top of a label that
   already says the same thing, never the only carrier of meaning. */
.jd-ranking { margin: var(--space-4) 0 0; padding: 0; list-style: none; }

.jd-ranking__item {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--jd-surface);
}

/* The strongest option is also structurally distinct, so it reads as first without colour. */
.jd-ranking__item[data-option-rank="1"] {
  border-color: var(--color-primary);
  border-left-width: 4px;
}

.jd-ranking__rank {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.jd-ranking__when { margin: var(--space-1) 0 0; font-weight: 600; }
.jd-ranking__counts { margin: var(--space-1) 0 0; color: var(--color-muted-foreground); font-size: var(--text-small); }
.jd-ranking__badges { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

.jd-ranking__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  background: var(--color-card);
}

.jd-ranking__badge--best {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* The matrix. Dense by nature, so at narrow widths it scrolls inside its own container
   rather than pushing the document sideways. */
.jd-matrix__scroll { overflow-x: auto; margin-top: var(--space-4); }

.jd-matrix { border-collapse: collapse; width: 100%; font-size: var(--text-small); }

.jd-matrix__caption {
  text-align: left;
  padding-bottom: var(--space-2);
  color: var(--color-muted-foreground);
}

.jd-matrix th,
.jd-matrix td {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.jd-matrix__head { min-width: 9rem; }
.jd-matrix__rank { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--color-muted-foreground); }
.jd-matrix__when { display: block; font-weight: 400; }
.jd-matrix__who { white-space: nowrap; }

/* Answer cells: the word is always present; the tint only reinforces it. */
.jd-matrix__cell--yes { background: var(--status-fine-subtle); }
.jd-matrix__cell--maybe { background: var(--status-pending); }
.jd-matrix__cell--no { background: var(--color-surface-2); }
.jd-matrix__cell--unanswered { color: var(--color-muted-foreground); }

/* The chosen time. Loud on purpose: it is the answer the whole poll exists to produce, and
   it is stated in words so the emphasis is never carried by colour alone. */
.jd-final {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-card);
}

.jd-final__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}

.jd-final__when { margin: var(--space-2) 0 0; font-family: var(--font-headline); font-size: var(--text-h3); font-weight: 600; }
.jd-final__note { margin: var(--space-1) 0 0; color: var(--color-muted-foreground); font-size: var(--text-small); }

/* Organizer controls. Each is its own form, so each posts on its own without JavaScript. */
.jd-manage__heading {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.jd-manage__form { margin: 0 0 var(--space-3); }
.jd-manage__options { margin: 0; padding: 0; list-style: none; }

.jd-manage__option {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.jd-manage__when { flex: 1 1 12rem; font-size: var(--text-small); }
.jd-manage__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jd-manage__actions .jd-manage__form { margin: 0; }

/* The confirmation interstitial. Deliberately plain: one explanation, one destructive
   button, one way out. */
.jd-confirm { margin: var(--space-4) 0 0; }

/* --- Organizer chrome ------------------------------------------------------------------
   A participant and an organizer otherwise read the same canvas, and confusing "my answer"
   with "everyone's poll" is the expensive mistake here. The distinction is carried by a dark
   band and a tinted canvas — the dark-slate treatment the style guide reserves for contained
   dark areas — plus the words "Organizer view", so it survives greyscale and screen readers
   alike. Chrome only: no control is ever shown or hidden by CSS. */
.jd-organizer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--report-dark-900);
  color: var(--color-inverse);
  border-bottom: 3px solid var(--color-primary);
}

.jd-organizer-bar__badge {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  white-space: nowrap;
}

.jd-organizer-bar__note { font-size: var(--text-small); color: var(--report-dark-400); }

/* A different ground under the organizer, so the two views never read as the same page. */
.jd-body--organizer { background: var(--color-surface-2); }
.jd-body--organizer .jd-page__header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }

@media (max-width: 480px) {
  .jd-organizer-bar__note { flex-basis: 100%; }
}