/* Barndo design doc set — air-gap-friendly stylesheet
   No external fonts, no CDN, no JS frameworks.
   Optimized for: long-form reading, sidebar nav, embedded SVG. */

:root {
  --bg: #faf8f5;
  --bg-card: #ffffff;
  --bg-sidebar: #f1ede7;
  --bg-code: #f4f0ea;
  --ink: #1a1816;
  --ink-soft: #5a544c;
  --ink-faint: #8a847a;
  --accent: #b8542a;            /* warm rust — matches matte-dark exterior + warm wood interior intent */
  --accent-soft: #e8d4c4;
  --rule: #d8d2c8;
  --green: #2e7d4f;
  --yellow: #c8961c;
  --red: #b53b2c;
  --content-width: 760px;
  --sidebar-width: 280px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --bg-card: #221e1a;
    --bg-sidebar: #15120f;
    --bg-code: #2a2520;
    --ink: #f4ece2;
    --ink-soft: #c0b8ad;
    --ink-faint: #8a847a;
    --accent: #d97a4a;
    --accent-soft: #4a3328;
    --rule: #3a342d;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout: sidebar + main */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--rule);
  padding: 24px 20px;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  font-size: 14px;
}

.sidebar h1 {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  color: var(--accent);
}

.sidebar .subtitle {
  color: var(--ink-faint);
  font-size: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.ldd-control {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  margin: 4px 0 6px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.ldd-control img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  border-radius: 999px;
  background: #d97a4a;
  border: 1px solid var(--rule);
}

.ldd-control-text {
  min-width: 0;
  line-height: 1.1;
}

.ldd-control-text span {
  /* Hide the "LDD STEWARD" label — the badge sits inside the LDD section
     now, so the context is implied. Tooltip still explains on hover. */
  display: none;
}

.ldd-control-text strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.ldd-lock-button {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--accent);
  background: var(--bg-code);
  border: 1px solid var(--rule);
  border-radius: 5px;
  cursor: help;
}

.ldd-lock-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ldd-control-tooltip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(26, 24, 22, 0.18);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.ldd-control:hover .ldd-control-tooltip,
.ldd-control:focus-within .ldd-control-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.sidebar h2 {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 16px 0 6px 0;
  font-weight: 600;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.sidebar li {
  margin: 0;
  padding: 0;
}

.sidebar a {
  color: var(--ink-soft);
  text-decoration: none;
  display: block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.35;
  transition: background 0.1s ease;
}

.sidebar a:hover {
  background: var(--accent-soft);
  color: var(--ink);
}

.sidebar a.current {
  background: var(--accent);
  color: white;
}

.sidebar .ldd-num {
  display: inline-block;
  width: 22px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

/* LDD lifecycle status dots — color-coded indicators next to each LDD title
   in the sidebar, mirrored in the reading-key footer block. */
.ldd-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 0.08em;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.ldd-status-dot--locked   { background: #16a34a; }
.ldd-status-dot--pending  { background: var(--yellow); }
.ldd-status-dot--update   { background: #ea580c; }
.ldd-status-dot--revision { background: var(--red); }
.ldd-status-dot--draft    { background: #9ca3af; }

@media (prefers-color-scheme: dark) {
  .ldd-status-dot--locked   { background: #4ade80; }
  .ldd-status-dot--pending  { background: #fbbf24; }
  .ldd-status-dot--update   { background: #fb923c; }
  .ldd-status-dot--revision { background: #f87171; }
  .ldd-status-dot--draft    { background: #9ca3af; }
}

/* When a status dot precedes the LDD number, tighten the gap so the row
   layout reads as: [dot] [number] [title] rather than [dot][gap][number]. */
.sidebar a .ldd-status-dot + .ldd-num {
  width: 20px;
}

.ldd-category-title {
  margin: 11px 0 3px;
  padding: 0 8px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ldd-category-title:first-of-type {
  margin-top: 4px;
}

.sidebar ul.ldd-category-list {
  margin-bottom: 8px;
}

/* Reading-key footer block — sidebar legend mapping dot colors to lifecycle
   states. Sits below the LDD Bible section. */
.reading-key-sidebar {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.reading-key-sidebar h2 {
  /* Match other sidebar h2 styling already defined above. */
  margin-top: 0;
}
.reading-key-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reading-key-list li {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.reading-key-list .ldd-status-dot {
  margin-right: 10px;
}
.reading-key-label {
  flex: 1;
}

/* Audit scorecard header — sits at the top of each individual audit page
   (audit.html, codex-audit.html, gemini-audit.html, assessment.html).
   The audits hub at audits.html has its own page-scoped table styles. */
.audit-scorecard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  margin: 18px 0 28px;
}
.audit-scorecard__auditor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.audit-scorecard__auditor img {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  padding: 4px;
  background: #faf8f5;
  object-fit: contain;
}
.audit-scorecard__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.audit-scorecard__operator {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--rule);
  letter-spacing: 0.02em;
}
.audit-scorecard__meta {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  line-height: 1.5;
}
.audit-scorecard__meta strong {
  color: var(--ink);
  font-weight: 600;
}
.audit-scorecard__score {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.audit-scorecard__score .denom {
  font-size: 14px;
  color: var(--ink-faint);
  font-weight: 500;
  margin-left: 2px;
}
.audit-scorecard__pending {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.audit-scorecard__takeaway {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.audit-scorecard__takeaway strong {
  color: var(--ink);
}
@media (max-width: 720px) {
  .audit-scorecard {
    grid-template-columns: 1fr auto;
  }
  .audit-scorecard__meta {
    grid-column: 1 / -1;
  }
}

/* Section tabs — top-of-page nav between sibling pages (e.g., Audits
   list ↔ How to use). Replaces verbose doc-meta strips on multi-page
   sections. */
.section-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin: 4px 0 22px;
}
.section-tabs a {
  padding: 9px 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.01em;
}
.section-tabs a:hover {
  color: var(--ink);
}
.section-tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Library gallery — used on floor-plans.html, diagrams.html, lot-survey.html
   to surface thumbnail grids of incoming/-staged assets. Reuses .diagram-wrap
   so the existing click-to-enlarge lightbox (in nav.js initDiagramModal)
   works on gallery thumbnails automatically. */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 18px 0 30px;
}
.library-grid .diagram-wrap {
  margin: 0;
}
.library-grid .diagram-wrap img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-card);
}
.library-grid .diagram-caption {
  font-size: 12px;
  margin-top: 6px;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 2px;
  line-height: 1.4;
}

.asset-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 22px;
  align-items: stretch;
  margin: 14px 0 26px;
}

.asset-hero__visual {
  min-height: 260px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.asset-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.asset-flow {
  display: grid;
  gap: 10px;
}

.asset-flow__step {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

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

.asset-flow__step span {
  color: var(--ink-soft);
  font-size: 13px;
}

.asset-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 18px 0 30px;
}

.asset-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 15px 16px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.asset-card h3 {
  margin-top: 0;
}

.asset-card p {
  color: var(--ink-soft);
  font-size: 14px;
}

.asset-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.asset-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-code);
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: none;
}

.asset-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--ink);
}

.asset-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin: 22px 0;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.asset-pair__panel {
  min-width: 0;
}

.asset-pair__label {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 9px;
  color: var(--ink-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.asset-pair__panel img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.asset-pair__meta {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  margin-top: 2px;
  padding-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
}

.asset-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-code);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.asset-status--current { color: var(--green); }
.asset-status--watch { color: var(--yellow); }
.asset-status--stale { color: var(--red); }

.source-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 16px 0 24px;
}

.source-evidence-grid .diagram-wrap {
  margin: 0;
  padding: 12px;
}

.source-evidence-grid img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  background: var(--bg);
}

/* Inline info tooltip — small "i" circle for legends/hints. Uses native
   title attribute, no JS. */
.info-tip {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  font-size: 10px;
  text-align: center;
  line-height: 13px;
  color: var(--ink-faint);
  font-weight: 700;
  cursor: help;
  margin-left: 5px;
  vertical-align: 0.1em;
  font-style: normal;
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
}
.info-tip:hover {
  color: var(--ink);
  border-color: var(--ink);
}

main {
  padding: 48px 56px;
  max-width: calc(var(--content-width) + 112px);
  width: 100%;
  min-width: 0;
}

.sidebar {
  min-width: 0;
}

/* Typography */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1 { font-size: 30px; margin-top: 0; letter-spacing: -0.01em; }
h2 { font-size: 22px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
h3 { font-size: 17px; color: var(--accent); }
h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }

p { margin: 0.7em 0; }
ul, ol { padding-left: 1.4em; }
li { margin: 0.2em 0; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: var(--accent); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-code);
  padding: 2px 5px;
  border-radius: 3px;
}

pre {
  background: var(--bg-code);
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--rule);
}
pre code { background: none; padding: 0; }

blockquote {
  border-left: 3px solid var(--accent);
  margin: 1em 0;
  padding: 4px 16px;
  color: var(--ink-soft);
  background: var(--bg-card);
}

/* Header strip on each LDD page */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tag.locked   { background: var(--green); color: white; border-color: transparent; }
.tag.draft    { background: var(--yellow); color: white; border-color: transparent; }
.tag.review   { background: var(--accent); color: white; border-color: transparent; }

/* Status pills */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
}

.status.green  { background: var(--green); color: white; }
.status.yellow { background: var(--yellow); color: white; }
.status.red    { background: var(--red); color: white; }
.status.draft  { background: var(--ink-faint); color: white; }

.status::before {
  content: "●";
  font-size: 10px;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 14px;
}

th, td {
  border-bottom: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-card);
}

tr:hover td { background: var(--bg-card); }

/* Diagrams */
.diagram-wrap {
  margin: 24px 0;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: center;
}

.diagram-wrap svg,
.diagram-wrap img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: opacity 0.15s ease;
}

.diagram-wrap img:hover {
  opacity: 0.85;
}

/* Click-to-enlarge modal (lightbox) */
dialog#diagram-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  width: 96vw;
  overflow: visible;
}

dialog#diagram-modal::backdrop {
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(2px);
}

dialog#diagram-modal img {
  display: block;
  max-width: 96vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.diagram-modal-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.diagram-modal-close:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
}

.diagram-modal-caption {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

/* Collapsible meta-info under diagrams (audience-friendly default) */
.diagram-meta {
  margin-top: 18px;
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
}

.diagram-meta summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 13px;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.diagram-meta summary::-webkit-details-marker { display: none; }

.diagram-meta summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.diagram-meta[open] summary::before {
  content: "▾ ";
}

.diagram-meta summary:hover {
  color: var(--ink);
}

.diagram-meta-body {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 10px;
}

.diagram-meta-body p {
  margin: 8px 0;
}

.diagram-meta-body code {
  font-size: 12px;
}

/* FPO (For Position Only) overlay — drives off CSS so it persists across
   image swaps. Remove the .fpo class from .diagram-wrap once the render
   is promoted from AI placeholder to canonical asset. */
.diagram-wrap.fpo {
  position: relative;
}

.fpo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(220, 80, 40, 0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.fpo-prompt {
  background: var(--bg-card, #f7f7f5);
  border: 1px solid var(--rule, #e5e5e1);
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 360px;
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.fpo-copy-btn {
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 14px;
  border: 1px solid var(--rule, #cfcfcb);
  border-radius: 4px;
  background: var(--bg-card, #fff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  transition: all 0.15s ease;
}

.fpo-copy-btn:hover {
  background: var(--ink, #1a1a1a);
  color: #fff;
  border-color: var(--ink, #1a1a1a);
}

.fpo-copy-btn.copied {
  background: rgba(40, 140, 80, 0.95);
  color: #fff;
  border-color: rgba(40, 140, 80, 0.95);
}

/* =====================================================================
   LDD status system — restrained signal callouts + small badges.
   Theme-aware: works in both light and dark mode.
   Pattern matches the Shirokuro design language: most content reads as
   plain prose, signal callouts are reserved for IMPORTANT interjections.
   ===================================================================== */

/* Signal palette (light-mode defaults). Dark-mode overrides below. */
:root {
  --signal-locked-bg: rgba(46, 125, 79, 0.08);
  --signal-locked-border: var(--green, #2e7d4f);
  --signal-locked-text: #1f5a37;

  --signal-pending-bg: rgba(200, 150, 28, 0.10);
  --signal-pending-border: var(--yellow, #c8961c);
  --signal-pending-text: #7a5c10;

  --signal-open-bg: rgba(181, 59, 44, 0.08);
  --signal-open-border: var(--red, #b53b2c);
  --signal-open-text: #7a2417;

  --signal-new-bg: rgba(74, 120, 196, 0.10);
  --signal-new-border: #4a78c4;
  --signal-new-text: #234887;
}

@media (prefers-color-scheme: dark) {
  :root {
    --signal-locked-bg: rgba(76, 175, 110, 0.12);
    --signal-locked-text: #9bd9b1;

    --signal-pending-bg: rgba(217, 168, 64, 0.12);
    --signal-pending-text: #e5c374;

    --signal-open-bg: rgba(218, 100, 84, 0.12);
    --signal-open-text: #f0a39a;

    --signal-new-bg: rgba(120, 160, 220, 0.12);
    --signal-new-text: #a8c4ea;
  }
}

/* Signal callout box — used SPARINGLY for important interjections.
   Not a wrapper around everything. Reserved for: status banners at
   top of a page, "engineer review pending" notes inside a decision,
   "still unsure" caveats, key recommendations. */
.signal {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.55;
}

.signal p,
.signal ul,
.signal ol {
  margin: 6px 0;
}

.signal strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.signal-locked {
  background: var(--signal-locked-bg);
  border-color: var(--signal-locked-border);
}
.signal-locked strong:first-child { color: var(--signal-locked-text); }

.signal-pending {
  background: var(--signal-pending-bg);
  border-color: var(--signal-pending-border);
}
.signal-pending strong:first-child { color: var(--signal-pending-text); }

.signal-open {
  background: var(--signal-open-bg);
  border-color: var(--signal-open-border);
}
.signal-open strong:first-child { color: var(--signal-open-text); }

.signal-new {
  background: var(--signal-new-bg);
  border-color: var(--signal-new-border);
}
.signal-new strong:first-child { color: var(--signal-new-text); }

/* Reading-key chips — small inline pills used as a legend.
   Shirokuro-style. Theme-aware (color comes from text, not background). */
.signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  white-space: nowrap;
  line-height: 1.4;
}

.signal-chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.signal-chip--locked::before  { background: var(--signal-locked-border); }
.signal-chip--pending::before { background: var(--signal-pending-border); }
.signal-chip--open::before    { background: var(--signal-open-border); }
.signal-chip--new::before     { background: var(--signal-new-border); }

.reading-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 24px 0;
  align-items: center;
}

.reading-key-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 4px;
}

/* Decision sections — restored to plain prose. .decision-card is now
   just a semantic wrapper (no background / border). Visual emphasis
   comes from inline .badge tags and inline .signal callouts where
   warranted, NOT from wrapping every section in tinted boxes. */
.decision-card {
  margin: 18px 0 4px 0;
}

.decision-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.decision-num {
  display: inline-block;
  min-width: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-faint);
}

/* Small inline badges next to decision titles — for NEW / ENGINEER REVIEW.
   Outlined style; reads as a tag, not a button. Theme-aware. */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
  line-height: 1.5;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.badge--new {
  color: var(--signal-new-border);
  border-color: var(--signal-new-border);
}

.badge--review {
  color: var(--signal-open-border);
  border-color: var(--signal-open-border);
}

.badge--locked {
  color: var(--signal-locked-border);
  border-color: var(--signal-locked-border);
}

/* Migration-shaped LDD pilot UI. The visible chips are backed by stable
   data attributes and the LDD sidecar index, so the future wiki importer
   can read meaning rather than CSS color names. */
.ldd-pilot-dashboard {
  display: grid;
  gap: 12px;
  margin: 18px 0 26px;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-card);
}

.ldd-pilot-dashboard h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
}

.ldd-pilot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ldd-pilot-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
}

.ldd-pilot-card b {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.ldd-pilot-card span {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ldd-ui-pilot .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
}

.ldd-ui-pilot .status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.ldd-ui-pilot .status-chip--locked  { background: var(--signal-locked-bg); color: var(--signal-locked-text); border-color: rgba(46,125,79,0.24); }
.ldd-ui-pilot .status-chip--pending { background: var(--signal-pending-bg); color: var(--signal-pending-text); border-color: rgba(200,150,28,0.30); }
.ldd-ui-pilot .status-chip--open    { background: var(--signal-open-bg); color: var(--signal-open-text); border-color: rgba(181,59,44,0.28); }
.ldd-ui-pilot .status-chip--new     { background: var(--signal-new-bg); color: var(--signal-new-text); border-color: rgba(74,120,196,0.28); }
.ldd-ui-pilot .status-chip--update  { background: rgba(234, 88, 12, 0.10); color: #9a3412; border-color: rgba(234,88,12,0.28); }
.ldd-ui-pilot .status-chip--unsure  { background: rgba(147, 51, 234, 0.10); color: #6b21a8; border-color: rgba(147,51,234,0.28); }

@media (prefers-color-scheme: dark) {
  .ldd-ui-pilot .status-chip--update { background: rgba(249, 115, 22, 0.14); color: #fdba74; border-color: rgba(249,115,22,0.36); }
  .ldd-ui-pilot .status-chip--unsure { background: rgba(168, 85, 247, 0.14); color: #d8b4fe; border-color: rgba(168,85,247,0.36); }
}

.ldd-pilot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.ldd-ui-pilot .decision-card {
  border-left: 3px solid transparent;
  padding-left: 12px;
}

.ldd-ui-pilot .decision-card h3 .status-chip {
  margin-left: 0;
  position: relative;
  top: -1px;
}

.ldd-ui-pilot .decision-card[data-resolution-state="accepted"],
.ldd-ui-pilot .decision-card[data-resolution-state="accepted_intent"] {
  border-left-color: rgba(46, 125, 79, 0.28);
}

.ldd-ui-pilot .decision-card[data-resolution-state="pending_review"] {
  border-left-color: var(--signal-pending-border);
}

.ldd-ui-pilot .decision-card[data-resolution-state="new"] {
  border-left-color: var(--signal-new-border);
}

.ldd-history-table td:first-child {
  font-weight: 700;
  white-space: nowrap;
}

.ldd-history-table td:nth-child(2),
.ldd-history-table td:nth-child(3) {
  color: var(--ink-soft);
  white-space: nowrap;
}

.ldd-history-note {
  color: var(--ink-faint);
  font-size: 13px;
}

/* Material palette swatches — visual §31, theme-aware framing */
.palette-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.swatch {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}

.swatch-color {
  height: 72px;
  width: 100%;
  display: block;
}

.swatch-meta {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}

.swatch-name {
  font-weight: 600;
  color: var(--ink);
}

.swatch-role {
  color: var(--ink-faint);
  font-size: 11px;
  margin-top: 2px;
}

.diagram-caption {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

/* Section callouts */
.callout {
  margin: 20px 0;
  padding: 16px 20px;
  border-radius: 6px;
  border-left: 4px solid;
}
.callout.concern  { background: rgba(181,59,44,0.07); border-left-color: var(--red); }
.callout.cost     { background: rgba(200,150,28,0.07); border-left-color: var(--yellow); }
.callout.intent   { background: rgba(46,125,79,0.07); border-left-color: var(--green); }
.callout.note     { background: var(--bg-card); border-left-color: var(--ink-faint); }

.callout h4 {
  margin: 0 0 6px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Scorecard */
.scorecard {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.score-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px 50px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.score-bar {
  height: 8px;
  background: var(--bg-sidebar);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.score-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%);
  background-size: 1000% 100%;
}

.score-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.score-weight {
  color: var(--ink-faint);
  font-size: 11px;
  text-align: right;
}

/* Cross-ref boxes */
.crossref {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.crossref > div {
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 13px;
}

.crossref h4 {
  margin: 0 0 4px 0;
  color: var(--ink-faint);
}

/* Big landing scorecard */
.headline-score {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin: 24px 0;
}

.review-score-stack {
  width: 210px;
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}

.review-score-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
}

.review-score-card img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
  background: #f4f0ea;
  border: 1px solid var(--rule);
}

.review-score-card.claude-score img {
  background: #d97a4a;
}

.review-score-card.codex-score img {
  padding: 8px;
}

.headline-score .review-score-card .num {
  font-size: 42px;
}

.headline-score .review-score-card .denom {
  font-size: 16px;
  white-space: nowrap;
}

.review-score-note {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.headline-score-copy {
  flex: 1;
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.headline-score .num {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.headline-score .denom {
  font-size: 24px;
  color: var(--ink-faint);
}

.headline-score .label {
  font-size: 14px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Status board grid */
.status-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.status-board .item {
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.status-board .item-name {
  font-size: 13px;
  font-weight: 500;
}

.status-board .item-note {
  font-size: 11px;
  color: var(--ink-faint);
}

/* Planning and project-command surfaces */
.lead {
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
  margin: 0.4em 0 1.1em 0;
}

.home-brief,
.command-panel {
  margin: 22px 0;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.home-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.85fr);
  gap: 22px;
  align-items: start;
}

.home-brief h2,
.command-panel h2 {
  margin-top: 0;
}

.brief-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brief-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.brief-list li:last-child {
  border-bottom: 0;
}

.brief-list strong {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.concept-sheet {
  margin: 24px 0;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.concept-sheet img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-code);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.concept-sheet figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
}

.concept-sheet figcaption strong {
  color: var(--ink);
}

.command-grid,
.drawing-grid,
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.command-card,
.drawing-card,
.kpi-card {
  padding: 15px 16px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.command-card h3,
.drawing-card h3,
.kpi-card h3 {
  margin-top: 0;
}

.kpi-card .kpi {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.pipeline {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.pipeline-step {
  display: grid;
  grid-template-columns: 36px 1fr minmax(110px, auto);
  gap: 12px;
  align-items: start;
  padding: 13px 15px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.pipeline-step .step-num {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: white;
  background: var(--accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.pipeline-step h3 {
  margin: 0 0 4px 0;
}

.pipeline-step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.owner-pill {
  justify-self: end;
  padding: 4px 9px;
  color: var(--ink-soft);
  background: var(--bg-code);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-note {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 18px 0;
  padding: 13px 15px;
  background: rgba(217, 122, 74, 0.08);
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
}

.control-note img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 999px;
  background: #d97a4a;
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}

/* Responsive */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    width: 100%;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    overflow-x: hidden;
  }
  .ldd-control { max-width: calc(100vw - 40px); }
  main { padding: 32px 24px; }
  .ldd-pilot-grid {
    grid-template-columns: 1fr;
  }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .score-row { grid-template-columns: 1fr; }
  .crossref { grid-template-columns: 1fr; }
  .home-brief { grid-template-columns: 1fr; }
  .pipeline-step { grid-template-columns: 32px 1fr; }
  .asset-hero,
  .asset-pair {
    grid-template-columns: 1fr;
  }
  .asset-pair__meta {
    grid-column: auto;
  }
  .pipeline-step .owner-pill {
    grid-column: 2;
    justify-self: start;
  }
  .headline-score {
    flex-direction: column;
  }
  .review-score-stack {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .headline-score-copy {
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 520px) {
  .review-score-stack {
    grid-template-columns: 1fr;
  }
  .brief-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

footer {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
}

/* ============================================================
   WATERCOOLER — Discord/Slack-style multi-AI chat page
   ============================================================ */

.watercooler-wrap {
  --wc-bg: #171514;
  --wc-rail: #211e1b;
  --wc-panel: #24201d;
  --wc-panel-soft: #1d1a18;
  --wc-border: #39342e;
  --wc-text: #ece4da;
  --wc-muted: #9d958a;
  --wc-faint: #70685f;
  --wc-accent: #d97a4a;
  --wc-codex: #64d98c;
  background:
    radial-gradient(circle at 24px 0, rgba(217,122,74,0.14), transparent 260px),
    linear-gradient(180deg, #1d1a18 0%, var(--wc-bg) 42%);
  color: var(--wc-text);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow-x: clip;
}

.wc-header {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 16px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--wc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(21, 18, 15, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}
.wc-header h1 {
  margin: 0;
  font-size: 19px;
  color: #f4ece2;
  letter-spacing: 0;
}
.wc-header .wc-meta {
  font-size: 12px;
  color: var(--wc-muted);
}
.wc-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wc-participants {
  display: inline-flex;
  align-items: center;
  padding-right: 4px;
}
.wc-participants img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 999px;
  background: #f4f0ea;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 0 2px rgba(21,18,15,0.95);
}
.wc-participants img + img {
  margin-left: -7px;
}
.wc-header-actions a,
.wc-live-dot {
  border: 1px solid var(--wc-border);
  border-radius: 999px;
  padding: 5px 9px;
  color: #d6cec4;
  background: rgba(255,255,255,0.04);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}
.wc-live-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--wc-codex);
  box-shadow: 0 0 12px rgba(100,217,140,0.8);
}

.wc-channel-bar {
  position: sticky;
  top: 82px;
  z-index: 5;
  padding: 10px clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--wc-border);
  background: rgba(33, 30, 27, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
}
.wc-channel-bar a {
  color: #bbb2a7;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  font-weight: 600;
}
.wc-channel-bar a:hover {
  background: #2d2823;
  border-color: #4a4239;
  color: #f4ece2;
}
.wc-channel-bar a::before {
  content: "#";
  color: var(--wc-faint);
  margin-right: 3px;
}

.wc-room-note {
  max-width: 980px;
  margin: 18px auto 8px auto;
  padding: 12px 16px;
  border: 1px solid rgba(217,122,74,0.24);
  border-radius: 8px;
  background: rgba(217,122,74,0.08);
  color: #d9d0c6;
  font-size: 13px;
  line-height: 1.45;
}
.wc-room-note strong { color: #f4ece2; }

.wc-feed {
  width: min(980px, calc(100% - 36px));
  margin: 0 auto;
  padding: 8px 0 42px 0;
}

.wc-channel {
  position: sticky;
  top: 136px;
  z-index: 4;
  margin: 24px 0 10px 0;
  padding: 8px 12px;
  background: linear-gradient(90deg, #2d2823 0%, rgba(45,40,35,0.78) 50%, transparent 100%);
  border-left: 3px solid var(--wc-accent);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: #d7cec4;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.wc-channel::before { content: "# "; color: var(--wc-faint); }

.wc-post {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 14px;
  margin: 5px 0;
  border-radius: 8px;
  border: 1px solid transparent;
  max-width: 100%;
}
.wc-post:hover,
.wc-post:focus-within {
  background: rgba(36,32,29,0.86);
  border-color: rgba(255,255,255,0.05);
}
.wc-post.claude { background: rgba(217,122,74,0.035); }
.wc-post.codex { background: rgba(100,217,140,0.035); }
.wc-post.codex:hover { border-color: rgba(100,217,140,0.18); }
.wc-post.claude:hover { border-color: rgba(217,122,74,0.18); }

.wc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.wc-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-post.claude .wc-avatar  { background: #d97a4a; }
.wc-post.codex .wc-avatar   { background: #f4f0ea; color: #1a1816; padding: 8px; }
.wc-post.codex .wc-avatar img { object-fit: contain; color: #1a1816; }
.wc-post.gemini .wc-avatar  { background: #f4f0ff; padding: 5px; }
.wc-post.gemini .wc-avatar img { object-fit: contain; }
.wc-post.user .wc-avatar    { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }

.wc-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.wc-post-name {
  font-weight: 600;
  font-size: 15px;
}
.wc-post.claude .wc-post-name  { color: #f4a073; }
.wc-post.codex .wc-post-name   { color: #6ee093; }
.wc-post.gemini .wc-post-name  { color: #a7b1ff; }
.wc-post.user .wc-post-name    { color: #fcd34d; }

.wc-post-time {
  font-size: 11px;
  color: #6a635a;
}
.wc-post-tag {
  font-size: 10px;
  color: #a79e93;
  border: 1px solid var(--wc-border);
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: lowercase;
  white-space: nowrap;
}

.wc-post-body {
  font-size: 14px;
  line-height: 1.58;
  color: #ddd6cd;
  max-width: 78ch;
  overflow-wrap: anywhere;
  word-break: normal;
}
.wc-post-body p { margin: 0.35em 0; }
.wc-post-body ul,
.wc-post-body ol {
  margin: 0.45em 0 0.55em 0;
  padding-left: 1.25em;
}
.wc-post-body li { margin: 0.12em 0; }
.wc-post-body code {
  background: #15120f;
  color: #f4a073;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}
.wc-post-body strong { color: #f4ece2; }
.wc-post-body em { color: #c0b8ad; }
.wc-post-body blockquote {
  border-left: 3px solid #73685d;
  margin: 0.65em 0;
  padding: 8px 12px;
  color: #c0b8ad;
  background: rgba(255,255,255,0.035);
  border-radius: 0 7px 7px 0;
}
.wc-post-body a {
  color: #6ee093;
  text-decoration: underline;
}
.wc-post-body .at {
  color: #a7b1ff;
  background: rgba(167,177,255,0.1);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 600;
}

.wc-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.wc-reaction {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  color: #bfb6ac;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.wc-reaction strong {
  color: #f1e8df;
  font-weight: 700;
}
.wc-reaction:hover,
.wc-reaction[aria-pressed="true"] {
  color: #fff7ef;
  background: rgba(217,122,74,0.16);
  border-color: rgba(217,122,74,0.45);
  transform: translateY(-1px);
}

.wc-placeholder {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 14px 12px;
  margin: 2px 0;
  border: 1px dashed #5a544c;
  border-radius: 6px;
  background: rgba(0,0,0,0.15);
}
.wc-placeholder .wc-avatar {
  background: #3a342d !important;
  color: #6a635a !important;
}
.wc-placeholder-body {
  font-size: 13px;
  color: #8a847a;
  font-style: italic;
}

.wc-howto {
  width: min(980px, calc(100% - 36px));
  margin: 18px auto 0 auto;
  padding: 16px 20px;
  background: rgba(33,30,27,0.78);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  font-size: 13px;
  color: #c0b8ad;
}
.wc-howto h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #f4ece2;
  border: none;
  padding: 0;
}
.wc-howto pre {
  background: #15120f;
  color: #ddd5cc;
  font-size: 11px;
  padding: 10px;
  border: 1px solid #2a2520;
  margin: 8px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .watercooler-wrap {
    margin: 0;
  }
  .wc-header {
    position: static;
    align-items: flex-start;
  }
  .wc-channel-bar {
    top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .wc-channel-bar a {
    flex: 0 0 auto;
  }
  .wc-channel {
    position: static;
  }
  .wc-feed,
  .wc-room-note,
  .wc-howto {
    width: min(100% - 24px, 980px);
  }
  .wc-post {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 10px;
  }
  .wc-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .wc-post-body {
    max-width: 100%;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .wc-header {
    flex-direction: column;
  }
  .wc-header-actions {
    justify-content: flex-start;
  }
  .wc-post-time {
    width: 100%;
  }
}

/* TO-DO PAGE checklist styling */
.todo-list { list-style: none; padding-left: 0; }
.todo-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 24px 60px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
}
.todo-prio { font-size: 12px; padding: 1px 6px; border-radius: 3px; text-align: center; }
.prio-high { background: var(--red); color: white; }
.prio-med { background: var(--yellow); color: white; }
.prio-low { background: var(--green); color: white; }