/* Section two, after nebusec and usevyra: a centred label, a two-line headline in the hero's Jost Light, one
   sentence, then the real product large and working. The window recreates the Malphas app from
   windows_agent/ui_host/app.html (ground, rules, tabs, mode switch, rows, the rationed pale-red accent) and it works:
   tabs, rows, the mode switch and Quarantine's put-back all respond. All content is DEMO DATA. */
/* the same room as the hero: the section stands in the hero's fog, floor and bone light (a pre-blurred, dimmed copy of the
   backdrop, fading to black at the top and bottom), so the dive lands in the same space rather than on a black page.
   Pre-blurred on purpose: a CSS blur on a full-screen layer would cost frames while the section rides the laptop screen. */
/* 2026-10-15: OLED black page behind the section (owner); the fog-room layer and the top glow are off */
.s-does { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; padding: 128px 0 12vh; align-items: flex-start;
  background: #000; }
.s-does::before { display: none; content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background: url("s2-room.webp") center 62% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 22%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 22%, #000 70%, transparent 100%); }
.s2wrap { position: relative; width: min(1080px, calc(100vw - 48px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.s2head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.s2lab { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 12px; letter-spacing: .32em; padding-left: .32em;
  color: rgba(237,237,232,.5); }
.s2lab i { width: 28px; height: 1px; background: rgba(237,237,232,.35); }
.s2head h2 { margin: 24px 0 0; display: flex; flex-direction: column; font-weight: 300; }
.s2head h2 span, .s2head h2 em { font-family: var(--display); font-style: normal; font-weight: 300; font-size: clamp(34px, 3.5vw, 56px); line-height: 1.14; letter-spacing: .005em; color: #edede8; }
.s2head h2 em { color: rgba(237,237,232,.52); }
.s2head p { margin: 20px 0 0; max-width: 34em; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: rgba(237,237,232,.62); }
/* the two calls to action under the heading (owner, 2026-10-15): the same pills as the hero's */
.s2ctas { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.s2ctas a { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px; font-family: var(--text); font-size: 14.5px; font-weight: 500;
  transition: background .3s, border-color .3s, box-shadow .3s; }
.s2ctas .pri { background: #edede8; color: #070708; }
.s2ctas .pri:hover { background: #fff; box-shadow: 0 0 0 5px rgba(237,237,232,.08); }
.s2ctas .ghost { font-weight: 400; color: #edede8; border: 1px solid rgba(237,237,232,.28); }
.s2ctas .ghost:hover { border-color: rgba(237,237,232,.7); }

/* the backdrop: a still from the Malphas world (black floor, bone light, fog; generated by the founder), a long panel
   with generous rounded corners, wider than the window like a desktop wallpaper */
/* a wide, low rectangle with round corners: short above and below the window, long to either side, with a faint
   light edge so the rounded shape reads against the black page even where the image itself is dark */
.aw-stage { position: relative; margin-top: 56px; width: min(1720px, calc(100vw - 32px)); box-sizing: border-box; flex: none;
  padding: clamp(32px, 4.2vw, 68px) clamp(24px, 12vw, 280px); border-radius: clamp(24px, 2.8vw, 44px); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 50% 45%, #2a2926, #0b0b0c 75%);
  border: 1px solid rgba(237,237,232,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.6), 0 50px 120px -50px rgba(0,0,0,.9); }
/* the image on its own layer so it can be brightened without touching the window; the lit horizon sits just below the window */
.aw-stage::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("s2-backdrop.webp") center 58% / cover no-repeat; filter: brightness(1.12); }
.aw-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,9,8,0) 55%, rgba(10,9,8,.22) 100%); }

/* the app window */
.appwin { position: relative; margin: 0 auto; max-width: 1040px; width: 100%; border-radius: 10px; border: 1px solid #252422; background: #0B0B0C; overflow: hidden;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Geist", system-ui, sans-serif; color: #EDEDE8; text-align: left;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 40px 90px -20px rgba(0,0,0,.75), 0 12px 30px -10px rgba(0,0,0,.5); }
.appwin::before { content: ''; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.appwin button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; text-align: left; }
.appwin button:focus-visible { outline: 1px solid rgba(237,237,232,.5); outline-offset: -1px; }
.aw-row .t, .aw-row .v, .aw-row .prog, .aw-day em, .aw-mode em, .aw-never em, .aw-never .hd span, .aw-hint { font-family: "Cascadia Mono", "Geist Mono", Consolas, monospace; }

.aw-title { height: 44px; display: flex; align-items: center; padding-left: 18px; border-bottom: 1px solid rgba(255,255,255,.05); }
.aw-title img { width: 22px; height: 17px; margin-right: 11px; }
.aw-title span { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.aw-ctl { margin-left: auto; display: flex; height: 44px; }
.aw-ctl i { width: 46px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #9A9A92; }

.aw-tabs { height: 56px; display: flex; align-items: stretch; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.05); }
.aw-tablist { display: flex; align-items: stretch; gap: 4px; }
.aw-tablist button { display: flex; align-items: center; padding: 0 18px; font-size: 13px; color: #9A9A92; border-bottom: 2px solid transparent; transition: background .2s, color .2s; }
.aw-tablist button:hover { background: rgba(255,255,255,.035); color: #EDEDE8; }
.aw-tablist button.on { border-bottom-color: #E8283F; background: rgba(255,255,255,.03); font-weight: 500; color: #EDEDE8; }
.aw-tablist b { font-weight: 400; color: #6E6D67; margin-left: 8px; }
.aw-mode { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.aw-mode em { font-style: normal; font-size: 12px; letter-spacing: .14em; color: #6E6D67; }
.aw-pill { display: flex; padding: 3px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.aw-pill button { font-size: 13px; color: #9A9A92; padding: 5px 12px; border-radius: 4px; transition: background .2s, color .2s; }
.aw-pill button:not(.on):hover { color: #EDEDE8; background: rgba(255,255,255,.04); }
.aw-pill button.on { color: #EDEDE8; background: #1F1E1D; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }

/* a fixed-height body that scrolls inside the window, so switching tabs never moves the page */
.aw-body { height: 430px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 14px; }
.aw-body::-webkit-scrollbar { width: 10px; }
.aw-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 5px; border: 3px solid transparent; background-clip: content-box; }
.aw-panel[hidden] { display: none; }
.aw-day { display: flex; align-items: center; gap: 16px; padding: 20px 40px 8px; }
.aw-day em { font-style: normal; font-size: 12px; letter-spacing: .14em; color: #6E6D67; }
.aw-day i { flex: 1; height: 1px; background: rgba(255,255,255,.05); }
.aw-hint { font-size: 11.5px; color: #6E6D67; }

.aw-row { width: 100%; box-sizing: border-box; display: flex; gap: 24px; padding: 15px 40px; align-items: baseline; border-left: 2px solid transparent; transition: background .2s; }
.aw-row:hover, .aw-row.open { background: rgba(255,255,255,.03); }
.aw-row.static { cursor: default; align-items: center; }
.aw-row .t { width: 64px; flex: none; font-size: 13px; color: #9A9A92; }
.aw-row .msg { flex: 1; font-size: 15px; font-weight: 500; line-height: 22px; }
.aw-row .prog { margin-left: 10px; font-size: 12.5px; font-weight: 400; color: #6E6D67; }
.aw-row .v { flex: none; font-size: 13px; color: #9A9A92; }
.aw-row.flag { background: rgba(255,255,255,.035); border-left-color: #E8283F; }
.aw-row.flag .v { color: #E8283F; }

/* a row's detail shows when the row is open */
.aw-det { display: none; margin: 2px 40px 10px 128px; font-size: 14px; line-height: 21px; color: #9A9A92; max-width: 40em; }
.aw-row.open + .aw-det { display: block; }
.aw-never { margin: 4px 40px 12px 128px; border: 1px solid #34191C; border-radius: 8px; background: #140D0E; padding: 20px 24px; flex-direction: column; gap: 12px; max-width: none; }
.aw-row.open + .aw-never { display: flex; }
.aw-never .hd { display: flex; align-items: center; gap: 10px; }
.aw-never .hd i { width: 5px; height: 5px; border-radius: 1px; background: #E8283F; }
.aw-never .hd i.hollow { background: transparent; border: 1px solid #937472; }
.aw-never em { font-style: normal; font-size: 12px; letter-spacing: .14em; color: #E8283F; }
.aw-never .hd span { margin-left: auto; font-size: 12px; color: #937472; }
.aw-never .ln, .aw-q .ln, .aw-empty .ln { font-size: 15px; font-weight: 500; line-height: 22px; color: #EDEDE8; }
.aw-never [data-protect], .aw-never [data-watch] { display: flex; flex-direction: column; gap: 12px; }
.aw-never [hidden] { display: none; }
.aw-never .rl { height: 1px; background: #2a1a1b; }
.aw-never .tl, .aw-q .tl, .aw-empty .tl { font-size: 13px; line-height: 20px; color: #937472; }

/* Watching only: nothing is stopped, and the window says so honestly */
.appwin.watching .aw-row.flag { border-left-color: #6f5a58; }
.appwin.watching .aw-row.flag .v { color: #9A9A92; }
.appwin.watching .aw-never .hd i { background: transparent; border: 1px solid #937472; }

/* Quarantine */
.aw-act { flex: none; font-size: 13px; color: #9A9A92 !important; padding: 5px 12px !important; border-radius: 5px; border: 1px solid rgba(255,255,255,.1) !important; transition: background .2s, color .2s; }
.aw-act:hover { color: #EDEDE8 !important; background: rgba(255,255,255,.05) !important; }
.aw-act.warn { color: #E8283F !important; border-color: rgba(232,40,63,.4) !important; }
.aw-confirm { margin: 4px 40px 12px 128px; padding: 18px 22px; border-radius: 8px; border: 1px solid #34191C; background: #140D0E; display: flex; flex-direction: column; gap: 10px; }
.aw-confirm[hidden], .aw-empty[hidden], .aw-q[hidden] { display: none; }
.aw-btns { display: flex; gap: 8px; margin-top: 4px; }
.aw-empty { padding: 40px 40px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 36em; }
.aw-empty .aw-act { margin-top: 8px; }

.aw-foot { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-top: 1px solid rgba(255,255,255,.05); font-size: 12.5px; color: #6E6D67; }
.aw-try { color: #7d7c76; }

.s2note { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,237,232,.35); }

/* first arrival: today's activity fills in one row at a time, calmly; after that everything responds at once */
html.js .appwin:not(.done) [data-panel=activity] > .aw-row, html.js .appwin:not(.done) [data-panel=activity] > .aw-never { opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-row, html.js .appwin.play:not(.done) [data-panel=activity] > .aw-never { opacity: 1; transform: none; }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-row:nth-of-type(1) { transition-delay: .2s; }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-row:nth-of-type(2) { transition-delay: .9s; }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-row:nth-of-type(3) { transition-delay: 1.6s; }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-row:nth-of-type(4) { transition-delay: 2.5s; }
html.js .appwin.play:not(.done) [data-panel=activity] > .aw-never { transition-delay: 3.2s; }   /* html.js: must outrank the hiding rule, or the card appears first */

@media (max-width: 760px) {
  .aw-mode em, .aw-try { display: none; }
  .aw-tabs { padding: 0 8px; } .aw-tablist button { padding: 0 10px; }
  .aw-row { padding: 14px 18px; gap: 12px; } .aw-row .prog { display: none; }
  .aw-det, .aw-never, .aw-confirm { margin-left: 18px; margin-right: 18px; }
  .aw-foot { padding: 0 18px; }
}