/* Jouby's Tools — Win95/DOS design system.
   Tokens copied verbatim from the design system (tokens/*.css); component
   rules are the JSX inline styles translated to classes. Nothing is ever
   rounded, nothing animates except the caret.
   Fonts are self-hosted in assets/fonts.css — no third-party requests. */

:root{
  /* colours — CGA/Win95, no tints, no alpha */
  --black:#000000; --white:#FFFFFF;
  --win-face:#C0C0C0; --win-face-light:#DFDFDF; --win-shadow:#808080; --win-dark:#0A0A0A;
  --green:#00AA00; --green-bright:#55FF55; --green-dark:#005500;
  --teal:#008080; --navy:#000080; --red:#AA0000; --yellow:#FFFF55; --magenta:#AA00AA;
  --surface-desktop:var(--teal); --surface-window:var(--win-face);
  --surface-field:var(--white); --surface-terminal:var(--black);
  --title-active:var(--green); --title-inactive:var(--win-shadow);
  --text-body:var(--black); --text-inverse:var(--white); --text-disabled:var(--win-shadow);
  --text-terminal:var(--green-bright);
  --selection-bg:var(--green); --selection-fg:var(--white);
  --link:var(--navy); --link-hover:var(--green-dark);
  --danger:var(--red); --warning:var(--yellow); --success:var(--green);

  /* type */
  --font-pixel:'Silkscreen','VT323',monospace;
  --font-dos:'VT323','Courier New',monospace;
  --text-display:32px; --text-heading:16px; --text-label:8px;
  --text-body-size:18px; --text-body-lg:22px; --text-small:15px;
  --leading-tight:1.1; --leading-body:1.35;

  /* spacing */
  --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px;
  --space-5:16px; --space-6:24px; --space-7:32px; --space-8:48px;
  --titlebar-h:22px; --taskbar-h:32px; --control-h:26px; --icon-cell:64px;

  /* effects */
  --radius:0;
  --bevel-raised:inset -1px -1px 0 var(--win-dark),inset 1px 1px 0 var(--white),inset -2px -2px 0 var(--win-shadow),inset 2px 2px 0 var(--win-face-light);
  --bevel-sunken:inset -1px -1px 0 var(--white),inset 1px 1px 0 var(--win-dark),inset -2px -2px 0 var(--win-face-light),inset 2px 2px 0 var(--win-shadow);
  --bevel-field:inset -1px -1px 0 var(--win-face-light),inset 1px 1px 0 var(--win-shadow),inset -2px -2px 0 var(--white),inset 2px 2px 0 var(--win-dark);
  --bevel-thin:inset -1px -1px 0 var(--win-shadow),inset 1px 1px 0 var(--win-face-light);
  --bevel-thin-sunken:inset -1px -1px 0 var(--win-face-light),inset 1px 1px 0 var(--win-shadow);
  --shadow-dos:4px 4px 0 var(--black);
  --focus-ring:1px dotted var(--black);
  --border-dos:2px solid var(--green-bright);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font-dos);font-size:var(--text-body-size);
  line-height:var(--leading-body);color:var(--text-body);background:var(--surface-desktop);
  -webkit-font-smoothing:none;font-smooth:never;overflow:hidden;
}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
a{color:var(--link);text-decoration:underline}
a:hover{color:var(--link-hover)}
img,canvas{image-rendering:pixelated}
:focus-visible{outline:var(--focus-ring);outline-offset:-2px}

::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--white) 0% 25%,var(--win-face) 0% 50%) 0 0/2px 2px}
::-webkit-scrollbar-thumb{background:var(--win-face);box-shadow:var(--bevel-raised)}
::-webkit-scrollbar-button{background:var(--win-face);box-shadow:var(--bevel-raised);height:16px;width:16px}

.ico{display:block;flex:none;width:48px;height:48px}
.ico-sm{width:16px;height:16px}
.ico-md{width:32px;height:32px}

/* ---------- desktop ---------- */
#desktop{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
#field{flex:1;position:relative;overflow:hidden}
#icons{
  position:absolute;top:6px;left:6px;bottom:6px;
  display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:2px;
}
.dicon{
  width:var(--icon-cell);display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 2px;cursor:pointer;user-select:none;border:0;background:none;font:inherit;
}
.dicon .lbl{
  font-family:var(--font-dos);font-size:var(--text-small);line-height:1.1;text-align:center;
  color:var(--white);padding:1px 3px;text-shadow:1px 1px 0 var(--black);
  white-space:nowrap;
}
.dicon[aria-selected="true"] .ico{filter:brightness(.75) sepia(1) hue-rotate(80deg)}
.dicon[aria-selected="true"] .lbl{background:var(--selection-bg);outline:1px dotted var(--white);text-shadow:none}

/* ---------- window ---------- */
.win{
  position:absolute;background:var(--win-face);box-shadow:var(--bevel-raised);
  padding:3px;display:flex;flex-direction:column;
  max-width:calc(100vw - 12px);max-height:calc(100% - 12px);
}
.win[hidden]{display:none}
.tbar{
  height:var(--titlebar-h);flex:none;background:var(--title-active);
  display:flex;align-items:center;gap:5px;padding:0 3px 0 5px;cursor:default;
}
.win.inactive .tbar{background:var(--title-inactive)}
.tbar .t{
  flex:1;font-family:var(--font-pixel);font-weight:700;font-size:var(--text-label);
  color:var(--white);white-space:nowrap;overflow:hidden;letter-spacing:.5px;
}
.tbtn{
  width:18px;height:16px;border:0;border-radius:0;background:var(--win-face);
  box-shadow:var(--bevel-raised);font-family:var(--font-pixel);font-size:8px;line-height:1;
  padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--black);
}
.tbtn:active{box-shadow:var(--bevel-thin-sunken)}
.tbtn.min{align-items:flex-end}
.wbody{flex:1;min-height:0;overflow:auto}

.menubar{display:flex;gap:2px;padding:1px 2px;flex:none}
.menubar span{font-family:var(--font-dos);font-size:var(--text-small);padding:1px 7px}
.menubar span u{text-decoration:underline}

.statusbar{display:flex;gap:2px;padding:2px;flex:none}
.statusbar span{
  font-family:var(--font-dos);font-size:var(--text-small);padding:1px 7px;
  box-shadow:var(--bevel-thin-sunken);
}
.statusbar span:first-child{flex:1}

.pad{padding:var(--space-5)}
.pad p{margin:0 0 var(--space-4)}
.pad p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--font-pixel);font-weight:700;line-height:var(--leading-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--text-display)}
h2{font-size:var(--text-heading)}
h3{font-size:var(--text-label)}
.field{background:var(--surface-field);box-shadow:var(--bevel-field);padding:var(--space-4)}
.muted{color:var(--win-shadow)}
hr{border:0;height:2px;box-shadow:var(--bevel-thin-sunken);margin:var(--space-5) 0}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-dos);font-size:var(--text-body-size);line-height:1;
  min-height:var(--control-h);padding:2px 16px 0;cursor:pointer;border:0;border-radius:0;
  user-select:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--win-face);color:var(--black);box-shadow:var(--bevel-raised);
}
.btn.primary{outline:1px solid var(--black);outline-offset:0}
.btn:active{box-shadow:var(--bevel-sunken);padding:4px 15px 0 17px}
.btn[disabled]{color:var(--text-disabled);text-shadow:1px 1px 0 var(--white);cursor:default}
.btn[disabled]:active{box-shadow:var(--bevel-raised);padding:2px 16px 0}
.btn.dos{
  background:var(--surface-terminal);color:var(--text-terminal);
  border:var(--border-dos);box-shadow:none;
}
.btn.dos:active{background:var(--green-bright);color:var(--black);padding:2px 16px 0}
.row{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5) var(--space-4)}

/* ---------- tool window body ---------- */
.toolhead{display:flex;gap:var(--space-5);padding:var(--space-5) var(--space-5) var(--space-3);align-items:flex-start}
.toolhead .meta{min-width:0}
.toolhead .name{font-family:var(--font-pixel);font-weight:700;font-size:var(--text-heading);line-height:var(--leading-tight)}
.toolhead .tag{color:var(--win-shadow);font-size:var(--text-small)}
.tooldesc{padding:0 var(--space-5);font-size:var(--text-body-size)}
.specs{margin:var(--space-4) var(--space-5) 0;padding:var(--space-3);box-shadow:var(--bevel-thin-sunken)}
.specs dl{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-4);margin:0;font-size:var(--text-small)}
.specs dt{color:var(--win-shadow)}
.specs dd{margin:0}

/* ---------- terminal ---------- */
.term{
  background:var(--surface-terminal);color:var(--text-terminal);font-family:var(--font-dos);
  font-size:var(--text-body-lg);line-height:var(--leading-body);padding:14px 18px;
  border:var(--border-dos);white-space:pre-wrap;overflow:auto;margin:0;
}
.caret{
  /* Drawn, not typed: U+2588 FULL BLOCK is outside the latin subsets we ship,
     so a character would silently fall back to a non-pixel system font. */
  display:inline-block;width:.55em;height:1em;vertical-align:-.15em;
  background:var(--text-terminal);animation:jt-blink 1s steps(1) infinite;
}
@keyframes jt-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}

/* ---------- taskbar ---------- */
#taskbar{
  height:var(--taskbar-h);flex:none;background:var(--win-face);
  box-shadow:inset 0 1px 0 var(--white);display:flex;gap:4px;padding:4px;align-items:stretch;
}
#start{
  border:0;border-radius:0;background:var(--win-face);box-shadow:var(--bevel-raised);
  display:flex;align-items:center;gap:5px;padding:0 8px;cursor:pointer;flex:none;
}
#start[aria-expanded="true"]{box-shadow:var(--bevel-sunken)}
#start .lbl{font-family:var(--font-pixel);font-weight:700;font-size:var(--text-label)}
.tsep{width:2px;box-shadow:var(--bevel-thin-sunken);flex:none}
#tasks{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.task{
  border:0;border-radius:0;background:var(--win-face);box-shadow:var(--bevel-raised);
  display:flex;align-items:center;gap:5px;padding:0 8px;cursor:pointer;
  width:170px;min-width:0;font-family:var(--font-dos);font-size:var(--text-small);
}
.task[aria-current="true"]{box-shadow:var(--bevel-sunken);font-weight:700}
.task .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clock{
  box-shadow:var(--bevel-thin-sunken);display:flex;align-items:center;padding:0 10px;
  font-family:var(--font-dos);font-size:var(--text-small);flex:none;
}

/* ---------- start menu ---------- */
#startmenu{
  position:absolute;left:4px;bottom:calc(var(--taskbar-h) + 4px);z-index:9000;
  background:var(--win-face);box-shadow:var(--bevel-raised);padding:3px;display:flex;width:260px;
}
#startmenu[hidden]{display:none}
#startmenu .rail{
  width:26px;flex:none;background:var(--green);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-pixel);font-weight:700;font-size:var(--text-label);
  color:var(--white);display:flex;align-items:center;justify-content:flex-start;
  padding:var(--space-4) 0;letter-spacing:1px;
}
#startmenu ul{list-style:none;margin:0;padding:2px 0;flex:1;min-width:0}
#startmenu li button{
  width:100%;border:0;background:none;font-family:var(--font-dos);font-size:17px;
  display:flex;align-items:center;gap:10px;padding:5px 10px;cursor:pointer;text-align:left;color:var(--black);
}
#startmenu li button:hover{background:var(--selection-bg);color:var(--selection-fg)}
#startmenu li.sep{height:2px;margin:3px 4px;box-shadow:var(--bevel-thin-sunken)}

/* ---------- stacked layout ----------
   Used on small screens, and at every width when JavaScript is off. Without
   the window manager, absolutely-positioned windows would pile on top of each
   other, so the desktop stops pretending and becomes a document. */
@media (max-width:720px){
  body{overflow:auto}
  #desktop{height:auto;min-height:100%}
  #field{overflow:visible}
  #icons{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding:6px}
  .dicon{width:88px}
  .dicon .lbl{white-space:normal;max-width:100%;overflow-wrap:anywhere}
  .win{position:static !important;width:auto !important;margin:6px;max-width:none;max-height:none}
  #taskbar{position:sticky;bottom:0}
  #tasks{display:none}
}
.no-js body{overflow:auto}
.no-js #desktop{height:auto;min-height:100%}
.no-js #field{overflow:visible}
.no-js #icons{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding:6px}
.no-js .dicon{width:88px}
.no-js .dicon .lbl{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.no-js .win{position:static !important;width:auto !important;margin:6px;max-width:none;max-height:none}
.no-js .win[hidden]{display:flex}
.no-js #taskbar,.no-js .tbtn,.no-js .win .row .btn[data-close]{display:none}
/* Dialogs and the emulator are pure JavaScript features. With scripting off
   they are noise, so the no-JS page simply does not carry them. */
.no-js .win[data-win="about"],.no-js .win[data-win="shutdown"],
.no-js .win[data-win="lepton-run"]{display:none !important}

/* ---- DOSBox host --------------------------------------------------------
   320x200 doubled. js-dos injects its own canvas + UI here; we only supply
   the recess it sits in, so nothing of ours fights its layout. */
.dosbox{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;   /* what DOSBox actually renders 320x200 into */
  background:#000;
  border:2px solid;
  border-color:var(--shadow) var(--light) var(--light) var(--shadow);
  overflow:hidden;
}
.dosbox canvas{display:block;image-rendering:pixelated}
.dosboot{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-term);font-size:16px;color:var(--text-terminal);
  text-align:center;padding:16px;
}
.dosboot p{margin:0}