/*
School-type drawn-artifact CSS. Shared scaffolding for all nine /for/<slug>/
pages so their drawn NavEd-screen illustrations cannot drift apart, plus the
below-the-fold photo frame.

Lives as its own static file, not inside base_public.html's <style> block,
because base_public.html is off-limits to this build (owned by a concurrent
nav-rename agent). Loaded only from school-type-detail.html's extra_head
block. Reuses the CSS custom properties already defined in base_public.html's
:root (--bone, --navy, --teal, --charcoal, --line, --shadow-hard, etc.) --
this file defines no new color tokens of its own.

See TEXTURE_CONTRACT.md at the repo root for the full contract: class
reference, partial-naming convention, and a worked example.
*/

/* ---------- icon sizing (used with the shared #st-i-* <symbol> sprite) ---------- */
.st-icon{
  width:1em; height:1em; display:inline-block; vertical-align:-0.14em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}

/* ---------- fold layout: copy column + artifact column ---------- */
.st-fold-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start;
}
@media (max-width:900px){
  .st-fold-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- stacked-paper effect ----------
   Two faint sheets peeking out behind the top card, drawn with solid fills
   and rotation only. Never a gradient, never a photo. */
.st-art-stack{ position:relative; }
.st-art-stack::before,
.st-art-stack::after{
  content:""; position:absolute; left:10px; right:10px; top:0; bottom:0;
  background:var(--card-white); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.st-art-stack::before{ transform:rotate(-2.2deg) translateY(4px); z-index:0; }
.st-art-stack::after{ transform:rotate(1.6deg) translateY(7px); z-index:-1; opacity:.85; }

/* paperclip, drawn not photographed -- optional, use on at most one card per artifact */
.st-art-clip{ position:absolute; top:-14px; left:26px; width:20px; height:34px; z-index:2; color:var(--navy); opacity:.55; }

/* ---------- the paper card itself ---------- */
.st-art-card{
  position:relative; z-index:1;
  background:var(--card-white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-hard); padding:20px 22px;
}
.st-art-card + .st-art-card{ margin-top:16px; }
.st-art-card-head{ display:flex; align-items:center; gap:9px; margin-bottom:15px; flex-wrap:wrap; }
.st-art-card-icon{
  width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.st-art-card-icon .st-icon{ width:14px; height:14px; }
.st-art-card-icon.teal{ background:rgba(13,124,135,0.1); color:var(--teal); }
.st-art-card-icon.emerald{ background:rgba(16,185,129,0.14); color:#0a7a5a; }
.st-art-card-icon.navy{ background:rgba(30,58,95,0.08); color:var(--navy); }
.st-art-card-label{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.07em; font-size:10.5px; font-weight:700; color:rgba(58,54,46,0.55); }

/* ---------- roster / attendance rows ---------- */
.st-art-roster-row{ padding:9px 2px; }
.st-art-roster-row:not(:last-child){ border-bottom:1px solid var(--line); }
.st-art-roster-row.no-border{ border-bottom:none; }
.st-art-roster-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.st-art-roster-name{ font-size:13px; font-weight:600; color:var(--charcoal); }
.st-art-roster-sub{ font-family:var(--font-mono); font-size:10.5px; color:rgba(58,54,46,0.5); }
.st-art-week{ display:flex; gap:6px; margin-top:7px; }
.st-art-day{
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:8.5px; font-weight:700; border:1.4px solid var(--line); color:rgba(58,54,46,0.35);
}
.st-art-day.met{ background:rgba(16,185,129,0.14); color:#0a7a5a; border-color:transparent; }
.st-art-day .st-icon{ width:9px; height:9px; }

/* mixed-age / attendance-taken-by tags */
.st-art-age-chip{
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--navy);
  background:rgba(30,58,95,0.08); border-radius:999px; padding:2px 8px; margin-left:8px;
}
.st-art-work-tag{
  font-family:var(--font-mono); font-size:10px; color:var(--teal); background:rgba(13,124,135,0.1);
  border-radius:999px; padding:2px 8px;
}

/* ---------- transcript / roster-with-numbers rows ---------- */
.st-art-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px; font-size:12.5px; gap:8px; flex-wrap:wrap; }
.st-art-row:not(:last-child){ border-bottom:1px solid var(--line); }
.st-art-row.no-border{ border-bottom:none; }
.st-art-row-label{ color:var(--charcoal); font-weight:500; }
.st-art-row-right{ display:flex; align-items:center; gap:8px; }
.st-art-row-meta{ font-family:var(--font-mono); font-size:10.5px; color:rgba(58,54,46,0.5); }

.st-art-chip{
  display:inline-flex; align-items:center; justify-content:center; padding:3px 9px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; white-space:nowrap;
}
.st-art-chip.a{ background:rgba(16,185,129,0.14); color:#0a7a5a; }
.st-art-chip.b{ background:rgba(13,124,135,0.12); color:var(--teal); }
.st-art-chip.warn{ background:rgba(249,115,22,0.14); color:#9a4a12; }

.st-art-foot{ display:flex; align-items:baseline; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); gap:10px; flex-wrap:wrap; }
.st-art-stat-value{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--navy); }
.st-art-stat-label{ font-family:var(--font-mono); font-size:10px; color:rgba(58,54,46,0.5); }

/* "recomputes live" pill -- use ONLY on a transcript, and ONLY when the
   screen it illustrates really does recompute on every view */
.st-art-live-pill{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:0.06em; font-size:9px; font-weight:700; color:#0a7a5a;
  background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.32);
  padding:4px 8px; border-radius:var(--radius-sm); white-space:nowrap; margin-left:auto;
}
.st-art-live-pill .dot{ width:5px; height:5px; border-radius:50%; background:#0a7a5a; }

/* mastery-mark footnote -- REQUIRED wherever a mastery-graded course is
   drawn (see TEXTURE_CONTRACT.md, "Mastery marks"). Never decorative, and
   never removed -- the limitation it states is true and must stay visible.
   Styled as a calm footnote (same tone as .st-art-caption below), not an
   alarm/error strip, so a first-time visitor doesn't meet a red flag before
   anything NavEd does well. The page's "What is still manual" section
   states the same limitation in full below the fold. */
.st-art-mastery-note{
  display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line); font-family:var(--font-mono); font-size:10.5px;
  color:rgba(58,54,46,0.55); line-height:1.5;
}
.st-art-mastery-note .st-icon{ color:rgba(58,54,46,0.4); }

/* ---------- caption under a drawn artifact ---------- */
.st-art-caption{
  text-align:left; font-family:var(--font-mono); font-size:11.5px; color:rgba(58,54,46,0.55);
  margin-top:12px; line-height:1.5;
}

/* ============ photo slot (below the fold only, never in .st-fold-grid) ============ */
.st-photo-row{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.st-photo-row.single{ grid-template-columns:1fr; max-width:560px; }
@media (max-width:640px){
  .st-photo-row{ grid-template-columns:1fr; }
}
.st-photo-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-hard); border:1px solid var(--line); background:var(--card-white);
  aspect-ratio:4/3; /* fixed aspect ratio -- prevents layout shift while the lazy image loads */
}
.st-photo-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.st-photo-caption{
  font-family:var(--font-mono); font-size:11px; color:rgba(58,54,46,.55);
  margin-top:10px; line-height:1.5;
}