/* POL Admin -- the classic Windows 98 chrome POL Studio uses (studio/designer/win98.css). */
:root { color-scheme:light; font:13px "POL MS Sans Serif 13px", Tahoma, "MS Sans Serif", Arial, sans-serif; color:#000; background:#008080;
        --face:#c0c0c0; --line:#808080; --accent:#000080; --bad:#800000; --muted:#404040;
        --raised:inset 1px 1px #fff, inset -1px -1px #808080; --sunken:inset 1px 1px #000; }
* { box-sizing:border-box; scrollbar-color:#c0c0c0 #dfdfdf; }
[hidden] { display:none !important; }
body { margin:4px; min-height:calc(100vh - 8px); padding:2px; background:var(--face);
       border:2px solid; border-color:#fff #000 #000 #fff; box-shadow:var(--raised); }
body.desktop { background:#008080; border:0; box-shadow:none; display:grid; place-items:center; }

/* Title bar, as on every Win98 window */
.titlebar { display:flex; align-items:center; gap:10px; min-height:25px; padding:3px 4px 3px 6px; color:#fff;
            background:linear-gradient(90deg, #000080, #1084d0); }
.titlebar h1 { font-size:13px; margin:0; font-weight:bold; }
.titlebar h1::before { content:'▣'; margin-right:6px; }
.titlebar small { font-size:13px; }
.titlebar .who { font-size:13px; }
.titlebar button { min-height:18px; padding:0 6px; font-size:13px; }

/* Tab control, as in Display Properties: tabs stand on a raised panel;
   the selected one is 2px taller, overlaps its neighbours and opens into the
   panel; the others sit 2px lower. */
header nav { display:flex; align-items:flex-end; padding:8px 8px 0 10px; position:relative; z-index:1; }
header nav a { position:relative; color:#000; text-decoration:none; padding:3px 8px 2px; margin:2px 0 0 0;
               background:var(--face); border:1px solid; border-color:#fff #000 transparent #fff;
               border-radius:3px 3px 0 0; box-shadow:inset -1px 0 #808080, inset 1px 1px #dfdfdf; }
header nav a + a { margin-left:-1px; }
header nav a.on { margin:0 -2px -1px; padding:4px 10px 4px; z-index:2; }
header nav a.on:focus-visible, header nav a:focus-visible { outline:1px dotted #000; outline-offset:-4px; }
header nav a.soon { color:#808080; text-shadow:1px 1px #fff; pointer-events:none; }

/* The panel the tabs belong to */
main { margin:0 8px 8px; border:1px solid; border-color:#fff #000 #000 #fff;
       box-shadow:inset -1px -1px #808080, inset 1px 1px #dfdfdf; }

/* Controls */
button, input, select, textarea { font:inherit; color:#000; border-radius:0; padding:3px 7px; }
button { background:var(--face); border:1px solid; border-color:#fff #000 #000 #fff; box-shadow:var(--raised);
         min-height:24px; cursor:default; }
button:active:not(:disabled) { border-color:#000 #fff #fff #000; box-shadow:inset 1px 1px #808080; }
button:focus-visible { outline:1px dotted #000; outline-offset:-5px; }
button:disabled { color:#808080; text-shadow:1px 1px #fff; }
button.primary { outline:1px solid #000; outline-offset:1px; }
button.danger { color:var(--bad); }
input, select, textarea { background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; box-shadow:var(--sunken); min-height:24px; }
input:focus-visible, select:focus-visible { outline:1px dotted #000; outline-offset:1px; }
input[type=checkbox] { min-height:0; box-shadow:none; accent-color:#000080; }
input::placeholder { color:#666; }
label { display:inline-flex; align-items:center; gap:5px; }

/* Layout */
main { padding:12px 10px; display:grid; gap:10px; }
section { display:grid; gap:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; }

/* Cards are group boxes: an etched frame with the heading set into it */
.card { position:relative; border:2px groove #fff; padding:14px 10px 10px; margin-top:6px; background:var(--face); }
.card > h2:first-child, .card .toolbar > h2 { font-size:13px; font-weight:normal; margin:0; }
.card > h2:first-child { position:absolute; top:-8px; left:8px; padding:0 4px; background:var(--face); }
.stat { font-size:22px; font-weight:bold; margin:4px 0; }
.muted { color:var(--muted); font-size:13px; }
.ok { color:#006000; margin:4px 0; }
.err { color:var(--bad); margin:4px 0; }
.toolbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.toolbar input { min-width:240px; }
.toolbar input[type=checkbox] { min-width:0; }
.spacer { flex:1; }

/* Balloon-style notice */
.banner { background:#ffffe1; border:1px solid #000; padding:8px 10px; box-shadow:2px 2px #0004; }
.banner form { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center; }

/* Tables are list views: white, sunken, raised column headers */
table { width:100%; border-collapse:collapse; background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080;
        box-shadow:var(--sunken); }
th { position:sticky; top:0; text-align:left; font-weight:normal; padding:3px 6px; background:var(--face);
     border:1px solid; border-color:#fff #808080 #808080 #fff; }
td { padding:3px 6px; border-bottom:1px dotted #c0c0c0; vertical-align:middle; }
tbody tr:hover td { background:#000080; color:#fff; }
tbody tr:hover td.src, tbody tr:hover .badge { color:#fff; }
td button { min-height:20px; padding:1px 6px; font-size:13px; }
td.src { color:var(--muted); font-size:13px; word-break:break-all; }
.badge { font-size:13px; padding:0 4px; border:1px solid #808080; background:var(--face); }
.badge.studio { background:#dfe6ff; }
.badge.page { background:#e6f2e6; }

/* Sunken text areas: live feed, chat, log */
.feed, .chatlog, .log { background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; box-shadow:var(--sunken);
                        padding:4px 6px; overflow:auto; }
.feed { font:13px "Courier New", monospace; max-height:200px; }
.chat { display:grid; grid-template-columns:200px 1fr; gap:10px; }
.rooms { list-style:none; margin:0; padding:2px; background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080;
         box-shadow:var(--sunken); min-height:200px; }
.rooms li { padding:2px 4px; cursor:default; }
.rooms li.on, .rooms li:hover { background:#000080; color:#fff; }
.chatlog { height:420px; font-size:13px; }
.chatlog div { padding:1px 0; }
.log { height:320px; margin:0; font:11px/1.35 "Courier New", monospace; white-space:pre-wrap; word-break:break-all; }

/* Studio fills the tab */
section.studio-view { display:block; }
main:has(section.studio-view:not([hidden])) { padding:3px; }
#stFrame { display:block; width:100%; height:calc(100vh - 100px); border:2px solid; border-color:#808080 #fff #fff #808080; background:var(--face); }

/* Sign-on dialog */
.login { width:320px; background:var(--face); border:2px solid; border-color:#fff #000 #000 #fff;
         box-shadow:var(--raised), 2px 2px #0008; padding:2px; }
.login form { display:grid; gap:8px; padding:12px; }
.login p { margin:0 0 4px; }
.login button { justify-self:end; min-width:80px; }

/* Win98 check box: square, sunken, black tick */
input[type=checkbox] { appearance:none; -webkit-appearance:none; width:13px; height:13px; min-height:0; padding:0; margin:0;
  background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; box-shadow:inset 1px 1px #000; position:relative; }
input[type=checkbox]:checked::after { content:''; position:absolute; left:2px; top:0; width:3px; height:6px;
  border:solid #000; border-width:0 2px 2px 0; transform:rotate(40deg); }
/* Win98 drop-down: sunken field with a raised arrow button */
select { appearance:none; -webkit-appearance:none; padding-right:22px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Crect width='16' height='20' fill='%23c0c0c0'/%3E%3Cpath d='M0 0h15v1H1v18H0z' fill='%23fff'/%3E%3Cpath d='M15 0h1v20H0v-1h15z' fill='%23000'/%3E%3Cpath d='M14 1h1v18H1v-1h13z' fill='%23808080'/%3E%3Cpath d='M4 8h7l-3.5 4z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 1px center; }

/* Bitmap fonts are drawn pixel for pixel: no smoothing, no synthesis. */
body, button, input, select, textarea { -webkit-font-smoothing:none; font-smooth:never; font-synthesis:none; }
.stat { font-family:"POL MS Sans Serif 24px", Tahoma, sans-serif; font-size:24px; }
.feed, .log { font-family:"POL Courier New", "Courier New", monospace; }