/* Visual purpose: the requested Kiro neutrals separate canvas, surfaces and rows.
   Violet identifies links, primary actions and keyboard focus. One 4/8px radius
   system groups controls and panels; no gradients, shadows or decorative glass. */
:root {
  color-scheme: dark;
  --canvas: #19161d;
  --card: #211d25;
  --border: #352f3d;
  --control-border: #776c82;
  --text: #f2f1f4;
  --muted: #bcb5c3;
  --accent: #b07fff;
  --danger: #ffb5bd;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, summary, [id] { scroll-margin-block: 24px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
form[aria-busy="true"] button { cursor: wait; }
[hidden] { display: none !important; }
.site-shell { width: min(1280px, 100%); margin: 0 auto; padding-inline: clamp(16px, 3.5vw, 42px); }
.site-header { min-height: 88px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 12px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { display: grid; flex: none; width: 29px; height: 29px; place-items: center; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 18px; }
.brand-note { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.primary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.primary-nav a, .nav-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 4px; color: var(--muted); text-decoration: none; font-size: 12px; }
.primary-nav a:hover, .nav-button:hover { color: var(--text); text-decoration: underline; }
.primary-nav .nav-register, .primary-nav [aria-current="page"], [aria-current="page"] { color: var(--accent); }
[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.nav-form { margin: 0; }
.nav-button { border: 0; background: none; cursor: pointer; }
.page-main { min-height: 65vh; padding: 40px 0 64px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 24px 0 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.site-footer p { flex: 1 1 260px; margin: 0; }
.site-footer strong { color: var(--text); }
.skip-link { position: absolute; top: 8px; left: 12px; z-index: 5; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; transform: translateY(-180%); background: var(--card); color: var(--text); }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.2; }
h1 { margin-bottom: 12px; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.055em; }
h2 { font-size: 20px; letter-spacing: -.03em; }
h3 { font-size: 16px; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lede { max-width: 74ch; margin-bottom: 28px; color: var(--muted); }
.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.page-heading > div { min-width: 0; flex: 1 1 440px; }
.page-heading .eyebrow { margin-bottom: 12px; }
.page-heading p:last-child { margin-bottom: 0; }
.panel, .listing-list { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.panel + .panel, .stack > * + * { margin-top: 18px; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.panel-heading h2 { margin: 0; color: var(--text); font: inherit; font-weight: 700; }
.panel-body { padding: 20px; }
.listing-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 190px) minmax(0, 170px); align-items: center; gap: 12px 18px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.listing-row > * { min-width: 0; }
.listing-row:last-child { border-bottom: 0; }
.listing-name { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 700; }
a.listing-name:hover { color: var(--accent); text-decoration: underline; }
.listing-summary { margin: 0; color: var(--muted); font-size: 13px; }
.listing-meta { color: var(--muted); font-size: 12px; }
.listing-meta strong { color: var(--text); }
.badge, .type-badge, .status-badge { display: inline-block; max-width: 100%; width: fit-content; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .025em; text-transform: uppercase; }
.type-badge { color: var(--accent); }
/* Status labels remain readable without relying on a red/green color code. */
.status-badge { color: var(--text); }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty-state h2, .empty-state h3 { color: var(--text); }
.empty-state p { max-width: 55ch; margin: 0 auto 14px; font-size: 13px; }
.button { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--card); color: var(--text); text-align: center; text-decoration: none; cursor: pointer; font-size: 13px; }
.button:hover { border-color: var(--accent); text-decoration: underline; }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--canvas); font-weight: 700; }
.button.danger { color: var(--danger); }
.inline-form, .inline-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 0; }
.inline-form .field, .inline-filter .field { flex: 1 1 140px; }
.form-card { max-width: 560px; margin: 0 auto; }
.form-body, .review-form { display: grid; gap: 16px; }
.form-body { padding: 22px; }
.review-form h3 { margin-bottom: 0; }
.field { display: grid; min-width: 0; gap: 6px; }
.field label { color: var(--text); font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--canvas); color: var(--text); font-size: 16px; }
.field textarea { min-height: 100px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field small, .hint, .help-text { color: var(--muted); font-size: 12px; }
.form-error, .error-message { padding: 12px; border: 1px solid var(--danger); border-radius: 4px; color: var(--danger); font-size: 13px; }
.action-error { color: var(--danger); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.check-row { display: flex; align-items: center; min-height: 44px; gap: 12px; padding: 8px 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.check-row input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.toolbar .field { min-width: 0; flex: 1 1 150px; }
.toolbar .field.search-control { flex: 2 1 250px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 20px; align-items: start; }
.detail-grid > * { min-width: 0; }
.developer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-title { margin: 8px 0; }
.detail-summary { color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.metadata { display: grid; grid-template-columns: minmax(70px, 100px) minmax(0, 1fr); gap: 10px 14px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; }
.metadata dt { color: var(--muted); }
.metadata dd { min-width: 0; margin: 0; }
.vote-group { display: flex; flex-wrap: wrap; gap: 8px; }
.review { padding: 18px; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; }
.review h3 { margin: 0 0 6px; }
.review p { margin: 8px 0 0; white-space: pre-wrap; font-size: 13px; }
.review-byline { color: var(--muted); font-size: 12px; }
.section-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 15px; margin: 28px 0 12px; }
.section-title h2 { margin: 0; }
.table-wrap { min-width: 0; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 12px; }
th, td { min-width: 0; padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--muted); font-size: 11px; letter-spacing: .025em; }
tr:last-child td { border-bottom: 0; }
td a, .inline-link { color: var(--accent); text-decoration: underline; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; margin: 0 0 24px; }
.stat-card { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--border); }
.stat-card dt { color: var(--muted); font-size: 12px; }
.stat-card dd { margin: 8px 0 0; color: var(--text); font-size: 26px; font-weight: 700; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.admin-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); text-decoration: none; font-size: 12px; }
.admin-nav a:hover, .admin-nav [aria-current="page"] { color: var(--accent); border-color: var(--accent); text-decoration: underline; }
.data-list { margin: 0; padding: 0; list-style: none; }
.data-list li { padding: 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.data-list li:last-child { border-bottom: 0; }
.data-list a { color: var(--accent); }
.data-list .form-body { padding: 16px 0 0; }
.source-url { overflow-wrap: anywhere; }
.manage-row { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
/* Bulk selection adds a leading checkbox column; three children must not wrap. */
.bulk-manage-row { grid-template-columns: auto minmax(0, 1fr) minmax(240px, 340px); }
.notice { padding: 14px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 13px; }
.spaced-list { margin-top: 16px; }
.spaced-section { margin-top: 20px; }
/* Native disclosures keep long proof and permission workflows readable without
   hiding essential navigation. Plain surfaces and text labels convey state. */
summary { min-height: 44px; padding: 10px 4px; cursor: pointer; color: var(--text); }
summary:hover { color: var(--accent); text-decoration: underline; }
details, fieldset { min-width: 0; }
fieldset { margin: 0; padding: 12px 16px; border: 1px solid var(--control-border); border-radius: 4px; }
legend { max-width: 100%; padding-inline: 6px; font-size: 13px; }
.panel-heading h3 { margin: 0; color: var(--text); font: inherit; font-weight: 700; }
.detail-grid > .panel + .panel { margin-top: 0; }
.review .review-form p { margin: 0; }
.reading-column { max-width: 88ch; }
.reading-column .panel-body > :last-child { margin-bottom: 0; }
.challenge { display: block; max-width: 100%; padding: 14px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--canvas); color: var(--text); font-size: 16px; overflow-wrap: anywhere; user-select: all; }
code { font-family: inherit; overflow-wrap: anywhere; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.inline-link, td a, .eyebrow a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.check-row > span { min-width: 0; }
.form-error, .notice, .action-error { overflow-wrap: anywhere; }
[data-pending-status]:empty { margin: 0; padding: 0; border: 0; }
/* Editorial pages: a single reading column, plain surfaces and one accent. */
.content-list { border: 1px solid var(--border); border-radius: 8px; background: var(--card); }
.content-card { padding: 18px; border-bottom: 1px solid var(--border); }
.content-card:last-child { border-bottom: 0; }
.content-card .eyebrow { margin-bottom: 4px; }
.content-card h3 { margin: 0; }
.content-card .listing-name { font-size: 16px; }
.content-card .listing-summary { margin-top: 4px; }
.article { padding-bottom: 8px; }
.article .lede { margin-bottom: 8px; }
.article-body { margin-top: 28px; font-size: 15px; }
.article-body h2 { margin: 30px 0 10px; }
.article-body h3, .article-body h4, .article-body h5, .article-body h6 { margin: 24px 0 8px; }
.article-body p, .article-body li { max-width: 78ch; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li + li { margin-top: 6px; }
.article-body pre { max-width: 100%; padding: 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--canvas); }
.article-body code { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--canvas); font-size: 13px; }
.article-body pre code { padding: 0; border: 0; background: none; }
.article-body blockquote { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); color: var(--muted); }
.article-body hr { margin: 26px 0; border: 0; border-top: 1px solid var(--border); }
.article-body a { color: var(--accent); }
/* Home: one search-first block, real counts, and plain type links. */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 28px; align-items: start; padding: 8px 0 20px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.hero-copy { min-width: 0; }
.hero h1 { max-width: 22ch; }
.hero-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.hero-search input { flex: 1 1 260px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--canvas); color: var(--text); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stats { margin: 0; padding: 0; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.type-card { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); text-decoration: none; }
.type-card:hover { border-color: var(--accent); text-decoration: none; }
.type-card strong { font-size: 26px; }
.explain-grid .panel-body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } }
/* Focus never sits behind a fixed header or footer, including when zoomed or
   when a mobile keyboard opens; pages use normal document flow throughout. */
@media (forced-colors: active) {
  .button, .badge, .type-badge, .status-badge { border-color: ButtonText; }
  :focus-visible { outline-color: Highlight; }
}
@media (max-width: 1000px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .primary-nav { width: 100%; }
  .listing-row { grid-template-columns: minmax(0, 1fr) minmax(0, 170px); gap: 8px 12px; }
  .listing-row .listing-meta { grid-column: 1; grid-row: 2; }
  .listing-row > .type-badge, .listing-row > .status-badge { grid-column: 2; grid-row: 1 / span 2; }
  .manage-row { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  /* Each mobile cell repeats its column heading, preserving table context at zoom. */
  table, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  tbody tr:last-child { border-bottom: 0; }
  td { border-bottom: 0; padding: 8px 16px; }
  td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-weight: 700; }
}
@media (max-width: 560px) {
  .page-main { padding: 28px 0 44px; }
  .page-heading > div { flex-basis: 100%; }
  .listing-row { grid-template-columns: minmax(0, 1fr); }
  .listing-row .listing-meta, .listing-row > .type-badge, .listing-row > .status-badge { grid-column: auto; grid-row: auto; }
  .panel-body, .form-body { padding: 18px; }
  .panel-heading { padding-inline: 18px; }
  .metadata { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .metadata dd { margin-bottom: 12px; }
  .site-footer { flex-direction: column; }
  .site-footer p { flex: auto; }
}