/* The XYZ Formula — /resources/resume-bullets/
   ────────────────────────────────────────────
   Built on golden.css tokens and the shared .res-* chrome in resources.css.

   Two instruments, one page: the composer (formula strip + three slots +
   assembled bullet) and the rules board (radiogroup + detail), which borrows
   the Metrics-by-Value list/panel pattern. Scoped under .xyz.

   Golden Hour: honey is STRUCTURAL only (slot underlines, rule dots,
   formula rules) and never text; --clay is the text-safe interactive accent
   (X, labels, selected rule); --brick is weak-framing. No amber: it is reserved
   for the primary action, and a complete bullet turns its lead-ins ink. Y is ink marked by a dashed underline: brick sat too close
   to clay to tell X and Y apart. No emoji. */

.xyz {
  --xyz-x: var(--clay);
  --xyz-y: var(--ink);
  --xyz-z: var(--ink);
  --xyz-pad: clamp(20px, 2.5vw, 32px);
}

.xyz-section {
  border-top: 0;
  padding-top: 32px;
}
.res-intro + .xyz-section { padding-top: 0; }

/* ── Composer card ───────────────────────────────────────────────────────── */

.xyz-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
@media (max-width: 680px) {
  .xyz-card { border-radius: var(--r-lg); --xyz-pad: 16px; }
}

/* The typeset formula is the signature object — three lines, slots filling
   in as the fields are typed. Honey underlines are structural. */
.xyz-formula {
  padding: clamp(22px, 3vw, 36px) var(--xyz-pad) clamp(18px, 2.4vw, 28px);
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
}

.xyz-formula-line {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--muted);
  margin: 0;
}

/* Complete: the lead-ins join the slots in ink, so the strip reads as one
   finished sentence. */
.xyz-formula[data-complete="true"] .xyz-formula-line { color: var(--ink); }

/* A filled slot stays in the sentence's serif; colour and the underline carry
   it. Bold sans turned the strip into a second, louder copy of the bullet. */
.xyz-slot {
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid color-mix(in srgb, var(--honey) 55%, transparent);
  padding: 0 0 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.xyz-slot[data-slot="x"] { color: var(--xyz-x); border-bottom-color: color-mix(in srgb, var(--clay) 45%, transparent); }
.xyz-slot[data-slot="y"] {
  color: var(--xyz-y);
  border-bottom-style: dashed;
  border-bottom-color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.xyz-slot[data-slot="z"] { color: var(--xyz-z); border-bottom-color: color-mix(in srgb, var(--ink) 50%, transparent); }

.xyz-lead[data-hidden="true"] { display: none; }

.xyz-slot[data-empty="true"] {
  font-weight: 500;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.04em;
}

/* ── Fields ────────────────────────────────────────────────────────────────
   Three columns, three shared rows (label / hint / box) so the textareas sit
   on one baseline even when the hints wrap to different depths. Flex +
   margin-top:auto is the fallback; subgrid is the actual shared track. */

.xyz-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--hair);
}
@media (min-width: 981px) {
  .xyz-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.xyz-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px var(--xyz-pad) 24px;
  border-top: 1px solid var(--hair);
}
@media (min-width: 981px) {
  .xyz-fields { align-items: stretch; }
  .xyz-field {
    border-top: 0;
    border-right: 1px solid var(--hair);
  }
  .xyz-field:last-child { border-right: 0; }
  .xyz-hint { flex: 1 1 auto; }
  .xyz .xyz-field textarea {
    flex: 0 0 auto;
    margin-top: auto;
    resize: none;
    min-height: 96px;
    height: 96px;
  }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .xyz-fields {
      grid-template-rows: auto auto 1fr;
    }
    .xyz-field {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / span 3;
    }
    .xyz-field:nth-child(1) { grid-column: 1; }
    .xyz-field:nth-child(2) { grid-column: 2; }
    .xyz-field:nth-child(3) { grid-column: 3; }
    .xyz-hint { flex: none; }
    .xyz .xyz-field textarea {
      margin-top: 0;
      height: 100%;
      min-height: 96px;
    }
  }
}

.xyz-field label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.xyz-letter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--clay);
  border-radius: var(--r-sm);
  padding: 2px 7px 1px;
  line-height: 1.4;
}
/* Y's badge is outlined in the same dash as its slot's underline, so X and Y
   pair up without relying on colour. The padding gives back the border's 1px
   so all three badges stay the same size. */
.xyz-field[data-slot="y"] .xyz-letter {
  background: none;
  color: var(--ink);
  border: 1px dashed var(--ink);
  padding: 1px 6px 0;
}
.xyz-field[data-slot="z"] .xyz-letter { background: var(--ink); }

.xyz-hint {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px;
}

.xyz-field textarea {
  font-family: var(--font-display);
  font-size: var(--fs-field);
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
/* Italic marks the placeholder as an example, so an empty field doesn't read
   as already filled in. */
.xyz-field textarea::placeholder { color: var(--muted); font-style: italic; }
.xyz-field textarea:focus {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(199, 122, 26, 0.16);
}

/* ── Examples: the card's first row ── */

.xyz-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
  margin: 0;
  padding: 16px var(--xyz-pad);
  border-bottom: 1px solid var(--hair);
}

.xyz-examples-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0;
}

.xyz-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* SYSTEM-CANDIDATE: chip (SYSTEM.md "Chips and tags", the .pos-chip spec). */
.xyz-chip {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 15px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.xyz-chip:hover { border-color: var(--ink); }
.xyz-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}


/* ── Formula foot: the read on the left, Copy and Clear on the right ──── */

.xyz-formula-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: clamp(14px, 2vw, 20px);
}
.xyz-formula-actions { display: flex; gap: 8px; }

.xyz-read {
  flex: 1 1 28ch;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.xyz-read[data-tone="warn"] { color: var(--brick); }
.xyz-read[data-tone="ok"] { color: var(--clay); }


/* Scripting capability keeps the server-rendered composer geometry stable
   before initialization; disabled-JS readers get the worksheet without controls. */
@media (scripting: none) {
  .xyz-examples,
  .xyz-formula-actions,
  .xyz-enhanced-read { display: none; }
}
.xyz:not(.has-js) .xyz-rule-list { display: none; }
.xyz:not(.has-js) .xyz-rules { grid-template-columns: 1fr; }
.xyz:not(.has-js) .xyz-rule-detail .xyz-panel { display: block; animation: none; }
.xyz:not(.has-js) .xyz-rule-detail .xyz-panel + .xyz-panel {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 28px;
}

/* ── Rules board ─────────────────────────────────────────────────────────── */

.xyz-rules-section { padding-top: 48px; padding-bottom: 0; }

.xyz-rules {
  margin-top: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

/* The list sits on the card, not a grey column: the detail panel usually runs
   taller than the list, and a tinted column left a dead block under the last
   rule. Selectable row (SYSTEM.md): paper-2 on hover, a label wash with clay
   text and a honey bar when selected. The two can't be mistaken for each other. */
.xyz-rule-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hair);
}
.xyz-rule-list:focus-visible { outline-offset: -2px; }

.xyz-rule {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.16s, background 0.16s;
}
.xyz-rule:last-child { border-bottom: 0; }
.xyz-rule:hover { background: var(--paper-2); }
.xyz-rule:focus-visible { outline-offset: -2px; }
.xyz-rule[aria-checked="true"] {
  color: var(--clay);
  background: var(--label);
  box-shadow: inset 3px 0 0 var(--honey);
}

.xyz-rule-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--honey) 45%, transparent);
  justify-self: center;
}
.xyz-rule[aria-checked="true"] .xyz-rule-dot { background: var(--clay); }

.xyz-rule-name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
}
.xyz-rule-short { display: none; }

.xyz-rule-detail { padding: var(--xyz-pad); min-width: 0; }

.xyz-panel { display: none; }
.xyz-panel[data-active="true"] { display: block; }

.xyz-panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-panel);
  line-height: var(--fs-panel-lh);
  letter-spacing: var(--fs-panel-ls);
  color: var(--ink);
  margin: 0 0 18px;
}

.xyz-facts {
  display: grid;
  gap: 18px;
  margin: 0;
}
.xyz-facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}
.xyz-facts dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}

.xyz-framing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.xyz-framing .framing-weak,
.xyz-framing .framing-strong {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
}
.xyz-framing .framing-weak { color: var(--muted); }
.xyz-framing .framing-strong { color: var(--ink); }
.xyz-framing .framing-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.xyz-framing .framing-weak .framing-tag { color: var(--brick); }
.xyz-framing .framing-strong .framing-tag { color: var(--clay); }

@media (max-width: 680px) {
  .xyz-rules { grid-template-columns: 1fr; }
  .xyz-rule-list {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    -webkit-overflow-scrolling: touch;
    /* The next name dissolves at the edge instead of cutting mid-word. */
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 36px), transparent);
  }
  .xyz-rule {
    grid-template-columns: 8px auto;
    flex: none;
    width: auto;
    border-bottom: 0;
    border-right: 1px solid var(--hair);
    padding: 12px 16px;
  }
  .xyz-rule:last-child { border-right: 0; }
  .xyz-rule[aria-checked="true"] { box-shadow: inset 0 -3px 0 var(--honey); }
  .xyz-rule-name {
    white-space: nowrap;
  }
  .xyz-rule-short { display: none; }
}

/* ── Coda ────────────────────────────────────────────────────────────────── */

/* The shared .coda (resources.css) sets the type and rule; it has no link
   rule yet, so links follow SYSTEM.md "Links / Prose" here. */
.coda a {
  color: var(--clay);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.coda a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .xyz-field textarea,
  .xyz-chip,
  .btn-ghost,
  .xyz-rule { transition: none; }
}

/* Accessibility floors (SYSTEM.md) at 680px and below: 44px targets and body
   text at 15px (fields follow --fs-field, 16px here). Labels, hints and meta
   keep their own sizes. */
@media (max-width: 680px) {
  .xyz-chip { min-height: 44px; }
  .xyz-chip { font-size: 15px; }
  .xyz-hint { font-size: var(--fs-body); }
  .xyz-read,
  .xyz-facts dd,
  .xyz-framing .framing-weak,
  .xyz-framing .framing-strong,
  .xyz-rule-short { font-size: 15px; }
  .xyz-rule { min-height: 44px; }
}