/* Systems Lens (시스템 렌즈): the five-box reading of a real research project.

   Two surfaces share this file. The parent guide shows a compact strip; the
   course page shows the whole block with the archify diagrams inlined. Both are
   dark panels, because the diagrams keep their contrast that way in either
   colour scheme, and because the map of a repository reads as a night city.

   Self-contained on purpose: the SVGs carry archify's semantic classes and no
   colours of their own, so the palette below is the entire theme contract. The
   five colours are fixed across every course; a colour always means the same
   box. */

.systems-lens {
  --lens-input: #38d9f0;
  --lens-memory: #f2c66d;
  --lens-process: #e8e4d8;
  --lens-output: #fb7185;
  --lens-control: #a7f3d0;
  --lens-accent: #85d8cb;
  --lens-link: #b9f0e4;
  --lens-text: #f7f3e8;
  --lens-text-muted: rgba(247, 243, 232, 0.76);
  --lens-text-dim: rgba(247, 243, 232, 0.68);
  --lens-line: rgba(133, 216, 203, 0.24);
  --lens-surface: #123f3a;
  --lens-mask: #0d2a27;
  --lens-panel: rgba(6, 32, 28, 0.46);
  --lens-designated-surface: rgba(242, 198, 109, 0.1);
  --lens-designated-chip-surface: rgba(242, 198, 109, 0.14);
  --lens-current-surface: rgba(133, 216, 203, 0.12);
  --lens-tag-surface: rgba(6, 32, 28, 0.72);
  --lens-tag-text: #f6d58d;
  --lens-action-surface: rgba(6, 32, 28, 0.55);
  --lens-action-text: #eafaf5;
  --lens-focus: #f6d58d;

  padding: 26px;
  border-radius: var(--radius-md, 18px);
  background: var(--block, var(--lens-surface));
  color: var(--lens-text);
  box-shadow: var(--shadow, 0 24px 60px rgba(18, 63, 58, 0.2));
}

.systems-lens a { color: var(--lens-link); }

/* The lesson UI gives every lesson section a light surface with a two-class
   selector. Match that specificity so a rail keeps the dark surface its light
   text palette was designed for. */
.lesson-section.systems-lens {
  background: var(--block, var(--lens-surface));
  color: var(--lens-text);
}

.systems-lens a:focus-visible {
  outline: 3px solid var(--lens-focus);
  outline-offset: 3px;
}

/* On the public course guide the block sits inside the evidence section's grid
   rather than in a section of its own, because that page's scan layout is
   pinned at seven sections by contract. */
.curriculum-evidence-grid > .systems-lens { grid-column: 1 / -1; }

.systems-lens-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin-bottom: 8px;
}

.systems-lens-head span {
  color: var(--lens-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.systems-lens-head h2,
.systems-lens-head h3 {
  margin: 0;
  color: var(--lens-text);
  font-size: 1.15rem;
  line-height: 1.4;
}

.systems-lens-lead {
  max-width: 78ch;
  margin: 0 0 14px;
  color: var(--lens-text-muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

/* The source line: repository, pinned commit, licence. Facts, never a claim of
   affiliation, and the disclaimer that says so travels with it. */
.systems-lens-source {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.systems-lens-source li {
  padding: 5px 12px;
  border: 1px solid var(--lens-line);
  border-radius: 999px;
  background: var(--lens-panel);
  color: var(--lens-text-muted);
  font-size: 0.78rem;
}

.systems-lens-source li code {
  color: var(--lens-text);
  font-size: 0.76rem;
}

.systems-lens-note {
  margin: 10px 0 0;
  color: var(--lens-text-dim);
  font-size: 0.8rem;
  line-height: 1.7;
}

/* Five boxes as text: the version a parent reads, and the fallback whenever a
   diagram is not on the page. */
.systems-lens-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.systems-lens-boxes li {
  padding: 14px;
  border: 1px solid var(--lens-line);
  border-left: 3px solid var(--box-colour, var(--lens-line));
  border-radius: 12px;
  background: var(--lens-panel);
}

.systems-lens-boxes li[data-box="input"] { --box-colour: var(--lens-input); }
.systems-lens-boxes li[data-box="memory"] { --box-colour: var(--lens-memory); }
.systems-lens-boxes li[data-box="process"] { --box-colour: var(--lens-process); }
.systems-lens-boxes li[data-box="output"] { --box-colour: var(--lens-output); }
.systems-lens-boxes li[data-box="control"] {
  --box-colour: var(--lens-control);
  border-left-style: dashed;
}

.systems-lens-boxes b {
  display: block;
  color: var(--box-colour, var(--lens-text));
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.systems-lens-boxes .lens-question {
  display: block;
  margin: 2px 0 6px;
  color: var(--lens-text-dim);
  font-size: 0.76rem;
}

.systems-lens-boxes p {
  margin: 0;
  color: var(--lens-text-muted);
  font-size: 0.85rem;
  line-height: 1.65;
}

.systems-lens-boxes ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.systems-lens-boxes ul li {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  line-height: 1.6;
  word-break: break-all;
}

.systems-lens-boxes ul a { text-decoration: none; }
.systems-lens-boxes ul a:hover { text-decoration: underline; }

.systems-lens-boxes li[data-designated="true"] {
  background: var(--lens-designated-surface);
}

.systems-lens-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lens-tag-surface);
  color: var(--lens-tag-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Korean text inside an SVG cannot reflow, so a narrow screen swipes the
   diagram sideways instead of shrinking it into a smear. */
.systems-lens-canvas {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--lens-line);
  border-radius: 14px;
  background: var(--lens-mask);
}

/* An SVG scales to the box it sits in, so a wide diagram inside a narrow column
   shrinks its type with it. archify draws its captions at 7px, which survives no
   shrinking at all, so the diagrams keep their drawn width and the canvas
   scrolls instead. The drawn figures are authored narrow and can fill the
   column, growing their type rather than losing it. */
.systems-lens-canvas svg {
  display: block;
  width: 100%;
  min-width: 1080px;
  height: auto;
}

.systems-lens-canvas img {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}

.systems-lens-swipe {
  display: none;
  margin: 12px 0 0;
  color: var(--lens-text-muted);
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .systems-lens-swipe { display: block; }
}

.systems-lens-caption {
  margin: 10px 0 0;
  color: var(--lens-text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.systems-lens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.systems-lens-card {
  padding: 16px;
  border: 1px solid var(--lens-line);
  border-radius: 14px;
  background: var(--lens-panel);
}

.systems-lens-card h4 {
  margin: 0 0 6px;
  color: var(--lens-text);
  font-size: 0.98rem;
  line-height: 1.4;
}

.systems-lens-card p {
  margin: 0 0 8px;
  color: var(--lens-text-muted);
  font-size: 0.87rem;
  line-height: 1.7;
}

.systems-lens-card p:last-child { margin-bottom: 0; }

.systems-lens-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}

.systems-lens-card dt {
  color: var(--lens-text-dim);
  font-size: 0.78rem;
}

.systems-lens-card dd {
  margin: 0;
  color: var(--lens-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.systems-lens-kicker {
  margin: 0 0 4px;
  color: var(--lens-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.systems-lens-steps {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--lens-text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.systems-lens-steps b { color: var(--lens-text); font-weight: 600; }

.systems-lens-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

.systems-lens-links a {
  padding: 7px 14px;
  border: 1px solid var(--lens-line);
  border-radius: 999px;
  background: var(--lens-action-surface);
  color: var(--lens-action-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.systems-lens-links a:hover,
.systems-lens-links a:focus-visible { border-color: rgba(133, 216, 203, 0.55); }

/* archify draws its diagram text between 7px and 11px, which is legible in the
   tool's own full-screen viewer and too small in a page column. Each size is
   lifted by about a quarter here; the card budgets in check_lens_cards.py are
   written against the lifted sizes, so a label that fits the box after the lift
   is the one the checker allows. */
.systems-lens-canvas svg text[font-size="7"] { font-size: 10px; }
.systems-lens-canvas svg text[font-size="8"] { font-size: 11px; }
.systems-lens-canvas svg text[font-size="9"] { font-size: 12px; }
.systems-lens-canvas svg text[font-size="10"] { font-size: 13.5px; }
.systems-lens-canvas svg text[font-size="11"] { font-size: 15px; }

/* archify semantic classes — the inlined SVGs reference these and nothing else.
   Input teal, memory gold, process ink, output rose, control an open outline. */
.systems-lens .c-grid { stroke: rgba(133, 216, 203, 0.12); fill: none; }
.systems-lens .c-lane {
  fill: rgba(6, 32, 28, 0.5);
  stroke: rgba(133, 216, 203, 0.34);
  stroke-dasharray: 6, 6;
}
.systems-lens .c-mask { fill: var(--lens-mask); stroke: none; }
.systems-lens .c-external { fill: rgba(8, 51, 68, 0.55); stroke: var(--lens-input); }
.systems-lens .c-database { fill: rgba(87, 63, 12, 0.5); stroke: var(--lens-memory); }
.systems-lens .c-backend { fill: rgba(30, 41, 59, 0.6); stroke: var(--lens-process); }
.systems-lens .c-frontend { fill: rgba(88, 28, 45, 0.5); stroke: var(--lens-output); }
.systems-lens .c-messagebus {
  fill: none;
  stroke: var(--lens-control);
  stroke-dasharray: 5, 4;
}
.systems-lens .c-security { fill: rgba(88, 28, 45, 0.4); stroke: var(--lens-output); }
.systems-lens .c-cloud { fill: rgba(8, 51, 68, 0.45); stroke: var(--lens-input); }
.systems-lens .a-default { stroke: rgba(247, 243, 232, 0.45); fill: none; }
.systems-lens .a-emphasis { stroke: var(--lens-accent); fill: none; }
.systems-lens .a-dashed {
  stroke: var(--lens-control);
  fill: none;
  stroke-dasharray: 4, 4;
}
.systems-lens .a-security { stroke: var(--lens-output); fill: none; }
.systems-lens .m-default { fill: rgba(247, 243, 232, 0.45); }
.systems-lens .m-emphasis { fill: var(--lens-accent); }
.systems-lens .m-dashed { fill: var(--lens-control); }
.systems-lens .m-security { fill: var(--lens-output); }
.systems-lens .t-primary { fill: var(--lens-text); }
.systems-lens .t-muted { fill: var(--lens-text-muted); }
.systems-lens .t-dim { fill: var(--lens-text-dim); }
.systems-lens .t-external { fill: var(--lens-input); }
.systems-lens .t-database { fill: var(--lens-memory); }
.systems-lens .t-backend { fill: var(--lens-process); }
.systems-lens .t-frontend { fill: var(--lens-output); }
.systems-lens .t-messagebus { fill: var(--lens-control); }
.systems-lens .t-security { fill: var(--lens-output); }
.systems-lens .s-external { color: var(--lens-input); }
.systems-lens .s-database { color: var(--lens-memory); }
.systems-lens .s-backend { color: var(--lens-process); }
.systems-lens .s-frontend { color: var(--lens-output); }
.systems-lens .s-messagebus { color: var(--lens-control); }
.systems-lens .s-security { color: var(--lens-output); }
.systems-lens .semantic-sigil {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.76;
}
.systems-lens .semantic-sigil > * { vector-effect: non-scaling-stroke; }
.systems-lens .semantic-sigil .sigil-fill { fill: currentColor; stroke: none; }

/* The rail on a lesson page: five chips, the opened one marked, and the files
   that box rests on. Deliberately small; the whole reading lives one level up. */
.systems-lens-rail { margin-top: 22px; }

.systems-lens-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.systems-lens-chips li {
  padding: 5px 12px;
  border: 1px solid var(--lens-line);
  border-left: 3px solid var(--box-colour, var(--lens-line));
  border-radius: 999px;
  background: var(--lens-panel);
  color: var(--lens-text-muted);
  font-size: 0.8rem;
}

.systems-lens-chips li[data-box="input"] { --box-colour: var(--lens-input); }
.systems-lens-chips li[data-box="memory"] { --box-colour: var(--lens-memory); }
.systems-lens-chips li[data-box="process"] { --box-colour: var(--lens-process); }
.systems-lens-chips li[data-box="output"] { --box-colour: var(--lens-output); }
.systems-lens-chips li[data-box="control"] {
  --box-colour: var(--lens-control);
  border-left-style: dashed;
}

.systems-lens-chips li[data-designated="true"] {
  background: var(--lens-designated-chip-surface);
  color: var(--lens-text);
}

/* The box this chapter spends its time in, which is not always the box the
   course opens. Marked with an outline so the gold one stays the loud one. */
.systems-lens-chips li[data-current="true"] {
  border-color: rgba(133, 216, 203, 0.55);
  background: var(--lens-current-surface);
  color: var(--lens-text);
}

.systems-lens-chapter { margin-bottom: 10px; }

.systems-lens-chips b { font-weight: 600; }

.systems-lens-rail .systems-lens-boxes > div {
  padding: 14px;
  border: 1px solid var(--lens-line);
  border-left: 3px solid var(--lens-memory);
  border-radius: 12px;
  background: var(--lens-panel);
}

.systems-lens-rail .systems-lens-boxes b {
  display: block;
  margin-bottom: 6px;
  color: var(--lens-text);
  font-size: 0.86rem;
}

.systems-lens-rail .systems-lens-boxes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.systems-lens-rail .systems-lens-boxes li {
  font-size: 0.78rem;
  line-height: 1.7;
  word-break: break-all;
}

/* The hub page: one card per project, and the index of what CIT reads. */
.lens-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.lens-index > li {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line, #d9d4c8);
  border-radius: 16px;
  background: var(--surface, #fffdf8);
}

.lens-index h3 {
  margin: 6px 0 4px;
  font-size: 1.02rem;
  line-height: 1.4;
}

.lens-index .lens-repo {
  margin: 0;
  color: var(--muted, #5b6863);
  font-size: 0.78rem;
  word-break: break-all;
}

.lens-index p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.7; }

/* The project's own chain, in its own words: what tells one card apart from
   the next in a list of thirty-five. */
.lens-index .lens-chain {
  margin-top: 10px;
  color: var(--muted, #5b6863);
  font-size: 0.82rem;
  line-height: 1.6;
  word-break: keep-all;
}

.lens-index img {
  width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 10px;
}

.lens-index .lens-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.lens-index .lens-links a {
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.lens-index .lens-links a:hover { text-decoration: underline; }