/* Comics — a framed strip with its own visual world.
 *
 * Everything here is scoped under .comic-frame: a comic paints its own ground
 * and commits to one look, so it must not inherit or leak the site theme. No
 * external fonts — system stacks only, same rule as site.css. Tahoma/Verdana
 * is the authentic dialog face anyway.
 */

.comic-frame{
  --desktop:#0a7d7d;
  --desktop-deep:#05585a;
  --chrome:#d4d0c8;
  --chrome-hi:#ffffff;
  --chrome-soft:#efece6;
  --chrome-lo:#8a867e;
  --chrome-dk:#0b0b0a;
  --title-a:#000f80;
  --title-b:#1585d1;
  --title-dead-a:#6e6e6e;
  --title-dead-b:#a9a9a9;
  --ink:#0b0b0a;
  --ink-soft:#4a4740;
  --danger:#a00000;
  --ok:#0a6b2e;
  --warn:#8a6a00;
  --crt:#08140c;
  --crt-ink:#4dff7a;
  --crt-dim:#2c8f4c;
  --ui: Tahoma, Verdana, "DejaVu Sans", Geneva, sans-serif;
  --term: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  background: radial-gradient(120% 90% at 50% 0%, var(--desktop) 0%, var(--desktop-deep) 100%);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 2px;
  overflow: hidden;
  margin: 1.6rem 0 2rem;
}

.comic-frame .strip{
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 20px 34px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* ---------- masthead ---------- */
.comic-frame .masthead{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.comic-frame .masthead h2{
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(26px, 6.4vw, 52px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 3px 3px 0 #04393a, 6px 6px 0 rgba(0,0,0,.26);
  text-wrap: balance;
  margin: 0;
  border: 0;
  padding: 0;
}
.comic-frame .kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #bdf1ef;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding: 6px 13px;
}
.comic-frame .dek{ max-width: 58ch; color:#e7fbf9; font-size:15px; text-wrap:balance; margin:0; }

/* ---------- window chrome ---------- */
.comic-frame .win{
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow:
    inset 1px 1px 0 var(--chrome-soft),
    inset -1px -1px 0 var(--chrome-lo),
    5px 6px 0 rgba(0,0,0,.30);
  padding: 3px;
  max-width: 100%;
}
.comic-frame .titlebar{
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 4px 4px 7px;
  display: flex; align-items: center; gap: 10px;
}
.comic-frame .titlebar .name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comic-frame .win.dead .titlebar{ background: linear-gradient(90deg, var(--title-dead-a), var(--title-dead-b)); }
.comic-frame .tbtns{ display:flex; gap:3px; flex:none; }
.comic-frame .tbtn{
  width:19px; height:18px;
  background: var(--chrome);
  border:1px solid;
  border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  color: var(--ink);
  font-size:11px; font-weight:700; line-height:15px; text-align:center;
}
.comic-frame .winbody{ padding: 17px 15px 13px; display:flex; flex-direction:column; gap:13px; }
.comic-frame .row{ display:flex; gap:14px; align-items:flex-start; }
.comic-frame .row .msg{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.comic-frame .msg p{ margin:0; }
.comic-frame .msg p.lead{ font-weight:700; }
.comic-frame .msg .fine{ font-size:13px; color: var(--ink-soft); }
.comic-frame .icon{ flex:none; width:33px; height:33px; }
.comic-frame code{
  font-family: var(--term); font-size:.92em;
  background: rgba(0,0,0,.07); padding: 1px 4px; border-radius: 2px; color: var(--ink);
}

.comic-frame .btnrow{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.comic-frame .btn{
  font-family: var(--ui); font-size:13px;
  background: var(--chrome); color: var(--ink);
  border:2px solid;
  border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow: inset 1px 1px 0 var(--chrome-soft), inset -1px -1px 0 var(--chrome-lo);
  padding: 5px 15px; min-width: 84px; cursor: default;
}
.comic-frame .btn.default{ outline:1px dotted var(--ink); outline-offset:-5px; font-weight:700; }
.comic-frame .btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }
.comic-frame .btn:active{
  border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
  box-shadow: inset 1px 1px 0 var(--chrome-lo);
}

.comic-frame .field{
  background:#fff;
  border:2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding: 9px 11px; font-size:13px;
}
.comic-frame .checkline{ display:flex; gap:9px; align-items:flex-start; font-size:13px; }
.comic-frame .cbox{
  flex:none; width:14px; height:14px; margin-top:2px; background:#fff;
  border:2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  font-size:11px; line-height:11px; text-align:center; font-weight:700;
}

.comic-frame .prog{
  background:#fff; border:2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding:2px; display:flex; gap:2px; overflow:hidden;
}
.comic-frame .prog i{ display:block; width:13px; height:15px; background: var(--title-a); flex:none; }
.comic-frame .prog i.pale{ background:#b4b0a8; }

/* ---------- terminal ---------- */
.comic-frame .term{
  background: var(--crt); color: var(--crt-ink);
  font-family: var(--term); font-size:14px; line-height:1.45;
  padding: 13px 14px;
  border:2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  overflow-x: auto; white-space: pre;
}
.comic-frame .term .dim{ color: var(--crt-dim); }
.comic-frame .term .bad{ color:#ff6b6b; }
.comic-frame .caret{
  display:inline-block; width:8px; height:14px; background: var(--crt-ink);
  vertical-align:-2px; animation: comic-blink 1.06s steps(1,end) infinite;
}
@keyframes comic-blink{ 50%{ opacity:0; } }

/* ---------- compatibility table ---------- */
.comic-frame .compat{ display:flex; flex-direction:column; }
.comic-frame .compat .crow{
  display:flex; gap:12px; align-items:baseline;
  padding: 8px 10px; border-bottom:1px solid #bcb8b0;
}
.comic-frame .compat .crow:last-child{ border-bottom:0; }
.comic-frame .compat .crow.us{ background:#e9e5dd; }
.comic-frame .compat .what{ flex:1; min-width:0; }
.comic-frame .compat .yr{ flex:none; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size:13px; }
.comic-frame .compat .verdict{ flex:none; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.comic-frame .compat .verdict.yes{ color: var(--ok); }
.comic-frame .compat .verdict.no{ color: var(--danger); }
.comic-frame .compat .verdict.meh{ color: var(--warn); }

/* ---------- scenes ---------- */
.comic-frame .scene{ display:flex; flex-direction:column; gap:12px; }
.comic-frame .snum{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#c9f5f2; display:flex; align-items:center; gap:11px;
}
.comic-frame .snum::after{ content:""; flex:1; height:1px; background: rgba(255,255,255,.3); }
.comic-frame .stack{ display:flex; flex-direction:column; }
.comic-frame .stack > .win + .win{ margin: -22px 0 0 34px; }
.comic-frame .beat{ font-size:14px; color:#dff9f7; max-width:60ch; margin:0; }
.comic-frame .beat b{ color:#ffffff; }

/* ---------- taskbar ---------- */
.comic-frame .taskbar{
  background: var(--chrome);
  border-top:2px solid var(--chrome-hi);
  padding: 4px 8px;
  display:flex; align-items:center; gap:9px; font-size:13px;
}
.comic-frame .start{
  font-weight:700; font-size:13px; background: var(--chrome);
  border:2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  padding: 3px 11px 3px 8px; display:flex; align-items:center; gap:6px; flex:none;
}
.comic-frame .flagbits{ display:grid; grid-template-columns:6px 6px; grid-template-rows:6px 6px; gap:1px; }
.comic-frame .flagbits span{ display:block; }
.comic-frame .taskitem{
  flex:1; min-width:0;
  border:2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding:3px 9px; color: var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.comic-frame .tray{
  border:2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding:3px 10px; font-variant-numeric: tabular-nums; flex:none;
}
.comic-frame .colophon{
  color:#bfeeeb; font-size:12px; text-align:center; max-width:62ch;
  margin:0 auto; line-height:1.6;
}

/* ---------- index listing ---------- */
.comics-list{ list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:1.5rem; }
.comics-list li{ display:flex; flex-direction:column; gap:.25rem; }
.comic-title{ font-size:1.15rem; font-weight:600; }
.comic-date{ font-size:.85rem; }
.comic-summary{ margin:.15rem 0 0; max-width:62ch; }

@media (max-width: 620px){
  .comic-frame .strip{ padding: 30px 13px 26px; gap:40px; }
  .comic-frame .stack > .win + .win{ margin: -14px 0 0 12px; }
  .comic-frame .row{ gap:11px; }
  .comic-frame .btn{ min-width:0; flex:1; }
  .comic-frame .masthead h2{ text-shadow: 2px 2px 0 #04393a, 4px 4px 0 rgba(0,0,0,.26); }
}
@media (prefers-reduced-motion: reduce){
  .comic-frame .caret{ animation: none; }
}