/* fairpost web styles.
   Order: tokens → base → layout → editor → results → review panels →
   modes → responsive → posting improvement. Every information-bearing
   text size stays at 12px or larger. */

:root {
  color-scheme: light;
  color: #15211b;
  background: #f2f5f2;
  font-family:
    Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI",
    system-ui, sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  --font-mono: ui-monospace, "Cascadia Mono", "D2Coding", Consolas, monospace;

  /* Neutrals: a faint green cast ties the greys to the brand. */
  --ink: #15211b;
  --ink-2: #34423b;
  --muted: #58655e;
  --line: #e0e6e1;
  --line-2: #cdd6cf;
  --line-3: #aebcb3;
  --bg: #f2f5f2;
  --panel: #ffffff;
  --soft: #f6f8f6;
  --soft-2: #edf1ee;

  /* Brand green and the highlighter yellow from the favicon. */
  --green: #176b4d;
  --green-dark: #0f5039;
  --green-ink: #0d4532;
  --green-soft: #eaf5ef;
  --green-soft-2: #d4eadc;
  --green-line: #a8cdb8;
  --yellow: #f2c94c;
  --mark: #fff0bd;
  --mark-line: #e2b42a;
  --mark-ink: #3d3214;

  /* Status hues: amber = not found yet, red = look again, blue = info. */
  --amber: #b26a00;
  --amber-ink: #6f4300;
  --amber-soft: #fff7e8;
  --amber-line: #f0d39f;
  --red: #a5443a;
  --red-ink: #8b2d24;
  --red-soft: #fcefed;
  --red-line: #eec5bf;
  --blue: #2f6a92;
  --blue-ink: #1f4f73;
  --blue-soft: #edf5fa;
  --blue-line: #c2d8e8;
  --violet: #6a4fb0;
  --violet-ink: #4c3787;
  --violet-soft: #f3f0fb;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(17, 38, 28, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 38, 28, 0.06), 0 3px 8px -4px rgba(17, 38, 28, 0.1);
  --shadow: 0 1px 2px rgba(17, 38, 28, 0.05), 0 12px 32px -14px rgba(17, 38, 28, 0.18);
  --shadow-lg: 0 22px 48px -18px rgba(17, 38, 28, 0.38);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --gutter: clamp(16px, 2.6vw, 40px);
  --pane-pad: 20px;

  /* Icons are masks, so they take the text colour of their element. */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.2'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6A2 2 0 0 0 4.3 20.6h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4M12 17v.2'/%3E%3C/svg%3E");
  --icon-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.3 1.1 2.2h5c0-.9.4-1.6 1.1-2.2A6 6 0 0 0 12 3Z'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7L20 8.6'/%3E%3Cpath d='M20 3.5v5.1h-5.1'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358655e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* overflow-x: hidden makes <body> a scroll container, which silently turns
   off position: sticky for the editor and the section nav. clip keeps the
   no-horizontal-scroll guarantee without creating that container. */
body {
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(1100px 420px at 0% -8%, rgba(23, 107, 77, 0.09), transparent 62%),
    radial-gradient(900px 380px at 100% -6%, rgba(242, 201, 76, 0.12), transparent 58%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--ink);
  line-height: 1.6;
  /* Korean wraps at word (eojeol) boundaries; long tokens still break. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

a {
  color: var(--blue-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--green-ink);
}

code,
kbd {
  font-family: var(--font-mono);
}

::selection {
  background: rgba(242, 201, 76, 0.5);
}

/* Solid focus ring: #1d5c80 is about 7:1 against the white and pale panels. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
pre:focus-visible,
a:focus-visible,
#comparison-title:focus-visible,
#improvement-title:focus-visible,
#assisted-review-heading:focus-visible,
.question-item:focus-visible,
#results-title:focus-visible {
  outline: 3px solid #1d5c80;
  outline-offset: 2px;
}

/* The editor pane clips overflow, so draw the ring inside the textarea. */
#posting-input:focus-visible {
  outline-offset: -3px;
}

/* Summaries sit flush against the clipping edge of their pane or card, where
   an outside ring loses its left, right or bottom side; draw it inside. */
summary:focus-visible {
  outline-offset: -3px;
}

/* Keyboard focus scrolling keeps a focused control clear of the fixed toast
   instead of leaving it underneath for the seconds the toast is shown. */
html {
  scroll-padding-bottom: 112px;
}

[aria-invalid="true"] {
  border-color: #b3443a !important;
  box-shadow: 0 0 0 1px #b3443a;
}

#posting-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px #b3443a;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 50;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  color: #ffffff;
}

/* Disclosure widgets share one chevron instead of the browser triangle. */
details > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--icon-chevron) center / 16px 16px no-repeat;
  mask: var(--icon-chevron) center / 16px 16px no-repeat;
  transition: transform 180ms var(--ease), opacity 120ms ease;
}

details > summary:hover::after {
  opacity: 0.9;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

/* Leaves room for the chevron on every summary inside the app. */
.workspace details > summary {
  padding-right: 42px;
}

/* ---------- Header ---------- */

.app-header {
  min-height: 68px;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(150deg, #22895f 0%, #176b4d 48%, #0d4532 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 14px -6px rgba(13, 69, 50, 0.7);
}

.brand-mark svg {
  display: block;
  width: 24px;
  height: 24px;
}

.brand h1,
.brand p,
.pane-header h2,
.results-toolbar h2,
.block-heading h3,
.block-heading p,
.eyebrow,
.empty-state p {
  margin: 0;
}

.brand h1 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.mode-switch {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft-2);
  box-shadow: inset 0 1px 2px rgba(17, 38, 28, 0.05);
}

.mode-option {
  padding: 6px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.mode-option:hover {
  color: var(--ink);
}

.mode-option[aria-pressed="true"] {
  background: var(--panel);
  color: var(--green-ink);
  box-shadow:
    0 1px 2px rgba(17, 38, 28, 0.12),
    0 4px 10px -6px rgba(17, 38, 28, 0.3);
}

.privacy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--green-soft-2);
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.privacy-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e8b65;
  box-shadow: 0 0 0 3px rgba(46, 139, 101, 0.2);
}

/* ---------- Layout ---------- */

.workspace {
  width: min(1560px, 100%);
  max-width: 100%;
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
  display: grid;
  grid-template-columns: minmax(340px, 0.86fr) minmax(520px, 1.14fr);
  /* Keep the editor at its own height so the check and "보강 실행" buttons
     stay near the top instead of moving below a long result pane. */
  align-items: start;
  gap: 20px;
}

.editor-pane,
.results-pane {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.editor-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-pane > * {
  min-width: 0;
}

.results-pane {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  /* clip (not hidden) keeps the rounded corners without breaking the
     sticky section nav inside the results. */
  overflow: hidden;
  overflow: clip;
}

.pane-header,
.results-toolbar {
  min-height: 74px;
  padding: 16px var(--pane-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin-bottom: 3px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pane-header h2,
.results-toolbar h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.results-note {
  margin: 6px 0 0;
  max-width: 460px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

#results-title {
  scroll-margin-top: 16px;
  border-radius: 4px;
}

/* ---------- Buttons ---------- */

.button,
.icon-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms var(--ease);
}

.button {
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}

.button:active:not(:disabled):not([aria-disabled="true"]),
.icon-button:active {
  transform: translateY(1px);
}

.icon-button {
  width: 40px;
  padding: 0;
  background: var(--soft-2);
  border-color: var(--line);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.icon-button:hover {
  border-color: var(--red-line);
  background: var(--red-soft);
  color: var(--red-ink);
}

.button-primary {
  min-width: 140px;
  padding: 10px 18px;
  background: var(--green);
  color: #ffffff;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px -10px rgba(13, 69, 50, 0.85);
}

.button-primary:hover {
  background: var(--green-dark);
}

#check-button::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform 150ms var(--ease);
}

#check-button:hover::after {
  transform: translateX(2px);
}

.button-secondary {
  background: var(--panel);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-ink);
}

.button-secondary:disabled {
  cursor: default;
  opacity: 0.45;
  box-shadow: none;
}

.button-quiet {
  background: var(--soft-2);
  border-color: var(--line);
  color: var(--ink-2);
  font-size: 13px;
}

.button-quiet:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--line-2);
  background: #e4eae6;
  color: var(--ink);
}

.button-quiet:disabled {
  opacity: 0.5;
}

.button-deploy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
}

.button-deploy:hover {
  background: #2d3a33;
  color: #ffffff;
}

.button:disabled {
  cursor: not-allowed;
}

/* ---------- Editor ---------- */

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.organization-options {
  border-bottom: 1px solid var(--line);
}

.organization-options > summary,
.review-scope > summary,
.role-review-disclosure > summary,
.integration-details > summary,
.easy-source-detail > summary,
.easy-guidance-detail > summary,
.question-context-detail > summary {
  min-height: 44px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.organization-options > summary {
  padding-left: var(--pane-pad);
}

.organization-options > summary small,
.role-review-disclosure > summary small {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.organization-options > summary:hover,
.role-review-disclosure > summary:hover {
  background: var(--soft);
}

.organization-profile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px 12px;
  padding: 4px 16px 16px var(--pane-pad);
  background: var(--panel);
}

.organization-profile > div {
  min-width: 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 8px;
}

.organization-profile > div strong,
.organization-profile > div span,
.organization-profile label {
  display: block;
}

.organization-profile > div strong {
  color: var(--ink);
  font-size: 12px;
}

.organization-profile > div span {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.organization-profile label {
  min-width: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

/* Shared select look: flat field with the chevron drawn in. */
.organization-profile select,
.assist-provider select,
.role-review-panel select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel) var(--icon-select) no-repeat right 10px center / 14px 14px;
}

.organization-profile select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 5px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 150ms ease;
}

.organization-profile select:hover:not(:disabled),
.assist-provider select:hover:not(:disabled),
.role-review-panel select:hover {
  border-color: var(--line-3);
}

.organization-profile select:disabled {
  background-color: var(--soft-2);
  color: #7f8a84;
  cursor: not-allowed;
}

.input-scope-hint {
  position: relative;
  margin: 0;
  padding: 10px var(--pane-pad) 10px 44px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.input-scope-hint::before {
  content: "";
  position: absolute;
  top: 12px;
  left: var(--pane-pad);
  width: 16px;
  height: 16px;
  background: var(--blue);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}

#posting-input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 440px;
  resize: none;
  padding: 20px var(--pane-pad);
  border: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
}

#posting-input::placeholder {
  color: #6b7670;
}

.field-error {
  margin: 6px 0 0;
  color: var(--red-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#posting-input-error {
  position: relative;
  margin: 0;
  padding: 10px var(--pane-pad) 10px 44px;
  border-top: 1px solid var(--red-line);
  background: var(--red-soft);
  font-size: 13px;
}

#posting-input-error::before {
  content: "";
  position: absolute;
  top: 12px;
  left: var(--pane-pad);
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}

.editor-footer {
  min-height: 68px;
  padding: 12px 16px 12px var(--pane-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
}

.editor-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}

#char-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-2);
}

.shortcut-hint {
  color: var(--muted);
  font-size: 12px;
}

.shortcut-hint kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* AI·현행 법령 보강 (expert mode only). */
.assisted-option {
  padding: 14px 16px 14px var(--pane-pad);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #f5faf7, var(--soft));
}

.assisted-option-row,
.assist-switch,
.assist-option-controls,
.assist-provider,
.assisted-review-heading-row {
  display: flex;
  align-items: center;
}

.assisted-option-row,
.assisted-review-heading-row {
  justify-content: space-between;
  gap: 14px;
}

.assist-switch {
  gap: 10px;
  cursor: pointer;
}

.assist-option-controls,
.assist-provider {
  gap: 8px;
}

.assist-provider span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.assist-provider select {
  max-width: 160px;
  min-height: 44px;
  padding: 4px 30px 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
}

.assist-provider select:disabled {
  color: var(--muted);
  background-color: var(--soft-2);
}

/* A real switch track for the role="switch" checkbox. */
.assist-switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-3);
  cursor: pointer;
  transition: background-color 180ms ease;
}

.assist-switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17, 38, 28, 0.3);
  transition: transform 180ms var(--ease);
}

.assist-switch input:checked {
  background: var(--green);
}

.assist-switch input:checked::before {
  transform: translateX(16px);
}

.assist-switch input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.assist-switch span,
.assist-switch strong,
.assist-switch small {
  display: block;
}

.assist-switch strong {
  color: var(--ink);
  font-size: 13px;
}

.assist-switch small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.assist-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.assist-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.assist-badge.active {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: #20553a;
}

.assist-badge.error {
  border-color: var(--red-line);
  background: var(--red-soft);
  color: var(--red-ink);
}

#assisted-review-status {
  margin: 8px 0 0 50px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.assist-consent {
  margin: 10px 0 0 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.assist-disclosure {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.assist-disclosure strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 13px;
}

.assist-disclosure-item {
  display: block;
  margin-top: 4px;
}

.assist-run-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.assist-run-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- Results: empty state ---------- */

.empty-state {
  flex: 1 1 auto;
  min-height: 540px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 40px 28px;
  color: var(--muted);
  text-align: center;
}

.empty-symbol {
  width: 136px;
  height: 108px;
}

.empty-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ill-shadow { fill: rgba(17, 38, 28, 0.07); }
.ill-back { fill: var(--green-soft-2); }
.ill-paper { fill: #ffffff; stroke: var(--line-2); stroke-width: 1.5; }
.ill-line { fill: var(--line); }
.ill-mark { fill: var(--mark); stroke: var(--mark-line); stroke-width: 1; }
.ill-lens { fill: rgba(255, 255, 255, 0.72); stroke: var(--green); stroke-width: 4; }
.ill-handle { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; }
.ill-dot { fill: var(--yellow); }

.empty-state p {
  max-width: 400px;
  font-size: 14px;
  line-height: 1.7;
}

.easy-steps {
  width: min(560px, 100%);
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  counter-reset: easy-step;
  text-align: left;
}

.easy-steps li {
  position: relative;
  padding: 14px 14px 14px 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  counter-increment: easy-step;
}

.easy-steps li::before {
  content: counter(easy-step);
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.easy-steps strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Results: framing notes ---------- */

.result-content {
  padding-bottom: 24px;
}

.review-scope {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.review-scope > summary {
  padding-left: var(--pane-pad);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.review-scope > summary:hover {
  color: var(--ink);
}

.disclaimer {
  margin: 0;
  padding: 14px var(--pane-pad) 16px;
  border-top: 1px solid var(--blue-line);
  background: var(--blue-soft);
  color: #3a5564;
  font-size: 13px;
  line-height: 1.7;
}

.review-boundary {
  position: relative;
  margin: 16px var(--pane-pad) 0;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--green-soft-2);
  border-radius: var(--radius);
  background: var(--green-soft);
  color: #36493f;
  font-size: 13px;
  line-height: 1.65;
}

.review-boundary::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 17px;
  height: 17px;
  background: var(--green);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}

.review-boundary strong {
  display: block;
  color: var(--green-ink);
  font-size: 14px;
}

.placeholder-notice {
  position: relative;
  margin: 12px var(--pane-pad) 0;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.placeholder-notice::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 17px;
  height: 17px;
  background: var(--amber);
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}

/* Section nav for the easy result; pinned while the reader scrolls. */
.review-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-top: 16px;
  padding: 10px var(--pane-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .review-nav {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
  }
}

.review-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.review-nav a:hover {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-ink);
}

.review-nav a:focus-visible {
  border-color: var(--green);
}

#easy-findings-heading,
#easy-missing-heading,
#easy-found-heading,
#questions-heading,
#human-review-heading {
  scroll-margin-top: 80px;
}

/* ---------- Results: expert counts and order ---------- */

.summary-strip {
  margin: 16px var(--pane-pad) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.summary-strip div {
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.summary-strip div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--tile-accent, var(--line-3));
}

.summary-strip div:nth-child(1) { --tile-accent: var(--mark-line); }
.summary-strip div:nth-child(2) { --tile-accent: var(--amber); }
.summary-strip div:nth-child(3) { --tile-accent: var(--blue); }

.summary-strip strong {
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.summary-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.next-step-strip {
  margin: 12px var(--pane-pad) 0;
  padding: 12px 16px;
  display: grid;
  gap: 6px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--soft);
}

.next-step-strip span {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.review-progress-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px var(--pane-pad) 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.review-progress-strip strong {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.review-progress-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

/* ---------- Results: blocks and cards ---------- */

.result-block {
  margin-top: 20px;
  padding: 24px var(--pane-pad) 4px;
  border-top: 1px solid var(--line);
}

.block-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.block-index {
  flex: 0 0 auto;
  min-width: 36px;
  height: 26px;
  margin-top: 1px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: var(--green-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.block-heading h3 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.block-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.item-list {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.finding-item,
.question-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.finding-item:hover,
.question-item:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}

/* Priority shows as an edge colour where :has() is supported. */
.finding-item:has(.severity-high) { box-shadow: inset 4px 0 0 var(--red), var(--shadow-xs); }
.finding-item:has(.severity-medium) { box-shadow: inset 4px 0 0 var(--mark-line), var(--shadow-xs); }
.finding-item:has(.severity-low) { box-shadow: inset 4px 0 0 var(--blue), var(--shadow-xs); }

.item-main {
  padding: 16px 18px;
}

.item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.id-tag,
.dimension-tag,
.scope-tag,
.link-tag,
.severity-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--soft-2);
  color: #4a5751;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.id-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.scope-tag {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.link-tag {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.severity-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.severity-high {
  background: var(--red-soft);
  color: var(--red-ink);
}

.severity-medium {
  background: #fff3cf;
  color: #6e5200;
}

.severity-low {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.organization-context {
  margin: 10px 12px 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--green-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel);
  color: #44584d;
  font-size: 13px;
  line-height: 1.65;
}

.organization-context strong {
  color: #2d4e3b;
}

.applicability-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 9px;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: #24533b;
  font-size: 12px;
  font-weight: 800;
}

.organization-reference {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.item-title {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.match-row,
.alternative,
.follow-up,
.reference-row {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

.alternative strong {
  color: var(--green-ink);
}

.matched-text {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--mark);
  box-shadow: inset 0 -2px 0 var(--mark-line);
  color: var(--mark-ink);
  font-family: inherit;
}

/* Folded strips at the foot of a card. */
.basis-detail,
.question-detail,
.review-answer-detail {
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.basis-detail summary,
.question-detail summary,
.review-answer-detail summary {
  min-height: 44px;
  padding: 12px 18px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.review-answer-detail summary {
  color: var(--green-ink);
}

.basis-detail summary:hover,
.question-detail summary:hover,
.review-answer-detail summary:hover {
  background: var(--soft-2);
}

.question-detail-content,
.basis-content {
  padding: 0 18px 16px;
}

.question-detail-content .follow-up {
  margin-top: 0;
}

.basis-content strong,
.basis-content span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
}

.basis-content span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.basis-content pre {
  max-height: 200px;
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
}

.review-answer-content {
  display: grid;
  gap: 8px;
  padding: 0 18px 16px;
}

.review-answer-content label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.review-answer-content textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.review-answer-content small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.question-context-detail {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.question-context-detail > summary {
  padding: 9px 12px;
  color: var(--ink-2);
  font-size: 13px;
}

.question-context-detail > p {
  margin-right: 12px;
  margin-left: 12px;
  padding-bottom: 4px;
}

/* Expert: missing guidance cards. */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.slot-item {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-soft);
}

.slot-item > strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.slot-item > span {
  display: block;
  margin-top: 3px;
  color: var(--amber-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.slot-ai-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.slot-question-detail {
  margin-top: 10px;
  border-top: 1px solid var(--amber-line);
}

.slot-question-detail > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  color: #675728;
  font-size: 13px;
  font-weight: 800;
}

.slot-question-content {
  padding-top: 4px;
}

.none-item {
  padding: 18px;
  border: 1px dashed var(--line-3);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* Expert: question list heading and folded common checklist. */
.question-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 4px;
}

.question-group-heading strong {
  font-size: 14px;
}

.question-group-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.common-checklist {
  margin-top: 4px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius);
  background: var(--blue-soft);
}

.common-checklist > summary {
  padding: 13px 16px;
  color: #2c4a5b;
}

.common-checklist > summary span,
.common-checklist > summary small {
  display: block;
}

.common-checklist > summary span {
  font-size: 14px;
  font-weight: 800;
}

.common-checklist > summary small {
  margin-top: 3px;
  color: #56707e;
  font-size: 12px;
  line-height: 1.5;
}

.common-question-list {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

/* Easy: four fairness perspectives as colour-keyed accordions. */
.shared-questions {
  padding-bottom: 12px;
}

.fairness-group {
  --perspective: var(--green);
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.fairness-group[data-perspective="procedure"] { --perspective: var(--blue); }
.fairness-group[data-perspective="interpersonal"] { --perspective: var(--violet); }
.fairness-group[data-perspective="information"] { --perspective: var(--amber); }

.fairness-group::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--perspective);
}

.fairness-group > summary {
  min-height: 44px;
  padding: 14px 16px 14px 20px;
  line-height: 1.5;
}

.fairness-group > summary:hover {
  background: var(--soft);
}

.fairness-group > summary strong {
  font-size: 15px;
}

.fairness-group > summary span {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: var(--radius-pill);
  background: var(--soft-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  vertical-align: 1px;
}

.fairness-group > summary small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.fairness-question-list {
  display: grid;
  gap: 10px;
  padding: 2px 12px 14px 20px;
}

.question-item {
  scroll-margin-top: 80px;
}

/* ---------- Easy result ---------- */

.easy-result {
  padding: 20px var(--pane-pad) 4px;
}

.easy-headline {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--green-soft-2);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--green-soft) 0%, #f7fbf8 70%, #fffaf0 100%);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.65;
}

.easy-headline strong {
  color: var(--green-ink);
  font-weight: 800;
}

.easy-section {
  margin-bottom: 28px;
}

.easy-section h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.easy-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.easy-posting {
  max-height: 340px;
  margin: 0 0 14px;
  padding: 16px 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.easy-mark {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--mark);
  box-shadow: inset 0 -2px 0 var(--mark-line);
  color: var(--mark-ink);
}

.easy-mark sup {
  margin-left: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.easy-findings,
.easy-missing {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.easy-finding {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.easy-finding-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.easy-number {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.easy-quote {
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: var(--mark);
  box-shadow: inset 0 -2px 0 var(--mark-line);
  color: var(--mark-ink);
  font-size: 15px;
  font-weight: 800;
}

.easy-finding-head .severity-tag {
  margin-left: auto;
}

.easy-why,
.easy-fix {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

.easy-why strong {
  color: var(--ink);
}

.easy-fix {
  position: relative;
  margin-top: 12px;
  padding: 12px 14px 12px 42px;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: #2e4a3c;
}

.easy-fix::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  background: var(--green);
  -webkit-mask: var(--icon-bulb) center / contain no-repeat;
  mask: var(--icon-bulb) center / contain no-repeat;
}

.easy-fix strong {
  color: var(--green-ink);
}

.easy-fix ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.easy-fix li + li {
  margin-top: 2px;
}

.easy-finding-foot {
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px dashed var(--line-2);
  color: var(--muted);
  font-size: 12px;
}

.easy-missing li {
  padding: 12px 14px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  background: #fffbf3;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.easy-missing > li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 2px;
}

.easy-missing li small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

.easy-source-detail,
.easy-guidance-detail {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.easy-source-detail > summary:hover,
.easy-guidance-detail > summary:hover {
  background: var(--soft);
  border-radius: var(--radius);
}

.easy-source-detail .easy-posting {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

.easy-guidance-detail .easy-missing {
  padding: 4px 12px 12px;
}

.easy-rerun {
  position: relative;
  margin: 4px 0 20px;
  padding: 12px 14px 12px 42px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--soft);
}

.easy-rerun::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 17px;
  height: 17px;
  background: var(--green);
  -webkit-mask: var(--icon-refresh) center / contain no-repeat;
  mask: var(--icon-refresh) center / contain no-repeat;
}

/* ---------- Review records, comparison and roles ---------- */

.human-review-panel {
  margin: 20px var(--pane-pad) 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--soft) 0%, var(--panel) 120px);
  counter-reset: record-field;
}

.human-review-panel h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.human-review-panel label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  counter-increment: record-field;
}

.human-review-panel label::before {
  content: counter(record-field);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--green);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.human-review-panel textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

.human-review-panel textarea:hover:not(:disabled),
.review-answer-content textarea:hover:not(:disabled),
.role-review-panel textarea:hover,
.role-review-panel input:hover {
  border-color: var(--line-3);
}

.human-review-panel textarea:focus,
.review-answer-content textarea:focus,
.role-review-panel textarea:focus,
.role-review-panel input:focus {
  border-color: var(--green);
}

.human-review-panel textarea:disabled,
.review-answer-content textarea:disabled {
  background: var(--soft-2);
  color: var(--muted);
  cursor: not-allowed;
}

.record-storage,
.record-status,
.previous-record p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.record-storage {
  margin: 12px 0 0;
}

.record-status {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--blue-soft);
  color: #3a5564;
}

.previous-review-records {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.previous-review-records > summary {
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.previous-review-records > summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.previous-record {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
}

.previous-record h4 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
}

.previous-record p {
  margin: 6px 0 2px;
}

.previous-record pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.comparison-panel {
  margin: 20px var(--pane-pad) 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.comparison-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.comparison-heading h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.comparison-heading button {
  min-height: 44px;
  white-space: normal;
  text-align: left;
}

.comparison-status {
  margin: 10px 0 12px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}

.comparison-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.comparison-groups {
  display: grid;
  gap: 8px;
}

.comparison-group {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-3);
  border-radius: 10px;
  background: var(--panel);
}

.comparison-removed { border-left-color: var(--line-3); }
.comparison-remaining { border-left-color: var(--amber); }
.comparison-added { border-left-color: var(--blue); }

.comparison-group summary {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.comparison-group summary strong {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--soft-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.comparison-group ul {
  margin: 0;
  padding: 0 16px 12px 32px;
}

.comparison-group li {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.comparison-group q {
  display: block;
  color: var(--muted);
}

.comparison-empty {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--muted);
  font-size: 13px;
}

.role-review-disclosure {
  margin: 20px var(--pane-pad) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.role-review-panel {
  padding: 4px 18px 18px;
  background: var(--panel);
}

.role-review-heading-row,
.role-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-review-heading-row {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.role-review-heading-row h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.role-review-notice {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.role-review-boundary {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #8aa1bd;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #eef3f9;
  color: #2f3f52;
  font-size: 12px;
  line-height: 1.55;
}

.role-review-help {
  margin: 6px 0 0;
  color: #8b4d25;
  font-size: 12px;
  line-height: 1.55;
}

.role-review-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.role-review-controls label,
.role-review-note-label {
  display: grid;
  gap: 5px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.role-review-controls select,
.role-review-panel select,
.role-review-panel input,
.role-review-panel textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.role-review-panel input,
.role-review-panel textarea {
  background: var(--panel);
}

.role-review-controls select,
.role-review-panel select,
.role-review-panel input {
  height: 44px;
  padding: 0 12px;
}

.role-review-controls select,
.role-review-panel select {
  padding-right: 32px;
}

.role-review-panel textarea {
  min-height: 80px;
  margin-top: 5px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.6;
}

.role-review-note-label {
  margin-top: 12px;
}

.role-review-note-label small {
  font-size: 12px;
  font-weight: 400;
}

.role-review-actions {
  flex-wrap: wrap;
  margin-top: 12px;
}

.role-review-actions strong {
  color: #3f5875;
  font-size: 12px;
}

.role-review-missing {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.role-review-events {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 0 0 22px;
}

.role-review-events li {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: #3f4d5d;
  font-size: 12px;
  line-height: 1.55;
}

.role-review-events li strong {
  color: #243b56;
}

.role-review-events li small {
  display: block;
  margin-top: 2px;
  color: #56606d;
  font-size: 12px;
}

.role-review-system-event {
  color: #56606d;
  font-style: italic;
}

.assisted-review-panel {
  margin: 20px var(--pane-pad) 0;
  padding: 18px;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--panel) 140px);
}

.assisted-review-heading-row h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.assisted-review-notice {
  margin: 10px 0 0;
  color: #4b6155;
  font-size: 12px;
  line-height: 1.6;
}

.assisted-review-output {
  max-height: 520px;
  margin: 12px 0 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Footer and toast ---------- */

.app-footer {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: 8px var(--gutter) 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: var(--muted);
  font-size: 12px;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  line-height: 1.6;
}

.app-footer code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
}

.integration-details {
  max-width: 480px;
}

.integration-details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 30px 2px 0;
  color: var(--ink-2);
  font-size: 12px;
}

.integration-details > summary::after {
  right: 6px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
}

.integration-details p {
  margin: 8px 0 10px;
  line-height: 1.65;
}

/* left/right pin the toast to the viewport edges, so a fixed box never
   shrinks to the half-width left over after left: 50%; max-content lets it
   be as wide as its message up to the max-width, centred by the auto margins. */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 24px;
  z-index: 40;
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 12px 18px 12px 38px;
  border-radius: var(--radius);
  background: #15211b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease);
}

.toast::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--yellow);
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .icon-button,
  .toast,
  .mode-option,
  .assist-switch input,
  .assist-switch input::before,
  details > summary::after,
  #check-button::after {
    transition: none;
  }
}

/* ---------- 쉬운 모드 / 전문가 모드 ---------- */
/* 같은 결과를 두 가지 밀도로 보여 준다. */
body[data-mode="easy"] .advanced-only,
body[data-mode="easy"] .summary-strip,
body[data-mode="easy"] .next-step-strip,
body[data-mode="expert"] .easy-only {
  display: none !important;
}

/* Easy sections are numbered in the text, so the block code would clash. */
body[data-mode="easy"] .block-index {
  display: none;
}

body[data-mode="easy"] .review-boundary {
  padding-top: 10px;
  padding-bottom: 10px;
}

body[data-mode="easy"] .review-boundary::before {
  top: 13px;
}

/* ---------- Responsive ---------- */

/* Wide and tall enough: the editor stays pinned beside a long result, so
   "검토 메모 만들기" and the selected posting text stay in view. */
@media (min-width: 1101px) and (min-height: 720px) {
  .editor-pane {
    position: sticky;
    top: 16px;
    height: calc(100vh - 124px);
    min-height: 560px;
    overflow-y: auto;
  }

  #posting-input {
    min-height: 220px;
  }

  .results-pane {
    min-height: calc(100vh - 124px);
  }
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .results-pane {
    min-height: 0;
  }

  #posting-input {
    min-height: 220px;
    height: 280px;
    resize: vertical;
    font-size: 16px;
  }

  .empty-state {
    min-height: 280px;
  }
}

@media (max-width: 820px) {
  .app-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .privacy {
    flex: 1 1 320px;
  }
}

@media (max-width: 600px) {
  :root {
    --pane-pad: 15px;
  }

  .app-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .header-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .privacy {
    flex: 0 1 auto;
  }

  .workspace {
    padding: 12px;
    gap: 12px;
  }

  .editor-pane,
  .results-pane {
    border-radius: 14px;
  }

  .pane-header,
  .results-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pane-header > div:first-child,
  .results-toolbar > div:first-child {
    min-width: 0;
  }

  .editor-actions {
    margin-left: auto;
  }

  .organization-profile {
    grid-template-columns: 1fr 1fr;
  }

  .organization-profile > div {
    grid-column: 1 / -1;
  }

  .organization-profile select {
    width: 100%;
  }

  .input-scope-hint,
  #posting-input-error {
    padding-left: 40px;
  }

  .editor-footer {
    gap: 12px;
  }

  .assisted-option-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .assist-option-controls {
    width: 100%;
    justify-content: space-between;
    padding-left: 50px;
  }

  #assisted-review-status,
  .assist-consent {
    margin-left: 0;
  }

  .button-primary {
    min-width: 0;
  }

  .empty-state {
    padding: 28px 16px;
  }

  .easy-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-strip div {
    padding: 12px 8px 12px 12px;
  }

  .summary-strip strong {
    font-size: 23px;
  }

  .summary-strip span {
    line-height: 1.35;
  }

  .review-progress-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .review-progress-strip span {
    text-align: left;
  }

  /* One swipeable row keeps the pinned nav short on phones. */
  .review-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .review-nav::-webkit-scrollbar {
    display: none;
  }

  .result-block {
    padding-top: 20px;
  }

  .item-main {
    padding: 14px;
  }

  .easy-finding {
    padding: 14px;
  }

  .slot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .question-group-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .question-group-heading span {
    text-align: left;
  }

  .fairness-group > summary span {
    display: block;
    width: fit-content;
    margin: 4px 0 0;
  }

  .fairness-question-list {
    padding: 2px 8px 12px 14px;
  }

  .human-review-panel,
  .comparison-panel {
    padding: 14px;
  }

  .role-review-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-review-heading-row,
  .role-review-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .role-review-panel {
    padding: 4px 14px 14px;
  }

  .app-footer {
    flex-direction: column;
    padding: 4px 15px 24px;
  }

  .integration-details {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .organization-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .shortcut-hint {
    display: none;
  }
}

/* A keyboard shortcut hint means nothing on touch-only devices. */
@media (hover: none) and (pointer: coarse) {
  .shortcut-hint {
    display: none;
  }
}

/* Touch targets: at least 44px for every control a reader presses. */
.mode-option,
.button,
.icon-button,
.role-review-panel select,
.role-review-panel input,
.organization-profile select {
  min-height: 44px;
}

.icon-button {
  width: 44px;
}

/* Posting improvement: book entry, example sentences, line rewrites, undo and change summary. */
.book-entry {
  grid-column: 1 / -1;
  position: relative;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(242, 201, 76, 0.2), transparent 70%),
    linear-gradient(135deg, #e8f4ed 0%, #f6fbf8 65%);
  color: #234738;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.book-entry h2 {
  margin: 0 0 8px;
  color: var(--green-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.book-entry p {
  max-width: 920px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.book-entry .book-entry-kicker {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.book-entry-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  counter-reset: book-step;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.book-entry-steps li {
  position: relative;
  min-width: 0;
  padding: 14px 14px 14px 52px;
  border: 1px solid var(--green-soft-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  color: #36493f;
  counter-increment: book-step;
}

.book-entry-steps li::before {
  content: counter(book-step);
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.book-entry-steps strong {
  display: block;
  margin: 0 0 2px;
  color: var(--green-ink);
}

.editor-actions { flex-wrap: wrap; justify-content: flex-end; }
.button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.placeholder-found-hint { color: #5b4a12; }

.easy-found { list-style: none; padding: 4px 14px 14px; margin: 0; }
.easy-found li + li { margin-top: 14px; }
.easy-found strong { font-size: 14px; }
.easy-found blockquote {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--green-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--soft);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.easy-slot-follow-up {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--blue-line);
  border-radius: var(--radius);
  background: var(--blue-soft);
  color: #234a5e;
  font-size: 14px;
  line-height: 1.7;
}

.easy-slot-follow-up::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 17px;
  height: 17px;
  background: var(--blue);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}

.easy-slot-follow-up-item { margin-bottom: 12px; }
.easy-slot-follow-up-item .easy-slot-follow-up { margin-bottom: 0; }

.template-detail,
.rewrite-detail {
  min-width: 0;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 400;
}

.template-detail > summary,
.rewrite-detail > summary {
  min-height: 44px;
  padding: 11px 12px;
  color: var(--green-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.template-detail > summary:hover,
.rewrite-detail > summary:hover {
  background: var(--green-soft);
  border-radius: 10px;
}

.template-detail[open] > summary:hover,
.rewrite-detail[open] > summary:hover {
  border-radius: 10px 10px 0 0;
}

.template-content,
.rewrite-content { min-width: 0; padding: 2px 12px 12px; display: grid; gap: 8px; }

/* Inside a question card the sentence block is one more full-width strip. */
.question-item > .template-detail { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--soft); }
.question-item > .template-detail > summary { padding: 12px 42px 12px 18px; }
.question-item > .template-detail > summary:hover { border-radius: 0; }
.question-item > .template-detail > .template-content { padding: 0 18px 14px; }

.template-notice,
.template-condition,
.template-sources,
.rewrite-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.template-condition { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--amber-soft); color: #5b4a12; }

.template-text {
  max-height: 260px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--green-soft-2);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  background: #f8fcf9;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.template-sources-title { margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.template-sources { padding-left: 18px; }
/* Source items sit inside the missing-guidance list; drop its card styling. */
.easy-missing .template-sources li { padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 400; }
.template-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.template-actions .button { max-width: 100%; white-space: normal; text-align: left; }
/* Keyboard focus scrolls these into view; leave room for the focus ring. */
.template-detail > summary,
.rewrite-detail > summary,
.template-actions .button,
#posting-undo { scroll-margin: 16px 0 32px; }
.template-detail > summary:focus-visible,
.rewrite-detail > summary:focus-visible { outline-offset: -3px; }
.rewrite-content label { font-size: 13px; font-weight: 700; }
.rewrite-content textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}
.rewrite-content textarea:focus { border-color: var(--green); }
.rewrite-content textarea:disabled { background: var(--soft-2); color: var(--muted); }
.rewrite-guide { color: var(--ink-2); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.rewrite-guide ul { margin: 4px 0 0; padding-left: 18px; }

.improvement-panel {
  margin: 20px var(--pane-pad) 0;
  padding: 18px 20px;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--soft) 140px);
}
.improvement-panel .comparison-heading button { white-space: normal; text-align: left; }
/* Shared jump bar above the results: expert sections and the change summary. */
.result-jump { margin: 12px clamp(15px, 2vw, 24px) 0; }
.improvement-groups { display: grid; gap: 8px; }
.improvement-added { border-left-color: var(--green); }
.improvement-removed { border-left-color: var(--line-3); }
.improvement-lines { margin: 0; padding: 0 16px 12px 36px; }
.improvement-lines li { margin: 6px 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.improvement-remaining {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.improvement-remaining h4 { margin: 0 0 6px; font-size: 14px; }
.improvement-remaining ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.75; }
.improvement-remaining strong { font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .book-entry-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .book-entry { padding: 16px; }
  .book-entry h2 { font-size: 18px; }
  .template-actions .button { flex: 1 1 100%; }
  .improvement-panel { padding: 14px; }
}

/* Web UX follow-up: a page that did not start, the stale-result banner, undo
   of a discarded posting, the phone-first book entry and a readable toast. */

/* Notices above the workspace. They take no room unless they apply: the
   loading notice is collapsed for its first 3 s, and app.js hides it as soon
   as it starts, so a normal load never shows it. */
.load-notices {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.load-notice {
  margin: 16px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 14px;
  line-height: 1.7;
}
.load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  border-color: var(--red-line);
  background: var(--red-soft);
  color: var(--red-ink);
}
.load-error p { flex: 1 1 280px; margin: 0; }
.boot-notice {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  animation: boot-notice-reveal 0.01s linear 3s forwards;
}
@keyframes boot-notice-reveal {
  to {
    max-height: 240px;
    margin-top: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-width: 1px;
    opacity: 1;
  }
}

/* The status text is always in the page (an announcement needs a region that
   already exists); it only gets its box while the result is stale. */
.stale-banner:not(.is-stale) { display: block; }
.stale-banner.is-stale {
  margin: 12px var(--pane-pad);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.stale-banner-text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.rewrite-stale-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 13px;
  line-height: 1.6;
}
.rewrite-content textarea[readonly] { background: var(--soft-2); color: var(--muted); }
.button[aria-disabled="true"] { box-shadow: none; }

.posting-size-hint {
  border-top: 1px solid var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber-ink);
}
.posting-size-hint::before { background: var(--amber); }

/* The line of the posting a finding sits in, shown inside its card. */
.easy-context {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--mark-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.easy-context-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.easy-context-line { display: block; }
.previous-record-count { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Book entry: the two ways to begin sit above the folded introduction. */
.book-entry .book-entry-lead { margin-bottom: 12px; }
.book-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.book-entry-actions .button { flex: 0 1 auto; min-width: 170px; }
/* Wide screens show the full introduction below, so the short lead is redundant. */
@media (min-width: 601px) {
  .book-entry:has(.book-entry-more[open]) .book-entry-lead { display: none; }
}
.book-entry-more { margin: 0; }
.book-entry-more > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-ink);
  font-size: 14px;
  font-weight: 700;
}
.book-entry-more[open] > summary { margin-bottom: 6px; }
.book-entry.is-compact { padding-top: 12px; padding-bottom: 8px; }
.book-entry.is-compact .book-entry-lead,
.book-entry.is-compact .book-entry-actions { display: none; }

@media (max-width: 600px) {
  .book-entry-kicker { margin-bottom: 4px; }
  .book-entry h2 { margin-bottom: 4px; }
  .book-entry .book-entry-lead { font-size: 14px; line-height: 1.65; }
  .book-entry-actions .button { flex: 1 1 140px; min-width: 0; }
  .stale-banner.is-stale { padding: 12px; }
  .stale-banner.is-stale .button { flex: 1 1 100%; }
  .load-error .button { flex: 1 1 100%; }
}

/* Web UX 2026-10-18: marks in the editor, stepping through findings, questions
   linked from each card, the section being read, calmer work counts, dark
   mode, arrival motion and print. Text sizes here stay at 12px or larger. */

/* Editor: the marks sit in a layer behind a transparent field, so the text the
   reader types is the textarea's own text and the marks only colour behind it. */
.posting-field {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
}

.posting-field #posting-input {
  position: relative;
  z-index: 1;
  background: transparent;
}

.posting-highlights {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.posting-mark {
  position: relative;
  border-radius: 5px;
  background: var(--mark);
  box-shadow: inset 0 -2px 0 var(--mark-line);
  color: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

/* Card number above the start of each mark; the field's text stays on top. */
/* Card number above the start of each mark. It is yellow with a dark digit so
   the field's own text, drawn on top, stays readable where the two meet. */
.posting-mark::before {
  content: attr(data-n);
  position: absolute;
  top: -12px;
  left: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid rgba(61, 50, 20, 0.35);
  border-radius: 9px;
  background: var(--yellow);
  color: #2b2410;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

.posting-mark.is-active {
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.45);
}

.posting-mark.is-active::before {
  border-color: var(--green-dark);
  background: var(--green);
  color: #ffffff;
}

/* Footer: char count, the finding stepper and the check button share a row. */
.editor-footer {
  flex-wrap: wrap;
}

.finding-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.stepper-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 150ms ease;
}

.stepper-button:hover {
  background: var(--soft-2);
}

.stepper-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.finding-step-label {
  min-width: 78px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Results toolbar: save and copy side by side. */
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Empty state: one obvious way to see the tool working. */
.empty-sample {
  margin-top: 18px;
}

.empty-sample-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* A card and its mark point at each other. */
.easy-finding,
.finding-item,
.question-item {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.easy-finding.is-linked,
.finding-item.is-linked {
  border-color: var(--mark-line);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.32), var(--shadow-sm);
}

@media (prefers-reduced-motion: no-preference) {
  .is-flash {
    animation: fairpost-flash 1.4s var(--ease) 1;
  }
}

@keyframes fairpost-flash {
  0% { box-shadow: 0 0 0 0 rgba(242, 201, 76, 0); }
  18% { box-shadow: 0 0 0 7px rgba(242, 201, 76, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(242, 201, 76, 0); }
}

/* Questions linked to a finding, inside its card (easy) or as chips (expert). */
.linked-questions {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
}

.linked-questions > summary {
  min-height: 44px;
  padding: 11px 42px 11px 14px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.linked-questions ul {
  margin: 0;
  padding: 0 10px 10px;
  display: grid;
  gap: 6px;
  list-style: none;
}

.linked-question {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.linked-question::after {
  content: " →";
  color: var(--green);
  font-weight: 800;
}

.linked-question:hover {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.linked-row {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.linked-chip {
  min-height: 32px;
  padding: 4px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.linked-chip:hover {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.link-button {
  margin-left: 6px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--blue-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Section nav: the section being read. */
.review-nav a[aria-current="location"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
}

/* Calmer work counts: the tiles are a to-do list, not a scoreboard. */
.summary-strip div {
  padding-left: 16px;
  background: var(--soft);
  box-shadow: none;
}

.summary-strip div::before {
  display: none;
}

.summary-strip strong {
  font-size: 24px;
}

/* One neutral card edge for every finding; the priority stays a text label. */
.finding-item:has(.severity-high),
.finding-item:has(.severity-medium),
.finding-item:has(.severity-low) {
  box-shadow: var(--shadow-xs);
}

/* Easy cards: a little tighter so more of the list fits on screen. */
.easy-finding {
  padding: 14px 16px;
}

.easy-finding-head {
  margin-bottom: 8px;
}

.easy-finding-foot {
  margin-top: 12px;
  padding-top: 10px;
}

.easy-headline {
  font-size: 17px;
}

/* Arrival: results rise in once per review; skipped with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .easy-headline,
  .easy-findings > li,
  .item-list > article,
  .slot-grid > div,
  .easy-missing > li {
    animation: fairpost-rise 420ms var(--ease) both;
  }

  .easy-findings > li:nth-child(2),
  .item-list > article:nth-child(2),
  .slot-grid > div:nth-child(2) { animation-delay: 40ms; }
  .easy-findings > li:nth-child(3),
  .item-list > article:nth-child(3),
  .slot-grid > div:nth-child(3) { animation-delay: 80ms; }
  .easy-findings > li:nth-child(4),
  .item-list > article:nth-child(4),
  .slot-grid > div:nth-child(4) { animation-delay: 120ms; }
  .easy-findings > li:nth-child(5),
  .item-list > article:nth-child(5),
  .slot-grid > div:nth-child(5) { animation-delay: 160ms; }
  .easy-findings > li:nth-child(n + 6),
  .item-list > article:nth-child(n + 6),
  .slot-grid > div:nth-child(n + 6) { animation-delay: 200ms; }

  .posting-highlights:not([hidden]) .posting-mark {
    animation: fairpost-mark 520ms var(--ease) both;
  }
}

@keyframes fairpost-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes fairpost-mark {
  from { background-color: transparent; box-shadow: inset 0 0 0 var(--mark-line); }
  to { background-color: var(--mark); box-shadow: inset 0 -2px 0 var(--mark-line); }
}

/* Dark mode follows the system setting (no stored toggle). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    color: #e4ece7;
    background: #0e1613;

    --ink: #e8efe9;
    --ink-2: #c9d5ce;
    --muted: #9fb0a7;
    --line: #26332d;
    --line-2: #34443c;
    --line-3: #4a5d53;
    --bg: #0e1613;
    --panel: #141e1a;
    --soft: #18241f;
    --soft-2: #1d2a24;

    --green: #4cc690;
    --green-dark: #3aa877;
    --green-ink: #8fe0b8;
    --green-soft: #15291f;
    --green-soft-2: #1d3a2b;
    --green-line: #2f5f47;
    --mark: #4a3f12;
    --mark-line: #c9a42c;
    --mark-ink: #fbe7a4;

    --amber: #e3a04a;
    --amber-ink: #f3c98c;
    --amber-soft: #2b2112;
    --amber-line: #5d4520;
    --red: #e07b70;
    --red-ink: #f2aaa2;
    --red-soft: #2e1916;
    --red-line: #5c2d27;
    --blue: #7db6dc;
    --blue-ink: #a9d1ee;
    --blue-soft: #14232e;
    --blue-line: #284457;
    --violet: #b5a0ee;
    --violet-ink: #cfc2f7;
    --violet-soft: #221d33;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px -4px rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 22px 48px -18px rgba(0, 0, 0, 0.8);
  }

  body {
    background:
      radial-gradient(1100px 420px at 0% -8%, rgba(76, 198, 144, 0.08), transparent 62%),
      radial-gradient(900px 380px at 100% -6%, rgba(242, 201, 76, 0.06), transparent 58%),
      var(--bg);
  }

  button:focus-visible,
  select:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  pre:focus-visible,
  a:focus-visible,
  #comparison-title:focus-visible,
  #improvement-title:focus-visible,
  #assisted-review-heading:focus-visible,
  .question-item:focus-visible,
  #results-title:focus-visible {
    outline-color: #8cc8f0;
  }

  .app-header,
  .review-nav {
    background: rgba(20, 30, 26, 0.88);
  }

  @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
    .review-nav {
      background: rgba(20, 30, 26, 0.78);
    }
  }

  .book-entry-steps li {
    background: rgba(20, 30, 26, 0.82);
  }

  .ill-lens {
    fill: rgba(20, 30, 26, 0.72);
  }

  #posting-input::placeholder {
    color: #7f9086;
  }

  .assisted-option,
  .easy-headline,
  .book-entry {
    background: var(--soft);
  }

  .easy-missing li,
  .template-text {
    background: var(--soft);
  }

  .severity-medium {
    background: var(--amber-soft);
    color: var(--amber-ink);
  }

  .assist-badge.active,
  .disclaimer,
  .review-boundary,
  .id-tag,
  .dimension-tag,
  .scope-tag,
  .link-tag,
  .severity-tag,
  .organization-context,
  .organization-context strong,
  .applicability-tag,
  .slot-question-detail > summary,
  .common-checklist > summary,
  .common-checklist > summary small,
  .easy-fix,
  .record-status,
  .role-review-boundary,
  .role-review-actions strong,
  .role-review-events li,
  .role-review-events li strong,
  .role-review-events li small,
  .role-review-system-event,
  .assisted-review-notice,
  .book-entry,
  .book-entry-steps li,
  .placeholder-found-hint,
  .easy-slot-follow-up,
  .template-condition {
    color: var(--ink-2);
  }

  .severity-high {
    color: var(--red-ink);
  }

  .role-review-boundary {
    border-left-color: var(--blue-line);
    background: var(--blue-soft);
  }

  .role-review-help {
    color: var(--amber-ink);
  }

  .button-deploy,
  .button-deploy:hover {
    border-color: var(--green);
    background: var(--green);
    color: #0e1613;
  }

  .button-quiet:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--soft-2);
  }

  .toast {
    background: #e8efe9;
    color: #0e1613;
  }

  .easy-number {
    background: #e8efe9;
    color: #0e1613;
  }

  .posting-mark.is-active::before {
    color: #0e1613;
  }

  .review-nav a[aria-current="location"] {
    border-color: var(--green);
    background: var(--green);
    color: #0e1613;
  }

  .button-primary {
    color: #0e1613;
  }

  select,
  input,
  textarea {
    color: var(--ink);
  }
}

/* Print: the memo, without the editor, navigation or controls. */
@media print {
  body {
    background: #ffffff;
  }

  .app-header .header-actions,
  .skip-link,
  .load-notices,
  .book-entry,
  .editor-pane,
  .review-nav,
  .result-jump,
  .toolbar-actions,
  .stale-banner,
  .app-footer,
  .toast,
  .role-review-disclosure,
  .linked-questions,
  .rewrite-detail,
  .template-actions,
  .easy-finding-foot .button {
    display: none !important;
  }

  .workspace {
    display: block;
    padding: 0;
  }

  .results-pane {
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .easy-finding,
  .finding-item,
  .question-item {
    break-inside: avoid;
    box-shadow: none;
  }

  details > summary::after {
    display: none;
  }

  * {
    animation: none !important;
  }
}