/* dashboard-sky.css — the dashboard stands on the landing sky (OPERATIONS-214 D1/D2):
   the same scene as manji.ai and the amiaOS first boot, day/night by the clock; the card
   is frosted glass; the page rises out of white; nothing is smaller than --t-min. */
html, body { background: #6aa8e6; }
body.night { background: var(--ink-night); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.page::before { display: none !important; }
.page { background: transparent; }
.stage { padding-top: 7vh; }
.card {
  max-width: 560px;
  background: var(--glass-light) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.page-footer { position: relative; z-index: 1; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.page-footer a { color: inherit; }
/* the type floor (was 10-12px) */
.brand-tag, .field label, .btn-ghost, .sub-pill, .foot .acct-email, .foot .signout-link, .page-footer,
.page-footer .links, .mtg-k, .mtg-pill, .inv-k, .inv-chip, .lx-typing, .co-chip .co-name { font-size: var(--t-min) !important; }
.btn { font-size: var(--t-small) !important; }
.nav-tile .nt-label { font-size: var(--t-small) !important; }
.nav-tile .nt-badge { font-size: 12px !important; }
#welcome-h1 { font-size: var(--t-h2); line-height: 1.15; }
/* out of white */
#dash-veil { position: fixed; inset: 0; z-index: 50; background: #fff; pointer-events: none; transition: opacity 1.4s ease-out; }
#dash-veil.gone { opacity: 0; }
/* YOUR COMPUTER (OPERATIONS-214 D3) */
.yc { margin: var(--sp-6) 0 var(--sp-4); padding: var(--sp-6); border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, rgba(61,74,170,.10), rgba(0,191,99,.08)); border: 1px solid rgba(61,74,170,.22); }
.yc.yc-flash { box-shadow: 0 0 0 3px rgba(61,74,170,.45); transition: box-shadow 1s ease; }
.yc-k { font-family: var(--font-label); font-size: var(--t-min); letter-spacing: var(--track-label); text-transform: uppercase; color: #46586c; }
.yc-k .amia-os { text-transform: none; letter-spacing: 0; }
.yc-name { font-family: var(--font-label); font-size: var(--t-h3); letter-spacing: .04em; color: #12152b; margin: var(--sp-2) 0 var(--sp-1); word-break: break-word; }
.yc-status { font-family: var(--font-words); font-size: var(--t-body); color: #2b3446; margin-bottom: var(--sp-4); }
.yc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #b7bfcc; margin-right: 8px; vertical-align: 1px; }
.yc-dot.on { background: var(--green); box-shadow: 0 0 0 4px rgba(0,191,99,.18); }
.yc-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-top: 1px solid rgba(18,21,43,.08); }
.yc-label { font-family: var(--font-label); font-size: var(--t-min); letter-spacing: var(--track-label); text-transform: uppercase; color: #46586c; min-width: 36px; }
.yc-key { font-family: var(--font-label); font-size: var(--t-body); letter-spacing: .12em; color: #12152b; cursor: pointer; }
.yc .sub-strip.yc-sub { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.yc-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.yc-actions .btn { width: auto; }
.biz-k { font-family: var(--font-label); font-size: var(--t-min); letter-spacing: var(--track-label); text-transform: uppercase; color: #46586c; text-align: left; margin: var(--sp-6) 0 var(--sp-2); }
/* THE ARRIVAL (OPERATIONS-214 D5): the first visit after a computer connects */
.arrival { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); padding: 0 var(--sp-6); text-align: center; background: radial-gradient(ellipse at center, rgba(4,7,20,.80), rgba(4,7,20,.94));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 1.2s ease; }
.arrival.on { opacity: 1; }
.ar-hello { font-family: var(--font-label); font-size: clamp(44px, 8vw, 92px); letter-spacing: .05em; color: #fff;
  text-shadow: 0 0 40px rgba(159,214,230,.75), 0 2px 18px rgba(0,0,0,.5); transform: scale(.94); transition: transform 2.4s cubic-bezier(.2,.8,.2,1); }
.arrival.on .ar-hello { transform: scale(1); }
.ar-sub { font-family: var(--font-words); font-size: 22px; line-height: 1.5; color: rgba(255,255,255,.95); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ar-go { width: auto !important; padding: 15px 44px !important; }
/* buttons in the brand face (JetBrains Mono never loaded here); the main one wears the login gradient */
.btn { font-family: var(--font-label) !important; letter-spacing: .1em !important; }
.btn:not(.btn-ghost) { background: linear-gradient(90deg, var(--green), var(--indigo)) !important; color: #fff !important; border: 0 !important; }
.yc .btn-ghost { font-size: var(--t-min) !important; padding: 10px 18px !important; }
.ar-go { background: linear-gradient(90deg, var(--green), var(--indigo)) !important; color: #fff !important; }
/* FIX (CEO 2026-11-04 "it wont scroll its stuck"): a [hidden] overlay must never take the
   screen — .arrivals display:flex had overridden the hidden attribute, so an invisible
/* FIX (CEO 2026-11-04: it will not scroll, it is stuck): a [hidden] overlay must never take
   the screen. .arrival's display:flex had overridden the hidden attribute, so an invisible
   full-screen layer swallowed every scroll and click. And the WINDOW scrolls (not the body),
   so the fixed sky behind never traps the wheel. */
[hidden] { display: none !important; }
html, body { height: auto !important; min-height: 100%; }
body { overflow-x: clip !important; overflow-y: visible !important; }
html { overflow-x: clip; overflow-y: auto; }
/* THE DETAIL SCREENS (OPERATIONS-214): every page that opens from a home tile is a centered
   frosted-glass panel over the same sky, one type scale, nothing under --t-min.
   Screens are built by makeScreen() (and Linus's #lx-screen) with inline styles, so these
   rules override with !important. They never set `display`: a closed screen carries .hide
   (display:none !important) and so takes no room and no clicks. */
body > [id$="-screen"] {
  top: var(--sp-6) !important; bottom: var(--sp-6) !important;
  left: var(--sp-4) !important; right: var(--sp-4) !important;
  width: auto !important; height: auto !important; max-width: 720px; margin: 0 auto;
  background: var(--glass-light) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--glass-radius); box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden; color: #12152b;
  font-family: var(--font-words); font-size: var(--t-body); line-height: 1.5;
}
/* while a screen is open the home steps back, so the panel stands on the sky alone */
body:has(> [id$="-screen"]:not(.hide)) .page { visibility: hidden; }
@media (max-width: 560px) {
  body > [id$="-screen"] {
    top: var(--sp-3) !important; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important;
    left: var(--sp-2) !important; right: var(--sp-2) !important; border-radius: 20px;
  }
}
/* the header row: title in the label face, the close control a real target */
body > [id$="-screen"] > div:first-child {
  background: transparent !important; border-bottom: 1px solid rgba(18, 21, 43, 0.10) !important;
}
body > [id$="-screen"]:not(#lx-screen) > div:first-child > div,
body > #lx-screen > div:first-child { max-width: none !important; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6) !important; }
body > [id$="-screen"] > div:first-child b {
  font-family: var(--font-label); font-weight: 400; font-size: clamp(22px, 5vw, var(--t-h3)); letter-spacing: .04em; line-height: 1.15;
}
body > [id$="-screen"] > div:first-child .btn-ghost[onclick^="close"] {
  min-width: 44px; min-height: 44px; padding: 0 !important; border-radius: 50% !important;
  font-size: var(--t-lead) !important; line-height: 1; letter-spacing: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
/* the body scrolls inside the panel */
body > [id$="-screen"] > div:nth-child(2):not(#lx-msgs) { padding: var(--sp-6) var(--sp-6) var(--sp-8) !important; overscroll-behavior: contain; }
body > [id$="-screen"] [id$="-screen-body"] { max-width: none !important; }
@media (max-width: 560px) {
  body > [id$="-screen"]:not(#lx-screen) > div:first-child > div, body > #lx-screen > div:first-child { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4) !important; }
  body > [id$="-screen"] > div:nth-child(2):not(#lx-msgs) { padding: var(--sp-4) var(--sp-4) var(--sp-6) !important; }
}
/* inner white cards become a lighter pane of the same glass */
body > [id$="-screen"] [style*="background:#fff"] { background: rgba(255, 255, 255, 0.62) !important; }
body > #lx-screen > div:last-child { background: transparent !important; border-top-color: rgba(18, 21, 43, 0.10) !important; }
body > #lx-screen #lx-preview { background: rgba(255, 255, 255, 0.62) !important; }
/* uppercase section labels wear the label face */
body > [id$="-screen"] [style*="text-transform:uppercase"] { font-family: var(--font-label); }
/* the type floor: inline sizes below 14px are lifted (strings as the page writes them) */
body > [id$="-screen"] [style*="font-size:.6"], body > [id$="-screen"] [style*="font-size:.7"],
body > [id$="-screen"] [style*="font-size:.8"], body > [id$="-screen"] [style*="font-size:0.6"],
body > [id$="-screen"] [style*="font-size:0.7"], body > [id$="-screen"] [style*="font-size:0.8"],
body > [id$="-screen"] [style*="font-size: .6"], body > [id$="-screen"] [style*="font-size: .7"],
body > [id$="-screen"] [style*="font-size: .8"],
body > [id$="-screen"] [style*="font-size:9px"], body > [id$="-screen"] [style*="font-size:10px"],
body > [id$="-screen"] [style*="font-size:11px"], body > [id$="-screen"] [style*="font-size:12px"],
body > [id$="-screen"] [style*="font-size:13px"], body > [id$="-screen"] small,
body > [id$="-screen"] .btn, body > [id$="-screen"] input, body > [id$="-screen"] select,
body > [id$="-screen"] textarea { font-size: var(--t-min) !important; }
body > [id$="-screen"] input, body > [id$="-screen"] textarea, body > [id$="-screen"] select { font-size: 16px !important; }
body > [id$="-screen"] .btn { font-size: var(--t-small) !important; }