/* /cite: one glass card with a three-step flow (1 What, 2 Format, 3 Copy), the output panel beside a Details form, and a row of three guidance cards.
   Tokens and the type scale come from system.css (hero: "THE ONE HERO"); nothing here sets h1/h2/h3 sizes of the page. Sizes outside the token scale: code 13 px, prose entry 15 px (the card-title token), 36/40/44 px control heights. */
.cite-sec { --cite-accent: var(--focus); }
.cite-sec > .wrap { padding-inline: var(--gutter); min-width: 0; }
.cite-card { display: grid; gap: 1rem; min-width: 0; padding: clamp(1.25rem, 2.4vw, 2rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--surface-1); box-shadow: var(--elev); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cite-card:not(.is-js) .cite-top { display: none; }

/* steps: label column + control, so the What control and the format group share one left edge */
.cite-step { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; min-width: 0; }
.cite-step__l { display: inline-flex; align-items: center; gap: .6rem; margin: 0; color: var(--text); font-size: var(--text-body-size); font-weight: 500; }
.cite-step__l .bdg { --bs: 22px; --bc: var(--cite-accent); --bf: var(--cite-accent); --bb: color-mix(in srgb, var(--cite-accent) 12%, transparent); margin: 0; }

/* segmented controls: the shared .seg with an accent ink; What = 40 px, Format = 36 px */
.cite-seg { display: none; width: fit-content; max-width: 100%; }
.cite-card.is-js .cite-seg { display: flex; }
.cite-card .cite-seg { gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 24px; background: rgba(255, 255, 255, .03); }
.cite-card .cite-seg .seg__ink { border-color: color-mix(in srgb, var(--cite-accent) 60%, transparent); background: color-mix(in srgb, var(--cite-accent) 13%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cite-accent) 9%, transparent), 0 0 20px -6px color-mix(in srgb, var(--cite-accent) 70%, transparent); }
.cite-card .cite-seg > [role="tab"] { flex: none; }
.cite-card .cite-what > [role="tab"] { height: 40px; padding-inline: 20px; }
.cite-card .cite-fmt > [role="tab"] { height: 36px; padding-inline: 12px; gap: 6px; }
.cite-tag { color: var(--text-faint); font: 500 var(--text-small-size)/1 var(--mono); letter-spacing: 0; }
.cite-seg [aria-selected="true"] .cite-tag { color: var(--cite-accent); }
.cite-seg [role="tab"]:focus-visible, .cite-panel:focus-visible, .cite-pre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cite-panel { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.cite-panel[hidden] { display: none; }
.cite-card.is-js .cite-ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cite-ph { margin-bottom: .5rem; }

.cite-body { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; margin-top: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.cite-colh { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; min-height: var(--pill-h); }
.cite-hint { color: var(--text-faint); font-size: var(--text-small-size); }

/* output */
.cite-out { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.cite-out .code { flex: 1; display: flex; flex-direction: column; background: var(--bg); width: 100%; }
.cite-out .code__bar { min-height: 3.25rem; padding: .5rem .75rem .5rem 1.25rem; }
.cite-fname { font-family: var(--mono); font-size: .8125rem; color: var(--text-faint); overflow-wrap: anywhere; }
.cite-actions { display: flex; flex-wrap: wrap; gap: var(--btn-row); }
.cite-actions .btn svg { width: 16px; height: 16px; }
.cite-copy { border-color: color-mix(in srgb, var(--cite-accent) 55%, transparent); color: var(--text); }
.cite-copy .cite-i-done { display: none; }
.cite-actions .btn[data-copied="true"] { border-color: var(--valid); color: var(--valid); }
.cite-actions .btn[data-copied="true"] .cite-i-copy { display: none; }
.cite-actions .btn[data-copied="true"] .cite-i-done { display: block; }
.cite-cell { flex: 1; display: grid; min-width: 0; }
.cite-pre, .cite-size { grid-area: 1 / 1; min-width: 0; margin: 0; padding: 1.125rem 1.25rem; color: var(--text); font: 400 .8125rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.cite-pre { overflow: hidden; }
.cite-pre.is-prose, .cite-size.is-prose { font: 400 var(--text-card-title-size)/1.7 var(--font); }
.cite-sizers { grid-area: 1 / 1; display: grid; visibility: hidden; pointer-events: none; min-width: 0; }
.cite-size { grid-area: 1 / 1; }
.t-k { color: var(--text-faint); }
.t-p { color: color-mix(in srgb, var(--text-faint) 80%, transparent); }
.t-a { color: var(--cite-accent); }
.t-v { color: var(--text); }
.cite-foot { display: flex; padding: .55rem 1.25rem; border-top: 1px solid var(--border); color: var(--text-faint); font: 500 var(--text-small-size)/1.3 var(--mono); }

/* details */
.cite-detail { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.cite-dt { margin: 0; color: var(--text); font-size: var(--text-body-size); font-weight: 500; letter-spacing: 0; text-transform: none; }
.cite-form { flex: 1; display: grid; gap: 1rem; align-content: start; min-width: 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: rgba(255, 255, 255, .02); }
.cite-fields { display: grid; gap: 1rem; min-width: 0; }
.cite-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-width: 0; }
.cite-field { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.cite-field label { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; color: var(--text-dim); font-size: var(--text-small-size); font-weight: 500; letter-spacing: .02em; }
.cite-edited { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cite-accent); }
.cite-edited[hidden] { display: none; }
.cite-input, .cite-select { width: 100%; min-width: 0; height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font: inherit; font-size: var(--text-body-size); line-height: 1.45; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.cite-input--title { display: block; height: auto; min-height: 44px; padding-block: 11px; resize: none; overflow: hidden; }
.cite-selwrap { position: relative; min-width: 0; }
.cite-select { appearance: none; -webkit-appearance: none; padding-right: 40px; text-overflow: ellipsis; cursor: pointer; }
.cite-chev { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--text-faint); pointer-events: none; }
.cite-input:hover, .cite-select:hover { border-color: var(--border-hover); }
.cite-input:focus, .cite-select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138, 180, 255, .18); }
.cite-input[aria-invalid="true"] { border-color: var(--notice); }
.cite-pid { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin: 0; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-body-size); }
.cite-pid a { color: var(--text); overflow-wrap: anywhere; }

/* good to know: three equal glass cards */
.cite-which { display: grid; gap: 1rem; margin-top: 2.5rem; }
.cite-gk { margin: 0; max-width: none; color: var(--text-faint); font: 500 var(--text-small-size)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cite-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.cite-strip .tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .4rem .75rem; grid-template-rows: minmax(28px, auto) auto; grid-auto-rows: 0; align-items: center; align-content: start; padding: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--surface-1); }
.cite-strip .tile > div { display: contents; }
.cite-strip .bdg { grid-area: 1 / 1; align-self: center; --bs: 28px; --bc: var(--cite-accent); --bf: var(--cite-accent); --bb: color-mix(in srgb, var(--cite-accent) 12%, transparent); margin: 0; }
.cite-strip h3 { grid-area: 1 / 2; margin: 0; font: 600 var(--text-body-size)/1.3 var(--font); letter-spacing: 0; color: var(--text); }
.cite-strip p { grid-area: 2 / 1 / 3 / 3; align-self: start; margin: .5rem 0 0 !important; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.55; }

@media (max-width: 63.99rem) {
  .cite-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
  .cite-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 39.99rem) {
  .cite-step { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .cite-card.is-js .cite-what { display: grid; width: 100%; border-radius: 22px; }
  .cite-card .cite-what > [role="tab"] { height: 44px; white-space: normal; padding-inline: 14px; }
  .cite-card .cite-fmt { width: 100%; }
  .cite-pair { grid-template-columns: minmax(0, 1fr); }
  .cite-form { padding: 1rem; }
  .cite-pre, .cite-size { padding: 1rem; }
  .cite-out .code__bar { padding: .75rem; }
}

/* every grid and flex child may shrink, so nothing pushes the page wider than the viewport */
.cite-card > *, .cite-top > *, .cite-stage, .cite-panel > *, .cite-body > *, .cite-out .code { min-width: 0; max-width: 100%; }

/* final QA: with scripting on, the stacked no-script fallback is clipped to the height of the first tab panel until cite.mjs runs, so the card does not collapse (CLS) on a slow load */
@media (scripting: enabled) and (max-width: 40rem) { .cite-card:not(.is-js) .cite-stage { max-height: 15.75rem; overflow: hidden; } }