/* ===========================================================
   apps.css — styling for individual accessory / suite apps
   =========================================================== */

/* ---------- Notepad / Write / Word (text surfaces) ---------- */
.app-textarea{
  /* Notepad's font was Fixedsys, a chunky bitmap monospace. Nothing
     freely licensed recreates Fixedsys exactly, but the VGA ROM face is
     the same species of font and far closer than Courier New's smooth
     outlines. Used by Notepad only. */
  width:100%; height:100%; border:none; outline:none; resize:none;
  padding:4px; font-family:"IBM VGA 437","Courier New",monospace; font-size:16px;
  -webkit-font-smoothing:none; font-smooth:never; line-height:1;
  box-sizing:border-box;
}
.app-rte{
  width:100%; height:100%; padding:8px 40px; outline:none; overflow:auto;
  font-family:"Times New Roman",serif; font-size:15px; background:#fff; box-sizing:border-box;
}
.ruler{
  height:18px; background:#fff; border-bottom:1px solid var(--w-btn-shadow);
  position:relative; flex:0 0 18px;
  background-image:
    repeating-linear-gradient(to right, #000 0 1px, transparent 1px 2px);
  background-size:12px 6px; background-position:8px bottom; background-repeat:repeat-x;
}

/* ---------- Calculator ---------- */
.calc-body{ display:flex; flex-direction:column; padding:6px; gap:6px; height:100%; box-sizing:border-box; }
.calc-display{
  /* The real display used the system font, not a typewriter face — the
     monospace readout is a pocket-calculator idea, not a Windows one. */
  background:var(--w-window-bg); text-align:right;
  font-family:"W311Sans",sans-serif;
  font-size:20px; padding:6px 8px; min-height:30px;
  border-top:1px solid var(--w-btn-shadow); border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight); border-bottom:1px solid var(--w-btn-hilight);
}
.calc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; flex:1; }
/* The base button rule pads 10px each side, which clips "Back" and "1/x"
   in a 230px-wide window. The real keys were tight boxes. */
.calc-grid button{ font-size:13px; font-weight:bold; padding:3px 2px; }
/* Coloured captions on grey faces, from the 16-colour VGA palette. */
.calc-grid button.calc-k-num{   color:#0000c0; }   /* digits, . and +/- */
.calc-grid button.calc-k-op{    color:#c00000; }   /* / * - + */
.calc-grid button.calc-k-mem{   color:#c000c0; }   /* MC MR MS M+ */
.calc-grid button.calc-k-fn{    color:#008080; }   /* sqrt % 1/x = */
.calc-grid button.calc-k-clear{ color:#c00000; }   /* C CE Back */
.calc-grid button:disabled{ color:var(--w-btn-shadow); }
.calc-mem{ display:flex; gap:3px; font-size:11px; align-items:center; height:14px; }

/* ---------- Minesweeper ---------- */
.mine-wrap{ display:flex; flex-direction:column; align-items:center; padding:6px; gap:6px; }
.mine-hud{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:var(--w-btn-face);
  border-top:1px solid var(--w-btn-shadow); border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight); border-bottom:1px solid var(--w-btn-hilight);
  padding:4px 6px;
}
.mine-counter{
  font-family:"Courier New",monospace; background:#000; color:#ff0000; font-weight:bold;
  font-size:20px; padding:1px 4px; letter-spacing:2px; min-width:46px; text-align:right;
  /* sunken LED well: two-tone, #808080 not black */
  border-top:1px solid var(--w-btn-shadow); border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight); border-bottom:1px solid var(--w-btn-hilight);
}
.mine-face{
  width:26px; height:26px; font-size:16px; display:flex; align-items:center; justify-content:center;
}
.mine-grid{ display:grid; gap:0; background:var(--w-btn-shadow);
  border-top:2px solid var(--w-btn-shadow); border-left:2px solid var(--w-btn-shadow);
  border-right:2px solid var(--w-btn-hilight); border-bottom:2px solid var(--w-btn-hilight);
}
.mine-cell{
  width:18px; height:18px; background:var(--w-btn-face);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:bold; font-family:Arial,sans-serif;
  /* raised cell: white top/left, #808080 bottom/right — no black */
  border-top:2px solid var(--w-btn-hilight); border-left:2px solid var(--w-btn-hilight);
  border-right:2px solid var(--w-btn-shadow); border-bottom:2px solid var(--w-btn-shadow);
}
.mine-cell.open{
  border:1px solid var(--w-btn-shadow); background:var(--w-btn-face);
}
.mine-cell.mine.hit{ background:#ff0000; }
.mine-cell[data-n="1"]{ color:#0000ff; }
.mine-cell[data-n="2"]{ color:#008000; }
.mine-cell[data-n="3"]{ color:#ff0000; }
.mine-cell[data-n="4"]{ color:#000080; }
.mine-cell[data-n="5"]{ color:#800000; }
.mine-cell[data-n="6"]{ color:#008080; }
.mine-cell[data-n="7"]{ color:#000000; }
.mine-cell[data-n="8"]{ color:#808080; }

/* ---------- Solitaire ---------- */
.sol-table{ width:100%; height:100%; background:#008000; position:relative; overflow:auto; padding:10px; box-sizing:border-box; }
.sol-row{ display:flex; gap:10px; margin-bottom:14px; }
.sol-slot{ width:64px; height:88px; border:2px solid rgba(255,255,255,0.35); border-radius:4px; position:relative; flex:0 0 64px; }
.sol-cascade{ position:relative; width:64px; min-height:88px; flex:0 0 64px; }
.card{
  width:64px; height:88px; border-radius:4px; background:#fff; position:absolute;
  border:1px solid #000;
  font-family:Georgia,serif; user-select:none;
}
.card .corner{ position:absolute; left:3px; top:2px; font-size:13px; font-weight:bold; line-height:1; text-align:center; }
.card .corner.br{ left:auto; right:3px; top:auto; bottom:2px; transform:rotate(180deg); }
.card .pip-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; }
.card.red{ color:#c00000; }
.card.black{ color:#000; }
.card.back{
  background:
    repeating-linear-gradient(45deg,#000080 0 4px,#1c1c8c 4px 8px);
  border:2px solid #fff;
}
.card.faceup{ cursor:grab; }

/* ---------- Clock ---------- */
.clock-face-wrap{ display:flex; align-items:center; justify-content:center; height:100%; background:#000; }
.clock-analog{ width:180px; height:180px; border-radius:50%; background:radial-gradient(#f4f4e6,#d8d8c4); position:relative;
  border:4px solid #222; box-shadow:0 0 0 2px #888; }
.clock-hand{ position:absolute; left:50%; bottom:50%; transform-origin:bottom center; background:#000; }
.clock-hand.hr{ width:5px; height:46px; margin-left:-2.5px; }
.clock-hand.min{ width:3px; height:66px; margin-left:-1.5px; }
.clock-hand.sec{ width:1px; height:74px; margin-left:-0.5px; background:#c00000; }
.clock-tick{ position:absolute; background:#000; }
.clock-digital{ font-family:"Courier New",monospace; color:#0f0; font-size:34px; letter-spacing:2px; background:#000; padding:10px 18px; }

/* ---------- Calendar ---------- */
.cal-wrap{ padding:10px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--w-btn-shadow); border:1px solid var(--w-btn-shadow); }
.cal-cell{ background:#fff; min-height:30px; padding:2px 4px; font-size:12px; }
.cal-cell.hd{ background:var(--w-menu); font-weight:bold; text-align:center; }
.cal-cell.today{ background:#ffff99; font-weight:bold; }

/* ---------- Cardfile ---------- */
.cardfile-wrap{ display:flex; height:100%; }
.cardfile-index{ width:150px; border-right:1px solid var(--w-btn-shadow); overflow:auto; }
.cardfile-card{ flex:1; padding:10px; }
.cardfile-card .idxline{ background:var(--w-menu); border:1px solid var(--w-btn-shadow); padding:3px 6px; font-weight:bold; margin-bottom:6px; }
.cardfile-card textarea{ width:100%; height:calc(100% - 34px); }

/* ---------- Character Map ---------- */
.charmap-grid{ display:grid; grid-template-columns:repeat(16,1fr); gap:1px; padding:6px; }
.charmap-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:16px;
  border:1px solid var(--w-btn-shadow); background:#fff; }
.charmap-cell:hover, .charmap-cell.sel{ background:var(--w-selected-bg); color:var(--w-selected-text); }
.charmap-preview{ display:flex; align-items:center; gap:10px; padding:6px; border-top:1px solid var(--w-btn-shadow); }
.charmap-preview .big{ font-size:42px; width:70px; height:70px; display:flex; align-items:center; justify-content:center;
  border-top:1px solid var(--w-btn-shadow); border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight); border-bottom:1px solid var(--w-btn-hilight); background:#fff; }

/* ---------- Control Panel ---------- */
.cp-grid{ display:flex; flex-wrap:wrap; gap:14px; padding:14px; }
.cp-applet{ width:76px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; font-size:11px; }
.cp-applet .ico{ width:32px; height:32px; }
.scheme-list{ height:130px; }
.scheme-preview{
  height:120px; border:1px solid #000; margin:8px 0; position:relative; overflow:hidden;
  background:var(--w-desktop);
}
.scheme-preview .sp-title{
  position:absolute; top:10px; left:14px; right:14px; height:16px; background:var(--w-active-title); color:var(--w-active-text);
  font-size:10px; display:flex; align-items:center; padding:0 4px; font-weight:bold;
}
.scheme-preview .sp-win{ position:absolute; top:10px; left:14px; right:14px; bottom:14px; background:var(--w-btn-face); border:1px solid #000; }
.scheme-preview .sp-btn{ position:absolute; bottom:20px; left:20px; width:34px; height:14px; background:var(--w-btn-face); border:1px solid #000; font-size:9px; }

/* ---------- File Manager ---------- */
.fm-wrap{ display:flex; flex-direction:column; height:100%; }
.fm-drivebar{ display:flex; gap:2px; padding:3px; background:var(--w-btn-face); border-bottom:1px solid var(--w-btn-shadow); }
.fm-panes{ flex:1; display:flex; overflow:hidden; }
.fm-tree{ width:40%; overflow:auto; border-right:2px solid var(--w-btn-shadow); background:#fff; padding:4px; }
.fm-files{ flex:1; overflow:auto; background:#fff; padding:4px; }
.fm-tree-node{ padding-left:16px; white-space:nowrap; cursor:default; }
.fm-tree-node .row{ display:flex; align-items:center; gap:4px; padding:1px 2px; }
.fm-tree-node .row.sel{ background:var(--w-selected-bg); color:var(--w-selected-text); }
.fm-file-item{ display:flex; align-items:center; gap:5px; padding:2px 4px; }
.fm-file-item.sel{ background:var(--w-selected-bg); color:var(--w-selected-text); }
.fm-file-item .ico{ width:18px; height:18px; flex:0 0 18px; }

/* ---------- DOS Prompt ---------- */
.dos-screen{
  /* A DOS box under Windows 3.1 drew in the Terminal font — the VGA
     character ROM, the same glyphs as the boot screen — never in a
     smooth outline face like Courier. 16px gives exact 8x16 cells, and
     line-height 1 matches text mode, which had no leading between rows. */
  background:#000; color:#c0c0c0;
  font-family:"IBM VGA 437","Courier New",monospace; font-size:16px;
  -webkit-font-smoothing:none; font-smooth:never;
  padding:6px; height:100%; overflow:auto; white-space:pre-wrap; line-height:1;
}
.dos-input-line{ display:flex; }
.dos-input{ background:transparent; border:none; color:#c0c0c0; font-family:inherit; font-size:inherit; flex:1; outline:none; }

/* ---------- Excel-alike grid ---------- */
.xl-wrap{ display:flex; flex-direction:column; height:100%; }
.xl-formulabar{ display:flex; align-items:center; gap:2px; padding:2px 4px; border-bottom:1px solid var(--w-btn-shadow); background:var(--w-btn-face); }
.xl-formulabar input{ flex:1; }
.xl-grid-scroll{ flex:1; overflow:auto; background:#fff; }
table.xl-table{ border-collapse:collapse; }
table.xl-table th{ background:var(--w-btn-face); border:1px solid var(--w-btn-shadow); font-weight:normal; font-size:11px; min-width:64px; height:18px; position:sticky; top:0; }
table.xl-table th.rowhdr{ position:sticky; left:0; z-index:2; min-width:34px; width:34px; }
table.xl-table th.corner{ position:sticky; left:0; top:0; z-index:3; }
table.xl-table td{ border:1px solid #c0c0c0; min-width:64px; height:18px; padding:0 3px; font-size:12px; white-space:nowrap; }
table.xl-table td.active{ outline:2px solid #000; outline-offset:-1px; }
table.xl-table td input{ width:100%; height:100%; border:none; padding:0 2px; font-size:12px; }

/* ---------- PowerPoint-alike ---------- */
.pp-wrap{ display:flex; height:100%; }
.pp-sorter{ width:130px; border-right:1px solid var(--w-btn-shadow); overflow:auto; background:var(--w-btn-face); padding:6px; display:flex; flex-direction:column; gap:8px; }
.pp-thumb{ background:#fff; border:2px solid var(--w-btn-shadow); aspect-ratio:4/3; font-size:8px; padding:4px; overflow:hidden; text-align:center; }
.pp-thumb.sel{ border-color:#000080; }
.pp-canvas-wrap{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--w-btn-shadow); }
.pp-slide{ width:480px; height:360px; background:#fff; border:1px solid #000; padding:24px; box-sizing:border-box; position:relative; }
.pp-slide .title{ font-size:26px; font-weight:bold; text-align:center; outline:none; }
.pp-slide .body{ font-size:16px; margin-top:20px; outline:none; }

/* ---------- Browser ---------- */
.br-wrap{ display:flex; flex-direction:column; height:100%; }
.br-addrbar{ display:flex; align-items:center; gap:4px; padding:3px 4px; background:var(--w-btn-face); border-bottom:1px solid var(--w-btn-shadow); }
.br-addrbar input{ flex:1; }
.br-content{ flex:1; position:relative; background:#fff; }
.br-content iframe{ width:100%; height:100%; border:none; }
.br-home{ padding:24px; font-family:Georgia,serif; background:#c0c0d8; height:100%; overflow:auto; box-sizing:border-box; }
.br-home h1{ font-family:Georgia,serif; font-size:28px; }
.br-error{ padding:30px; font-family:"W311Sans",sans-serif; }

/* ---------- Print Manager / About ---------- */
.about-wrap{ display:flex; gap:16px; padding:16px; align-items:flex-start; }
.about-wrap .icon-big{ width:48px; height:48px; }

/* ---------- Microsoft Mail ---------- */
.mail-wrap{ display:flex; height:100%; }
.mail-folders{ width:130px; flex:0 0 130px; overflow:auto; }
.mail-folders .item{ padding:3px 4px; display:flex; align-items:center; gap:5px; }
.mail-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.mail-msg-row{
  display:flex; padding:2px 6px; gap:4px; font-size:12px; white-space:nowrap;
  border-bottom:1px solid #e8e8e8;
}
.mail-msg-row.hd{ background:var(--w-menu); font-weight:bold; border-bottom:1px solid var(--w-btn-shadow); flex:0 0 auto; }
.mail-msg-row.unread{ font-weight:bold; }
.mail-msg-row.sel{ background:var(--w-selected-bg); color:var(--w-selected-text); }
.mail-msg-row .mf-from{ width:130px; flex:0 0 130px; overflow:hidden; text-overflow:ellipsis; }
.mail-msg-row .mf-subj{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.mail-msg-row .mf-date{ width:70px; flex:0 0 70px; text-align:right; }
.mail-msglist{ flex:1; overflow:auto; background:#fff; min-height:0; }
.mail-readpane{
  flex:1; overflow:auto; border-top:2px solid var(--w-btn-shadow); background:#fff;
  padding:8px; font-size:12px; min-height:0;
}
.mail-readpane-empty{ color:#666; font-style:italic; padding:6px; }
.mail-readhdr{ margin-bottom:2px; }
.mail-readbody{ margin-top:8px; line-height:1.4; }

/* ---------- Schedule+ ---------- */
.sched-wrap{ height:100%; overflow:auto; padding:6px; box-sizing:border-box; }
.sched-grid{ display:grid; gap:1px; background:var(--w-btn-shadow); border:1px solid var(--w-btn-shadow); }
.sched-cell{ background:#fff; min-height:40px; padding:1px; position:relative; }
.sched-cell.hd{ background:var(--w-menu); font-weight:bold; text-align:center; font-size:11px; display:flex; align-items:center; justify-content:center; min-height:22px; padding:3px; }
.sched-cell.hd.time{ font-weight:normal; font-size:10px; }
.sched-appt{
  background:var(--w-selected-bg); color:var(--w-selected-text); font-size:10px; padding:3px 4px;
  height:100%; display:flex; align-items:center; cursor:pointer; overflow:hidden;
}