/* texora UI overhaul. Final layer for every desktop and phone personality.
   Keeps each theme's character, but unifies focus handling, rhythm, typography and chrome. */

/* ---------- Shared tokens ---------- */
html {
  --ov-ease: cubic-bezier(.2, .8, .2, 1);
  --ov-focus: #2563eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-theme=retro] { --ov-focus: #002ea5; }
html[data-theme=modern] { --ov-focus: #075fa8; }

/* ---------- Focus: rings for keyboard users, calm UI for pointer and first load ---------- */
html:not(.uses-keyboard) :focus { outline: none !important; }
html:not(.uses-keyboard) .drag-handle:focus,
html:not(.uses-keyboard) .window-content:focus { box-shadow: none !important; }
html.uses-keyboard .os-window :is(a, button, input, textarea, select, [tabindex]):focus-visible,
html.uses-keyboard .setup-dialog :is(button, input):focus-visible {
  outline: 2px solid var(--content-accent, var(--ov-focus));
  outline-offset: 2px;
}
html:not(.uses-keyboard) .desktop-icon:focus :is(.icon-art, span) { outline: none !important; }
html:not(.uses-keyboard) .desktop-icon:focus > span:last-child { background: transparent !important; color: inherit !important; }
html:not(.uses-keyboard) .desktop-icon:focus { background: transparent !important; box-shadow: none !important; }
html.uses-keyboard .drag-handle:focus-visible { outline-offset: -3px; }
html.uses-keyboard .window-content:focus-visible { outline-offset: -4px; }

/* ---------- Reading rhythm inside every app ---------- */
.os-window .window-content :is(h1, h2, h3) { text-wrap: balance; }
.os-window .window-content :is(p, li, dd) { text-wrap: pretty; }
.os-window .window-content { scroll-behavior: smooth; scrollbar-gutter: stable; }
.hero-copy { align-self: center; }
.hero-intro, .section-intro { max-width: 62ch; }

/* ---------- Desktop wallpaper: decorative brand only while the desktop is empty ---------- */
html[data-device=desktop] :is(.wallpaper-brand, .desktop-hint) {
  transition: opacity .45s var(--ov-ease), transform .45s var(--ov-ease), visibility 0s linear 0s;
}
html[data-device=desktop] body:has(#workspace .os-window:not([hidden])) :is(.wallpaper-brand, .desktop-hint) {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* ---------- Window motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-device=desktop] .os-window:not([hidden]) { animation: ov-window-in .28s var(--ov-ease) both; }
  @keyframes ov-window-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  html[data-theme=retro][data-device=desktop] .os-window:not([hidden]) { animation-duration: .12s; animation-timing-function: steps(3); }
}

/* =====================================================================
   TEXORA OS (macos) – glass desktop
   ===================================================================== */
html[data-theme=macos] .os-window {
  border-radius: 16px;
  box-shadow: 0 0 0 .5px rgb(30 25 45 / .18), 0 24px 60px -12px rgb(40 30 70 / .32), 0 8px 18px -6px rgb(40 30 70 / .14);
}
html[data-theme=macos] .os-window:not(.is-active) { box-shadow: 0 0 0 .5px rgb(30 25 45 / .14), 0 12px 30px -10px rgb(40 30 70 / .2); }
html[data-theme=macos] .os-window .drag-handle { font-weight: 600; letter-spacing: -.005em; }
html[data-theme=macos] .os-window:not(.is-active) .drag-handle { opacity: .55; }
/* Mac windows have no status strip: keep only the resize corner. */
html[data-theme=macos][data-device=desktop] .os-window-bottom > span { visibility: hidden; }
html[data-theme=macos] .window-content :is(h1, h2) { letter-spacing: -.028em; }
html[data-theme=macos] .window-content .eyebrow { letter-spacing: .1em; font-weight: 650; }
/* Terminal props belong to the retro shell; the glass desktop reads as a product card. */
html[data-theme=macos] .terminal-title > span[aria-hidden],
html[data-theme=macos] .terminal-status .cursor { display: none; }
html[data-theme=macos] .terminal-window { border-radius: 18px; overflow: hidden; box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 18px 40px -18px rgb(40 30 70 / .35); }
html[data-theme=macos] .terminal-title { font-weight: 600; letter-spacing: .01em; }
html[data-theme=macos] .example-tabs button { font-weight: 600; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
html[data-theme=macos] .flow-step > span,
html[data-theme=macos] .terminal-prompt { letter-spacing: .08em; font-size: .78em; opacity: .78; }
html[data-theme=macos] .window-content .button.primary,
html[data-theme=macos] .window-content .button { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
html[data-theme=macos] .window-content .button.primary { box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 8px 20px -8px rgb(49 95 166 / .7); }
html[data-theme=macos] .window-content .button:hover { transform: translateY(-1px); }
html[data-theme=macos] .window-content .button:active { transform: translateY(0); }
html[data-theme=macos] .service,
html[data-theme=macos] .window-content article { transition: box-shadow .25s ease, transform .25s var(--ov-ease); }
html[data-theme=macos][data-device=desktop] .service:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgb(48 44 80 / .35); }
html[data-theme=macos] .mac-menubar { font-weight: 500; }
html[data-theme=macos] .mac-menubar .mac-active-app { font-weight: 700; }

/* =====================================================================
   TEXORA DOS (modern) – crisp, calm, enterprise
   ===================================================================== */
html[data-theme=modern] .os-window {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(15 40 70 / .14), 0 22px 54px -14px rgb(5 20 45 / .5), 0 6px 14px -6px rgb(5 20 45 / .25);
}
html[data-theme=modern] .os-window:not(.is-active) { box-shadow: 0 0 0 1px rgb(15 40 70 / .12), 0 10px 26px -12px rgb(5 20 45 / .4); }
html[data-theme=modern] .os-window .drag-handle { font-weight: 600; }
html[data-theme=modern] .os-window:not(.is-active) .titlebar { opacity: .8; }
html[data-theme=modern] .window-content :is(h1, h2) { letter-spacing: -.024em; }
html[data-theme=modern] .terminal-title > span[aria-hidden],
html[data-theme=modern] .terminal-status .cursor { display: none; }
html[data-theme=modern] .terminal-window { border-radius: 12px; overflow: hidden; }
html[data-theme=modern] .flow-step > span,
html[data-theme=modern] .terminal-prompt { letter-spacing: .08em; font-size: .78em; opacity: .8; }
html[data-theme=modern] .window-content .button { transition: background .2s ease, box-shadow .2s ease, transform .15s ease; }
html[data-theme=modern] .window-content .button.primary { box-shadow: 0 8px 18px -10px rgb(7 95 168 / .9); }
html[data-theme=modern] .window-content .button:hover { transform: translateY(-1px); }
html[data-theme=modern][data-device=desktop] .service { transition: box-shadow .25s ease, transform .25s var(--ov-ease); }
html[data-theme=modern][data-device=desktop] .service:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgb(20 53 82 / .45); }
html[data-theme=modern][data-device=desktop] .os-window-bottom > span { opacity: .7; }

/* =====================================================================
   TEXORA RETRO – Windows 95 personality, readable body copy
   ===================================================================== */
html[data-theme=retro] .os-window .window-content :is(h1, h2) {
  font-family: var(--pixel);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(2.6rem, 3.6vw, 3.6rem);
}
html[data-theme=retro] .os-window .window-content h3 {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .01em;
}
/* Body copy in a period-correct UI sans: still Windows 95, far easier to read than Courier. */
html[data-theme=retro] .os-window .window-content :is(p, li, dd, dt, label, .hero-intro, .section-intro) {
  font-family: Tahoma, Verdana, 'Segoe UI', sans-serif;
  letter-spacing: 0;
}
html[data-theme=retro][data-device=desktop] .os-window .window-content :is(.hero-intro, .section-intro) { font-size: 15.5px; line-height: 1.6; }
html[data-theme=retro] .os-window .window-content :is(.eyebrow, .service-label, .flow-step > span, .terminal-prompt, .terminal-title, .terminal-status, .example-label) {
  font-family: var(--mono);
  letter-spacing: .06em;
}
html[data-theme=retro] .os-window .window-content .flow-step strong {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: .02em;
}
html[data-theme=retro] .wallpaper-brand span { text-shadow: 1px 1px 0 rgb(0 0 0 / .25); }

/* ---------- Setup dialog (all themes) ---------- */
.setup-dialog .theme-option { transition: transform .2s var(--ov-ease), box-shadow .2s ease, border-color .2s ease; }
html:not([data-theme=retro]) .setup-dialog .theme-option:hover { transform: translateY(-2px); }
.setup-dialog h2 { text-wrap: balance; }

/* ---------- Start menu ---------- */
html:not([data-theme=retro]) .start-menu-items :is(button, a) { transition: background .12s ease, color .12s ease; }

/* =====================================================================
   PHONE – shared navigation bar polish
   ===================================================================== */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  .os-window .drag-handle { font-weight: 650; letter-spacing: -.01em; }
  html[data-theme=retro] .os-window .drag-handle { font-weight: 400; }
  .os-window .window-content :is(h1, h2) { letter-spacing: -.022em; }
  html[data-theme=retro] .os-window .window-content :is(h1, h2) { letter-spacing: 0; }
  html:not([data-theme=retro]) .terminal-title > span[aria-hidden],
  html:not([data-theme=retro]) .terminal-status .cursor { display: none; }
  .os-window .window-content .button { min-height: 48px; }
}

/* Retro phone: LCD personality, same readable type pairing as the desktop. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html[data-theme=retro] .os-window .window-content :is(h1, h2) { font-size: 2.35rem; line-height: 1; }
  html[data-theme=retro] .os-window .window-content h3 { font-size: 1.6rem; }
  html[data-theme=retro] .os-window .window-content :is(.hero-intro, .section-intro) { font-size: 15px; line-height: 1.6; }
}

/* Glass sidebars must not reveal text from windows stacked behind them. */
html[data-theme=macos] .wizard-sidebar { background: color-mix(in srgb, var(--content-soft, #eeebf1) 92%, white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html:not(.uses-keyboard) .desktop-icon:focus { border-color: transparent !important; }
/* Title bars keep their frosted look but no longer show readable text from windows behind. */
html[data-theme=macos][data-device=desktop] .os-window .titlebar { background-color: rgb(247 246 250 / .985) !important; }

/* Texora Droid home: brand as a Material-You glance widget instead of a cream plate. */
@media (max-width: 600px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html[data-device=phone][data-theme=modern] .wallpaper-brand {
    width: calc(100% - 40px) !important; max-width: 360px; left: 50% !important; right: auto !important; transform: translateX(-50%);
    padding: 18px 20px 20px; border-radius: 28px;
    background: rgb(250 251 244 / .62);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 12px 32px -18px rgb(40 62 44 / .45);
  }
  html[data-device=phone][data-theme=modern] .wallpaper-brand img {
    width: 64% !important; margin: -22px auto -16px; background: none !important; box-shadow: none !important; border: 0 !important;
    border-radius: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html[data-device=phone][data-theme=modern] .wallpaper-brand span { margin-top: -10px !important; color: #3d5543; letter-spacing: .14em; }
}