/* 夜鷺事件 static version: no JavaScript, no SVG, no web fonts.
   Same night-workstation palette as the interactive version, laid out as a readable case file. */
:root {
  color-scheme: dark;
  --desk: #0f141b;
  --panel: #1b232d;
  --panel-2: #232d39;
  --raise: #2c3846;
  --line: #354353;
  --fg: #e7eaee;
  --muted: #8f9cad;
  --accent: #e3a33b;
  --accent-ink: #1a1206;
  --danger: #e2674f;
  --ok: #6cc08a;
  --term-bg: #0b0e12;
  --term-fg: #cdd5df;
  --term-key: #8fb3d9;
  --font-sans: "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-serif: "Songti TC", "Noto Serif CJK TC", "Noto Serif TC", "PMingLiU", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--desk); }
body { margin: 0; background: var(--desk); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.75; padding-inline: 16px; }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }
h1, h2 { text-wrap: balance; line-height: 1.35; }
h1 { font-family: var(--font-serif); font-size: 26px; margin: 18px 0 6px; }
h2 { font-size: 17px; margin: 26px 0 8px; }
code { font-family: var(--font-mono); font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.top { max-width: 960px; margin: 0 auto; padding-block: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--fg); text-decoration: none; letter-spacing: .04em; }
.brand small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--accent); }
.main { max-width: 960px; margin: 0 auto; padding-block: 8px 60px; }
.lead { color: var(--muted); max-width: 42em; }
.note { color: var(--muted); font-size: 13px; }
.crumb { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-top: 16px; }
.go { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 8px 18px; border-radius: 8px; text-decoration: none; }
.scroll { overflow-x: auto; }

/* ---------- entry ---------- */
.cover { max-width: 36em; margin: 12vh auto 0; }
.cover h1 { font-size: 44px; letter-spacing: .12em; margin: 4px 0; }
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; color: var(--accent); margin: 0; }
.cover .lead { font-size: 17px; }
.aside { margin-top: 32px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }
.aside p { margin: 0 0 6px; }

/* ---------- chat ---------- */
.chat { max-width: 640px; margin: 24px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chat-head { display: flex; gap: 10px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.chat-head span { font-size: 12px; color: var(--ok); }
.log { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
/* Opening chat fills the window like a messaging app. column-reverse makes the log
   open scrolled to its newest message, with no JavaScript. */
.chat-page .main { padding-block: 0; }
.chat.intro { display: flex; flex-direction: column; height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: 960px; margin-block: 16px; }
.chat.intro .log { flex: 1; min-height: 0; overflow-y: auto; flex-direction: column-reverse; gap: 0; }
.log-in { display: flex; flex-direction: column; gap: 8px; }
.chat.intro .replies { flex: 0 0 auto; }
.bub { max-width: 84%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }
.bub.them { background: var(--raise); align-self: flex-start; border-bottom-left-radius: 4px; }
.bub.me { background: #2d4b6b; align-self: flex-end; border-bottom-right-radius: 4px; }
.tm { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.sys { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }
.filecard { display: flex; gap: 10px; align-items: center; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; align-self: flex-start; }
.filecard .fi { width: 38px; height: 38px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 11px var(--font-mono); }
.filecard small { color: var(--muted); }
.replies { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.label { font-size: 12px; color: var(--muted); margin: 0; }
.reply { display: block; padding: 9px 12px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; color: var(--fg); text-decoration: none; line-height: 1.5; }
.reply:hover, .reply:focus-visible { border-color: var(--accent); }
.reply.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; text-align: center; }

/* ---------- workstation ---------- */
.mission { padding-left: 1.4em; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 16px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); }
.tile:hover { border-color: var(--accent); }
.tile b { color: var(--accent); }
.tile span { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.facts li { margin-bottom: 4px; }

/* ---------- browser frame ---------- */
.browser { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.b-bar { display: flex; gap: 6px; align-items: center; margin: 8px; padding: 5px 10px; background: var(--desk); border: 1px solid var(--line); border-radius: 7px; font: 13px var(--font-mono); min-width: 0; }
.b-lock { color: var(--ok); }
.b-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-bm { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 0 12px 8px; font-size: 13px; }
.b-bm a { color: var(--muted); text-decoration: none; }
.b-bm a:hover { color: var(--fg); }
.b-view { background: var(--web-bg); color: var(--web-fg); font-size: 14px; }
.b-view a { color: #1a3d8f; }
.b-view .f-thread, .b-view .p-user, .b-view .site-btn, .b-view .pin-btn { color: inherit; text-decoration: none; }
.b-view .p-logo { color: var(--pic-accent); text-decoration: none; }
.static-box { padding: 10px 16px; color: var(--web-muted); background: var(--web-bg); }
.static-box .sq { color: var(--web-fg); }
.static-tips { font-size: 13px; color: var(--web-muted); text-align: center; margin: 8px auto; max-width: 40em; line-height: 2; }
.static-tips a { white-space: nowrap; }
.p-bar .static-tips { text-align: left; margin: 0; flex-basis: 100%; }
.pin-btn { display: inline-block; border: 1px solid var(--web-line); background: var(--web-bg); color: var(--web-muted); font-size: 12px; border-radius: 999px; padding: 1px 10px; }
.awu-note { margin: 16px 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: #fff7e6; color: #3a2e10; border-radius: 4px; }
.awu-note p { margin: 4px 0 0; }

/* ---------- files ---------- */
.data { border-collapse: collapse; width: 100%; font-size: 14px; }
.data th, .data td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.data th { color: var(--muted); font-weight: 500; }
.files td:last-child { width: 6em; }
.chan { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.slk { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.slk .av { flex: 0 0 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.slk small { font-family: var(--font-mono); color: var(--muted); }
.txt { white-space: pre-wrap; font-family: var(--font-sans); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }

/* ---------- photo ---------- */
.photo { display: block; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.photo img { display: block; width: 100%; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }

/* ---------- terminal ---------- */
.term { background: var(--term-bg); color: var(--term-fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font: 13px/1.65 var(--font-mono); }
.term details { border-bottom: 1px solid #1c232c; padding: 6px 0; }
.term details:last-child { border-bottom: 0; }
.term summary { cursor: pointer; word-break: break-all; }
.term summary:hover { color: #fff; }
.term pre { margin: 6px 0 4px; white-space: pre-wrap; word-break: break-all; font: inherit; color: var(--term-fg); }
.term .p { color: var(--ok); }
.term .k { color: var(--term-key); }

/* ---------- notes, hints, report ---------- */
.grid th, .grid td { text-align: center; min-width: 4.5em; height: 2.6em; }
.grid th:first-child, .grid td:first-child { text-align: left; }
.people li { margin-bottom: 2px; }
.hint { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; background: var(--panel); }
.hint summary, .q summary { cursor: pointer; color: var(--accent); }
.hint p { margin: 6px 0 2px; }
.q { border-top: 1px solid var(--line); padding-top: 4px; }
.opts { color: var(--muted); }
.q details { margin-bottom: 14px; }
.accuse { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.accuse a { display: flex; flex-direction: column; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); text-decoration: none; font-weight: 700; }
.accuse a:hover { border-color: var(--accent); }
.accuse small { font-weight: 400; color: var(--muted); font-size: 12px; }

/* ---------- ending ---------- */
.sol { max-width: 46em; margin: 24px auto 0; }
.sol-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--accent); margin: 0; }
.sol-title { font-family: var(--font-serif); font-size: 28px; margin: 4px 0 6px; }
.sol h3 { font-size: 14px; letter-spacing: .1em; color: var(--accent); margin: 22px 0 6px; }
.sol-scroll { overflow-x: auto; }
.sol-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.sol-table th, .sol-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.sol-table th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.sol-grid td, .sol-grid th { text-align: center; white-space: nowrap; }
.sol-grid td:first-child, .sol-grid th:first-child { text-align: left; }
.sol-grid .y { color: var(--ok); }
.sol-grid .n { color: var(--danger); }
.sol-grid .m { color: var(--accent); }
.rank { background: var(--panel-2); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 16px; margin: 14px 0; }
.rank ul { margin: 6px 0; padding-left: 1.2em; }
.rank p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* Blue Magpie's own rules on top of engine/static.css: emails and the images page */
.mail { background: #fff; color: #1f2328; border-radius: 8px; padding: 14px 18px; }
.mail h2 { margin: 0 0 8px; font-size: 17px; }
.mail .kv { margin: 0 0 10px; }
.mail-body { background: none; border: 0; padding: 0; color: inherit; white-space: pre-wrap; }
.raw { margin-top: 12px; }
.raw summary { cursor: pointer; }
.photo.shot { max-width: 320px; }
.qr { display: block; background: #fff; padding: 8px; border-radius: 6px; }