/* DL2 Windows 11 Settings kit + Show engine chrome.
 * Ported from docs/superpowers/specs/2026-09-27-dl2-mission-control-mockups/2-show-demo-engine.html.
 * Windows-native parts use the w11- prefix; the Show engine's own chrome (built by demo.js) uses demo-.
 * The .screen (authored at 1280x720) lives inside .slide, so the deck's !important h1/p/li/td/th
 * font-size rules would otherwise hit Windows text. Scene markup therefore uses div/span only
 * (never h1/p/li/td) for anything inside .screen — headings use .w11-h1 on a div, not <h1>. */

/* ================= Windows 11 desktop + Settings window (w11-*) ================= */

/* desktop wallpaper behind the Settings window (was .bloom in the mockup) */
.w11-wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 55% at 50% 58%, #eaf3ff 0%, #9cc7ff 22%, transparent 55%),
    radial-gradient(60% 70% at 30% 70%, #1f6fe5 0%, transparent 60%),
    radial-gradient(60% 70% at 72% 62%, #2c5fd8 0%, transparent 60%),
    linear-gradient(180deg, #0b2a78, #12409e 60%, #0a2466);
}

.w11-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: rgba(236, 240, 247, .9); backdrop-filter: blur(30px);
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.w11-tbi { width: 40px; height: 40px; border-radius: 4px; display: grid; place-items: center; position: relative; }
.w11-tbi.open::after { content: ""; position: absolute; bottom: 2px; width: 16px; height: 3px; border-radius: 2px; background: #005fb8; }
.w11-tray { position: absolute; right: 6px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; font-size: 12px; text-align: right; line-height: 1.35; color: #1a1a1a; }

.w11-win {
  position: absolute; font-size: var(--ui); width: 66em; height: 632px;
  left: calc((1280px - 66em) / 2); top: 20px;
  background: #f3f3f3; border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); overflow: hidden;
  display: flex; flex-direction: column;
  transition: font-size .6s cubic-bezier(.65, 0, .35, 1), left .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1);
}
.w11-title { height: 2.4em; display: flex; align-items: center; gap: .7em; padding-left: 1em; font-size: .86em; flex: none; }
.w11-title .w11-ctl { margin-left: auto; display: flex; height: 100%; }
.w11-title .w11-ctl span { width: 3.3em; display: grid; place-items: center; font-size: 1em; color: #333; }
.w11-body { flex: 1; display: grid; grid-template-columns: 19em 1fr; min-height: 0; }

.w11-nav { padding: .6em .5em 0 .6em; }
.w11-acct { display: flex; align-items: center; gap: .9em; padding: .6em .6em 1em; }
.w11-avatar { width: 4.2em; height: 4.2em; border-radius: 50%; background: linear-gradient(135deg, #1b365d, #3b6cc4); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 1em; }
.w11-acct b { display: block; font-weight: 600; font-size: 1em; }
.w11-acct small { color: #5f5f5f; font-size: .86em; }
.w11-search { margin: 0 .3em .8em; height: 2.35em; border-radius: 4px; background: #fbfbfb; border: 1px solid #e5e5e5; border-bottom-color: #868686; display: flex; align-items: center; padding: 0 .8em; color: #6b6b6b; font-size: .95em; justify-content: space-between; }
.w11-navi { height: 2.55em; display: flex; align-items: center; gap: 1em; padding: 0 .8em; border-radius: 4px; font-size: .97em; position: relative; margin: .1em .3em; }
.w11-navi.sel { background: rgba(0, 0, 0, .055); }
.w11-navi.sel::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1.15em; margin-top: -.575em; border-radius: 2px; background: #005fb8; }
.w11-navi svg { width: 1.15em; height: 1.15em; flex: none; }

.w11-content { padding: .9em 2.4em 0 1.6em; overflow: hidden; position: relative; }
.w11-h1 { font-size: 2em; font-weight: 600; letter-spacing: -.01em; margin: .1em 0 .6em; display: flex; gap: .45em; align-items: center; }
.w11-h1 .parent { color: #5f5f5f; font-weight: 600; }
.w11-h1 .sep { color: #8a8a8a; font-weight: 400; font-size: .7em; }

@keyframes w11-pagein { from { opacity: 0; transform: translateY(.6em); } }
/* .w11-page display:none / shown-per-page rule lives below with the engine's required adjustments;
   this only adds the ported page-in animation on top of that display toggle. */
.screen[data-page] .w11-page[data-page] { animation: w11-pagein .35s ease-out; }

.w11-sect { font-weight: 600; font-size: 1em; margin: 1.1em 0 .55em; }
.w11-card { background: #fbfbfb; border: 1px solid #e5e5e5; border-radius: 4px; min-height: 4.5em; display: flex; align-items: center; gap: 1.15em; padding: 0 1.1em 0 1.25em; margin-bottom: .3em; }
.w11-card .ci { width: 1.45em; height: 1.45em; flex: none; }
.w11-card .ct { flex: 1; }
.w11-card .ct b { font-weight: 400; display: block; font-size: 1em; }
.w11-card .ct small { color: #5f5f5f; font-size: .86em; }
.w11-card .chev { color: #5f5f5f; font-size: 1em; }

.w11-combo { position: relative; min-width: 13em; height: 2.3em; background: #fbfbfb; border: 1px solid #e5e5e5; border-bottom-color: #868686; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; padding: 0 .8em; font-size: .95em; gap: 1em; }
.w11-toggle { display: flex; align-items: center; gap: .8em; font-size: .95em; }
.w11-toggle i { width: 2.9em; height: 1.45em; border-radius: 1em; border: 1px solid #5f5f5f; position: relative; }
.w11-toggle i::after { content: ""; position: absolute; left: .25em; top: 50%; width: .75em; height: .75em; margin-top: -.375em; border-radius: 50%; background: #5f5f5f; }

.w11-flyout { position: absolute; right: 0; top: 2.5em; width: 100%; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, .1); border-radius: 7px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: .3em; z-index: 5; }
@keyframes w11-fly { from { opacity: 0; transform: translateY(-.5em); } }
.screen.menu-open .w11-flyout { animation: w11-fly .22s ease-out; }
.w11-opt { height: 2.3em; display: flex; align-items: center; padding: 0 .9em; border-radius: 4px; position: relative; font-size: .95em; }
.w11-opt.sel { background: rgba(0, 0, 0, .05); }
.w11-opt.sel::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 1em; margin-top: -.5em; border-radius: 2px; background: #005fb8; }

/* ================= Show slides: HUD on top, demo fills the rest of the panel ================= */
.slide[data-stage="show"] .panel { display:flex; flex-direction:column; gap:1.3cqw; }
.slide[data-stage="show"] .demo { flex:1; min-height:0; }
/* Engine chrome: a two-column Show layout inside a slide panel */
.demo { display:grid; grid-template-columns:1fr 27%; gap:2cqw; height:100%; min-height:0; }
.demo-bezel { position:relative; align-self:start; aspect-ratio:16/9; border-radius:.9cqw; padding:.5cqw; background:linear-gradient(180deg,#1b2336,#0b0f1a); box-shadow:0 0 0 1px rgba(0,229,255,.35), 0 0 3cqw -.5cqw rgba(0,229,255,.45); }
.demo-viewport { position:relative; width:100%; height:100%; overflow:hidden; border-radius:.5cqw; background:#000; }
.screen { position:absolute; left:0; top:0; width:1280px; height:720px; transform-origin:0 0; overflow:hidden; --ui:14px;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif; color:#1a1a1a; }
.demo-stepno { font-family:"DL2 JetBrains Mono", monospace; font-size:1.15cqw; letter-spacing:.16em; color:var(--c-gold,#ffc400); }
.dl2-os .deck .slide .demo-cap { font-size:calc(2.1cqw * var(--ts,1)) !important; font-weight:600; line-height:1.25 !important; min-height:8cqw; margin:.8cqw 0 1.2cqw; }
.demo-cap em { font-style:normal; color:var(--c-gold,#ffc400); }
.dl2-os .deck .slide .demo-todo li { font-size:calc(1.7cqw * var(--ts,1)) !important; }
.demo-todo { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6cqw; }
.demo-todo li { display:flex; gap:.8cqw; align-items:center; color:#7f93b0; }
.demo-todo li i { font-style:normal; width:2.4cqw; height:2.4cqw; display:grid; place-items:center; font-family:"DL2 JetBrains Mono", monospace; font-size:1.1cqw; border:1px solid rgba(0,229,255,.35); flex:none; }
.demo-todo li.done { color:#bfe9f2; } .demo-todo li.done i { background:rgba(0,229,255,.2); color:#6ff3ff; }
.demo-todo li.done span::after { content:" ✓"; color:#6ff3ff; }
.demo-todo li.now { color:#fff; } .demo-todo li.now i { background:#00e5ff; color:#021018; box-shadow:0 0 1.2cqw #00e5ff; }
.demo-controls { margin-top:auto; display:flex; gap:.6cqw; flex-wrap:wrap; padding-top:1.2cqw; }
.demo-controls button { font-family:"DL2 JetBrains Mono", monospace; font-size:1.2cqw; color:#d9f7ff; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.4); padding:.6cqw .9cqw; cursor:pointer; }
.demo-controls button[aria-pressed="true"] { background:#ffc400; color:#1a1305; border-color:#ffc400; }
.demo-side { display:flex; flex-direction:column; min-height:0; }
.demo-cursor { position:absolute; left:640px; top:400px; width:22px; height:30px; z-index:50; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.demo-cursor svg { width:100%; height:100%; transform-origin:0 0; transition:transform .12s; }
.demo-cursor.press svg { transform:scale(.85); }
.demo-ripple { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:3px solid #ffc400; z-index:49; pointer-events:none; animation:demo-rip .6s ease-out forwards; }
@keyframes demo-rip { to { transform:scale(4.5); opacity:0; } }
.demo-spot { position:absolute; z-index:40; border-radius:8px; border:3px solid #00e5ff; box-shadow:0 0 0 4000px rgba(4,8,20,.32), 0 0 22px rgba(0,229,255,.8); pointer-events:none; opacity:0; transition:opacity .3s; }
.demo-spot.on { opacity:1; }
/* pages: .screen[data-page="x"] shows .w11-page[data-page="x"]; flyouts open with .screen.menu-open */
.w11-page { display:none; }
.screen[data-page="system"] .w11-page[data-page="system"], .screen[data-page="display"] .w11-page[data-page="display"],
.screen[data-page="sound"] .w11-page[data-page="sound"] { display:block; }
.screen[data-page="print"] .w11-page[data-page="print"] { display:flex; }
.screen[data-page="account"] .w11-page[data-page="account"] { display:block; }
.w11-flyout { display:none; } .screen.menu-open .w11-flyout { display:block; }

/* ================= Week 1 kits (demos/week-01.js) =================
 * Shared chrome additions, the Quick Settings kit (w11-qs*) and the Word window + File ▸ Print
 * backstage kit (wd-*). Every kit root sets its own px font-size and line-height so the
 * text-size.js body rules (html[data-text-size] body{font-size:…!important}) can't leak in. */
.screen { font-size:14px; line-height:normal; }
/* The approved mockup sized everything border-box (its global `* { box-sizing:border-box }`). */
.screen, .screen *, .screen *::before, .screen *::after { box-sizing:border-box; }

/* ---- taskbar + tray ---- */
.w11-taskbar { z-index:20; }
.w11-tbi svg { display:block; }
.w11-tbi.open { background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.w11-tray-btn { height:40px; display:flex; align-items:center; border-radius:4px; padding:0 8px; }
.w11-tray-btn svg { display:block; }
.w11-tray-icons { gap:10px; padding:0 10px; }
.w11-tray-icons > span { display:grid; place-items:center; }
.w11-clock { flex-direction:column; align-items:flex-end; justify-content:center; padding:0 6px 0 8px; }
.w11-bell { padding:0 10px 0 6px; }
.screen[data-qs="open"] .w11-tray-icons, .screen[data-qs="outputs"] .w11-tray-icons { background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }

/* ---- window chrome: SVG caption buttons, title icon ---- */
.w11-title > svg { width:1.3em; height:1.3em; flex:none; }
.w11-ctl svg { width:.84em; height:.84em; display:block; }

/* ---- desktop shortcuts ---- */
.w11-desk { position:absolute; left:4px; top:6px; display:flex; flex-direction:column; gap:10px; }
.w11-dicon { width:78px; padding:4px 0 6px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:12px; line-height:1.25; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.65); }

/* ---- Settings additions: slider, card chevrons, combo chevron ---- */
.w11-slider { position:relative; display:block; flex:1; height:1.43em; }
.w11-slider::before, .w11-slider::after { content:""; position:absolute; left:0; top:50%; height:.29em; margin-top:-.145em; border-radius:.15em; }
.w11-slider::before { right:0; background:#8a8a8a; }
.w11-slider::after { width:var(--v, 50%); background:#005fb8; }
.w11-slider i { position:absolute; z-index:1; left:var(--v, 50%); top:50%; width:1.43em; height:1.43em; margin:-.715em 0 0 -.715em; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.2); }
.w11-slider i::after { content:""; position:absolute; inset:.36em; border-radius:50%; background:#005fb8; }
.w11-card .w11-card-slider { flex:none; width:12em; margin-right:.6em; }
.w11-card .chev svg { width:1em; height:1em; display:block; }
.w11-combo > svg { width:.8em; height:.8em; flex:none; }

/* ---- Quick Settings flyout (bottom-right, above the taskbar) ---- */
.w11-qs { position:absolute; right:12px; bottom:60px; z-index:10; width:360px; font-size:14px; line-height:1.3; color:#1a1a1a;
  background:rgba(242,242,242,.94); backdrop-filter:blur(40px) saturate(1.4); border:1px solid rgba(0,0,0,.1); border-radius:8px;
  box-shadow:0 12px 36px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); overflow:hidden; animation:w11-qsin .3s cubic-bezier(.1,.9,.2,1); }
@keyframes w11-qsin { from { opacity:0; transform:translateY(30px); } }
.screen[data-qs="closed"] .w11-qs { display:none; }
.screen[data-qs="open"] .w11-qs-out { display:none; }
.screen[data-qs="outputs"] .w11-qs-main { display:none; }
.w11-qs svg { display:block; }
.w11-qs-top { display:flex; gap:8px; padding:22px 12px 0 22px; }
.w11-qs-tiles { flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 12px; }
.w11-qs-cell { display:flex; flex-direction:column; gap:6px; min-width:0; }
.w11-qs-tile { height:48px; display:flex; border-radius:4px; background:#fbfbfb; border:1px solid rgba(0,0,0,.07); border-bottom-color:rgba(0,0,0,.15); }
.w11-qs-tile.on { background:#005fb8; border-color:#005fb8; color:#fff; }
.w11-qs-main-ico { flex:1; display:grid; place-items:center; }
.w11-qs-split { width:30px; display:grid; place-items:center; border-left:1px solid rgba(0,0,0,.08); }
.w11-qs-tile.on .w11-qs-split { border-left-color:rgba(255,255,255,.35); }
.w11-qs-lab { font-size:12px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w11-qs-pager { width:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding-bottom:18px; }
.w11-qs-pager i { width:5px; height:5px; border-radius:3px; background:#8f8f8f; }
.w11-qs-pager i.on { height:12px; background:#4f4f4f; }
.w11-qs-row { display:flex; align-items:center; gap:10px; height:44px; padding:0 14px 0 18px; }
.w11-qs-top + .w11-qs-row { margin-top:18px; }
.w11-qs-ico { width:28px; height:32px; flex:none; display:grid; place-items:center; }
.w11-qs-more { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:4px; }
.w11-qs-more:not(.w11-qs-blank) { background:rgba(0,0,0,.035); }
.w11-qs-foot { display:flex; align-items:center; gap:4px; height:48px; margin-top:16px; padding:0 12px 0 22px; background:rgba(0,0,0,.035); border-top:1px solid rgba(0,0,0,.07); }
.w11-qs-batt { flex:1; display:flex; align-items:center; gap:8px; font-size:13px; }
.w11-qs-fbtn { width:32px; height:32px; display:grid; place-items:center; border-radius:4px; }
/* Sound output page */
.w11-qs-head { display:flex; align-items:center; gap:8px; height:54px; padding:0 20px 0 12px; font-size:14px; font-weight:600; }
.w11-qs-back { width:32px; height:32px; display:grid; place-items:center; border-radius:4px; }
.w11-qs-list { display:flex; flex-direction:column; gap:3px; padding:0 12px; }
.w11-qs-dev { position:relative; display:flex; align-items:center; gap:10px; height:42px; padding:0 14px 0 8px; border-radius:4px; }
.w11-qs-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w11-qs .tick { visibility:hidden; color:#005fb8; font-weight:600; font-size:15px; }
.screen[data-out="speakers"] #out-speakers .tick, .screen[data-out="headphones"] #out-headphones .tick { visibility:visible; }
.screen[data-out="speakers"] #out-speakers, .screen[data-out="headphones"] #out-headphones { background:rgba(0,0,0,.055); }
.screen[data-out="speakers"] #out-speakers::before, .screen[data-out="headphones"] #out-headphones::before { content:""; position:absolute; left:0; top:50%; width:3px; height:16px; margin-top:-8px; border-radius:2px; background:#005fb8; }
.w11-qs-div { height:1px; margin:12px 22px 10px; background:rgba(0,0,0,.08); }
.w11-qs-label { padding:0 22px 2px; font-size:12px; font-weight:600; color:#5f5f5f; }
.w11-qs-mix { gap:10px; padding:0 26px 0 20px; }
.w11-qs-mix .w11-qs-name { flex:none; width:98px; font-size:13px; }
.w11-qs-link { color:#005fb8; font-size:13px; }

/* ---- Word (Microsoft 365) window, maximized ---- */
.wd-win { position:absolute; left:0; top:0; width:1280px; height:672px; display:flex; flex-direction:column; background:#fff; color:#242424; font-size:13px; line-height:1.3; overflow:hidden; }
.wd-win svg { display:block; flex:none; }
.wd-title { position:relative; flex:none; height:34px; display:flex; align-items:center; padding-left:10px; background:#185abd; color:#fff; font-size:12px; }
.wd-qat { display:flex; align-items:center; gap:2px; }
.wd-autosave { display:flex; align-items:center; gap:6px; margin-right:6px; }
.wd-sw { display:inline-flex; align-items:center; gap:4px; height:16px; padding:0 6px 0 3px; border:1px solid rgba(255,255,255,.85); border-radius:9px; font-size:11px; }
.wd-sw i { width:9px; height:9px; border-radius:50%; background:#fff; }
.wd-qi { width:26px; height:26px; display:grid; place-items:center; border-radius:4px; }
.wd-dim { opacity:.5; }
.wd-doc { margin-left:14px; white-space:nowrap; }
.wd-search { position:absolute; left:505px; top:5px; width:290px; height:24px; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:4px; background:#f3f6fb; color:#555; }
.wd-user { margin-left:auto; display:flex; align-items:center; gap:10px; padding-right:10px; white-space:nowrap; }
.wd-av { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#c9a227; color:#1a1a1a; font-size:10px; font-weight:600; }
.wd-ctl { display:flex; height:100%; }
.wd-ctl > span { width:46px; display:grid; place-items:center; color:#fff; }
.wd-ctl svg { width:10px; height:10px; }
/* File backstage: blue rail + page (print or account). The title bar keeps AutoSave, Save, Undo and
 * Redo in File view, as Microsoft 365 Word does. */
.wd-backstage { display:none; flex:1; min-height:0; }
.screen[data-page="print"] .wd-backstage, .screen[data-page="account"] .wd-backstage { display:flex; }
.wd-rail { width:172px; flex:none; display:flex; flex-direction:column; padding:4px 0 8px; background:#185abd; color:#fff; font-size:14px; }
.wd-rback { height:50px; display:flex; align-items:center; padding-left:18px; }
.wd-ri { position:relative; height:34px; display:flex; align-items:center; gap:12px; padding:0 22px; }
.wd-rdiv { height:1px; margin:6px 22px; background:rgba(255,255,255,.35); }
.wd-rfoot { margin-top:auto; }
.screen[data-page="print"] .wd-ri[data-rail="print"], .screen[data-page="account"] .wd-ri[data-rail="account"] { background:rgba(0,0,0,.24); font-weight:600; }
.wd-bs-page { flex:1; min-width:0; }
/* Print: settings column */
.wd-pcol { width:350px; flex:none; padding:8px 22px 0 34px; overflow:hidden; background:#fff; }
.wd-h { margin:0 0 8px; font-size:26px; font-weight:600; line-height:1.25; }
.wd-prow { display:flex; align-items:flex-start; gap:18px; margin-bottom:6px; }
.wd-printbtn { width:74px; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid #d1d1d1; border-radius:4px; background:#fff; }
.wd-copies { display:flex; align-items:center; gap:8px; padding-top:4px; }
.wd-spin { width:62px; height:26px; display:flex; align-items:center; justify-content:space-between; padding:0 5px 0 9px; border:1px solid #c7c7c7; border-bottom-color:#8a8a8a; border-radius:4px; }
.wd-arrows { display:flex; flex-direction:column; gap:2px; }
.wd-sub { display:flex; align-items:center; gap:6px; margin:6px 0 4px; font-size:14px; font-weight:600; }
.wd-dd { position:relative; display:flex; align-items:center; gap:10px; min-height:38px; margin-bottom:3px; padding:2px 10px 2px 7px; border:1px solid #d1d1d1; border-radius:4px; background:#fff; }
.wd-dd > svg:not(.wd-dd-ico) { color:#616161; }
.wd-printer > svg:first-child { margin:0 3px; }
.wd-dd-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.wd-dd-t b { font-weight:400; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-dd-t small { font-size:11px; color:#616161; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-link { margin:1px 0 2px; color:#185abd; font-size:12px; }
.wd-right { text-align:right; }
.wd-pages { display:flex; align-items:center; gap:8px; margin:1px 0 4px 4px; }
.wd-input { width:170px; height:22px; border:1px solid #c7c7c7; border-bottom-color:#8a8a8a; border-radius:3px; }
.wd-when-narrow { display:none; }
.screen[data-margins="narrow"] .wd-when-normal { display:none; }
.screen[data-margins="narrow"] .wd-when-narrow { display:block; }
/* Margins menu: an Office gallery that opens upward from Normal Margins */
.wd-dd .w11-flyout.wd-menu { top:auto; right:auto; bottom:calc(100% + 3px); left:-1px; width:296px; padding:4px 0; background:#fff; border:1px solid #c7c7c7; border-radius:6px; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.wd-mi { display:flex; align-items:center; gap:12px; height:56px; padding:0 12px; }
.wd-mi-ico { width:30px; height:38px; }
.wd-mi-t { display:flex; flex-direction:column; gap:1px; }
.wd-mi-t b { font-size:13px; font-weight:600; }
.wd-mi-g { display:grid; grid-template-columns:auto 42px auto 42px; column-gap:6px; font-size:11px; color:#444; }
.screen[data-margins="normal"] #m-normal { background:#e3ecf9; }
.wd-mi-custom { margin-top:4px; padding:8px 12px 6px 54px; border-top:1px solid #e3e3e3; }
/* Print: preview with the flyer (8.5 x 11 in at 40.5 px/in = 43%) */
.wd-preview { flex:1; min-width:0; display:flex; flex-direction:column; background:#ebebeb; }
.wd-pages-view { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:26px; }
.pv-page { flex:none; width:344px; height:445px; padding:40px; overflow:hidden; background:#fff; color:#1a1a1a; box-shadow:0 1px 3px rgba(0,0,0,.2), 0 6px 18px rgba(0,0,0,.08); transition:padding .5s cubic-bezier(.65,0,.35,1); }
.screen[data-margins="narrow"] .pv-page { padding:20px; }
.screen[data-margins="narrow"] .pv-page2 { display:none; }
.screen[data-margins="normal"] .pv-page1 .pv-spill { display:none; }
.pv-in { font-family:Calibri, "Segoe UI", sans-serif; text-align:center; font-size:9.6px; line-height:1.35; }
.pv-banner { height:92px; display:grid; place-items:center; border-radius:5px; background:#1b365d; }
.pv-title { margin-top:14px; font-family:Georgia, "Times New Roman", serif; font-size:24px; font-weight:700; line-height:1.15; color:#1b365d; }
.pv-date { margin-top:5px; font-size:8.4px; font-weight:700; color:#b31942; }
.pv-rule { height:2px; margin:10px 36px 12px; background:#c9a227; }
.pv-line { margin-bottom:10.5px; }
.pv-page2 .pv-in { text-align:center; }
/* Print: pager + zoom */
.wd-pager { flex:none; height:44px; display:flex; align-items:center; gap:6px; padding:0 16px; color:#444; }
.wd-pg-btn { width:22px; height:22px; display:grid; place-items:center; color:#444; }
.screen[data-margins="narrow"] .wd-pg-next { color:#bdbdbd; }
.wd-pg-box { padding:1px 4px; white-space:nowrap; }
.wd-zoom { margin-left:auto; display:flex; align-items:center; gap:10px; }
.wd-zb { display:grid; place-items:center; min-width:12px; font-size:15px; }
.wd-zslider { position:relative; width:110px; height:2px; background:#8a8a8a; }
.wd-zslider i { position:absolute; left:28%; top:50%; width:4px; height:12px; margin:-6px 0 0 -2px; border-radius:1px; background:#444; }

/* ---- Word: document view (tabs, Home ribbon on a rounded card, page, status bar); data-page="doc" ---- */
.wd-docview { display:none; flex:1; min-height:0; flex-direction:column; background:#f3f3f3; }
.screen[data-page="doc"] .wd-docview { display:flex; }
.wd-tabs { flex:none; height:34px; display:flex; align-items:center; gap:1px; padding:0 8px; font-size:13px; color:#242424; }
.wd-tab { position:relative; height:28px; display:flex; align-items:center; padding:0 9px; border-radius:4px; white-space:nowrap; }
.wd-tab.sel { font-weight:600; }
.wd-tab.sel::after { content:""; position:absolute; left:9px; right:9px; bottom:1px; height:3px; border-radius:2px; background:#185abd; }
.wd-tabs-r { margin-left:auto; display:flex; align-items:center; gap:6px; }
.wd-tbtn { height:28px; display:flex; align-items:center; gap:6px; padding:0 9px; border:1px solid #d1d1d1; border-radius:4px; background:#fff; font-size:12px; color:#242424; }
.wd-tbtn > svg { color:#424242; }
.wd-tbtn > svg:last-child:not(:first-child) { width:10px; height:10px; }
.wd-ribbon { flex:none; height:100px; margin:0 6px; display:flex; padding:3px 2px 0; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08); overflow:hidden; font-size:12px; color:#242424; }
.wd-grp { position:relative; flex:none; display:flex; flex-direction:column; padding:0 7px; margin:2px 0 3px; border-right:1px solid #e1e1e1; }
.wd-grp:last-child { border-right:0; }
.wd-grp-b { flex:1; display:flex; align-items:flex-start; gap:3px; }
.wd-grp-l { position:relative; height:17px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#616161; white-space:nowrap; }
.wd-launch { position:absolute; right:-5px; top:4px; color:#616161; }
.wd-big { min-width:46px; height:72px; display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:3px; text-align:center; white-space:nowrap; }
.wd-big > span { display:flex; align-items:center; gap:2px; }
.wd-big > span > svg { width:9px; height:9px; }
.wd-col { display:flex; flex-direction:column; gap:1px; }
.wd-sm { height:24px; display:flex; align-items:center; gap:5px; padding:0 3px; white-space:nowrap; color:#424242; }
.wd-sm > span { color:#242424; }
.wd-sm > svg:last-child:not(:first-child) { width:9px; height:9px; }
.wd-rrow { display:flex; align-items:center; gap:1px; height:31px; }
.wd-ib { min-width:24px; height:24px; display:flex; align-items:center; justify-content:center; gap:1px; padding:0 2px; border-radius:3px; color:#424242; }
.wd-ib.sel { background:#e1e1e1; }
.wd-ibdd > svg:last-child { width:8px; height:8px; }
.wd-glyph { font-size:14px; line-height:1; color:#242424; }
.wd-bold { font-weight:700; }
.wd-ital { font-style:italic; font-family:Georgia, "Times New Roman", serif; }
.wd-under { text-decoration:underline; }
.wd-strike { text-decoration:line-through; font-size:12px; }
.wd-sub-s, .wd-sup-s { font-size:8px; }
.wd-sub-s { vertical-align:-3px; } .wd-sup-s { vertical-align:6px; }
.wd-rsep { width:1px; height:18px; margin:0 3px; background:#e1e1e1; }
.wd-combo { height:24px; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 4px 0 6px; margin-right:3px; border:1px solid #c7c7c7; border-radius:3px; background:#fff; white-space:nowrap; }
.wd-combo > svg { width:9px; height:9px; }
.wd-fname { width:112px; } .wd-fsize { width:42px; }
.wd-gallery { display:flex; height:66px; margin-top:2px; border:1px solid #e1e1e1; border-radius:4px; overflow:hidden; }
.wd-st { width:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid transparent; border-radius:3px; }
.wd-st.sel { border-color:#185abd; background:#eaf0fa; }
.wd-st-s { height:22px; display:flex; align-items:center; white-space:nowrap; font-family:Aptos, Calibri, "Segoe UI", sans-serif; }
.wd-sn { font-size:12px; color:#000; } .wd-sh1 { font-size:15px; color:#0f4761; } .wd-sh2 { font-size:13px; color:#0f4761; }
.wd-st-n { font-size:11px; color:#242424; white-space:nowrap; }
.wd-gscroll { width:16px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:4px 0; border-left:1px solid #e1e1e1; }
.wd-canvas { flex:1; min-height:0; overflow:hidden; margin-top:6px; background:#e9e9e9; }
.wd-page { width:816px; height:1056px; margin:14px auto 0; padding:96px 96px 0; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.12);
  font-family:Aptos, Calibri, "Segoe UI", sans-serif; font-size:16px; line-height:1.15; color:#000; }
.wd-h1 { margin:0 0 6px; font-family:"Aptos Display", Aptos, "Calibri Light", Calibri, "Segoe UI", sans-serif; font-size:26.7px; line-height:1.15; color:#0f4761; }
.wd-p { margin-bottom:10.7px; }
.wd-typed { position:relative; }
.wd-typed #doc-line { display:inline-block; min-width:210px; vertical-align:top; white-space:pre; }
.wd-typed #doc-line::after { content:""; display:inline-block; width:1px; height:1.15em; margin-left:1px; vertical-align:top; background:#000; animation:wd-caret 1.06s steps(1) infinite; }
@keyframes wd-caret { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .wd-typed #doc-line::after { animation:none; } }
/* AutoCorrect: a ghost copy of "Copyright " puts the blue mark and the Options button under the © */
.wd-acl { position:absolute; left:0; top:0; white-space:pre; }
.screen:not([data-ac="shown"]) .wd-acl { display:none; }
.wd-ghost { visibility:hidden; }
.wd-acmark { position:relative; display:inline-block; box-shadow:inset 0 -2px 0 #5b8def; }
.wd-acbtn { position:absolute; left:-5px; top:calc(100% + 3px); height:20px; display:flex; align-items:center; gap:1px; padding:0 2px 0 3px; border:1px solid #8fb0e3; border-radius:3px; background:#eaf1fc; color:#424242; }
.wd-acbtn > svg:nth-child(2) { width:8px; height:8px; }
.wd-acbtn .w11-flyout.wd-acmenu { top:calc(100% + 2px); left:-1px; right:auto; width:auto; padding:4px 0; background:#fff; border:1px solid #c8c8c8; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.18);
  font:12px/1.3 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color:#242424; white-space:nowrap; }
.wd-acm { height:30px; display:flex; align-items:center; gap:10px; padding:0 44px 0 8px; }
.wd-acm-ico { width:22px; flex:none; display:grid; place-items:center; }
.wd-acsep { display:block; height:1px; margin:4px 0; background:#e1e1e1; }
.wd-status { flex:none; height:24px; display:flex; align-items:center; gap:18px; padding:0 14px; font-size:11px; color:#424242; background:#f3f3f3; white-space:nowrap; }
.wd-si { display:flex; align-items:center; gap:5px; }
.wd-status-r { margin-left:auto; display:flex; align-items:center; gap:10px; }
.wd-vsel { padding:2px; border-radius:2px; background:#dcdcdc; }
.wd-zs100 i { left:50%; }

/* ---- Word: File ▸ Account and the About Microsoft® Word dialog (data-about="open") ---- */
.wd-acct { padding:8px 34px 0; overflow:hidden; background:#fff; font-size:13px; color:#242424; }
.wd-acct-cols { display:flex; gap:48px; }
.wd-acct-l { width:300px; flex:none; }
.wd-acct-r { flex:1; min-width:0; }
.wd-sub2 { margin:4px 0 12px; font-size:18px; }
.wd-uav { width:64px; height:64px; margin-bottom:10px; display:grid; place-items:center; border-radius:50%; background:#c9a227; color:#1a1a1a; font-size:22px; font-weight:600; }
.wd-uname { font-size:14px; font-weight:600; }
.wd-umail { margin-bottom:6px; color:#616161; }
.wd-acct .wd-link { margin:3px 0; font-size:13px; }
.wd-lab { margin:16px 0 6px; font-weight:600; }
.wd-sel { width:220px; height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 8px; border:1px solid #c7c7c7; border-radius:4px; }
.wd-sel > svg { width:10px; height:10px; }
.wd-ms { display:flex; align-items:center; gap:12px; margin:2px 0 14px; font-size:22px; font-weight:600; color:#5e5e5e; }
.wd-prod { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.wd-prod b { font-size:14px; font-weight:600; }
.wd-small { margin-top:6px; font-size:12px; color:#616161; }
.wd-apps { display:flex; gap:6px; margin-top:4px; }
.wd-app { width:22px; height:22px; display:grid; place-items:center; border-radius:4px; color:#fff; font-size:11px; font-weight:700; }
.wd-btns { display:flex; gap:8px; margin-bottom:14px; }
.wd-btn { height:28px; display:flex; align-items:center; padding:0 12px; border:1px solid #c7c7c7; border-radius:4px; font-size:12px; }
.wd-tilerow { display:flex; gap:16px; margin-bottom:10px; }
.wd-tile { width:86px; height:86px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0 4px; border:1px solid #d1d1d1; border-radius:4px; background:#fff; font-size:12px; line-height:1.2; text-align:center; }
.screen[data-about="open"] #about-word { background:#e1e1e1; border-color:#8a8a8a; }
.wd-tiletext { display:flex; flex-direction:column; gap:3px; padding-top:8px; font-size:12.5px; color:#424242; }
.wd-tiletext b { font-size:14px; font-weight:600; color:#242424; }
.wd-about { display:none; position:absolute; left:724px; top:292px; z-index:6; width:536px; background:#fff; border:1px solid rgba(0,0,0,.25); border-radius:8px;
  box-shadow:0 22px 48px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.14); overflow:hidden; font-size:12px; line-height:1.45; color:#1a1a1a; }
.screen[data-about="open"] .wd-about { display:block; animation:wd-dlgin .2s ease-out; }
@keyframes wd-dlgin { from { opacity:0; transform:scale(.97); } }
.wd-about-t { height:32px; display:flex; align-items:center; padding-left:14px; background:#f3f3f3; }
.wd-about-x { width:46px; height:100%; margin-left:auto; display:grid; place-items:center; }
.wd-about-b { padding:16px 20px; }
.wd-about-top { display:flex; align-items:flex-start; gap:14px; }
.wd-about-top > svg { width:36px; height:36px; }
.wd-about-lines { min-width:0; display:flex; flex-direction:column; gap:3px; }
.wd-about .wd-link { margin:0; font-size:12px; }
.wd-about-lic { display:flex; flex-direction:column; gap:3px; margin:14px 0 0 50px; color:#424242; }
.wd-about-ok { display:flex; justify-content:flex-end; margin-top:16px; }
.wd-okbtn { min-width:84px; height:28px; display:grid; place-items:center; border:2px solid #185abd; border-radius:4px; background:#fdfdfd; }

/* ---- New Outlook for Windows (Neutral theme): Calendar ▸ Week and the New event form ----
 * 37 px per hour (OL_HR in week-01.js): 333px = 5 PM, where the shaded non-working hours start. */
.ol-win { position:absolute; left:0; top:0; width:1280px; height:672px; display:flex; flex-direction:column; background:#eceff4; color:#242424; font-size:13px; line-height:1.3; overflow:hidden; }
.ol-win svg { display:block; flex:none; }
.ol-top { position:relative; flex:none; height:44px; display:flex; align-items:center; padding-left:18px; }
.ol-appico svg { width:18px; height:18px; }
.ol-search { position:absolute; left:50%; top:7px; width:468px; height:30px; margin-left:-234px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #e0e0e0; border-radius:6px; background:#fff; color:#616161; }
.ol-topr { margin-left:auto; display:flex; align-items:center; gap:2px; padding-right:6px; color:#424242; }
.ol-tico { width:32px; height:32px; display:grid; place-items:center; border-radius:4px; }
.ol-av { width:28px; height:28px; margin-left:8px; display:grid; place-items:center; border-radius:50%; background:#c9a227; color:#1a1a1a; font-size:11px; font-weight:600; }
.ol-ctl { display:flex; height:100%; }
.ol-ctl > span { width:46px; display:grid; place-items:center; color:#1a1a1a; }
.ol-ctl svg { width:10px; height:10px; }
.ol-main { flex:1; min-height:0; display:flex; }
.ol-appbar { width:56px; flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0 10px; }
.ol-app { position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:6px; color:#424242; }
.ol-app.sel { background:#fff; color:#0f6cbd; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.ol-app.sel::before { content:""; position:absolute; left:-8px; top:50%; width:3px; height:18px; margin-top:-9px; border-radius:2px; background:#0f6cbd; }
.ol-app-more { margin-top:auto; }
.ol-stage { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; padding:0 6px 6px 0; }
.ol-tabs-wrap { flex:none; }
.ol-tabs { height:34px; display:flex; align-items:center; gap:2px; }
.ol-ham { width:32px; height:32px; margin-right:4px; display:grid; place-items:center; color:#424242; }
.ol-tab { position:relative; height:30px; display:flex; align-items:center; padding:0 10px; }
.ol-tab.sel { font-weight:600; }
.ol-tab.sel::after { content:""; position:absolute; left:10px; right:10px; bottom:1px; height:3px; border-radius:2px; background:#0f6cbd; }
.ol-cmd { flex:none; height:40px; display:flex; align-items:center; gap:2px; padding:0 6px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06); }
.ol-b { height:32px; display:flex; align-items:center; gap:6px; padding:0 8px; border-radius:4px; white-space:nowrap; color:#242424; }
.ol-b > svg { color:#424242; }
.ol-b > svg:last-child:not(:first-child) { width:10px; height:10px; }
.ol-b.sel { background:#ebebeb; font-weight:600; }
.ol-b.sel > svg { color:#0f6cbd; }
.ol-primary { background:#0f6cbd; color:#fff; font-weight:600; }
.ol-primary svg, .ol-primary > svg { color:#fff; }
.ol-split { padding-right:0; }
.ol-splitchev { height:100%; display:grid; place-items:center; margin-left:2px; padding:0 7px; border-left:1px solid rgba(255,255,255,.45); }
.ol-splitchev svg { width:10px; height:10px; }
.ol-sep { width:1px; height:20px; margin:0 6px; background:#e0e0e0; }
.ol-content { flex:1; min-height:0; display:flex; gap:6px; margin-top:6px; }
/* folder pane: mini month + calendars */
.ol-fold { width:208px; flex:none; padding:4px 8px 0 4px; font-size:12px; }
.ol-mini-h { height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 6px; font-size:13px; font-weight:600; }
.ol-mini-arr { display:flex; gap:6px; color:#424242; }
.ol-mr { height:26px; display:grid; grid-template-columns:repeat(7, 1fr); align-items:center; border-radius:4px; text-align:center; }
.ol-mr span { width:22px; height:22px; margin:0 auto; border-radius:50%; font-size:12px; line-height:22px; }
.ol-mdow span { color:#616161; font-size:11px; }
.ol-out { color:#8a8a8a; }
.ol-mr span.ol-mtoday { background:#0f6cbd; color:#fff; font-weight:600; }
.ol-mr.ol-mwk { background:#dce8f6; }
.ol-fl-add { height:32px; display:flex; align-items:center; gap:8px; margin-top:12px; padding:0 6px; }
.ol-fl-add svg { width:16px; height:16px; color:#424242; }
.ol-fl-h { height:30px; display:flex; align-items:center; gap:8px; padding:0 6px; font-size:12.5px; font-weight:600; }
.ol-fl-h svg { width:10px; height:10px; }
.ol-calrow { height:30px; display:flex; align-items:center; gap:10px; padding:0 8px 0 24px; white-space:nowrap; }
.ol-cb { width:16px; height:16px; flex:none; display:grid; place-items:center; border:1px solid var(--c); border-radius:3px; background:var(--c); color:#fff; }
.ol-cb.off { background:#fff; }
.ol-cb svg { width:12px; height:12px; }
/* the week surface */
.ol-card { flex:1; min-width:0; display:flex; flex-direction:column; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06); overflow:hidden; }
.ol-surf { height:44px; flex:none; display:flex; align-items:center; gap:4px; padding:0 12px; }
.ol-bordered { height:30px; margin-right:6px; border:1px solid #d1d1d1; }
.ol-nav { width:30px; height:30px; display:grid; place-items:center; border-radius:4px; color:#424242; }
.ol-range { display:flex; align-items:center; gap:6px; margin-left:6px; font-size:15px; font-weight:600; white-space:nowrap; }
.ol-range > svg { width:10px; height:10px; }
.screen[data-week="2"] .ol-t1, .screen:not([data-week="2"]) .ol-t2, .screen[data-week="2"] .ol-e1, .screen:not([data-week="2"]) .ol-e2 { display:none; }
.ol-dayhead { height:46px; flex:none; display:flex; border-bottom:1px solid #e0e0e0; }
.ol-gut { width:56px; flex:none; }
.ol-dh { position:relative; flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; padding:10px 8px 0; border-left:1px solid #ededed; white-space:nowrap; overflow:hidden; color:#424242; }
.ol-dh b { font-size:20px; font-weight:400; color:#242424; }
.ol-dh > span { font-size:12px; }
.screen:not([data-week="2"]) .ol-today b, .screen:not([data-week="2"]) .ol-today > span { color:#0f6cbd; font-weight:600; }
.screen:not([data-week="2"]) .ol-today::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#0f6cbd; }
.ol-grid { flex:1; min-height:0; display:flex; }
.ol-hours { width:56px; flex:none; }
.ol-hours span { display:block; height:37px; padding:3px 8px 0 0; text-align:right; font-size:11px; color:#616161; }
.ol-cols { flex:1; min-width:0; display:flex; }
.ol-col { position:relative; flex:1; min-width:0; border-left:1px solid #e1e1e1;
  background:repeating-linear-gradient(to bottom, #e1e1e1 0 1px, transparent 1px 18px, #f1f1f1 18px 19px, transparent 19px 37px), linear-gradient(to bottom, #fff 333px, #f6f6f6 333px); }
.ol-col.ol-wkend { background:repeating-linear-gradient(to bottom, #e1e1e1 0 1px, transparent 1px 18px, #ebebeb 18px 19px, transparent 19px 37px), #f6f6f6; }
.ol-ev { position:absolute; left:3px; right:8px; padding:4px 6px 0 8px; overflow:hidden; border-left:4px solid #0f6cbd; border-radius:4px; background:#d6e7f8; font-size:12px; line-height:1.25; color:#1a1a1a; }
.ol-ev b { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ol-vub { padding-right:22px; }
.screen:not([data-saved="yes"]) .ol-vub { display:none; }
.screen[data-saved="yes"] .ol-vub { animation:ol-evin .45s ease-out; }
@keyframes ol-evin { from { opacity:0; transform:scale(.94); } }
.ol-rep { position:absolute; right:6px; top:6px; color:#0f6cbd; }
/* the New event form */
.ol-form { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; padding:0 6px 6px 0; background:#eceff4; animation:ol-formin .25s ease-out; }
@keyframes ol-formin { from { opacity:0; transform:translateY(8px); } }
.screen:not([data-form="open"]) .ol-form { display:none; }
.ol-fbody { flex:1; min-height:0; display:flex; margin-top:6px; overflow:hidden; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06); }
.ol-fields { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding:18px 28px 0 16px; }
.ol-row { min-height:38px; display:flex; align-items:center; gap:12px; }
.ol-ri { width:24px; flex:none; display:grid; place-items:center; color:#424242; }
.ol-title { flex:1; min-width:0; height:40px; display:flex; align-items:center; padding:0 4px; border-bottom:2px solid #0f6cbd; font-size:18px; font-weight:600; white-space:pre; }
.ol-title:empty::before { content:attr(data-ph); font-weight:400; color:#707070; }
.ol-in { flex:1; min-width:0; height:34px; display:flex; align-items:center; gap:8px; padding:0 4px; border-bottom:1px solid #d1d1d1; }
.ol-ph { color:#707070; }
.screen[data-invite="yes"] #ev-attendees .ol-ph, .screen:not([data-invite="yes"]) .ol-chip { display:none; }
.ol-chip { height:24px; display:inline-flex; align-items:center; gap:6px; padding:0 10px 0 2px; border-radius:12px; background:#ebebeb; }
.ol-cav { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#8764b8; color:#fff; font-size:10px; font-weight:600; }
.ol-optl { color:#0f6cbd; font-size:12px; }
.ol-box { height:32px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #d1d1d1; border-bottom-color:#616161; border-radius:4px; background:#fff; white-space:nowrap; }
.ol-box > svg { color:#424242; }
.ol-box > svg:last-child:not(:first-child) { width:10px; height:10px; }
.ol-to { color:#424242; }
.ol-sw { display:flex; align-items:center; gap:8px; margin-left:14px; white-space:nowrap; }
.ol-sw i { position:relative; width:40px; height:20px; border:1px solid #616161; border-radius:10px; }
.ol-sw i::after { content:""; position:absolute; left:3px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:#616161; }
.ol-dd { position:relative; min-width:240px; justify-content:space-between; }
.ol-dd .w11-flyout.ol-menu { top:calc(100% + 4px); left:-1px; right:auto; width:280px; padding:4px; background:#fff; border:1px solid #e0e0e0; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.16); font-size:13px; }
.ol-opt { height:30px; display:flex; align-items:center; gap:8px; padding:0 10px 0 8px; border-radius:4px; white-space:nowrap; }
.ol-ck { width:14px; flex:none; visibility:hidden; color:#0f6cbd; }
.ol-opt.sel .ol-ck { visibility:visible; }
.ol-desc { flex:1; margin:8px 0 16px 36px; padding:12px; border:1px solid #e0e0e0; border-radius:6px; color:#707070; }
.ol-dayv { width:360px; flex:none; display:flex; flex-direction:column; border-left:1px solid #ebebeb; }
.ol-dayv-h { height:48px; flex:none; display:flex; align-items:center; gap:4px; padding:0 10px; border-bottom:1px solid #ebebeb; font-weight:600; }
.ol-dayv-g { position:relative; flex:1; min-height:0; overflow:hidden; }
.ol-dayv-g > span { display:block; height:60px; padding:3px 0 0 12px; border-top:1px solid #e8e8e8; font-size:11px; color:#616161; }
.ol-dayv-g > span:first-child { border-top:0; }
.ol-draft { position:absolute; left:62px; right:14px; top:210px; height:118px; padding:6px 10px; border-left:4px solid #0f6cbd; border-radius:4px; background:#d6e7f8; font-size:12px; font-weight:600; }