/* ============================================================
   HIemail — State EOC Secure Mail (training simulation)
   Design thesis: institutional government-webmail authenticity.
   Human content = system sans.  Machine chrome = monospace.
   One deliberate shift: the IOC console goes dark / analyst mode.
   ============================================================ */

:root{
  /* institutional palette */
  --navy:        #123a5e;   /* masthead / chrome            */
  --navy-deep:   #0e2c48;   /* nav rail                     */
  --navy-line:   #24507a;   /* chrome hairlines             */
  --accent:      #1668b3;   /* links, selection, focus      */
  --accent-soft: #e3edf7;   /* selected row wash            */
  --ink:         #1b2732;   /* primary text                 */
  --ink-soft:    #45566a;   /* secondary text               */
  --muted:       #6d7d8c;   /* tertiary / meta              */
  --line:        #dde3ea;   /* hairline borders             */
  --line-soft:   #eef1f5;   /* faint separators             */
  --bg:          #eceff3;   /* app background (cool gray)    */
  --pane:        #ffffff;   /* list + reader surfaces        */
  --rail-ink:    #c7d6e6;   /* rail text                    */
  --rail-ink-dim:#8fa6bd;   /* rail meta                    */

  /* status / hazard */
  --warn:        #9a6410;   /* storm amber (text)           */
  --warn-bg:     #fdf3dd;   /* storm amber (fill)           */
  --warn-line:   #e9cf95;
  --sim-bg:      #2a2113;   /* hazard banner                */
  --sim-stripe:  #f2c14e;   /* hazard chip / rule           */
  --danger:      #b3341f;

  /* console (analyst mode) */
  --con-bg:      #0b1620;
  --con-bg-2:    #0f1e2b;
  --con-panel:   #10222f;
  --con-line:    #1d3446;
  --con-ink:     #c9dbe8;
  --con-dim:     #6f8ba1;
  --con-green:   #46d38a;
  --con-cyan:    #46b6d3;
  --con-amber:   #e5b567;
  --con-red:     #e0664e;

  --mono: "SFMono-Regular", "Cascadia Mono", "Consolas", "Liberation Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --rail-w: 216px;
  --list-w: 384px;
}

*{ box-sizing:border-box; }

/* The hidden attribute must always win, even over author display rules
   (e.g. .reader-empty{display:flex}). Without this, toggling [hidden] in JS
   would not actually hide flex/grid containers. */
[hidden]{ display:none !important; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}

.visually-hidden{
  position:absolute!important; width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* focus visibility (quality floor) */
:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.console :focus-visible{ outline:2px solid var(--con-cyan); outline-offset:1px; }

/* ---------- hazard / simulation banner ---------- */
.simbar{
  display:flex; align-items:center; gap:10px;
  background:
    repeating-linear-gradient(-45deg, #241c10 0 14px, #2a2113 14px 28px);
  color:#f4e7c6;
  padding:5px 14px;
  font-size:11.5px;
  letter-spacing:.02em;
  border-bottom:2px solid var(--sim-stripe);
}
.simbar-chip{
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.14em;
  background:var(--sim-stripe); color:#231a08;
  padding:2px 8px; border-radius:2px; flex:none;
}
.simbar-text{ opacity:.9; }

/* ---------- masthead ---------- */
.masthead{
  display:flex; align-items:center; gap:20px;
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:0 18px; height:52px;
  border-bottom:1px solid var(--navy-line);
  flex:none;
}
.brand{ display:flex; align-items:baseline; gap:10px; flex:none; }
.brand-glyph{ font-size:17px; color:#bcd6ef; transform:translateY(1px); }
.brand-word{
  font-family:var(--mono); font-weight:700; font-size:18px;
  letter-spacing:.02em; color:#fff;
}
.brand-sub{
  font-size:11.5px; color:#9fbcd8; letter-spacing:.01em;
  border-left:1px solid var(--navy-line); padding-left:10px;
}
.masthead-search{ flex:1; display:flex; justify-content:center; }
.masthead-search input{
  width:min(560px, 100%);
  font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:#f4f7fa; border:1px solid var(--navy-line);
  border-radius:5px; padding:7px 12px;
}
.masthead-search input::placeholder{ color:#8aa0b4; }
.masthead-search input:focus{ background:#fff; outline:2px solid #7fb0e0; outline-offset:0; }
.masthead-acct{ display:flex; align-items:center; gap:10px; flex:none; }
.acct-mail{ font-size:12.5px; color:#cfe0f0; font-family:var(--mono); }
.acct-badge{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  background:#1d4d7a; color:#dcebf8; padding:3px 8px; border-radius:3px;
}

/* ---------- app shell ---------- */
.app{ flex:1; display:flex; min-height:0; }

/* ---------- nav rail ---------- */
.rail{
  width:var(--rail-w); flex:none;
  background:var(--navy-deep); color:var(--rail-ink);
  display:flex; flex-direction:column;
  border-right:1px solid #0a2137;
}
.rail-list{ list-style:none; margin:0; padding:8px 8px; flex:1; overflow:auto; }
.rail-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin:1px 0; border-radius:5px;
  cursor:pointer; user-select:none;
  color:var(--rail-ink); font-size:13.5px;
  border:1px solid transparent;
}
.rail-item:hover{ background:#14375a; }
.rail-item.active{ background:#1c4a77; color:#fff; border-color:#2a5c8e; }
.rail-ico{ width:18px; text-align:center; font-size:14px; opacity:.85; flex:none; }
.rail-label{ flex:1; }
.rail-badge{
  font-family:var(--mono); font-size:11px; font-weight:600;
  background:#0e2740; color:#a8c6e2; padding:1px 7px; border-radius:9px;
  min-width:20px; text-align:center;
}
.rail-item.active .rail-badge{ background:#0c2740; color:#cfe4f6; }
.rail-badge.zero{ display:none; }
.rail-sep{ height:1px; background:#123554; margin:8px 6px; }
.rail-item.report{ color:#bfe6d2; }
.rail-item.report .rail-ico{ color:var(--con-green); opacity:1; }
.rail-item.report.active{ background:#123f33; border-color:#1f6a4d; color:#dbf5e8; }

.rail-foot{ padding:10px 14px; border-top:1px solid #0a2137; font-size:11px; color:var(--rail-ink-dim); }
.rail-foot-label{ text-transform:uppercase; letter-spacing:.12em; font-size:9.5px; margin-bottom:3px; }
.rail-foot-val{ font-family:var(--mono); display:flex; align-items:center; gap:6px; }
.dot-ok{ width:7px;height:7px;border-radius:50%; background:var(--con-green); box-shadow:0 0 0 2px rgba(70,211,138,.2); flex:none; }

/* ---------- main region ---------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }

/* ---------- storm strip ---------- */
.stormstrip{
  display:flex; align-items:center; gap:0;
  background:var(--warn-bg); color:var(--warn);
  border-bottom:1px solid var(--warn-line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  padding:0 14px; height:28px; flex:none; overflow:hidden;
}
.storm-name{ font-weight:700; letter-spacing:.06em; }
.storm-seg{ padding:0 12px; position:relative; }
.storm-seg::before{ content:"·"; position:absolute; left:-2px; opacity:.5; }
.storm-phase{ color:#8a2f16; font-weight:700; }
.storm-clock{ margin-left:auto; color:#7c5a1e; letter-spacing:.05em; }

/* ---------- mail view ---------- */
.mailview{ flex:1; display:flex; min-height:0; }

/* message list column */
.listcol{
  width:var(--list-w); flex:none; background:var(--pane);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.listhead{
  display:flex; align-items:baseline; gap:8px;
  padding:11px 16px; border-bottom:1px solid var(--line); flex:none;
}
.listhead-title{ font-size:15px; font-weight:650; color:var(--ink); }
.listhead-count{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }

.msglist{ list-style:none; margin:0; padding:0; overflow:auto; flex:1; }
.msgrow{
  display:grid;
  grid-template-columns:26px 1fr auto;
  grid-template-rows:auto auto auto;
  column-gap:8px;
  padding:9px 14px 9px 10px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer; position:relative;
}
.msgrow:hover{ background:#f6f9fc; }
.msgrow.selected{ background:var(--accent-soft); }
.msgrow.selected::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
.msg-star{
  grid-row:1 / span 3; align-self:center; justify-self:center;
  font-size:15px; line-height:1; color:#c3ccd6; cursor:pointer;
  background:none; border:0; padding:2px;
}
.msg-star.on{ color:#e8b423; }
.msg-star:hover{ color:#e8b423; }
.msg-top{ display:flex; align-items:baseline; gap:8px; grid-column:2; min-width:0; }
.msg-from{ font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.msg-date{ grid-column:3; grid-row:1; font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; align-self:baseline; }
.msg-line2{ grid-column:2 / span 2; display:flex; align-items:center; gap:8px; margin-top:1px; min-width:0; }
.msg-sub{ flex:1; min-width:0; font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-snip{ grid-column:2 / span 2; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

.msgrow.unread .msg-from{ font-weight:700; }
.msgrow.unread .msg-sub{ color:var(--ink); font-weight:600; }
.msgrow.unread::after{
  content:""; position:absolute; left:2px; top:14px; width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}
.msg-badges{ display:inline-flex; gap:5px; align-items:center; flex:none; }
.msg-attach{ font-size:12px; color:var(--muted); }
.msg-imp{ color:#c98a1a; font-size:12px; }
.msg-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
  color:#5b6b7a; background:#eef2f6; border:1px solid #e0e6ec;
  padding:0 5px; border-radius:8px; white-space:nowrap;
}
.list-empty{ padding:40px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* reading pane column */
.readcol{ flex:1; background:var(--pane); display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; }
.reader-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--muted); gap:10px;
}
.reader-empty-glyph{ font-size:40px; color:#cdd6e0; }

.reader{ flex:1; overflow:auto; padding:20px 26px 40px; }
.reader-subject{ font-size:19px; font-weight:650; color:var(--ink); margin:0 0 14px; line-height:1.3; }
.reader-headers{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:6px;
  background:#fbfcfd;
}
.hdr-row{ display:flex; gap:10px; padding:5px 12px; font-size:12.5px; border-bottom:1px solid var(--line-soft); }
.hdr-row:last-child{ border-bottom:0; }
.hdr-k{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); width:74px; flex:none; padding-top:1px;
}
.hdr-v{ color:var(--ink); word-break:break-word; }
.hdr-v .addr{ color:var(--ink-soft); }
.hdr-v .name{ font-weight:600; color:var(--ink); }

.orig-toggle{
  margin:2px 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  color:var(--accent); background:none; border:0; cursor:pointer; padding:2px 0;
}
.orig-toggle:hover{ text-decoration:underline; }
.orig-block{
  font-family:var(--mono); font-size:11.5px; color:#3d4a57; line-height:1.6;
  background:#0f1e2b; color:#c9dbe8; border-radius:6px; padding:12px 14px; margin:0 0 16px;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
}
.orig-block .ok{ color:var(--con-green); }
.orig-block .ov-k{ color:#7fa9c9; }

.reader-body{ font-size:14px; color:var(--ink); line-height:1.6; max-width:74ch; }
.reader-body p{ margin:0 0 11px; }
.reader-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.reader-body a:hover{ color:#0f4f8c; }
.reader-body .msg-sig{ margin-top:16px; padding-top:10px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:13px; }
.reader-body ul,.reader-body ol{ margin:0 0 11px; padding-left:22px; }
.reader-body blockquote{ margin:0 0 11px; padding:2px 0 2px 12px; border-left:3px solid var(--line); color:var(--ink-soft); }

.reader-attach{ margin:18px 0 0; border-top:1px solid var(--line); padding-top:12px; }
.reader-attach-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.att-chip{
  display:inline-flex; align-items:center; gap:8px; margin:0 8px 8px 0;
  border:1px solid var(--line); border-radius:6px; padding:7px 11px; background:#fbfcfd;
  font-size:12.5px; color:var(--ink);
}
.att-ico{ font-size:15px; }
.att-meta{ color:var(--muted); font-family:var(--mono); font-size:11px; }
.att-ext-exe .att-ico{ color:var(--danger); }

/* browser-style link status bar */
.linkbar{
  flex:none; height:0; overflow:hidden;
  font-family:var(--mono); font-size:11px; color:#cfe0f0;
  background:var(--navy-deep); padding:0 12px;
  display:flex; align-items:center; gap:8px;
  transition:height .08s linear;
  white-space:nowrap; text-overflow:ellipsis;
}
.linkbar.show{ height:24px; }
.linkbar .lb-k{ color:#8fb2d3; }

/* ============================================================
   IOC REPORTING CONSOLE  (analyst mode)
   ============================================================ */
.console{
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 400px at 70% -10%, #12283a 0%, transparent 60%),
    var(--con-bg);
  color:var(--con-ink); font-family:var(--mono);
}
.con-head{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--con-line);
  background:var(--con-bg-2); font-size:12px; letter-spacing:.03em;
}
.con-prompt{ color:var(--con-green); font-weight:700; }
.con-sep{ color:var(--con-dim); }
.con-host{ color:var(--con-cyan); }
.con-secure{ color:var(--con-dim); }
.con-progress{ margin-left:auto; color:var(--con-amber); font-weight:600; }

.con-body{ flex:1; display:flex; flex-direction:column; min-height:0; padding:16px 18px; max-width:960px; width:100%; }
.con-intro{ color:var(--con-dim); font-size:12.5px; line-height:1.7; margin-bottom:12px; }
.con-intro b{ color:var(--con-ink); font-weight:600; }
.con-intro .k{ color:var(--con-cyan); }

.con-log{
  flex:1; overflow:auto; min-height:80px;
  border:1px solid var(--con-line); border-radius:6px; background:rgba(4,12,20,.5);
  padding:12px 14px; font-size:12.5px; line-height:1.7;
}
.con-log:empty::before{ content:"// no indicators reported yet"; color:#3f566a; }
.logline{ white-space:pre-wrap; word-break:break-word; margin-bottom:2px; }
.logline .ts{ color:#4d6a82; }
.logline.in .arrow{ color:var(--con-dim); }
.logline.in .val{ color:var(--con-ink); }
.logline.ok{ color:var(--con-green); }
.logline.dup{ color:var(--con-amber); }
.logline.miss{ color:var(--con-red); }
.logline.sys{ color:var(--con-dim); }
.flaghit{
  display:block; margin:6px 0 10px; padding:10px 12px;
  border:1px solid #1f6a4d; border-left:3px solid var(--con-green);
  background:linear-gradient(90deg, rgba(70,211,138,.10), rgba(70,211,138,0));
  border-radius:4px;
}
.flaghit .fl-label{ color:var(--con-dim); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.flaghit .fl-val{ display:block; color:var(--con-green); font-size:15px; font-weight:700; letter-spacing:.02em; margin-top:3px; word-break:break-all; }

.con-inputline{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  border:1px solid var(--con-line); border-radius:6px; background:var(--con-panel);
  padding:0 12px;
}
.con-inputline:focus-within{ border-color:var(--con-cyan); box-shadow:0 0 0 1px var(--con-cyan) inset; }
.con-caret{ color:var(--con-green); font-weight:700; }
#iocInput{
  flex:1; background:none; border:0; color:var(--con-ink);
  font-family:var(--mono); font-size:13.5px; padding:11px 0; outline:none;
}
#iocInput::placeholder{ color:#48607a; }
.con-submit{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  color:#06231a; background:var(--con-green); border:0; border-radius:4px;
  padding:7px 16px; cursor:pointer;
}
.con-submit:hover{ background:#5ce09a; }
.con-submit:active{ transform:translateY(1px); }

.con-tools{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.con-reset{
  font-family:var(--mono); font-size:11px; color:var(--con-dim);
  background:none; border:1px solid var(--con-line); border-radius:4px;
  padding:5px 10px; cursor:pointer;
}
.con-reset:hover{ color:var(--con-red); border-color:#5a2a22; }
.con-hint-note{ font-size:10.5px; color:#3f566a; }

.cursor-blink::after{ content:"▍"; color:var(--con-green); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

@keyframes flagreveal{
  0%{ opacity:0; transform:translateY(4px); filter:blur(3px); }
  100%{ opacity:1; transform:none; filter:none; }
}
.flaghit{ animation:flagreveal .5s ease both; }

/* ---------- footer ---------- */
.footer{
  flex:none; background:var(--navy-deep); color:#8fa6bd;
  font-size:11px; padding:6px 16px; text-align:center; letter-spacing:.02em;
  border-top:1px solid #0a2137;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  :root{ --list-w:320px; }
  .brand-sub{ display:none; }
}
@media (max-width:820px){
  .app{ flex-direction:column; }
  .rail{
    width:100%; flex-direction:row; overflow-x:auto; border-right:0;
    border-bottom:1px solid #0a2137;
  }
  .rail-list{ display:flex; padding:6px; flex:1; }
  .rail-item{ flex:none; white-space:nowrap; }
  .rail-label{ flex:none; }
  .rail-sep{ width:1px; height:auto; margin:6px; }
  .rail-foot{ display:none; }
  .mailview{ flex-direction:column; }
  .listcol{ width:100%; max-height:42vh; border-right:0; border-bottom:1px solid var(--line); }
  .readcol{ min-height:40vh; }
  .masthead-search{ display:none; }
}
@media (max-width:520px){
  .brand-word{ font-size:16px; }
  .stormstrip{ font-size:10.5px; }
  .storm-clock{ display:none; }
  .con-progress{ width:100%; margin:4px 0 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .cursor-blink::after{ animation:none; }
}