/* ═══════════════════════════════════════════════════════════════
   site95.css — SejrBank website chrome, Windows 95 edition.
   Shared by landing.html and guide.html. Matches the game.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --face:#c0c0c0; --face-dk:#808080; --face-lt:#ffffff; --shadow:#000000;
  --title-a:#000080; --title-b:#1084d0; --desk:#008080; --sel:#000080;
  --paper:#ffffff; --note:#fdf3cf;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body.w95{
  background:var(--desk);
  color:#000;
  font-family:Tahoma,'MS Sans Serif',Geneva,Verdana,sans-serif;
  font-size:14px; line-height:1.55;
  padding-bottom:56px; /* room for taskbar */
}
body.w95 a{ color:#000080; }
::selection{ background:var(--sel); color:#fff; }

/* ── bevels ── */
.raised95, .btn95, .win, .taskbar95, .startmenu95{
  background:var(--face);
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow);
  box-shadow:inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 #dfdfdf;
}
.sunken95{
  background:var(--paper);
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt);
  box-shadow:inset 1px 1px 0 var(--shadow);
}

/* ── buttons ── */
.btn95{
  display:inline-block; font-family:inherit; font-size:14px; font-weight:bold;
  color:#000; padding:8px 22px; cursor:pointer; text-decoration:none; text-align:center;
}
.btn95:active{ border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); box-shadow:none; }
.btn95.xl{ font-size:18px; padding:13px 34px; }
.btn95.go{ color:#004400; }

/* ── windows ── */
.win{ max-width:940px; margin:26px auto; position:relative; }
.win-title{
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  color:#fff; font-weight:bold; font-size:14px; padding:5px 6px 5px 9px;
  display:flex; align-items:center; gap:8px;
}
.win-title .t{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.win-title .wb{
  width:20px; height:18px; font-size:11px; line-height:16px; text-align:center;
  color:#000; font-weight:bold; background:var(--face); flex:0 0 auto;
  border-top:1px solid var(--face-lt); border-left:1px solid var(--face-lt);
  border-bottom:1px solid var(--shadow); border-right:1px solid var(--shadow);
}
.win-menu{ display:flex; gap:2px; padding:3px 6px; font-size:13px;
  border-bottom:1px solid var(--face-dk); box-shadow:0 1px 0 var(--face-lt); }
.win-menu span, .win-menu a{ padding:1px 8px; color:#000; text-decoration:none; cursor:pointer; }
.win-menu span:hover, .win-menu a:hover{ background:var(--sel); color:#fff; }
.win-menu u{ text-decoration:underline; }
.win-body{ padding:20px 24px; }
@media(max-width:640px){ .win-body{ padding:14px; } }
.win-status{ display:flex; gap:4px; padding:3px 4px; font-size:12px; }
.win-status .cell{ flex:1; padding:2px 8px; background:var(--face);
  border-top:1px solid var(--face-dk); border-left:1px solid var(--face-dk);
  border-bottom:1px solid var(--face-lt); border-right:1px solid var(--face-lt); }

/* ── typography ── */
.w95 h1{ font-size:clamp(26px,5.4vw,44px); line-height:1.1; letter-spacing:-.5px; margin:6px 0 12px; }
.w95 h1 .hl{ color:#000080; }
.w95 h2{ font-size:clamp(19px,3vw,26px); margin:4px 0 10px; }
.w95 .lead{ font-size:15px; color:#222; max-width:660px; margin-bottom:16px; }
.w95 .dim2{ color:#444; font-size:12.5px; }

/* ── fieldset boxes (game style) ── */
.field95{ border:1px solid var(--face-dk);
  box-shadow:1px 1px 0 var(--face-lt) inset, -1px -1px 0 var(--face-lt);
  padding:14px 14px 12px; margin:12px 0; position:relative; background:var(--face); }
.field95 > .legend{ position:absolute; top:-9px; left:10px; background:var(--face);
  padding:0 6px; font-size:12px; font-weight:bold; }
.field95 p{ font-size:13.5px; color:#111; }

.grid95{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px 16px; margin-top:18px; }

/* ── chips / marquee ── */
.chips95{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip95{ background:var(--paper); font-size:12.5px; padding:4px 10px;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }
.marquee95{ max-width:940px; margin:0 auto; overflow:hidden; background:#000; color:#3f3;
  font-family:'Courier New',monospace; font-weight:bold; font-size:13px; padding:5px 0;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); white-space:nowrap; }
.marquee95 > div{ display:inline-block; padding-left:100%; animation:mq 26s linear infinite; }
@keyframes mq{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-100%);} }

/* ── desktop icons ── */
.dicons{ position:fixed; top:14px; left:12px; z-index:5; display:flex; flex-direction:column; gap:10px; }
.dicon{ width:92px; text-align:center; text-decoration:none; color:#fff; display:block; }
.dicon .g{ font-size:30px; text-shadow:2px 2px 0 rgba(0,0,0,.35); }
.dicon .l{ font-size:11px; margin-top:3px; text-shadow:1px 1px 1px #000; padding:1px 2px; line-height:1.25; }
.dicon:hover .l{ background:rgba(0,0,128,.5); }
@media(max-width:1180px){ .dicons{ display:none; } }

/* ── taskbar ── */
.taskbar95{ position:fixed; left:0; right:0; bottom:0; height:42px; z-index:50;
  display:flex; align-items:center; gap:6px; padding:4px 6px; }
.tb-start{ font-weight:bold; display:flex; align-items:center; gap:7px; padding:6px 14px; font-size:14px; }
.tb-flag{ display:inline-block; width:17px; height:13px;
  background:linear-gradient(180deg,#c8102e 40%,#fff 40%,#fff 60%,#c8102e 60%); }
.tb-sep{ width:2px; align-self:stretch; margin:3px 2px;
  border-left:1px solid var(--face-dk); border-right:1px solid var(--face-lt); }
.tb-task{ font-size:12.5px; padding:6px 12px; max-width:180px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; text-decoration:none; }
.tb-spacer{ flex:1; }
.tb-tray{ display:flex; align-items:center; gap:8px; padding:5px 12px; font-size:13px; font-weight:bold;
  border-top:1px solid var(--face-dk); border-left:1px solid var(--face-dk);
  border-bottom:1px solid var(--face-lt); border-right:1px solid var(--face-lt); }
@media(max-width:700px){ .tb-task{ display:none; } }

/* start menu */
.startmenu95{ position:fixed; left:4px; bottom:46px; width:250px; z-index:60; display:none; }
.startmenu95.open{ display:flex; }
.sm-side{ width:28px; background:linear-gradient(0deg,var(--title-a),var(--title-b)); color:#fff;
  font-weight:bold; font-size:15px; writing-mode:vertical-rl; transform:rotate(180deg);
  padding:10px 4px; letter-spacing:1px; }
.sm-side b{ color:#ffd24d; }
.sm-items{ flex:1; padding:4px; }
.sm-items a{ display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13.5px;
  color:#000; text-decoration:none; }
.sm-items a:hover{ background:var(--sel); color:#fff; }
.sm-items .g{ width:24px; text-align:center; font-size:17px; }
.sm-div{ height:2px; margin:4px 6px; border-top:1px solid var(--face-dk); border-bottom:1px solid var(--face-lt); }

/* ── FAQ (Win95 help style) ── */
.faq95 details{ background:var(--paper); margin-bottom:10px; padding:12px 16px;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }
.faq95 summary{ cursor:pointer; font-weight:bold; font-size:14.5px; list-style:none; }
.faq95 summary::-webkit-details-marker{ display:none; }
.faq95 summary::before{ content:'📖 '; }
.faq95 details[open] summary::before{ content:'📂 '; }
.faq95 p{ margin-top:8px; font-size:13.5px; color:#222; }

/* ── notes / tips ── */
.note95{ background:var(--note); border:1px solid #ca8; padding:8px 12px; font-size:13px; margin-top:10px; }
.note95::before{ content:'📌 '; }

/* ── wizard steps (setup style) ── */
.wizard{ display:flex; gap:0; }
.wiz-side{ width:120px; min-height:100%; background:linear-gradient(180deg,var(--title-a),var(--title-b));
  color:#fff; padding:16px 10px; font-weight:bold; font-size:13px; }
@media(max-width:640px){ .wiz-side{ display:none; } }
.wiz-main{ flex:1; padding:18px 22px; }
.wiz-step{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dotted #999; }
.wiz-step:last-child{ border-bottom:none; }
.wiz-check{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; background:var(--paper);
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt);
  font-size:12px; line-height:11px; text-align:center; font-weight:bold; color:#000; }
.wiz-step h3{ font-size:14.5px; margin-bottom:2px; }
.wiz-step p{ font-size:13px; color:#333; }

/* ── screenshots grid ── */
.screens95{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; }
@media(max-width:880px){ .screens95{ grid-template-columns:1fr; } }
.screens95 figure{ margin:0; }
.screens95 figcaption{ font-size:12.5px; color:#222; margin-top:10px; padding:6px 8px;
  background:var(--note); border:1px solid #ca8; }

/* footer line on the desktop */
.deskfoot{ text-align:center; color:#dff; font-size:12px; margin:30px auto 16px; text-shadow:1px 1px 1px #044; }
.deskfoot a{ color:#fff; }

/* scrollbars, retro */
::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:repeating-conic-gradient(#fff 0% 25%, #dfdfdf 0% 50%) 0 0/4px 4px; }
::-webkit-scrollbar-thumb{ background:var(--face);
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow); }