.dangal-shell {
  width: min(100%, 880px);
  margin: 1rem auto 4rem;
}

:root[data-theme='dark'] {
  --page: #09090b;
  --page-glow: rgba(139, 92, 246, 0.14);
  --surface: rgba(24, 24, 35, 0.88);
  --surface-strong: #18181f;
  --surface-soft: rgba(255, 255, 255, 0.055);
  --text: #f1f5f9;
  --muted: #a1aabe;
  --label: #c4b5fd;
  --line: rgba(139, 92, 246, 0.18);
  --line-strong: rgba(167, 139, 250, 0.34);
  --primary: #8b5cf6;
  --primary-strong: #a78bfa;
  --accent: #f97316;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

.dangal-heading {
  /* Wide enough for the longest label the share control can show, so the pill
     never resizes; the row reserves that width on both sides above the narrow
     breakpoint, where the heading is centred. */
  --dangal-share-width: 7.9rem;
  --dangal-share-gap: 0.75rem;
  /* The heading spans the shell rather than a narrower reading column, so the
     control reaches the page's edge instead of taking width from the date. */
  width: 100%;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.dangal-heading h1 {
  margin: 0.2rem 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  line-height: 1.15;
}

/* The heading is a row so the share control can sit with the date at every
   width: one position for the day, the result, a closed day and a reader who
   is signed out. */
.dangal-heading__row {
  display: flex;
  align-items: flex-start;
  gap: var(--dangal-share-gap);
}

.dangal-heading__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Where the heading is centred, the control's width is matched on the other
   side so the date stays on the page's centre line rather than sliding left by
   half a pill. A heading without a control reserves nothing. */
@media (min-width: 641px) {
  .dangal-heading__row:has(.dangal-share) .dangal-heading__title {
    margin-left: calc(var(--dangal-share-width) + var(--dangal-share-gap));
  }
}

.dangal-share {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  min-width: var(--dangal-share-width);
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  /* Lighter than every other control on the page: it is an offer, not the
     action the page is for. */
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}

.dangal-share svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

.dangal-share:hover { border-color: var(--line-strong); }
.dangal-share:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dangal-share.is-copied { border-color: rgba(22, 163, 74, 0.5); color: #15803d; }
.dangal-share.is-failed { border-color: rgba(220, 38, 38, 0.5); color: #dc2626; }

.dangal-buckets,
.dangal-result__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.dangal-buckets span,
.dangal-chip {
  padding: 0.34rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.dangal-chip--streak {
  border-color: rgba(234, 88, 12, 0.28);
  color: var(--accent);
}

.dangal-question-list {
  display: grid;
  gap: 1rem;
}

.dangal-question {
  padding: clamp(1.1rem, 3vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dangal-bucket,
.dangal-feedback__status {
  margin: 0 0 0.7rem;
  color: var(--label);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dangal-stem {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.7rem;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.55;
}

.dangal-stem__content { min-width: 0; }
.dangal-stem p { margin: 0; }
.dangal-stem ol,
.dangal-stem ul { margin-block: 0.65rem 0; padding-left: 1.25rem; }

.dangal-number {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
}

.dangal-options {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.dangal-option {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 48px;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  line-height: 1.42;
  text-align: left;
}

.dangal-option:not(:disabled) { cursor: pointer; }
.dangal-option:not(:disabled):hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dangal-option:focus-visible,
.dangal-primary:focus-visible,
.dangal-secondary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* An inert option is an archive or an answered day, never a reader who has not
   signed in. It reads as settled rather than as waiting for a tap: the arrow
   stays a default cursor and nothing lifts under the pointer. */
.dangal-option:disabled { opacity: 0.72; cursor: default; }
.dangal-option.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--surface-strong)); }
.dangal-option.is-correct { border-color: rgba(22, 163, 74, 0.5); background: rgba(22, 163, 74, 0.1); opacity: 1; }
.dangal-option.is-incorrect { border-color: rgba(220, 38, 38, 0.5); background: rgba(220, 38, 38, 0.09); opacity: 1; }

.dangal-option__key {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--label);
  font-family: 'Space Mono', monospace;
  font-size: 0.76rem;
  font-weight: 700;
}

.dangal-action,
.dangal-panel {
  width: min(100%, 520px);
  margin: 1.4rem auto 0;
  text-align: center;
}

.dangal-action p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Five questions are several screens, so the action rides the bottom of the
   viewport for the whole scroll and settles into its own place at the end of
   the document. Sticky rather than fixed, so it takes its own space in the
   flow and nothing below it needs a spacer. */
.dangal-action--sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 1.4rem;
  padding: 0.85rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.dangal-action--sticky .dangal-primary,
.dangal-action--sticky .dangal-secondary { width: 100%; }

.dangal-primary,
.dangal-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.76rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.dangal-primary { background: var(--primary); color: var(--button-text); }
.dangal-primary:hover { background: var(--primary-strong); }
.dangal-primary:disabled { cursor: not-allowed; opacity: 0.48; }
.dangal-secondary { border-color: var(--line); background: transparent; color: var(--text); }

.dangal-result {
  margin: 0 auto 1.2rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.dangal-result__score {
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.dangal-result__score small { color: var(--muted); font-size: 0.45em; }
.dangal-result__percentile { margin: 0.65rem 0; color: var(--muted); }

/* The space the result and its board will occupy, held open while the personal
   read is in flight so they land in a hole rather than shoving the questions
   down most of a screen. It draws nothing: no border, no tint, no skeleton. */
.dangal-reserve { margin-bottom: 1.3rem; }

/* The board borrows the result card's shell, one width narrower, so the two read
   as a single block: the score, then who else answered the same five. */
.dangal-board {
  width: min(100%, 30rem);
  margin: 0 auto 1.3rem;
  padding: 1.05rem 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* The head carries what the numbers mean and the one control the board has. */
.dangal-board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

/* A label, not a title: the score above it is the page's subject. */
.dangal-board h2 {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Three words that define the axis, which the totals are meaningless without. */
.dangal-board__window {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Lighter than every other control on the page: it is an offer, not a step. */
.dangal-board__listing {
  flex: none;
  /* Both labels fit this width, so the head does not resize when the control
     changes its mind, the same reason the share pill reserves its own. */
  min-width: 7.1rem;
  padding: 0.3rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.dangal-board__listing:hover { border-color: var(--line-strong); color: var(--text); }
.dangal-board__listing:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dangal-board__listing:disabled { cursor: progress; opacity: 0.55; }

.dangal-board ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dangal-board li {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto 2.2rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
}

/* Tabular figures so ten rows of numbers hold one column each. */
.dangal-board__position,
.dangal-board__days,
.dangal-board__total {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
}

.dangal-board__position { color: var(--muted); text-align: right; }
.dangal-board__total { color: var(--text); text-align: right; }

/* Context, never a rank: the days a learner played inside the window, quiet
   enough that the total stays the number the eye lands on. */
.dangal-board__days { color: var(--muted); font-size: 0.74rem; }

/* Names arrive capped at twenty characters, so this clips nothing in practice.
   No ellipsis: interface copy in this product never trails one. */
.dangal-board__name {
  overflow: hidden;
  white-space: nowrap;
}

/* The viewer's row is found, not read for: an inset ring rather than a border,
   so marking it moves no other row by a pixel. */
.dangal-board li.is-you {
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.dangal-board li.is-you .dangal-board__name { font-weight: 700; }
.dangal-board li.is-you .dangal-board__position { color: var(--primary-strong); }

/* Your row, found in one glance rather than read for: one pass of a ring that
   settles into the resting mark. It runs when the board is drawn, which is on
   arrival and again when a returning tab reloads a board that has moved. */
@media (prefers-reduced-motion: no-preference) {
  .dangal-board li.is-you { animation: dangal-board-found 900ms ease-out 1; }
}

@keyframes dangal-board-found {
  from {
    box-shadow:
      inset 0 0 0 1px var(--line-strong),
      0 0 0 7px rgba(139, 92, 246, 0.22);
  }
  to {
    box-shadow:
      inset 0 0 0 1px var(--line-strong),
      0 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* A hairline stands where the positions jump. Nothing is written in the gap. */
.dangal-board li.is-after-gap { position: relative; margin-top: 0.9rem; }

.dangal-board li.is-after-gap::before {
  content: '';
  position: absolute;
  top: -0.48rem;
  right: 0.5rem;
  left: 0.5rem;
  height: 1px;
  background: var(--line);
}

.dangal-feedback {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.dangal-feedback__status { margin-bottom: 0.5rem; }
.dangal-feedback__status.is-correct { color: #15803d; }
.dangal-feedback__status.is-incorrect { color: #dc2626; }
.dangal-feedback strong { display: block; margin-bottom: 0.45rem; }
.dangal-feedback p:last-child { margin-bottom: 0; }

.dangal-panel {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dangal-panel h2 { margin: 0 0 0.55rem; font-size: 1.3rem; }
.dangal-panel p { margin: 0 0 1rem; color: var(--muted); }
.dangal-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }

@media (min-width: 980px) {
  .dangal-question.has-feedback {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
    gap: 1.15rem;
    align-items: start;
  }
  .dangal-question.has-feedback > .dangal-feedback { margin-top: 0; }
}

@media (max-width: 640px) {
  .dangal-shell { margin-top: 0; }
  .dangal-board {
    width: 100%;
    padding: 0.9rem 0.75rem 0.75rem;
    border-radius: 15px;
  }
  .dangal-board li { gap: 0.5rem; padding: 0.4rem 0.35rem; }
  .dangal-board__head { gap: 0.5rem; }
  .dangal-heading { text-align: left; }
  .dangal-buckets { justify-content: flex-start; }
  .dangal-question { border-radius: 15px; }
  .dangal-stem { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.5rem; }
  .dangal-number { width: 1.6rem; height: 1.6rem; }
}

@media (prefers-color-scheme: dark) {
  .dangal-feedback__status.is-correct { color: #4ade80; }
  .dangal-feedback__status.is-incorrect { color: #f87171; }
  .dangal-share.is-copied { color: #4ade80; }
  .dangal-share.is-failed { color: #f87171; }
}

:root[data-theme='dark'] .dangal-feedback__status.is-correct { color: #4ade80; }
:root[data-theme='dark'] .dangal-feedback__status.is-incorrect { color: #f87171; }
:root[data-theme='dark'] .dangal-share.is-copied { color: #4ade80; }
:root[data-theme='dark'] .dangal-share.is-failed { color: #f87171; }