/* ------------------------------------------------------------------
   CDE / Motif revival theme.
   Deliberately fixed colours: this is a period look, not a themeable
   design system, so there is no dark-mode variant.
   ------------------------------------------------------------------ */
:root{
  --face:#aeb2c3;          /* classic CDE panel lavender-grey */
  --face-hi:#d9dce7;       /* top/left bevel */
  --face-lo:#5b5f70;       /* bottom/right bevel */
  --face-press:#989cae;
  --face-dim:#9da1b3;
  --ink:#0f1018;
  --ink-soft:#33364a;
  --backdrop:#3b535f;      /* dtlogin root window teal */
  --title:#68708f;
  --title-lo:#434963;
  --title-hi:#9aa0bd;
  --title-ink:#ffffff;
  --field:#9ea2b4;
  --sel:#27306b;
  --sel-ink:#ffffff;
  --alarm:#7c1414;
  --led:#8ef09b;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Verdana,"DejaVu Sans",Geneva,Tahoma,sans-serif;
  font-size:13px;
  line-height:1.4;
  color:var(--ink);
  background-color:var(--backdrop);
  /* 50% stipple, the way the CDE root window was dithered */
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%),
    linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%);
  background-size:4px 4px;
  background-position:0 0,2px 2px;
}

/* ---------- bevels ---------- */
.out{border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi)}
.in{border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo)}

/* ---------- window chrome ---------- */
.frame{
  background:var(--face);
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  box-shadow:0 0 0 1px #262832, 7px 7px 0 rgba(0,0,0,.32);
  padding:3px;
}
.titlebar{
  display:flex;align-items:center;gap:8px;
  padding:4px 5px;
  background:var(--title);color:var(--title-ink);
  border:2px solid;border-color:var(--title-hi) var(--title-lo) var(--title-lo) var(--title-hi);
}
.titlebar .name{
  flex:1;font-weight:700;font-size:12px;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-box{
  width:15px;height:15px;flex:none;background:var(--face);
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.tb-box.menu{position:relative}
.tb-box.menu::after{
  content:"";position:absolute;left:2px;right:2px;top:4px;height:3px;
  background:var(--face-lo);
}
.tb-box.max::after{
  content:"";display:block;width:7px;height:7px;margin:2px;
  border:1px solid var(--face-lo);
}

/* ---------- controls ---------- */
.btn{
  font:inherit;font-weight:700;
  padding:6px 20px;min-width:92px;
  color:var(--ink);background:var(--face);
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  cursor:pointer;
}
.btn:hover{background:#b6bac9}
.btn:active{
  border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  background:var(--face-press);
  padding:7px 19px 5px 21px;
}
.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-6px}
/* CDE drew a sunken ring around the default action */
.default-ring{
  display:inline-block;padding:3px;
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.field{
  display:block;width:100%;
  font-family:"DejaVu Sans Mono","Liberation Mono",Consolas,monospace;
  font-size:14px;letter-spacing:.14em;
  padding:6px 8px;
  color:var(--ink);background:var(--field);
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.field:focus{outline:none;background:#a7abbd;box-shadow:0 0 0 1px #1d2140 inset}
label.lbl{display:block;font-weight:700;margin-bottom:5px}

/* ---------- login screen ---------- */
.screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login{width:100%;max-width:430px}
.login .body{padding:20px 22px 22px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.brand .badge{
  flex:none;width:62px;height:62px;padding:6px;background:var(--face-dim);
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.brand h1{margin:0;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.brand p{margin:3px 0 0;font-size:11px;color:var(--ink-soft);font-family:"DejaVu Sans Mono",monospace}
.rule{height:2px;margin:16px 0;border-top:1px solid var(--face-lo);border-bottom:1px solid var(--face-hi)}
.prompt{margin:0 0 14px;font-size:12px}
.actions{display:flex;align-items:center;gap:12px;margin-top:18px}
.err{
  margin:0 0 14px;padding:7px 10px;font-weight:700;font-size:12px;
  color:#ffdede;background:var(--alarm);
  border:2px solid;border-color:#a83636 #4d0c0c #4d0c0c #a83636;
}
.hint{margin:12px 0 0;font-size:11px;color:var(--ink-soft);min-height:1.4em}
.statusbar{
  margin-top:3px;padding:4px 8px;
  font-family:"DejaVu Sans Mono","Liberation Mono",Consolas,monospace;font-size:11px;
  color:var(--ink-soft);background:var(--face);
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- report browser ---------- */
.app{height:100%;display:flex;flex-direction:column;padding:10px;gap:0}
.app .frame{flex:1;display:flex;flex-direction:column;min-height:0}
.menubar{
  display:flex;align-items:center;gap:2px;margin-top:3px;padding:2px;
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.menubar .item{
  padding:4px 11px;font-weight:700;font-size:12px;color:var(--ink);white-space:nowrap;
  background:none;border:2px solid transparent;text-decoration:none;cursor:pointer;font-family:inherit;
}
.menubar .item:hover{border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi)}
.menubar .spacer{flex:1}
.menubar .led{
  width:9px;height:9px;flex:none;margin-right:6px;background:var(--led);
  border:1px solid #2c5c33;border-radius:50%;
}
.tabs{display:flex;gap:3px;padding:10px 0 0 8px;flex:none}
.tab{
  padding:6px 18px 7px;font-weight:700;font-size:12px;text-decoration:none;
  color:var(--ink-soft);background:var(--face-dim);
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
  border-radius:7px 7px 0 0;
  position:relative;top:3px;
}
.tab:hover{background:#a8acbe;color:var(--ink)}
.tab.sel{
  top:0;padding-bottom:10px;margin-bottom:-2px;
  color:var(--ink);background:var(--face);
  border-bottom-color:var(--face);
  z-index:2;
}
.notebook{
  flex:1;min-height:0;display:flex;flex-direction:column;padding:8px;
  border:2px solid;border-color:var(--face-hi) var(--face-lo) var(--face-lo) var(--face-hi);
}
.split{flex:1;min-height:0;display:grid;grid-template-columns:262px 1fr;grid-template-rows:1fr;gap:8px}
.pane-label{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;color:var(--ink-soft)}
.filelist{
  flex:1;min-height:0;overflow:auto;background:var(--field);
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.filelist a{
  display:block;padding:6px 9px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(91,95,112,.35);
}
.filelist a:hover{background:#b0b4c5}
.filelist a.sel{background:var(--sel);color:var(--sel-ink)}
.filelist .fdate{
  display:block;font-family:"DejaVu Sans Mono","Liberation Mono",Consolas,monospace;
  font-size:12px;font-weight:700;
}
.filelist .ftitle{display:block;font-size:11px;opacity:.82;margin-top:1px}
.filelist .none{padding:10px;font-size:12px;color:var(--ink-soft)}
.viewer{
  flex:1;min-height:0;display:flex;background:#fff;
  border:2px solid;border-color:var(--face-lo) var(--face-hi) var(--face-hi) var(--face-lo);
}
.viewer iframe{flex:1;width:100%;border:0;display:block;background:#fff}
.viewer .empty{
  margin:auto;padding:28px;text-align:center;color:#4a4d5c;font-size:12px;max-width:34em;
}
.col{display:flex;flex-direction:column;min-height:0}

@media (max-width:780px){
  .split{grid-template-columns:1fr;grid-template-rows:minmax(110px,22vh) 1fr}
  .app{padding:0}
  .frame{box-shadow:none;border-width:0 0 2px}
  .tab{padding:6px 12px}
  .menubar .item{padding:4px 8px;font-size:11px}
  .menubar .hide-sm{display:none}
}