/* ==========================================================================
   Sub-issues (one level deep) - rollup chip, chevron toggle, children list,
   inline "+" mini-form. Loaded after app.css and built entirely from its
   design tokens. Status dot colors use the --status-* workflow hues.
   v2 (notes/makeover_design_language.md): badges on --r-pill, controls
   on --r-sm, motion on --dur-fast/--ease, focus rings everywhere. New
   §2 tokens carry working fallbacks until M1 lands them.
   ========================================================================== */

.issue-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
}

/* Rollup chip ("3/5") lives in the card meta line - a badge, so it
   rides the pill discipline (§3 rule 7). */
.rollup-chip {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 999px);
  padding: 1px var(--sp-2, 8px);
  line-height: 1.5;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.rollup-chip.all-done {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* The sub-issues disclosure: an inline, full-width row under the
   card - left-aligned, a subtle wash - not a floating pill. */
.card-sub-row {
  display: flex;
  justify-content: flex-start;
}

.chevron-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  width: 100%;
  background: var(--wash-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, var(--radius-sm, 6px));
  color: var(--faint);
  font-size: var(--size-2xs);
  padding: 3px var(--sp-2, 8px);
  text-align: left;
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
    color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease);
}

.chevron-toggle:hover {
  border-color: var(--accent-dim);
  color: var(--text-2);
}

.chevron-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

.chev {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transition: transform var(--dur-fast, 120ms) var(--ease, ease);
}

.chevron-toggle.open .chev {
  transform: rotate(90deg);
}

.chev-label {
  letter-spacing: 0.03em;
}

/* Expandable children list - indented under the parent card. The 2px
   rail IS the indentation affordance (§3 rule 8: --border-strong only
   where the outline is the affordance - here it marks depth). */
.children-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  margin: 0 0 2px var(--sp-2, 8px);
  padding-left: var(--sp-3, 12px);
  border-left: 2px solid var(--border);
}

/* Mini rows reuse .card from app.css; tightened into single-line rows */
.issue-card .child-row {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-1, 4px);
  padding: var(--sp-1, 4px) var(--sp-2, 8px);
  border-radius: var(--r-sm, var(--radius-sm, 6px));
  font-size: var(--size-sm, 12.5px);
  border-left-width: 2px;
}

/* The a11y pass: same sibling-dot restructure as the parent card
   (app.css §cards) - the row is role="button", so its status button
   renders as a sibling inside this wrapper, pinned to the row's
   start. .dot-slot keeps the row's inline metrics identical. */
.child-slot {
  position: relative;
}

.child-slot > .card-status {
  position: absolute;
  margin: 0;
  /* The child row's content box starts at border 2 + padding 8 = 10px;
     the in-flow dot sat at 10 - 3 (its flow margin) = 7px, vertically
     centered in the ~26px row → top 4px. */
  top: 4px;
  left: 7px;
  z-index: 1;
}

.issue-card .child-row:hover {
  transform: none;
}

.child-row .num {
  flex-shrink: 0;
}

.child-row .title {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

/* Status dot, colored by child status (the button around it is
   .card-status, styled in app.css) */
.dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill, 999px);
  flex-shrink: 0;
  display: inline-block;
  background: var(--status-todo);
}

.dot.s-backlog {
  background: var(--status-backlog);
}

.dot.s-todo {
  background: var(--status-todo);
}

.dot.s-in_progress {
  background: var(--status-in_progress);
}

.dot.s-done {
  background: var(--status-done);
}

.dot.s-canceled {
  background: var(--status-canceled);
}

/* Inline "+" mini-form at the foot of the children list */
.sub-issue-form {
  display: flex;
  align-items: center;
  gap: var(--sp-1, 4px);
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm, var(--radius-sm, 6px));
  padding: 3px var(--sp-2, 8px);
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
    background var(--dur-fast, 120ms) var(--ease, ease);
}

.sub-issue-form:focus-within {
  border-color: var(--accent-dim);
  border-style: solid;
}

.sub-plus {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

.sub-issue-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 2px 0;
  box-shadow: none;
  border-radius: 0;
}

.sub-issue-form input:focus {
  box-shadow: none;
  border-color: transparent;
}

.sub-issue-form input::placeholder {
  color: var(--faint);
}

/* -- responsive (mobile pass, notes/mobile_pass.md) ----------------------------
   Phones: the sub-issues disclosure and the inline add-form join the
   44px target rhythm. */

@media (max-width: 767px) {
  .chevron-toggle {
    min-height: 44px;
    padding: 8px 10px;
  }

  .sub-issue-form {
    min-height: 44px;
    padding: 4px 10px;
  }
}