/* =====================================================================
   ODEH.OS — design tokens per wayfinder ticket crt-design-spec
   (prototype/crt-login.html is the reference implementation)
===================================================================== */
:root{
  --room:#050505; --screen-bg:#0b0d0b; --bios-bg:#101010;
  --paper:#d6d6d6; --ink:#000; --white:#fff; --grey-2:#9a9a9a;
  --pop:#CCD599; --pop-dim:#667335; --err:#ff4b4b;
  --font-ui:"Silkscreen","Chicago","Pixelify Sans",monospace;
  --font-term:"VT323","Chicago",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--room);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);
  overflow:hidden;
}

/* ---------- monitor + CRT stack ---------- */
.crt-shell{padding:18px;background:#1a1a1a;border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px #000,0 0 40px rgba(0,0,0,.9)}
.screen{
  position:relative;overflow:hidden;
  width:min(94vw,calc((100vh - 110px)*4/3));
  aspect-ratio:4/3;
  background:var(--screen-bg);
  border:1px solid #000;border-radius:10px;
  box-shadow:0 0 100px rgba(0,0,0,.7),inset 0 0 80px rgba(0,0,0,.45);
}
.screen::before{
  content:"";position:absolute;inset:0;z-index:60;pointer-events:none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.27) 50%),
    linear-gradient(90deg,rgba(255,0,0,.055),rgba(0,255,0,.025),rgba(0,0,255,.055));
  background-size:100% 2px,3px 100%;
}
.screen::after{
  content:"";position:absolute;inset:0;z-index:60;pointer-events:none;
  background:rgba(18,16,16,.08);opacity:0;
  animation:flicker .15s infinite;
}
@keyframes flicker{
  0%{opacity:.1174}5%{opacity:.29168}10%{opacity:.18642}15%{opacity:.8546}
  20%{opacity:.53757}25%{opacity:.43149}30%{opacity:.93029}35%{opacity:.84422}
  40%{opacity:.9164}45%{opacity:.26239}50%{opacity:.22149}55%{opacity:.24262}
  60%{opacity:.22353}65%{opacity:.74954}70%{opacity:.73651}75%{opacity:.07305}
  80%{opacity:.1063}85%{opacity:.59895}90%{opacity:.34957}95%{opacity:.31456}
  100%{opacity:.146}
}
@media (prefers-reduced-motion:reduce){
  .screen::after{animation:none}
  .cursor{animation:none}
  .dialog.shake{animation:none}
}

/* ---------- layers ---------- */
.layer{position:absolute;inset:0}
#bios{background:var(--bios-bg);color:var(--white);z-index:40;
  font-family:var(--font-term);font-size:clamp(19px,3vmin,26px);
  padding:4vmin;line-height:1.5;display:none}
body.mode-bios #bios{display:block}
#bios .ok{color:var(--pop)}
#bios .prompt{margin-top:2em}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--pop);
  vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

#login{z-index:30;display:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,.015) 2px 4px),
    #0a0a0a}
body.mode-login #login{display:block}

/* ---------- login dialog ---------- */
.dialog{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,86%);
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink),0 0 32px rgba(57,255,92,.12);
  padding:22px 22px 18px;
  opacity:0;transition:opacity .5s;
}
.dialog.loaded{opacity:1}
.dialog.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translate(-50%,-50%)}
  20%{transform:translate(calc(-50% - 8px),-50%)}
  40%{transform:translate(calc(-50% + 8px),-50%)}
  60%{transform:translate(calc(-50% - 5px),-50%)}
  80%{transform:translate(calc(-50% + 5px),-50%)}
}
.dialog .dialog-logo{display:block;width:64px;height:64px;margin:0 auto 10px;
  background:center/contain no-repeat;image-rendering:pixelated;
  background-image:url(../assets/img/tux-close.png)}
.dialog .dialog-logo:hover{background-image:url(../assets/img/tux-open.png)}
.dialog .welcome{text-align:center;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:2px}
.dialog .sub{text-align:center;font-family:var(--font-term);font-size:20px;
  color:#333;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:.06em;margin-bottom:5px}
.field select,.field input{
  width:100%;height:38px;padding:0 10px;
  font-family:var(--font-ui);font-size:14.5px;
  background:var(--white);color:var(--ink);
  border:2px solid var(--ink);border-radius:0;
  box-shadow:inset 1px 1px 0 #808080;
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;
  background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.field input:disabled{background:#b9b9b9;color:#777;cursor:not-allowed}
.hintline{font-family:var(--font-term);font-size:20px;min-height:24px;
  color:#222;margin:2px 0 12px}
.hintline .pop{color:var(--pop-dim)}
.statusline{font-family:var(--font-term);font-size:20px;min-height:24px;
  margin-bottom:6px;letter-spacing:.05em}
.statusline.err{color:#b00000}
.statusline.ok{color:var(--pop-dim)}
.dialog-actions{display:flex;gap:10px;justify-content:center;margin-top:4px}
.btn{
  font-family:var(--font-ui);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:3px;
  box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);
  padding:9px 0;width:120px;
}
.btn:hover,.btn:active{background:var(--ink);color:var(--paper)}
.forgot{display:block;text-align:center;margin-top:16px;
  font-family:var(--font-term);font-size:17px;color:#1a1a8a;
  text-decoration:underline;cursor:pointer}

/* ---------- desktops ---------- */
.desktop{display:none;z-index:10;background:
  radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/6px 6px,
  #101210}
body.mode-pro #desk-pro{display:block}
body.mode-per #desk-per{display:block}

/* ---------- menu bar ---------- */
.menubar{
  position:absolute;top:0;left:0;right:0;height:30px;z-index:20;
  background:var(--paper);border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:stretch;
  font-size:12px;
}
.menubar .left,.menubar .right{display:flex;align-items:stretch}
.menubar .logo{display:flex;align-items:center;padding:0 10px;cursor:pointer;
  position:relative;user-select:none}
/* Tux logo — closed mouth everywhere, open mouth on hover (global) */
.cat{display:inline-block;flex:none;background-position:center;
  background-repeat:no-repeat;background-size:contain;
  image-rendering:pixelated}
.cat-menu{width:16px;height:16px;margin-right:7px;
  background-image:url(../assets/img/tux-close.png)}
.menubar .logo:hover .cat-menu,
.menubar .logo.has-drop.open .cat-menu{background-image:url(../assets/img/tux-open.png)}
.menubar .logo:hover{background:var(--ink);color:var(--paper)}
.menubar .logo.has-drop.open{background:var(--ink);color:var(--paper)}
.menubar .item{padding:8px 10px;cursor:pointer;display:flex;align-items:center;
  position:relative;user-select:none}
.menubar .item:hover{background:var(--ink);color:var(--paper)}
.menubar .item.has-drop.open{background:var(--ink);color:var(--paper)}
.menubar .item.clock{cursor:default;font-family:var(--font-term);font-size:20px;
  border-left:1px solid rgba(0,0,0,.35);padding-left:12px}
.menubar .item.user{cursor:default;color:#333}
.menubar .drop{
  display:none;position:absolute;top:calc(100% + 1px);left:0;min-width:130px;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:2px;z-index:25;
}
.menubar .has-drop.open .drop{display:block}
.menubar .drop button{
  display:block;width:100%;text-align:left;padding:6px 10px;
  font-family:var(--font-ui);font-size:11px;
  background:none;border:none;cursor:pointer;color:inherit}
.menubar .drop button:hover{background:var(--ink);color:var(--paper)}

/* ---------- desktop icons ---------- */
.icons{position:absolute;top:48px;left:16px;display:flex;flex-direction:column;gap:20px;z-index:5}
.dicon{width:92px;background:none;border:none;cursor:pointer;
  font-family:var(--font-ui);font-size:10px;color:var(--white);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px}
.dicon .label{padding:2px 4px;line-height:1.3;text-align:center}
.dicon:hover .label,.dicon.selected .label{background:var(--ink);color:var(--paper)}
.dicon:hover .label .ext,.dicon.selected .label .ext{color:var(--pop)}
.dicon .ext{color:var(--pop);text-shadow:0 0 7px rgba(204,213,153,.5)}

.glyph{position:relative;width:36px;height:44px}
.glyph.doc{background:var(--paper);border:2px solid var(--ink);
  clip-path:polygon(0 0,62% 0,100% 24%,100% 100%,0 100%)}
.glyph.doc::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:var(--ink)}
.glyph.doc::after{content:"";position:absolute;top:0;left:62%;width:14px;height:11px;
  background:#0e0f0e;border-bottom:2px solid var(--ink);border-left:2px solid var(--ink)}
.glyph.folder{background:var(--paper);border:2px solid var(--ink)}
.glyph.folder::before{content:"";position:absolute;top:-9px;left:-2px;width:40%;height:9px;
  background:var(--paper);border:2px solid var(--ink);border-bottom:none}
.glyph.linkedin{background:transparent
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A66C2' d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E")
  center/32px 32px no-repeat}

/* ---------- windows ---------- */
.win{
  position:absolute;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);border-radius:2px;
  box-shadow:2px 2px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  min-width:280px;min-height:160px;overflow:hidden;
}
.win-header{
  height:24px;flex:none;position:relative;cursor:grab;user-select:none;
  background:var(--paper);border-bottom:1px solid var(--ink);
  background-image:repeating-linear-gradient(180deg,var(--ink) 0 1px,transparent 1px 4px);
  background-size:100% 4px;background-position:0 50%;
  touch-action:none;
}
.win.focused .win-header{
  background-image:repeating-linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 5px)}
.win-header:active{cursor:grabbing}
.win-title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--paper);padding:0 12px;
  font-family:var(--font-ui);font-size:11px;white-space:nowrap;
  max-width:70%;overflow:hidden;text-overflow:ellipsis;
}
.win-close{
  position:absolute;left:6px;top:4px;width:18px;height:18px;
  background:var(--paper);border:1px solid var(--ink);cursor:pointer;padding:0;
  z-index:8;
}
.win-close .cat{width:16px;height:16px;
  background-image:url(../assets/img/tux-close.png)}
.win-close:hover,.win-close:active{background:var(--ink)}
.win-close:hover .cat,.win-close:active .cat{
  background-image:url(../assets/img/tux-open.png);filter:invert(1)}
.win-close::after{content:"";position:absolute;inset:-5px}
.win-zoom{
  position:absolute;right:7px;top:4px;width:16px;height:16px;
  background:var(--paper);border:1px solid var(--ink);cursor:pointer;padding:0;
  z-index:8;
}
.win-zoom::before{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:5px;height:5px;border:1px solid var(--ink)}
.win-zoom:hover,.win-zoom:active{background:var(--ink)}
.win-zoom:hover::before,.win-zoom:active::before{border-color:var(--paper)}
.win-zoom::after{content:"";position:absolute;inset:-5px}

/* edge + corner resize hit zones (inside the window frame) */
.rz{position:absolute;z-index:6;touch-action:none}
.rz-n{top:0;left:10px;right:10px;height:6px;cursor:n-resize}
.rz-s{bottom:0;left:10px;right:10px;height:7px;cursor:s-resize}
.rz-e{right:0;top:24px;bottom:14px;width:7px;cursor:e-resize}
.rz-w{left:0;top:24px;bottom:14px;width:7px;cursor:w-resize}
.rz-ne{top:0;right:0;width:14px;height:14px;cursor:ne-resize}
.rz-nw{top:0;left:0;width:24px;height:14px;cursor:nw-resize}
.rz-se{bottom:0;right:0;width:16px;height:16px;cursor:se-resize}
.rz-sw{bottom:0;left:0;width:16px;height:16px;cursor:sw-resize}
.win.maximized .rz{display:none}
.win.maximized .win-header{cursor:default}
.win-body{flex:1;overflow:auto;background:var(--paper);position:relative}
.win-footer{
  flex:none;display:flex;justify-content:center;gap:12px;align-items:center;
  padding:8px;border-top:1px solid var(--ink);background:#c9c9c9;
}

/* ---------- viewer styles ---------- */
.txtview{
  font-family:var(--font-term);font-size:21px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;padding:16px 18px;color:#111;
}
.reveal-email{
  font:inherit;background:var(--ink);color:transparent;border:none;
  padding:0 .45em;cursor:pointer;border-radius:2px;letter-spacing:.02em;
}
.reveal-email:hover{background:var(--pop-dim);color:var(--paper)}
.revealed-email{color:var(--pop-dim);font-weight:bold}
.postview{font-family:var(--font-term);font-size:21px;line-height:1.5;
  color:#111;padding:18px 22px;max-width:64ch;margin:0 auto}
.postview img{display:block;max-width:100%;height:auto;margin:14px auto;
  border:1px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.postview a{color:#0a4d8f;text-decoration:underline}
.postview a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.postview h1,.postview h2,.postview h3{font-family:var(--font-ui);font-size:14px;
  margin:18px 0 8px;letter-spacing:.04em}
.postview p{margin:0 0 12px}
.postview blockquote{border-left:3px solid var(--grey-2);margin:12px 0;
  padding-left:12px;color:#333}
.postview iframe,.postview .separator{max-width:100%}
.postview table{border-collapse:collapse}
.postview td{padding:2px 6px}

.iframeview{display:block;width:100%;height:100%;border:none;background:#fff}
/* iframe windows: the iframe is the only scroller — no outer ghost bar */
.win-body.hosting-iframe{overflow:hidden}

/* image viewer "application" */
.win-body.hosting-image{overflow:hidden;background:#0c0e0c}
.imgview{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}

/* ---------- explorer ---------- */
.explorer{width:100%;border-collapse:collapse;
  font-family:var(--font-ui);font-size:11px}
.explorer thead th{
  position:sticky;top:0;z-index:2;
  background:var(--paper);border-bottom:1px solid var(--ink);
  text-align:left;padding:8px 10px;cursor:pointer;user-select:none;
  letter-spacing:.04em;white-space:nowrap;
}
.explorer thead th:hover{background:var(--ink);color:var(--paper)}
.explorer thead th .arrow{color:var(--pop-dim)}
.explorer tbody tr{cursor:pointer}
.explorer tbody tr:hover{background:var(--ink);color:var(--paper)}
.explorer tbody tr:hover .fdate,.explorer tbody tr:hover .fsize{color:var(--paper)}
.explorer td{padding:7px 10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:32ch}
.explorer .fname{display:flex;align-items:center;gap:8px}
.explorer .fdot{width:10px;height:12px;flex:none;background:var(--paper);
  border:1px solid currentColor;
  clip-path:polygon(0 0,60% 0,100% 25%,100% 100%,0 100%)}
.explorer tr:hover .fdot{background:var(--pop)}
.explorer .fdate,.explorer .fsize{font-family:var(--font-term);font-size:17px;color:#333}

.empty-note{font-family:var(--font-term);font-size:20px;color:#444;
  padding:16px 18px}

/* small screens: drop the fixed aspect for usability */
@media (max-width:720px){
  .screen{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}
  .crt-shell{padding:0;border-radius:0}
  .icons{flex-direction:row;flex-wrap:wrap;gap:10px;top:40px;left:10px;right:10px}
  .dicon{width:76px}
}