/* fabiankiby guide pages. Windows 2000 look, by Fabian's call 2026-11-04. System fonts only, no webfonts. */
:root{
  --desk:#4b78b6;--face:#d4d0c8;--hi:#fff;--lt:#dfdfdf;--sh:#808080;--dk:#404040;
  --cap1:#0a246a;--cap2:#a6caf0;--ink:#000;--ink2:#333;--mute:#555;--link:#0000ee;--tip:#ffffe1;--navy:#000080;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--desk);color:var(--ink);font-family:Tahoma,"MS Sans Serif","Segoe UI",Verdana,sans-serif;font-size:15px;line-height:1.55;
  padding:22px 12px 56px;-webkit-font-smoothing:auto}
a{color:var(--link);text-decoration:underline}
.out{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--lt)}
.in{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--lt)}

/* window */
.window{max-width:820px;margin:0 auto;background:var(--face);padding:3px}
.titlebar{display:flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;color:#fff;font-weight:bold;font-size:12px;
  background:linear-gradient(90deg,var(--cap1),var(--cap2));user-select:none}
.titlebar .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .ic{font-size:13px}
.tbb{display:flex;gap:2px}
.tbb b{width:16px;height:14px;background:var(--face);color:#000;font-size:10px;line-height:11px;text-align:center;font-weight:bold;
  border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh)}
.menubar{display:flex;align-items:center;gap:2px;padding:2px 2px;font-size:12px;border-bottom:1px solid var(--sh);box-shadow:0 1px var(--hi)}
.menubar span{padding:2px 7px}
.menubar span:first-letter{text-decoration:underline}
.menubar .r{margin-left:auto;padding:2px 7px;font-size:12px}
.client{padding:14px 12px 18px}
@media(min-width:700px){body{padding-top:32px}.client{padding:22px 24px 26px}}

/* head */
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:bold}
.tag{font-size:11px;font-weight:bold;letter-spacing:.14em;background:var(--navy);color:#fff;padding:2px 8px;border:1px solid #000}
h1{font-size:clamp(26px,5.5vw,36px);font-weight:bold;line-height:1.1;margin-bottom:12px}
h1 .ac{font-style:italic;color:var(--navy)}
.lead{font-size:15.5px;color:var(--ink2);margin-bottom:10px}
.byline{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mute);margin-bottom:20px}
.byline b{color:var(--ink)}

/* dialogs and groups */
.dialog{background:var(--face);margin-bottom:18px}
.dialog .body{padding:14px 14px 16px}
.dialog h3{font-size:15px;font-weight:bold;margin-bottom:6px}
.dialog p{font-size:14px;color:var(--ink2)}
.call .body{display:grid;gap:12px}
@media(min-width:640px){.call .body{grid-template-columns:1fr auto;align-items:center}}
.facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fact{font-size:12px;padding:3px 9px;background:var(--face);border:1px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi)}
.btn{display:inline-block;background:var(--face);color:#000;font:bold 13px Tahoma,"MS Sans Serif","Segoe UI",sans-serif;padding:7px 18px;min-width:120px;text-align:center;
  text-decoration:none;cursor:pointer;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px var(--lt);white-space:nowrap}
.btn.def{box-shadow:0 0 0 1px #000,inset -1px -1px var(--sh),inset 1px 1px var(--lt)}
.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--sh)}
.btn:hover{text-decoration:none}
.btn[disabled]{color:var(--sh);text-shadow:1px 1px var(--hi)}
fieldset.group{border:2px groove var(--hi);padding:8px 14px 12px;margin-bottom:22px}
fieldset.group legend{font-weight:bold;font-size:13px;padding:0 5px}
.inside ul{list-style:none}
.inside li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;padding:5px 0}
.inside li .n{flex-shrink:0;width:24px;text-align:center;font-size:17px;line-height:1.3}

/* the document pane */
.doc{background:#fff;padding:18px 16px 8px;margin-bottom:22px}
@media(min-width:700px){.doc{padding:24px 26px 10px}}
.doc h2{font-size:18px;font-weight:bold;margin:30px 0 10px;padding-top:16px;border-top:1px dotted var(--sh)}
.doc h2:first-child{border-top:0;padding-top:0;margin-top:0}
.doc h2 .sn{font-family:"Courier New",monospace;font-size:13px;color:var(--navy);margin-right:10px}
.doc p{margin-bottom:14px;color:var(--ink2)}
.doc p b,.doc li b{color:var(--ink)}
.doc ol,.doc ul{margin:0 0 14px 24px;color:var(--ink2)}
.doc li{margin-bottom:9px}
pre{font-family:"Courier New",Courier,monospace;font-size:13px;line-height:1.6;background:#000;color:#c0c0c0;padding:40px 14px 12px;margin:0 0 16px;overflow-x:auto;position:relative;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
pre .copy{position:absolute;top:8px;right:8px;font:bold 11px Tahoma,sans-serif;background:var(--face);color:#000;padding:3px 9px;cursor:pointer;
  border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi)}
code{font-family:"Courier New",monospace;font-size:13.5px;background:#f0f0f0;border:1px solid #c0c0c0;padding:0 4px}
blockquote,.note{background:var(--tip);border:1px solid #000;padding:12px 14px;margin:0 0 16px;color:var(--ink);font-size:14.5px}
.note .l{font-size:11px;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.note p{margin:0;color:var(--ink)}

/* gate */
.gated{position:relative}
.gated.locked{max-height:230px;overflow:hidden}
.gated.locked:after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%)}
.gate{margin:-20px 0 22px;position:relative;z-index:3}
.gate .body{text-align:center;padding:18px 14px 16px}
.gate .lock{font-size:30px;line-height:1;margin-bottom:10px}
.gate h3{font-size:17px;margin-bottom:6px}
.gate p{max-width:420px;margin:0 auto 14px}
.gate form{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto}
.gate input[type=email]{width:100%;padding:7px 9px;font:15px Tahoma,"MS Sans Serif",sans-serif;background:#fff;color:#000;outline:none;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px var(--dk)}
.gate input[type=email]:focus{outline:1px dotted #000;outline-offset:-5px}
.gate .fine{font-size:12px;color:var(--mute);margin:12px 0 0}
.gate .hp{position:absolute;left:-5000px;opacity:0}
.unlocked .gated.locked{max-height:none}
.unlocked .gated.locked:after{display:none}
.unlocked .gate{display:none}

/* closing dialog */
.close .body{text-align:center;padding:22px 16px 20px}
.close .l{font-size:11px;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.close h2{font-size:clamp(20px,4.5vw,26px);font-weight:bold;line-height:1.2;margin-bottom:12px}
.close .quote{max-width:520px;margin:0 auto 14px}
.close .facts{justify-content:center;margin:0 0 18px}
.close .fine{font-size:12px;color:var(--mute);margin-top:12px}

/* status bar + taskbar */
.statusbar{display:flex;gap:3px;font-size:12px;padding:2px 0 0}
.statusbar span{flex:1;padding:2px 6px;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.statusbar span.s{flex:0 0 auto}
.taskbar{position:fixed;left:0;right:0;bottom:0;height:32px;background:var(--face);border-top:1px solid var(--hi);box-shadow:0 -1px var(--sh);
  display:flex;align-items:center;gap:6px;padding:0 4px;font-size:12px;z-index:9}
.taskbar .start{font-weight:bold;padding:3px 8px 3px 6px;background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);cursor:default}
.taskbar .task{flex:0 1 220px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;
  border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);background:#e6e3de}
.taskbar .tray{margin-left:auto;padding:3px 10px;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}