/*
 * Default styling for the annotations engine. Every rule uses CSS custom properties with sane fallbacks, so a host that already defines --ink, --accent, --amber, --rule, --surface, etc. (see app/assets/stylesheets/application.css in the catalog host) gets a consistent look for free; a host with no theme still gets a legible, accessible default. The fallbacks follow Strategy Room v2's light palette (navy ink, link blue, cool gray surfaces, Inter). Optional host tokens refine the look: --ink-strong (headings), --rule-strong (control borders), --button and --button-ink (primary buttons), --focus, --radius-md, --shadow-card. All selectors are scoped under the "anno-" prefix so they can't collide with host styles.
 */

.anno-body {
  background: var(--ground, #f5f7fa);
  color: var(--ink, #283853);
  font-family: var(--f-body, Inter, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.anno-body a { color: var(--accent, #0b5cad); }

.anno-site-header {
  border-bottom: 1px solid var(--rule, #dce1e9);
  background: var(--surface, #fff);
}

.anno-bar {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.anno-brand {
  font-family: var(--f-display, Inter, system-ui, sans-serif);
  font-weight: 800;
  text-decoration: none;
  color: var(--ink-strong, #102044);
}

.anno-top-nav { display: flex; gap: 4px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .9rem; }
.anno-top-nav a { padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--ink-2, #4a5770); }
.anno-top-nav a:hover { background: var(--surface-2, #eef1f5); color: var(--ink, #283853); }

.anno-whoami { margin-left: auto; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .85rem; color: var(--ink-2, #4a5770); }

.anno-main { max-width: 960px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; }

.anno-page-head h1 { font-family: var(--f-display, Inter, system-ui, sans-serif); color: var(--ink-strong, #102044); margin: 0 0 4px; }
.anno-page-head__sub { color: var(--ink-2, #4a5770); font-weight: 400; }

.anno-flash {
  font-family: var(--f-display, Inter, system-ui, sans-serif);
  font-size: .9rem;
  padding: 10px 14px;
  border-radius: var(--radius-md, 1rem);
  border: 1px solid var(--rule, #dce1e9);
}
.anno-flash--notice { background: var(--good-soft, #e6f2e8); color: var(--good, #246f32); border-color: transparent; }
.anno-flash--alert { background: var(--bad-soft, #fbebee); color: var(--bad, #a12d45); border-color: transparent; }

.anno-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #dce1e9);
  border-radius: var(--radius-md, 1rem);
  box-shadow: var(--shadow-card, 0 .7rem 2rem rgb(16 32 68 / 4%));
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}
.anno-panel__title { font-family: var(--f-display, Inter, system-ui, sans-serif); color: var(--ink-strong, #102044); font-size: 1rem; margin: 0; }
.anno-panel__list { display: grid; gap: 12px; }

.anno-card {
  border: 1px solid var(--rule, #dce1e9);
  border-radius: var(--radius-md, 1rem);
  padding: 14px;
  display: grid;
  gap: 8px;
  background: var(--surface-2, #eef1f5);
}
.anno-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .82rem; }
.anno-card__by { font-weight: 700; color: var(--ink-strong, #102044); }
.anno-card__at, .anno-card__meta { color: var(--ink-3, #5f6b83); }
.anno-card__body { white-space: normal; }
.anno-card__body p { margin: 0 0 .6em; }
.anno-card__attachments { margin: 0; padding-left: 18px; font-size: .88rem; }
.anno-card__stale { font-size: .78rem; margin: 0; color: var(--amber, #8a5a00); }
.anno-card__stale .anno-link { color: inherit; }
.anno-card__disposition { font-size: .88rem; color: var(--ink-2, #4a5770); margin: 0; }
.anno-card__actions { display: flex; gap: 10px; align-items: center; }

.anno-chip {
  display: inline-flex; align-items: center; font-family: var(--f-display, Inter, system-ui, sans-serif);
  font-size: .64rem; font-weight: 780; letter-spacing: .045em; line-height: 1.3; text-transform: uppercase;
  padding: 2px 8px; border: 1px solid var(--rule-strong, #c7ced9); border-radius: 999px; background: var(--muted-chip, #eef1f5); color: var(--ink-2, #4a5770);
}
.anno-chip--kind { border-color: color-mix(in srgb, var(--accent, #0b5cad) 35%, var(--rule, #dce1e9)); background: var(--accent-soft, #e5eef8); color: var(--accent, #0b5cad); }
.anno-status-addressed .anno-chip--status,
.anno-status-answered .anno-chip--status { background: var(--good-soft, #e6f2e8); color: var(--good, #246f32); }
.anno-status-declined .anno-chip--status { background: var(--bad-soft, #fbebee); color: var(--bad, #a12d45); }
.anno-status-open .anno-chip--status,
.anno-status-superseded .anno-chip--status { background: var(--amber-soft, #fbf1de); color: var(--amber, #8a5a00); }

.anno-empty, .anno-readonly-note { color: var(--ink-3, #5f6b83); font-style: italic; font-size: .92rem; }

.anno-form, .anno-filters { display: grid; gap: 12px; }
.anno-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }

.anno-fieldset { border: 1px solid var(--rule, #dce1e9); border-radius: var(--radius-md, 1rem); padding: 16px 18px; display: grid; gap: 10px; }
.anno-legend { font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .85rem; font-weight: 760; color: var(--ink-strong, #102044); padding: 0 4px; }

.anno-field { display: grid; gap: 4px; }
.anno-field label { font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .78rem; font-weight: 650; color: var(--ink-2, #4a5770); }
.anno-field--radio { display: flex; align-items: center; gap: 8px; }
.anno-field--radio label { font-size: .95rem; color: var(--ink, #283853); }

.anno-select, .anno-textinput, .anno-textarea, .anno-file {
  font: inherit; font-size: .9rem; padding: 8px 10px; border: 1px solid var(--rule-strong, #c7ced9); border-radius: var(--radius, .65rem);
  background: var(--surface, #fff); color: var(--ink-strong, #102044);
}
.anno-select, .anno-textinput { min-height: 42px; }
.anno-textarea { resize: vertical; font-family: var(--f-body, Inter, system-ui, sans-serif); }

.anno-select:focus-visible, .anno-textinput:focus-visible, .anno-textarea:focus-visible,
.anno-file:focus-visible, .anno-btn:focus-visible, .anno-link:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus, var(--accent, #2c6ee8)); outline-offset: 2px;
}

.anno-btn {
  font: inherit; font-family: var(--f-display, Inter, system-ui, sans-serif); font-weight: 720; font-size: .84rem; line-height: 1.2;
  min-height: 42px; padding: 8px 16px; border-radius: var(--radius, .65rem); border: 1px solid var(--button, #102044);
  background: var(--button, #102044); color: var(--button-ink, #fff); cursor: pointer;
}
.anno-btn--ghost { border-color: var(--rule-strong, #c7ced9); background: var(--surface, #fff); color: var(--ink-strong, #102044); }
.anno-btn:hover { background: color-mix(in srgb, var(--button, #102044) 84%, var(--accent, #0b5cad)); }
.anno-btn--ghost:hover { border-color: var(--neutral, #59677e); background: var(--surface-2, #eef1f5); }
.anno-inline-form { display: inline; }

.anno-link { color: var(--accent, #0b5cad); font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .85rem; }

.anno-table { border-collapse: collapse; width: 100%; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .85rem; }
.anno-table th { text-align: left; font-size: .66rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3, #5f6b83); padding: 10px; border-bottom: 1px solid var(--rule-strong, #c7ced9); }
.anno-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule, #dce1e9); vertical-align: top; }

/* Contributions (docs/contributions_contract.md): summaries and artifacts as documents. */
.anno-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.anno-doc {
  background: var(--surface, #fff); border: 1px solid var(--rule, #dce1e9); border-radius: var(--radius-md, 1rem);
  box-shadow: var(--shadow-card, 0 .7rem 2rem rgb(16 32 68 / 4%)); padding: 16px 18px; display: grid; gap: 6px;
}
.anno-doc__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .82rem; }
.anno-doc__title { font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.anno-doc__title a { text-decoration: none; color: var(--ink-strong, #102044); }
.anno-doc__title a:hover { text-decoration: underline; }
.anno-doc__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .82rem; }
.anno-doc__excerpt { margin: 0; color: var(--ink-2, #4a5770); font-size: .92rem; overflow-wrap: anywhere; }

.anno-doc-view { display: grid; gap: 14px; }
.anno-doc-view h1 { overflow-wrap: anywhere; }
.anno-intake-banner {
  margin: 0; padding: 10px 14px; border-radius: 0 var(--radius, .65rem) var(--radius, .65rem) 0; border-left: 4px solid var(--amber, #8a5a00);
  background: var(--amber-soft, #fbf1de); color: var(--ink, #283853); font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .9rem;
}
.anno-provenance {
  margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: .85rem;
}
.anno-provenance dt { color: var(--ink-3, #5f6b83); }
.anno-provenance dd { margin: 0; overflow-wrap: anywhere; }

.anno-markdown {
  background: var(--surface, #fff); border: 1px solid var(--rule, #dce1e9); border-radius: var(--radius-md, 1rem);
  padding: 18px 22px; overflow-wrap: anywhere; min-width: 0;
}
.anno-markdown > :first-child { margin-top: 0; }
.anno-markdown > :last-child { margin-bottom: 0; }
.anno-markdown h1, .anno-markdown h2, .anno-markdown h3, .anno-markdown h4 { font-family: var(--f-display, Inter, system-ui, sans-serif); line-height: 1.25; }
.anno-markdown pre { background: var(--surface-2, #eef1f5); padding: 10px 12px; border-radius: var(--radius, .65rem); overflow-x: auto; }
.anno-markdown code { font-family: var(--f-mono, "JetBrains Mono", monospace); font-size: .88em; }
.anno-markdown blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--rule, #dce1e9); color: var(--ink-2, #4a5770); }
.anno-markdown table { border-collapse: collapse; display: block; overflow-x: auto; }
.anno-markdown th, .anno-markdown td { border: 1px solid var(--rule, #dce1e9); padding: 6px 10px; text-align: left; }

/* Comment bodies rendered from Markdown (Annotations.body_html): the same typography as .anno-markdown, without the document box. */
.anno-rich { overflow-wrap: anywhere; min-width: 0; }
.anno-rich > :first-child { margin-top: 0; }
.anno-rich > :last-child { margin-bottom: 0; }
.anno-rich ul, .anno-rich ol { margin: 0 0 .6em; padding-left: 1.4em; }
.anno-rich h1, .anno-rich h2, .anno-rich h3, .anno-rich h4, .anno-rich h5, .anno-rich h6 { font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: 1em; line-height: 1.3; margin: .8em 0 .4em; }
.anno-rich pre { background: var(--surface-2, #eef1f5); padding: 10px 12px; border-radius: var(--radius, .65rem); overflow-x: auto; }
.anno-rich code { font-family: var(--f-mono, "JetBrains Mono", monospace); font-size: .88em; }
.anno-rich blockquote { margin: 0 0 .6em; padding-left: 14px; border-left: 3px solid var(--rule, #dce1e9); color: var(--ink-2, #4a5770); }
.anno-rich table { border-collapse: collapse; display: block; overflow-x: auto; margin: 0 0 .6em; }
.anno-rich th, .anno-rich td { border: 1px solid var(--rule, #dce1e9); padding: 4px 8px; text-align: left; }

@media (max-width: 600px) {
  .anno-markdown { padding: 14px; }
  .anno-provenance { grid-template-columns: 1fr; }
  .anno-provenance dt { margin-top: 6px; }
}

/* Proposed changes (docs/proposed_changes_contract.md): before/after per operation. */
.anno-proposal__op { margin: 0 0 1.25rem; }
.anno-proposal__title { font-size: 1rem; margin: 0 0 0.4rem; }
.anno-proposal__table th[scope="row"] { text-align: left; font-weight: normal; }
.anno-proposal__table td { vertical-align: top; overflow-wrap: anywhere; }
.anno-proposal__op--stale .anno-proposal__table { border-left: 3px solid var(--amber, #8a5a00); }
.anno-proposal__stale { color: var(--amber, #8a5a00); margin: 0 0 0.4rem; }
.anno-proposal__applied { background: var(--good-soft, #e6f2e8); color: var(--good, #246f32); padding: 0.5rem 0.75rem; border-radius: var(--radius, .65rem); }
.anno-proposal__declined { background: var(--bad-soft, #fbebee); color: var(--bad, #a12d45); padding: 0.5rem 0.75rem; border-radius: var(--radius, .65rem); }
.anno-chip--stale { background: var(--amber-soft, #fbf1de); color: var(--amber, #8a5a00); }
.anno-chip--applied { background: var(--good-soft, #e6f2e8); color: var(--good, #246f32); }

/* Setup page checklist (docs/ai_setup_contract.md): numbered steps, each with a copyable command and a "What you should see" line. */
.anno-setup-steps { list-style: none; counter-reset: anno-setup-step; padding: 0; margin: 12px 0 24px; display: grid; gap: 14px; }
.anno-setup-step { counter-increment: anno-setup-step; position: relative; padding: 14px 18px 14px 58px; border: 1px solid var(--rule, #dce1e9); border-radius: var(--radius-md, 1rem); background: var(--surface, #fff); }
.anno-setup-step::before { content: counter(anno-setup-step); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--f-display, Inter, system-ui, sans-serif); background: var(--accent-soft, #e3edf8); color: var(--accent, #0b5cad); }
.anno-setup-step h3 { margin: 2px 0 6px; font-family: var(--f-display, Inter, system-ui, sans-serif); font-size: 1rem; color: var(--ink-strong, #102044); }
.anno-setup-step p { margin: 6px 0; }
.anno-setup-command { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.anno-setup-command code { flex: 1 1 16rem; padding: 8px 12px; border-radius: var(--radius, .65rem); background: var(--surface-2, #eef1f5); border: 1px solid var(--rule, #dce1e9); font-family: var(--f-mono, ui-monospace, monospace); font-size: .85rem; overflow-wrap: anywhere; }
.anno-setup-see { padding: 8px 12px; border-radius: var(--radius, .65rem); background: var(--good-soft, #e6f2e8); color: var(--ink, #283853); font-size: .92rem; }
.anno-setup-edit label { display: block; font-weight: 600; }
.anno-setup-edit .anno-hint, .anno-setup-step .anno-hint { display: block; color: var(--ink-2, #4a5770); font-size: .9rem; }