/* ============================================================================
   The Fourth Style — Coptic / Kemetic project theme
   Egyptianizing Fourth Pompeian Style: painted architecture, framed panels,
   gilt filets, a frieze above and a dado below.   Spec: design/THEME.md
   WHY a single file: every page here is a stdlib-served single HTML file, and
   artifacts may not load CSS from our own folder — so generators INLINE this.
   Fonts (the one allowed external stylesheet host):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+Coptic&display=swap">
   ============================================================================ */

/* ── 1. tokens — every token's only unconditional definition is here ───────── */
:root{
  /* the six painted colours */
  /* "good vibes" palette (Yousef, 2026-09-28: "can we make the colours more good vibes"): the same six painted
     colours, sunlit — lotus coral for the red, Nile turquoise for the faience, sun gold for the gilt, warm
     sand for the plaster, and a Nile-evening blue instead of lamp-black for the dark room.  Text pairs ≥ 4.5:1. */
  --pompeian:#C0452C;      /* lotus coral (was Pompeian red #9B2C23) */
  --ochre:#E3A72F;         /* sun gold — DECORATION ONLY */
  --lampblack:#2A1E14;
  --faience:#0B7572;       /* Nile turquoise */
  --plaster:#FFF4E0;
  --papyrus:#467A22;       /* fresh papyrus green */
  --ochre-ink:#8A5A0A;     /* the readable gold, for words */

  /* semantic */
  --ok:#2E7D46; --warn:#8A5A0A; --danger:#B8321F;
  --on-ok:#FFFFFF; --on-warn:#FBF6EA; --on-danger:#FFFFFF;

  /* roles — light: the plaster room */
  --ground:#FFF4E0;              /* the wall: warm sunlit sand */
  --ground-tooth:rgba(42,30,20,.026);
  --field:#FFFAF0;               /* a panel's ground */
  --field-2:#FFF1DA;             /* inset / striped rows */
  --ink:#2A1E14;
  --ink-soft:#6B5642;
  --line:#F0DDBA;                /* hairline */
  --line-strong:#E2C48E;         /* frame line */
  --gilt:#E3A72F;
  --red-ground:#C0452C; --on-red:#FFFFFF;
  --faience-ground:#0B7572; --on-faience:#FFFFFF;
  --dark-ground:#1D4B57; --on-dark:#FFF4E0;       /* the frieze band: deep Nile blue */
  --accent:#C0452C;              /* primary action */
  --accent-ink:#C0452C;          /* the same, as text */
  --link:#0B7572;
  --mark:#FFE3A3;                /* search highlight ground */
  --sev-high:#FDE0D6; --sev-med:#FFF0C9; --sev-low:#D9F1EC;   /* flag severity grounds */
  --focus:#0B7572;
  --shadow:0 1px 0 rgba(42,30,20,.05), 0 6px 18px rgba(192,120,40,.10);
  --vignette-ink:#E3A72F;

  /* metrics */
  --t-display:clamp(26px,3.4vw,38px);
  --t-title:clamp(19px,2.2vw,23px);
  --t-lead:18px; --t-body:16px; --t-small:13px; --t-micro:11.5px;
  --t-coptic:19px;
  --gap:18px; --pad:16px; --radius:3px;        /* painted frames are square-ish */
  --frieze-h:26px; --zone-max:1180px;

  /* faces */
  --f-display:"Cinzel","Trajan Pro","Marcellus",Georgia,serif;
  --f-body:Literata,Georgia,"Iowan Old Style",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --f-coptic:"Antinoou","New Athena Unicode","Noto Sans Coptic",Literata,serif;
  --f-kemetic:"KemeticSerif","Kemetic Serif","IBM Plex Mono",ui-monospace,monospace;

  color-scheme:light dark;
}

/* dark — the lamp-black room */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pompeian:#FF9B7E; --ochre:#F3C25A; --faience:#63D5CA; --papyrus:#A9D46E;
    --ochre-ink:#F3C25A;
    --ok:#72D69A; --warn:#F2C04E; --danger:#FF8C7B;
    --on-ok:#0B1F14; --on-warn:#231805; --on-danger:#2A0D08;
    --ground:#12222B; --ground-tooth:rgba(246,238,223,.022);
    --field:#1A2D38; --field-2:#203644;
    --ink:#F6EEDF; --ink-soft:#BCAF9C;
    --line:#2A4150; --line-strong:#3B5769; --gilt:#E3A72F;
    --red-ground:#9A3F2B; --on-red:#FFF4E0;
    --faience-ground:#13606A; --on-faience:#F6EEDF;
    --dark-ground:#0C1920; --on-dark:#F6EEDF;
    --accent:#C0452C; --accent-ink:#FF9B7E;
    --link:#6FDCD0; --mark:#5A4812; --focus:#63D5CA; --sev-high:#4D2620; --sev-med:#4A3D12; --sev-low:#123F3C;
    --shadow:0 1px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,10,20,.4);
    --vignette-ink:#E3A72F;
  }
}
:root[data-theme="dark"]{
  --pompeian:#FF9B7E; --ochre:#F3C25A; --faience:#63D5CA; --papyrus:#A9D46E;
  --ochre-ink:#F3C25A;
  --ok:#72D69A; --warn:#F2C04E; --danger:#FF8C7B;
  --on-ok:#0B1F14; --on-warn:#231805; --on-danger:#2A0D08;
  --ground:#12222B; --ground-tooth:rgba(246,238,223,.022);
  --field:#1A2D38; --field-2:#203644;
  --ink:#F6EEDF; --ink-soft:#BCAF9C;
  --line:#2A4150; --line-strong:#3B5769; --gilt:#E3A72F;
  --red-ground:#9A3F2B; --on-red:#FFF4E0;
  --faience-ground:#13606A; --on-faience:#F6EEDF;
  --dark-ground:#0C1920; --on-dark:#F6EEDF;
  --accent:#C0452C; --accent-ink:#FF9B7E;
  --link:#6FDCD0; --mark:#5A4812; --focus:#63D5CA; --sev-high:#4D2620; --sev-med:#4A3D12; --sev-low:#123F3C;
  --shadow:0 1px 0 rgba(0,0,0,.35), 0 8px 22px rgba(0,10,20,.4);
  --vignette-ink:#E3A72F;
}

/* ── 2. base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:var(--t-body)/1.55 var(--f-body);
  /* the plaster tooth: a very low-contrast diagonal grain, never a texture image */
  background-image:repeating-linear-gradient(135deg,var(--ground-tooth) 0 1px,transparent 1px 5px);
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:.05em;margin:0 0 .4em;line-height:1.2}
h1{font-size:var(--t-display)} h2{font-size:var(--t-title)} h3{font-size:17px;letter-spacing:.06em}
p{margin:0 0 .8em}
a{color:var(--link);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
small,.small{font-size:var(--t-small)}
.micro{font:var(--t-micro)/1.4 var(--f-mono);color:var(--ink-soft);letter-spacing:.01em}
.mono{font-family:var(--f-mono)}
.hint{color:var(--ink-soft);font-size:var(--t-small)}
.lead{font-size:var(--t-lead);color:var(--ink-soft)}
.coptic{font:var(--t-coptic)/1.7 var(--f-coptic)}
.kemetic{font-family:var(--f-kemetic);line-height:1.6}
.greek{font-family:var(--f-body);color:var(--ink-soft)}
mark{background:var(--mark);color:var(--ink);padding:0 2px;border-radius:2px}
hr{border:0;border-top:1px solid var(--line);margin:var(--gap) 0}
::selection{background:var(--mark);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* ── 3. the wall: frieze · zone · panels · aediculae · dado ───────────────── */
/* 100vh, not 100%: the wall must reach the floor even when <html> has no height,
   so the dado stays at the bottom of a short page. */
.wall{min-height:100vh;display:flex;flex-direction:column}

/* frieze — a gilt filet, the ornament tile, a gilt filet. aria-hidden. */
.frieze{
  height:var(--frieze-h);flex:none;color:var(--gilt);
  border-top:1px solid var(--gilt);border-bottom:1px solid var(--gilt);
  background:var(--dark-ground);
  overflow:hidden;position:relative;
}
.frieze svg{display:block;height:100%;width:100%}
.frieze--light{background:transparent;border-color:var(--line-strong)}
.frieze--red{background:var(--red-ground)}
.frieze--thin{--frieze-h:16px;height:16px}

/* the main register */
.zone{flex:1;width:100%;max-width:var(--zone-max);margin:0 auto;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap)}
.zone--wide{max-width:none}
.zone--flush{padding:0;gap:0}
.row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:flex-start}
.row>*{flex:1 1 280px;min-width:0}
.grow{flex:1 1 auto;min-width:0}
.spacer{margin-left:auto}

/* panel — a framed field. The frame is the Fourth-Style filet:
   1px line, 10px of ground, 1px gilt inset (box-shadow, so it costs no layout). */
.panel{
  position:relative;background:var(--field);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:inset 0 0 0 10px var(--field), inset 0 0 0 11px var(--gilt), var(--shadow);
  padding:calc(var(--pad) + 6px);
}
.panel--flat{box-shadow:inset 0 0 0 10px var(--field), inset 0 0 0 11px var(--gilt)}
.panel--plain{box-shadow:var(--shadow);padding:var(--pad)}   /* no gilt inset: for dense lists */
.panel--red{background:var(--red-ground);color:var(--on-red);box-shadow:inset 0 0 0 10px var(--red-ground),inset 0 0 0 11px var(--gilt),var(--shadow)}
.panel--faience{background:var(--faience-ground);color:var(--on-faience);box-shadow:inset 0 0 0 10px var(--faience-ground),inset 0 0 0 11px var(--gilt),var(--shadow)}
.panel--dark{background:var(--dark-ground);color:var(--on-dark);box-shadow:inset 0 0 0 10px var(--dark-ground),inset 0 0 0 11px var(--gilt),var(--shadow)}
.panel--red .hint,.panel--faience .hint,.panel--dark .hint,
.panel--red label,.panel--faience label,.panel--dark label,
.panel--red .micro,.panel--faience .micro,.panel--dark .micro{color:inherit;opacity:.8}
.panel--red a,.panel--faience a,.panel--dark a{color:inherit;text-decoration:underline}
.panel-hd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.panel-hd h2,.panel-hd h3{margin:0}
.panel-bd>:last-child{margin-bottom:0}

/* aedicula — a panel promoted to architecture: two slender painted columns and a cornice.
   The columns are pure CSS (shaft + ochre fillet + flared capital/base) so they follow the theme
   with no DOM and no image. */
.aedicula{position:relative;padding-left:34px;padding-right:34px}
.aedicula::before,.aedicula::after{
  content:"";position:absolute;top:12px;bottom:12px;width:13px;pointer-events:none;
  background:
    /* capital and base: a flared ochre band */
    linear-gradient(var(--gilt),var(--gilt)) top/100% 3px no-repeat,
    linear-gradient(var(--gilt),var(--gilt)) bottom/100% 3px no-repeat,
    linear-gradient(var(--gilt),var(--gilt)) 0 10px/100% 1px no-repeat,
    linear-gradient(var(--gilt),var(--gilt)) 0 calc(100% - 10px)/100% 1px no-repeat,
    /* the shaft: two fillets with fluting between */
    linear-gradient(90deg,transparent 0 3px,var(--gilt) 3px 4px,transparent 4px 9px,var(--gilt) 9px 10px,transparent 10px);
  opacity:.85;
}
.aedicula::before{left:10px}
.aedicula::after{right:10px}
.aedicula>.cornice{height:1px;background:var(--gilt);opacity:.7;margin:0 0 12px}
@media (max-width:640px){ .aedicula{padding-left:var(--pad);padding-right:var(--pad)} .aedicula::before,.aedicula::after{display:none} }

/* the page head: a wall-head aedicula with the title and one vignette */
.wall-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.wall-head h1{margin:0}
.wall-head .sub{color:var(--ink-soft);font-size:var(--t-small);margin:2px 0 0}
.panel--red .wall-head .sub,.panel--dark .wall-head .sub,.panel--faience .wall-head .sub{color:inherit;opacity:.8}

/* vignette — the central picture of a section. One per section, centred, line art. */
.vignette{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--vignette-ink);margin:4px 0}
.vignette svg{display:block}
.vignette figcaption,.vignette .cap{font-size:var(--t-small);color:var(--ink-soft);text-align:center;letter-spacing:.04em;font-family:var(--f-display)}
.vignette--inline{flex-direction:row;margin:0}

/* dado — the heavy base band */
.dado{
  flex:none;background:var(--dark-ground);color:var(--on-dark);
  border-top:3px double var(--gilt);
  padding:10px var(--gap);font:var(--t-micro)/1.6 var(--f-mono);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.dado a{color:var(--on-dark);opacity:.85}
.dado button,.dado .btn{color:var(--on-dark);background:transparent;border-color:var(--gilt)}
.dado button:hover,.dado .btn:hover{background:var(--field);color:var(--ink)}
.dado .spacer{margin-left:auto}

/* ── 4. controls ──────────────────────────────────────────────────────────── */
input,select,textarea,button{font-family:inherit;font-size:var(--t-small);color:var(--ink)}
input,select,textarea{
  background:var(--field);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:7px 9px;min-height:32px;
  max-width:100%;min-width:0;      /* a textarea's intrinsic 20-col width otherwise widens the page */
}
input:hover,select:hover,textarea:hover{border-color:var(--gilt)}
input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.8}
textarea{line-height:1.5;resize:vertical}
select{padding-right:26px}
label{color:var(--ink-soft);font-size:var(--t-small)}
label.field{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.btn,button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--field);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:7px 13px;min-height:32px;cursor:pointer;
  font-family:var(--f-display);font-size:var(--t-small);letter-spacing:.07em;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.btn:hover,button:hover{border-color:var(--gilt);background:var(--field-2)}
.btn--primary,button.primary,button.go{background:var(--accent);border-color:var(--accent);color:#F7F0E1}
.btn--primary:hover,button.primary:hover,button.go:hover{background:var(--accent);border-color:var(--gilt);color:#FFF}
.btn--ok,button.ok{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.btn--ok:hover,button.ok:hover{border-color:var(--gilt)}
.btn--ghost{background:transparent}
.btn--on,button.on{background:var(--faience-ground);border-color:var(--faience-ground);color:var(--on-faience)}
button:disabled,.btn[disabled]{opacity:.5;cursor:default}
/* on a coloured panel the primary action inverts — a red button on a red ground is invisible */
.panel--red .btn--primary,.panel--red button.primary,.panel--red button.go{background:var(--on-red);color:var(--red-ground);border-color:var(--on-red)}
.panel--red .btn--primary:hover,.panel--red button.primary:hover,.panel--red button.go:hover{color:var(--red-ground);border-color:var(--gilt)}
.panel--faience .btn--primary,.panel--faience button.primary,.panel--faience button.go{background:var(--on-faience);color:var(--faience-ground);border-color:var(--on-faience)}
.panel--faience .btn--primary:hover,.panel--faience button.primary:hover,.panel--faience button.go:hover{color:var(--faience-ground);border-color:var(--gilt)}
.panel--red input,.panel--red select,.panel--faience input,.panel--faience select,.panel--dark input,.panel--dark select{background:var(--field);color:var(--ink)}
@media (max-width:640px){ .btn,button,input,select{min-height:44px} }

/* a tab strip = a painted architrave of buttons */
.tabs{display:flex;gap:6px;flex-wrap:wrap}

/* ── 5. tables, code, badges ──────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:var(--t-small)}
caption{text-align:left;font-family:var(--f-display);letter-spacing:.05em;padding:0 0 6px;color:var(--ink-soft)}
th{
  text-align:left;font-family:var(--f-display);font-weight:400;letter-spacing:.06em;
  color:var(--ink-soft);border-bottom:1px solid var(--gilt);padding:6px 8px;white-space:nowrap;
}
td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:var(--field-2)}
tbody tr:hover{background:var(--mark)}
td.num,th.num{text-align:right;font-family:var(--f-mono)}
.table-wrap{overflow-x:auto}

code,kbd,samp{font-family:var(--f-mono);font-size:.92em;background:var(--field-2);border:1px solid var(--line);border-radius:2px;padding:0 4px}
pre{
  font:var(--t-small)/1.6 var(--f-mono);background:var(--field);color:var(--ink);
  border:1px solid var(--line-strong);border-left:3px solid var(--gilt);border-radius:var(--radius);
  padding:12px 14px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
}
kbd{border-bottom-width:2px}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font:var(--t-micro)/1 var(--f-mono);letter-spacing:.03em;
  padding:3px 7px;border:1px solid var(--line-strong);border-radius:9px;color:var(--ink-soft);white-space:nowrap;
}
.badge--ok{color:var(--ok);border-color:var(--ok)}
.badge--warn{color:var(--warn);border-color:var(--warn)}
.badge--danger{color:var(--danger);border-color:var(--danger)}
.badge--faience{color:var(--faience);border-color:var(--faience)}
.badge--papyrus{color:var(--papyrus);border-color:var(--papyrus)}
.badge--red{color:var(--pompeian);border-color:var(--pompeian)}
.badge--solid{background:var(--accent);border-color:var(--accent);color:#F7F0E1}
.badge--mute{opacity:.8}

.chip-ok{color:var(--ok)} .chip-warn{color:var(--warn)} .chip-danger{color:var(--danger)}

/* a definition row: mono key, body value — the metadata idiom of this project */
.meta{display:flex;gap:10px;flex-wrap:wrap;font:var(--t-micro)/1.5 var(--f-mono);color:var(--ink-soft)}
.meta b{color:var(--faience);font-weight:500}

/* ── 6. motion — one entrance, nothing else ───────────────────────────────── */
@keyframes unveil{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel{animation:unveil .38s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 40ms)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── 7. print — the plaster room only ─────────────────────────────────────── */
@media print{
  :root{--ground:#fff;--field:#fff;--shadow:none}
  body{background:#fff;color:#000}
  .frieze,.dado{background:#fff;color:#8A5A18}
  .panel{box-shadow:inset 0 0 0 10px #fff, inset 0 0 0 11px #B98235;break-inside:avoid}
  button,.btn,form{display:none!important}
}