/* ============================================================
   Screens: shared styles
   ------------------------------------------------------------
   Linked by every board document (boards/<Name>.html) and by
   the three gallery pages. Everything for the gallery chrome
   is scoped under body.sc-chrome, so a board document only
   gets the two logo rules at the top. The chrome itself runs
   on preview.css tokens; the --sc-* variables are the screen's
   design system, set by theme.js.
   ============================================================ */

/* Board documents: a swapped logo keeps its own proportions. */
img[data-sc-logo] { object-fit: contain; object-position: left center; }

/* Board documents: the lint header (design systems with headerStyle
   "lint", set on <html data-sc-header> by theme.js). The app header
   gets a vertical bar in the primary colour on the far left, the full
   header height and a little below it, with the white emblem near its
   top; the header's own logo image gives way to it. */
html[data-sc-header="lint"] header[data-sc-header="app"] { position: relative; z-index: 20; padding-left: 62px !important; }
html[data-sc-header="lint"] header[data-sc-header="app"]::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: calc(100% + 26px);
  background: var(--sc-primary, #154273) url(assets/rijkshuisstijl/emblem-wit.svg) no-repeat center calc(100% - 5px) / 36px auto;
}
html[data-sc-header="lint"] header[data-sc-header="app"] img[data-sc-logo] { display: none; }

/* Board documents: the NL Design System look (design systems with look
   "nldesign", set on <html data-sc-look> by theme.js). The boards draw
   their controls inline, so this layer does for them what thematiq's
   css/systems/nldesign/element-overrides.css does for a Nextcloud page:
   squared controls on the set's radius, a bold button label, a visible
   control edge, underlined links in prose, a black focus ring and plain
   table rules. Values follow the rhc.* tokens the set is mapped from. */
html[data-sc-look="nldesign"] body { line-height: 1.5; }
html[data-sc-look="nldesign"] button,
html[data-sc-look="nldesign"] a[role="button"],
html[data-sc-look="nldesign"] input,
html[data-sc-look="nldesign"] select,
html[data-sc-look="nldesign"] textarea,
html[data-sc-look="nldesign"] [role="tab"],
html[data-sc-look="nldesign"] [role="switch"] { border-radius: var(--sc-radius, 2px) !important; }
html[data-sc-look="nldesign"] button { font-weight: 700 !important; }
html[data-sc-look="nldesign"] input:not([type="checkbox"]):not([type="radio"]),
html[data-sc-look="nldesign"] select,
html[data-sc-look="nldesign"] textarea { border: 1px solid var(--sc-work-field, #64748b) !important; }
html[data-sc-look="nldesign"] input[type="checkbox"] { border-radius: 0 !important; }
html[data-sc-look="nldesign"] p a,
html[data-sc-look="nldesign"] li a:not([aria-current]),
html[data-sc-look="nldesign"] td a,
html[data-sc-look="nldesign"] dd a { text-decoration: underline !important; text-underline-offset: 0.15em; }
html[data-sc-look="nldesign"] :focus-visible { outline: 2px solid #000000 !important; outline-offset: 2px !important; }
html[data-sc-look="nldesign"] th { font-weight: 700; }
html[data-sc-look="nldesign"] th,
html[data-sc-look="nldesign"] td { border-radius: 0 !important; }
html[data-sc-look="nldesign"] table { border-collapse: collapse; }
html[data-sc-look="nldesign"] h1,
html[data-sc-look="nldesign"] h2,
html[data-sc-look="nldesign"] h3 { font-weight: 700; letter-spacing: 0; }

/* ---------- Gallery chrome ---------- */
body.sc-chrome { padding: 0; background: var(--c-cobalt-50); }
.sc-chrome [hidden] { display: none !important; }

.sc-chrome .sc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-12); }

/* Hero, same shape as the home page hero */
.sc-chrome .hero {
  background: var(--conduction-color-background-inverse);
  color: white;
  padding: 80px 64px 64px;
  border-radius: 0;
}
.sc-chrome .hero .crumb a { color: var(--c-cobalt-200); }
.sc-chrome .hero .crumb { color: rgba(255,255,255,0.7); }
.sc-chrome .hero h1 { color: white; font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; max-width: 18ch; }
.sc-chrome .hero p { color: rgba(255,255,255,0.82); font-size: 19px; margin-top: var(--space-6); max-width: 62ch; line-height: 1.5; }
.sc-chrome .hero p a, .sc-chrome .hero .meta a { color: white; }
.sc-chrome .hero .meta { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); font-family: var(--conduction-typography-font-family-code); font-size: 12px; color: rgba(255,255,255,0.7); }
.sc-chrome .hero .meta strong { display: block; color: white; font-family: var(--conduction-typography-font-family-body); font-size: 16px; font-weight: 600; margin-top: 4px; }

/* Segmented control for the design system */
.sc-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: white; border: 1px solid var(--c-cobalt-100); border-radius: var(--radius-md); }
.sc-seg button {
  font: inherit; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; min-height: 36px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-cobalt-700); cursor: pointer;
}
.sc-seg button:hover { background: var(--c-cobalt-50); }
.sc-seg button[aria-pressed="true"] { background: var(--c-cobalt-50); color: var(--c-cobalt-900); font-weight: 600; box-shadow: inset 0 0 0 2px var(--c-blue-cobalt); }
.sc-seg button:focus-visible { outline: 2px solid var(--conduction-color-focus-ring); outline-offset: 2px; }
.sc-seg .dot { width: 12px; height: 14px; clip-path: var(--hex-pointy-top); flex: none; }

/* The stable screen id, copyable */
.sc-id {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--conduction-typography-font-family-code); font-size: 12px;
  color: var(--c-cobalt-700); background: var(--c-cobalt-50);
  border: 1px solid var(--c-cobalt-100); border-radius: var(--radius-sm);
  padding: 2px 4px 2px 8px; max-width: 100%;
}
.sc-id code { font: inherit; background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-id button {
  font: inherit; font-size: 11px; border: 0; cursor: pointer;
  background: white; color: var(--c-cobalt-700);
  border-radius: 3px; padding: 2px 6px; min-height: 22px;
}
.sc-id button:hover { color: var(--c-coral-600); }
.sc-id button:focus-visible { outline: 2px solid var(--conduction-color-focus-ring); outline-offset: 1px; }

/* Badge for sets drawn in their own house style */
.sc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--conduction-typography-font-family-code); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-cobalt-700); background: white;
  border: 1px solid var(--c-cobalt-200); border-radius: 999px; padding: 3px 10px;
}

.sc-swatch { display: inline-flex; height: 10px; border-radius: 2px; overflow: hidden; width: 72px; }
.sc-swatch span { flex: 1; }

@media (max-width: 720px) {
  .sc-chrome .sc-wrap { padding: 0 var(--space-4); }
  .sc-chrome .hero { padding: 56px 16px 40px; }
  .sc-chrome .hero h1 { font-size: 44px; }
}

/* ---------- Capabilities: status pills and system chips ----------
   Shared by board.html (sidebar) and ../capabilities/index.html. */
.sc-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--conduction-typography-font-family-code); font-size: 11px; line-height: 1.3;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
  color: var(--c-cobalt-700); background: var(--c-cobalt-50);
}
.sc-pill[data-status="built"] { color: var(--conduction-color-status-success-ink); background: var(--conduction-color-status-success-tint); }
.sc-pill[data-status="building"] { color: var(--conduction-color-status-warning-ink); background: var(--conduction-color-status-warning-tint); }
.sc-pill[data-status="specified"] { color: var(--c-blue-cobalt); background: var(--c-cobalt-50); border-color: var(--c-cobalt-200); }
.sc-pill[data-status="in-flight"] { color: var(--c-coral-700); background: var(--c-coral-50); }
.sc-pill[data-status="decided-no"] { color: var(--c-cobalt-700); background: var(--c-cobalt-100); text-decoration: line-through; }
.sc-pill[data-status="designed"] { color: var(--c-cobalt-700); background: white; border-color: var(--c-cobalt-400); }
.sc-pill[data-status="external"] { color: var(--c-cobalt-700); background: white; border-color: var(--c-cobalt-200); border-style: dashed; }

.sc-sys { display: inline-flex; align-items: center; gap: 4px; font-family: var(--conduction-typography-font-family-code); font-size: 10.5px; line-height: 1.3; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; }
.sc-sys[data-v="yes"] { color: var(--conduction-color-status-success-ink); background: var(--conduction-color-status-success-tint); }
.sc-sys[data-v="partial"] { color: var(--conduction-color-status-warning-ink); background: var(--conduction-color-status-warning-tint); }
.sc-sys[data-v="no"] { color: var(--c-cobalt-700); background: var(--c-cobalt-100); }
.sc-sys[data-v="unknown"] { color: var(--c-cobalt-400); background: white; border-color: var(--c-cobalt-200); }

/* ---------- Build status: how far a screen is built in its app ----------
   Shared by index.html (tiles, row lines) and board.html (sidebar).
   Data from build-status.json, read through build-status.js. */
.sc-bs {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
  color: var(--c-cobalt-700); background: var(--c-cobalt-50);
}
.sc-bs::before { content: ""; width: 8px; height: 9px; flex: none; clip-path: var(--hex-pointy-top); background: currentColor; }
.sc-bs[data-bs="match"] { color: var(--conduction-color-status-success-ink); background: var(--conduction-color-status-success-tint); }
.sc-bs[data-bs="differs"] { color: var(--conduction-color-status-info-ink); background: var(--conduction-color-status-info-tint); border-color: var(--c-cobalt-200); }
.sc-bs[data-bs="partial"] { color: var(--conduction-color-status-warning-ink); background: var(--conduction-color-status-warning-tint); }
.sc-bs[data-bs="missing"] { color: var(--conduction-color-status-error-ink); background: var(--conduction-color-status-error-tint); }
.sc-bs[data-bs="stateOf"] { color: var(--c-cobalt-700); background: white; border-color: var(--c-cobalt-400); border-style: dashed; }
.sc-bs[data-bs="none"] { color: var(--c-cobalt-700); background: white; border-color: var(--c-cobalt-200); font-weight: 400; }
.sc-bs[data-bs="none"]::before { background: var(--c-cobalt-200); }
.sc-bs-pct { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--c-cobalt-700); white-space: nowrap; }