/* ════════════════════════════════════════════════════════════
   AWAKE.OS — v3 shell.   Loads AFTER style.css.
   • Finance + VJ Toolkit → draggable / resizable floating windows
   • Weather collapsed into the masthead
   • Notepad + File Dump merged into one tabbed left dock
   ════════════════════════════════════════════════════════════ */

/* ── APP GRID — two columns (left dock + right slot) ───────── */
#app{
  grid-template-rows:88px 1fr;
  grid-template-columns:300px 1fr;
  grid-template-areas:
    "hd  hd"
    "left feed";
}
#colFeed{ grid-area:feed; display:flex; flex-direction:column; min-height:0; min-width:0; }

/* ════════════════════════════════════════════════════════════
   MASTHEAD  — compact logo + weather + launchers + countdown
   ════════════════════════════════════════════════════════════ */
header{ align-items:stretch; }
.logo{ padding:0 26px 0 18px; padding-right:30px; }
.logo b{ font-size:20px; }
.logo small{ font-size:8px; letter-spacing:.16em; }

/* weather chip — sits right next to the logo */
#wxHead{
  display:flex; align-items:center; gap:13px; padding:0 18px; flex:none;
  border-right:1px solid var(--line); cursor:pointer; min-width:0;
}
#wxHead:hover .wxh-loc{ color:var(--ember); }
.wxh-temp{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:.9;
  color:var(--cream); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.wxh-mid{ display:flex; flex-direction:column; gap:3px; }
.wxh-loc{ font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:.2em; color:var(--dim); white-space:nowrap; }
.wxh-cond{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ember); white-space:nowrap; }
.wxh-stats{ display:flex; flex-direction:column; gap:3px; }
.wxh-stat{ font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:.04em; white-space:nowrap; }
.wxh-stat b{ color:var(--cream); font-weight:400; }
.wxh-stat.rain b{ color:var(--ember); }
#wxHead.alert .wxh-cond{ color:var(--hot); }
.wxh-loading{ font-size:11px; color:var(--dim); letter-spacing:.15em; padding:0 6px; }

/* module launchers */
#launch{ display:flex; align-items:center; gap:8px; padding:0 16px; flex:none; border-left:1px solid var(--line); }
.launch-btn{
  display:flex; align-items:center; gap:9px; padding:9px 14px 9px 9px;
  background:var(--panel-2); border:1px solid var(--line-soft);
  font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--dim); text-transform:uppercase;
}
.launch-btn .l-num{
  font-family:var(--display); font-weight:700; font-size:12px; line-height:1;
  background:var(--panel); color:var(--dim); padding:5px 7px; flex:none;
}
.launch-btn:hover{ border-color:var(--ember); color:var(--ember); }
.launch-btn:hover .l-num{ color:var(--ember); }
.launch-btn.active{ background:var(--ember); border-color:var(--ember); color:#000;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.launch-btn.active .l-num{ background:#000; color:var(--ember); }

/* ════════════════════════════════════════════════════════════
   LEFT DOCK — TO-DO (top) + tabbed Notepad / File Dump (bottom)
   ════════════════════════════════════════════════════════════ */
#leftDock{ flex:1; }
#leftDock .tabpage{ flex:1; min-height:0; flex-direction:column; }
#leftDock .tabpage.on{ display:flex; }
/* notepad page */
#pg-notepad{ padding:12px; }
#pg-notepad #notepad{ flex:1; }
.dock-sub{ display:flex; align-items:center; justify-content:space-between; padding:0 0 8px; flex:none; }
.dock-sub .p-sub{ font-size:10px; }
/* file dump page */
#pg-filedump{ padding:0; }
#pg-filedump #dropzone{ margin:12px 12px 10px; }

/* ════════════════════════════════════════════════════════════
   FREE SLOT — right column placeholder
   ════════════════════════════════════════════════════════════ */
#freeSlot.panel{ flex:1; min-height:0; }
.free-slot-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:0; color:var(--dim);
}
.free-slot-body span{ font-family:var(--display); font-size:14px; letter-spacing:.18em; color:var(--ember); }
.free-slot-body small{ font-size:11px; letter-spacing:.06em; }

/* ════════════════════════════════════════════════════════════
   FLOATING WINDOWS — Finance / VJ Toolkit
   ════════════════════════════════════════════════════════════ */
#fwLayer{ position:fixed; inset:0; pointer-events:none; z-index:400; }
.float-win{
  position:absolute; pointer-events:auto; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--ember);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6);
  min-width:440px; min-height:300px;
}
.float-win[hidden]{ display:none; }
.float-win.full{ inset:8px !important; width:auto !important; height:auto !important; }
.fw-bar{
  display:flex; align-items:center; gap:10px; padding:0 6px 0 0; flex:none;
  background:var(--ember); cursor:grab; user-select:none;
}
.fw-bar:active{ cursor:grabbing; }
.fw-num{ font-family:var(--display); font-weight:700; font-size:13px; background:#000; color:var(--ember);
  padding:9px 11px; flex:none; }
.fw-title{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.14em; color:#000; }
.fw-sub{ font-family:var(--mono); font-size:11px; color:rgba(0,0,0,.6); letter-spacing:.04em; }
.fw-spacer{ flex:1; }
.fw-btn{ background:transparent; border:none; color:#000; font-size:14px; padding:7px 9px; line-height:1; }
.fw-btn:hover{ background:rgba(0,0,0,.18); color:#000; border:none; }
.fw-body{ flex:1; min-height:0; display:flex; overflow:hidden; }
.float-win .module{ display:flex !important; flex:1; min-height:0; border:none; }
.float-win .module .p-head{ display:none; }
.fw-resize{ position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; z-index:2;
  background:linear-gradient(135deg, transparent 50%, var(--ember) 50% 62%, transparent 62% 70%, var(--ember) 70% 82%, transparent 82%); }
.float-win.full .fw-resize{ display:none; }

/* ════════════════════════════════════════════════════════════
   TWEAKS PANEL
   ════════════════════════════════════════════════════════════ */
#tweaks{
  position:fixed; top:96px; right:16px; width:264px; z-index:600;
  background:var(--panel); border:1px solid var(--ember);
  box-shadow:0 18px 50px -10px rgba(0,0,0,.8); display:none; flex-direction:column;
}
#tweaks.show{ display:flex; }
.tw-bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px 10px 14px;
  background:var(--ember); }
.tw-bar b{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em; color:#000; }
.tw-bar button{ background:transparent; border:none; color:#000; font-size:15px; padding:2px 7px; line-height:1; }
.tw-bar button:hover{ background:rgba(0,0,0,.18); color:#000; border:none; }
.tw-body{ padding:14px; display:flex; flex-direction:column; gap:18px; }
.tw-row label{ display:block; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.14em;
  color:var(--dim); margin-bottom:9px; }
.tw-row label .v{ color:var(--ember); float:right; font-weight:700; }
.tw-seg{ display:flex; gap:6px; }
.tw-seg button{ flex:1; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.08em;
  padding:9px 6px; background:var(--panel-2); border:1px solid var(--line-soft); color:var(--dim); }
.tw-seg button.on{ background:var(--ember); border-color:var(--ember); color:#000; }
.tw-row input[type=range]{ width:100%; accent-color:var(--ember); }
.tw-swatches{ display:flex; gap:8px; }
.tw-sw{ width:32px; height:32px; border:2px solid transparent; cursor:pointer; }
.tw-sw.on{ border-color:var(--cream); }

/* ── narrow fallback ── */
@media (max-width:1100px){
  #app{ grid-template-columns:1fr; grid-template-areas:"hd" "feed" "left"; }
  #freeSlot.panel,#leftDock{ min-height:420px; }
  .float-win{ min-width:0; }
}