/* The criterion as a document (view-document.js), design A: the expert's words are the hero (the serif, verbatim), the
   copilot's are grey, sections are space and a heading with no boxes, and the one inset level is the rubric. Tokens
   and shared controls are in styles.css. */

/* ---------- the expert's criterion ---------- */
.crit-head { display: grid; gap: 12px; }
.crit-title {
  font-family: var(--font-serif); font-size: var(--fs-expert-title); line-height: var(--lh-expert-title); font-weight: 400;
  letter-spacing: -0.01em; white-space: pre-wrap; overflow-wrap: anywhere;
}
.crit-title:focus { box-shadow: none; }
.rubric { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.rubric div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; }
.rubric dt { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.rubric dd { font-family: var(--font-serif); font-size: var(--fs-expert); line-height: var(--lh-expert); white-space: pre-wrap; overflow-wrap: anywhere; }
.absent { font-family: var(--font-sans); font-size: var(--fs-callout); color: var(--label-3); font-style: italic; }

/* ---------- how it will be graded, in short, right under the criterion ---------- */
.doc-start { display: grid; gap: 16px; }
.summary { display: grid; gap: 2px; margin-top: -16px; }
.link-inline {
  display: inline; padding: 0; border: 0; background: none; color: var(--label-2); font: inherit; cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--separator-strong); text-underline-offset: 3px;
}
.link-inline:hover { color: var(--label); text-decoration-color: currentColor; }

/* ---------- what we need from you: items separated by a hairline ---------- */
.asks { display: grid; gap: 8px; }
.asks:empty { display: none; }
.asks-title:focus { box-shadow: none; }
.ask-list { display: grid; }
.ask { padding: 16px 0; border-top: 1px solid var(--separator); }
.ask:first-child { border-top: 0; padding-top: 4px; }
.ask > * + * { margin-top: 10px; }
.ask-card fieldset { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ask-card legend, .ask-q { float: none; width: 100%; padding: 0; font-weight: 600; }
.ask-card legend { float: left; margin-bottom: 2px; }
.ask-card legend + * { clear: left; }
.ask-readonly { display: grid; gap: 6px; }
.ask-suggestion q, .prov q, .decision-words { font-family: var(--font-serif); }
.ask-options { display: grid; gap: 6px; }
.ask-option {
  display: flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 12px;
  border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--input-border); cursor: pointer;
}
.ask-option:hover { box-shadow: inset 0 0 0 1px var(--label-2); }
.ask-option:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--label); }
.ask-option:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--label), var(--focus-ring); }
.ask-option input { margin: 0; width: 16px; height: 16px; flex: none; accent-color: var(--primary); }
.value-line { display: flex; gap: 8px; align-items: center; }
.value-line .input { flex: 1; min-width: 0; }
.use-value { flex: none; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.save-why { flex: 1 1 200px; }
.field-label { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: 600; color: var(--label-2); }
.ask-bulk { padding: 12px 0; border-top: 1px solid var(--separator); color: var(--label-2); }
.quoted-box { display: grid; gap: 10px; }
.quoted-list { display: grid; gap: 6px; }
.quoted-list li { display: grid; grid-template-columns: 160px 1fr; gap: 0 12px; }
.quoted-list li > .prov { grid-column: 2; }
.reject-option { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); color: var(--label-2); cursor: pointer; }
.reject-option input { margin: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.none-option { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); color: var(--label-2); cursor: pointer; }
.none-option input { margin: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.suggest-form { display: grid; gap: 8px; }
.suggest-edit { display: grid; gap: 6px; }
.validator-errors { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--amber-tint); }

/* ---------- the full plan ---------- */
.prose { display: grid; gap: 8px; }
.prose div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; }
.prose dt { color: var(--label-3); }
.h3 { font-size: var(--fs-callout); font-weight: 600; margin-top: 8px; }
.values { display: grid; }
.value-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 2px 12px; padding: 10px 0;
  border-top: 1px solid var(--separator); align-items: baseline;
}
.value-row:first-child { border-top: 0; }
.value-name { color: var(--label-2); overflow-wrap: anywhere; }
.value-val { min-width: 0; overflow-wrap: anywhere; }
.value-src { grid-column: 2; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.value-src q { font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--label-2); } /* the expert's words: 14 / 20 */
.value-meaning { font-family: var(--font-sans); font-size: var(--fs-footnote); color: var(--label-2); }
.values-tech .value-val { font-family: var(--font-mono); font-size: var(--fs-footnote); }
.value-row.is-pending { grid-template-columns: 160px 1fr; }
/* "What you decided": name | value and where it came from | Change, one row per line; the
   editor, a refusal and a waiting change span the row */
.values.decided .value-row { grid-template-columns: 160px 1fr auto; }
.values.decided .value-name { grid-column: 1; grid-row: 1; }
.values.decided .value-val { grid-column: 2; grid-row: 1; }
.values.decided .value-src { grid-column: 2; grid-row: 2; }
.values.decided .value-change { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; gap: 8px; }
.values.decided .value-editor, .values.decided .value-error, .values.decided .value-pending { grid-column: 1 / -1; }
.values.decided .value-row.is-pending { grid-template-columns: 160px 1fr; }
.values.decided .value-row.is-pending .value-pending { grid-column: 2; }
.values.decided .value-error:not(:has(.field-error:not(:empty))) { display: none; }
.change-form { display: grid; gap: 8px; padding: 8px 0 4px; }
.value-pending { min-width: 0; }
.prov { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.prov q { font-size: var(--fs-callout); color: var(--label-2); }
.prov-unverified { color: var(--label); background: var(--amber-tint); border-radius: var(--r-xs); padding: 0 4px; }
.reason { color: var(--label-3); }
.tech-details > :not(summary) + :not(summary) { margin-top: 12px; }
.verifier-list { display: grid; gap: 12px; }
.verifier { display: grid; gap: 6px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface-2); }
.verifier-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-footnote); color: var(--label-3); }
.verifier-spec { display: grid; gap: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.verifier-spec div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.verifier-spec dt { color: var(--label-3); }
.verifier-spec dd { overflow-wrap: anywhere; }
.describes { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.describes span { font-weight: 600; }

/* ---------- the expert's decision trail ---------- */
.decisions { display: grid; }
.decision { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--separator); }
.decision:first-child { border-top: 0; }
.decision-words { font-size: var(--fs-callout); line-height: var(--lh-callout); } /* 14 / 20, as the quotes under Values you settled */
.decision-meta { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.decisions-tech { gap: 4px; }

/* ---------- the decision bar: one sentence, then the buttons ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.bar-why { flex: 1 1 240px; color: var(--label-2); }
.bar .action-row { justify-content: flex-end; }

/* ---------- "Keep the AI judge": a native dialog ---------- */
#fallback-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 0;
  border-radius: var(--r-xl); background: var(--surface); color: var(--label);
  box-shadow: inset 0 0 0 1px var(--separator), var(--shadow-pop);
}
#fallback-dialog::backdrop { background: var(--backdrop); }
#fallback-dialog form { display: grid; gap: 12px; }
#fallback-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 760px) {
  .rubric div, .prose div, .verifier-spec div, .quoted-list li { grid-template-columns: 1fr; gap: 0; }
  .quoted-list li > .prov, .reject-option { grid-column: 1; }
  .value-row { grid-template-columns: 1fr; }
  .value-src { grid-column: 1; }
  /* a phone: the name with Change beside it, then the value and where it came from */
  .values.decided .value-row { grid-template-columns: 1fr auto; }
  .values.decided .value-name { grid-column: 1; grid-row: 1; }
  .values.decided .value-change { grid-column: 2; grid-row: 1; }
  .values.decided .value-val { grid-column: 1 / -1; grid-row: 2; }
  .values.decided .value-src { grid-column: 1 / -1; grid-row: 3; }
  .values.decided .value-row.is-pending { grid-template-columns: 1fr; }
  .values.decided .value-row.is-pending .value-pending { grid-column: 1; }
  .value-line { flex-wrap: wrap; }
  #fallback-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  #fallback-dialog .dialog-actions .btn { flex: 1; }
}

/* G4: a disabled Save's reason shows while its card is being worked in; it stays its accessible description */
.ask-card:not(:focus-within) .save-why, .quoted-box:not(:focus-within) .save-why { display: none; }
.ask-card:has(.object-in-chat) .save-why { display: none; } /* its field says it already, in the same words */