/* s2s.css — shared chrome for the Schema-to-Screen reference architecture.
   Covers /architecture/schema-to-screen/ and the eight TOGAF ADM pages under
   it. Page-specific diagram rules live in css/s2s-<slug>.css, which loads
   after this one.

   Ported from the standalone HTML exports in schema-to-screen/, which were
   built to open from a file:// path with everything inline. Three things had
   to change to make them site pages:

   Scope. The originals styled bare `h1`, `table`, `footer` and `body`. Inside
   the site shell those reach the real nav and footer, so every rule here is
   scoped to the .s2s wrapper. Nothing outside it is touched.

   Theme. The originals switched on html[data-theme=light] and carried their
   own toggle writing an s2s-theme key. The site resolves dark|light|reading|
   auto down to data-scheme and data-theme in theme-init.js, so the palette
   keys off [data-scheme] like refarch.css and enhance.css, with a warm block
   for Reading like togaf.css. The page-local toggle is gone — the site's
   theme menu drives these pages.

   Text size. Authored HTML sizes are calc(<size> * var(--fs, 1)) so the
   reader's text-size control works. SVG text is deliberately left fixed: the
   diagrams have hand-placed geometry and labels sized to fit their shapes, so
   scaling the type inside them overflows the boxes. The per-figure Fit/150%/
   200% zoom is how those are made bigger, and it scales the whole drawing. */

.s2s {
  --bg0:#0A1320; --bg1:#0E1A2B; --panel:#16263F; --panel2:#1B2E4A; --line:#2A3D5C;
  --ink:#EAF1FA; --muted:#9DB0C7;
  /* --faint and --slate are lifted off the authored values: at 12px on the
     site's body background and on --panel2 the originals measured 3.8:1 and
     4.35:1, both under AA. */
  --faint:#74869E;
  --blue:#3B82F6; --blue2:#60A5FA; --teal:#22C7C7; --mint:#34D399;
  --amber:#F6C453; --rose:#F472B6; --slate:#8A9DB8;
  --svgbg:#0B1526;
  /* Ink for text sitting ON --blue. --blue is light in this scheme and dark
     in the other two, so the readable choice flips with it. */
  --onblue:#0A1320;
  color: var(--ink);
}

/* Light. Reading resolves to data-scheme="light" too, so this block lands for
   both and the block after it only repaints what paper needs. */
html[data-scheme="light"] .s2s {
  --bg0:#f3f6fb; --bg1:#ffffff; --panel:#ffffff; --panel2:#eaf0f8; --line:#d3dce9;
  --ink:#0f1c2e; --muted:#3d5270; --faint:#5c6b80;
  --blue:#1d4ed8; --blue2:#1e56c8; --teal:#0b7d7d; --mint:#036848;
  --amber:#96440a; --rose:#be185d; --slate:#5a6b82;
  --svgbg:#ffffff;
  --onblue:#ffffff;
}

/* Reading is a warm re-skin of the light layer. The surfaces below are the
   light ones tinted onto paper; the accents are the light hues warmed by the
   same amount, so nothing here drops under 4.5:1 on the warmer ground. */
html[data-theme="reading"] .s2s {
  --panel:#fbf4e6; --panel2:#f3ead8; --line:#d9c9a8;
  --ink:#2b2313; --muted:#5a4a2f; --faint:#7a6844;
  --blue:#1a4bbf; --blue2:#22509c; --teal:#0f5f66; --mint:#0f6a4a;
  --amber:#7a4a12; --rose:#96271c; --slate:#5f5540;
  --svgbg:#fbf4e6;
  --onblue:#ffffff;
}

.s2s { padding-bottom: 8px; }
.s2s .s2s-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.s2s .crumbs {
  font-size: calc(12.5px * var(--fs, 1));
  color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.s2s .crumbs a { color: var(--blue2); text-decoration: none; font-weight: 700; }
.s2s .crumbs a:hover { text-decoration: underline; }
.s2s h1 {
  font-size: calc(clamp(20px, 3vw, 30px) * var(--fs, 1));
  margin: 6px 0 4px; letter-spacing: -0.02em; font-weight: 800;
}
.s2s h1 .accent { color: var(--blue2); }
.s2s .dek {
  margin: 0; color: var(--muted);
  font-size: calc(clamp(13px, 1.5vw, 15.5px) * var(--fs, 1));
  line-height: 1.5; max-width: 90ch;
}
.s2s .tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.s2s .tbtn {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 8px 11px; font-weight: 700;
  font-size: calc(12.5px * var(--fs, 1));
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.s2s .tbtn:hover { border-color: var(--blue); color: var(--ink); }

.s2s .fig {
  margin-top: 22px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px clamp(10px, 2vw, 18px) 16px;
}
.s2s .fig .fhead {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between; margin-bottom: 8px;
}
.s2s .fig h2 {
  font-size: calc(clamp(15px, 2vw, 19px) * var(--fs, 1));
  margin: 0; letter-spacing: -0.01em;
}
.s2s .fig h2 small {
  display: block; font-size: calc(11px * var(--fs, 1)); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue2);
  margin-bottom: 2px;
}
.s2s .fig p.note {
  margin: 6px 0 10px; color: var(--muted);
  font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5;
}

.s2s .zoom { display: flex; gap: 6px; }
.s2s .zoom button {
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 9px;
  font-size: calc(11.5px * var(--fs, 1));
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.s2s .zoom button.on {
  /* --onblue, not a literal: white on the dark scheme's --blue measures
     3.67:1 and dark ink on the light scheme's measures 2.78:1, so the
     readable choice flips with the palette. */
  background: var(--blue); color: var(--onblue); border-color: var(--blue);
}
.s2s .svgwrap {
  overflow: auto; border-radius: 12px; background: var(--svgbg);
  border: 1px solid var(--line); -webkit-overflow-scrolling: touch;
}
.s2s .svgwrap svg { display: block; width: 100%; height: auto; }

.s2s .grid { display: grid; gap: 10px; }
.s2s .card {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 13px;
}
.s2s .card h4 { margin: 0 0 6px; font-size: calc(13.5px * var(--fs, 1)); }
.s2s .card p, .s2s .card li {
  margin: 0; color: var(--muted);
  font-size: calc(12.5px * var(--fs, 1)); line-height: 1.45;
}
.s2s .card ul { margin: 4px 0 0; padding-left: 16px; }
.s2s .card a { color: var(--blue2); text-decoration: none; font-weight: 700; }
.s2s .card .k {
  display: block; font-size: calc(10.5px * var(--fs, 1)); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue2);
  margin-bottom: 4px;
}

.s2s table {
  width: 100%; border-collapse: collapse;
  font-size: calc(12.5px * var(--fs, 1));
}
.s2s th, .s2s td {
  text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.4;
}
.s2s th {
  font-size: calc(11px * var(--fs, 1)); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue2);
}
.s2s td { color: var(--muted); }
.s2s td b { color: var(--ink); }
.s2s td a { color: var(--blue2); text-decoration: none; font-weight: 700; }
.s2s .tablewrap { overflow: auto; }

.s2s .pager {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 26px; flex-wrap: wrap;
}
.s2s .s2s-foot {
  margin-top: 20px; color: var(--faint);
  font-size: calc(12px * var(--fs, 1));
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

@media print {
  .s2s .tools, .s2s .zoom, .s2s .pager { display: none; }
  .s2s .fig { break-inside: avoid; border: 1px solid #ccc; }
}

/* Utilities standing in for the inline style attributes the standalone exports
   used. The site sets style-src 'self', which blocks a style="" attribute as
   surely as a <style> block, so every one of them had to become either an SVG
   presentation attribute (most of them: fill, stroke, marker-end) or one of
   the classes below. Named for what they do, not where they were used, since
   several pages reach for the same one. */
.s2s .ink { color: var(--ink); }
.s2s .ta-left { text-align: left; }
.s2s .ul-flush { margin: 0; padding-left: 16px; }
.s2s .mt6 { margin-top: 6px; }
.s2s .mt10 { margin-top: 10px; }
.s2s .mt12 { margin-top: 12px; }
.s2s .mt16 { margin-top: 16px; }

/* Auto-fitting card grids. The number is the track minimum the page asked for;
   below it the track collapses to one column on its own. */
.s2s .gauto230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.s2s .gauto250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.s2s .gauto260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.s2s .gauto280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.s2s .gauto300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* A card flagged by the hue of its top edge, and inline text in the same hue. */
.s2s .card.bt-amber { border-top-color: var(--amber); }
.s2s .card.bt-mint  { border-top-color: var(--mint); }
.s2s .card.bt-rose  { border-top-color: var(--rose); }
.s2s .hue-slate { color: var(--slate); font-weight: 800; }
.s2s .hue-mint  { color: var(--mint);  font-weight: 800; }
.s2s .hue-amber { color: var(--amber); font-weight: 800; }

/* Legend swatches. */
.s2s .sw-teal  { background: var(--teal); }
.s2s .sw-rose  { background: var(--rose); }
.s2s .sw-blue2 { background: var(--blue2); }