/* ============================================================
   OS shell — Assembly desktop around the Tribunal (port of the
   os-demo-dawn-a11y concept, 2026-09-11). Tokens match overlay.css
   (the demo lifted them from there), so the OS and the Tribunal read
   as one ecosystem. Loaded only for the shell experience; ?no-shell
   skips the shell entirely and index.html boots as before.
   ============================================================ */
:root {
  --os-bg: #2b3340;             /* dawn slate — the desktop field */
  --os-header: #232830;         /* the shared Assembly header colour: the OS topbar AND the tribunal's
                                   own title bar, one solid value so they read as the same chrome.
                                   It is the colour the old translucent topbar composited to over the
                                   lit slate band (rgba(14,14,18,.62) over ~#465161), kept as a solid
                                   so it can never drift from the wallpaper behind it.
                                   Title text #f0efe8: 12.9:1 / APCA Lc 73. Against the lit top band:
                                   APCA Lc 10.4. Against the app's #000 scene: 1.42:1 / Lc 26.5. */
  --os-slate-hi: #3d4a5c;       /* the desktop's own light tone — the top radial / dawn band, NOT a header colour */
  --os-boot: #0b0f14;           /* power-on gate: the same machine, switched off */
  --os-text: #f0efe8;
  --os-muted: rgba(240, 239, 232, 0.72);
  --os-green: #34d399;
  --os-panel: rgba(14, 14, 18, 0.42);
  --os-panel-solid: rgba(14, 14, 18, 0.62);
  --os-gold-line: 1px solid rgba(255, 208, 0, 0.55);
  --os-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  --os-lift: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
  --os-lift-hover: 0 18px 56px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
  --os-sans: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --os-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---- splash ---------------------------------------------------------- */
#os-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 60% at 50% 115%, rgba(255, 176, 64, 0.22), transparent 62%),
    radial-gradient(140% 90% at 50% -20%, var(--os-slate-hi), transparent 55%),
    var(--os-bg);
  transition: opacity 0.6s ease;
}
#os-splash.done { opacity: 0; pointer-events: none; }
.os-sp-inner { text-align: center; }
.os-sp-logo { width: 118px; height: 118px; overflow: visible; }
.os-sp-logo .ring {
  fill: none; stroke: var(--gold); stroke-width: 2.5;
  stroke-dasharray: 277; stroke-dashoffset: 277;
  transform: rotate(-90deg); transform-origin: center;
  animation: osDraw 1.2s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes osDraw { to { stroke-dashoffset: 0; } }
.os-sp-logo .hex {
  fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; opacity: 0.6;
  stroke-dasharray: 264; stroke-dashoffset: 264;
  animation: osDraw 1s 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.os-sp-logo .dot { fill: var(--gold); opacity: 0; animation: osFadeIn 0.4s forwards; }
.os-sp-logo .d1 { animation-delay: 1s; }
.os-sp-logo .d2 { animation-delay: 1.15s; }
.os-sp-logo .d3 { animation-delay: 1.3s; }
.os-sp-logo .d4 { animation-delay: 1.45s; }
.os-sp-logo .d5 { animation-delay: 1.6s; }
.os-sp-logo .d6 { animation-delay: 1.75s; }
@keyframes osFadeIn { to { opacity: 1; } }
.os-sp-word {
  margin-top: 26px; font-size: 30px; font-weight: 500; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--os-text); opacity: 0; animation: osRise 0.7s 0.8s forwards;
}
.os-sp-tag { margin-top: 9px; font-size: 13px; letter-spacing: 0.08em; color: var(--os-muted); opacity: 0; animation: osRise 0.7s 1.05s forwards; }
.os-sp-bar { margin: 36px auto 0; width: 240px; height: 2px; border-radius: 1px; background: rgba(255, 208, 0, 0.15); overflow: hidden; }
.os-sp-fill { height: 100%; width: 0%; background: var(--gold); transition: width 6.6s linear; }
.os-sp-status { margin-top: 11px; font-family: var(--os-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--os-muted); min-height: 16px; }
@keyframes osRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#os-splash:focus-visible { outline: none; }

/* ---- power-on gate (before the on-rails boot) ------------------------- */
#os-poweron {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--os-boot);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#os-poweron[hidden] { display: none; }
#os-splash[hidden] { display: none !important; }
#os-power-btn {
  padding: 24px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#os-power-btn svg {
  width: 96px;
  height: 96px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: osPowerPulse 3s ease-in-out infinite;
}
@keyframes osPowerPulse {
  0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 4px rgba(255, 208, 0, 0.12)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 20px rgba(255, 208, 0, 0.55)); }
}
#os-power-btn:hover svg {
  animation-play-state: paused;
  opacity: 1;
  filter: drop-shadow(0 0 24px rgba(255, 208, 0, 0.65));
}
#os-power-btn:focus-visible { outline: none; }
.os-power-label {
  margin-top: 14px;
  font-family: var(--os-mono);
  font-size: 13px;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-transform: uppercase;
  color: var(--os-muted);
  pointer-events: none;
  user-select: none;
}

/* the desktop wallpaper (ported from the concept demo). overlay.css leaves
   html/body #fff, so the shell must paint its own background or the desktop
   shows through white. It lives on the BODY, not #os-desktop: that layer is
   z-index 45 (above the app's 40) so painting it there would cover the
   fullscreen tribunal — it must stay transparent and click-through.
   Dawn slate (2026-10-05): the field was #0b0a08, luminance 0.0031 against the
   app's #141418 title bar (0.0071) and #000 scene — a 1.06–1.08:1 step, i.e.
   the desktop and the tribunal were the same dark and the handoff read as
   nothing happening. The slate field lifts that to a visible boundary, and the
   light band across the top third puts the lightest tone exactly behind the
   windowed tribunal (it opens at 23% / 11%). Grain is a 140px fractal-noise
   tile: it kills the gradient banding and gives the 18px glass blur something
   to blur against. */
body.os-shell {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 24%, transparent 46%, rgba(255, 176, 64, 0.14) 100%),
    radial-gradient(90% 55% at 50% 118%, rgba(255, 176, 64, 0.18), transparent 60%),
    radial-gradient(120% 80% at 50% -12%, var(--os-slate-hi) 0%, transparent 55%),
    var(--os-bg);
}
#os-desktop { position: fixed; inset: 0; display: none; z-index: 45; pointer-events: none; }
body.os-booted #os-desktop { display: block; }
#os-desktop.inert { pointer-events: none; }
/* the desktop is click-through (the fullscreen tribunal below must receive
   pointer input); its interactive chrome re-enables pointer events. The
   dock's buttons only while the dock is ON screen — off-screen (.away) the
   dock and its buttons are dead to pointer input, no pull-back path */
#os-desktop #os-dock:not(.away) .os-dock-btn,
#os-desktop .os-win,
#os-desktop #os-topbar { pointer-events: auto; }

/* top bar */
#os-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 60;
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  background: var(--os-header);
  /* no backdrop-filter here: the header is a solid colour now, so there is nothing to blur */
  border-bottom: 1px solid rgba(255, 208, 0, 0.4);
  user-select: none;
}
body.os-booted #os-topbar { animation: osBarDown 0.5s 0.05s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
/* the topbar hides while the tribunal is full-screen (#app.max) so it fills the whole viewport */
body.os-fullscreen #os-topbar { display: none; }
@keyframes osBarDown { from { transform: translateY(-100%); } to { transform: none; } }
.os-tb-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--os-text); }
.os-tb-brand svg { width: 17px; height: 17px; }
.os-tb-menu { display: flex; gap: 2px; }
.os-tb-menu span { font-size: 12.5px; color: var(--os-muted); padding: 4px 9px; border-radius: 6px; }
.os-tb-menu span:hover { color: var(--os-text); background: rgba(255, 255, 255, 0.08); }
.os-tb-clock { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--os-muted); }
.os-tb-status { display: flex; align-items: center; gap: 5px; }
.os-tb-status .mesh { width: 7px; height: 7px; border-radius: 50%; background: var(--os-green); box-shadow: 0 0 6px rgba(52, 211, 153, 0.7); }
.os-tb-status svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#os-date { letter-spacing: 0.03em; }

/* dock */
#os-dock {
  position: fixed; left: 13px; top: 50%; transform: translateY(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 10px; user-select: none;
  /* slide speed = the app icon's bounce cycle (osIconBounce, 0.8s) */
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* auto-hide into the left edge once the tribunal is launched (macOS/Linux
   style); the invisible edge strip below reveals it again on hover */
#os-dock.away { transform: translateY(-50%) translateX(calc(-100% - 24px)); pointer-events: none; }
.os-dock-btn {
  position: relative; width: 54px; height: 54px; border-radius: 14px;
  background: var(--os-panel); border: var(--os-gold-line);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--os-lift), var(--os-rim);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.os-dock-btn:hover { box-shadow: var(--os-lift-hover), var(--os-rim); transform: translateY(-2px); }
body.os-booted .os-dock-btn { animation: osRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
body.os-booted .os-dock-btn:nth-child(1) { animation-delay: 0.08s; }
body.os-booted .os-dock-btn:nth-child(2) { animation-delay: 0.14s; }
body.os-booted .os-dock-btn:nth-child(3) { animation-delay: 0.2s; }
body.os-booted .os-dock-btn:nth-child(4) { animation-delay: 0.26s; }
body.os-booted .os-dock-btn:nth-child(5) { animation-delay: 0.32s; }
body.os-booted .os-dock-btn:nth-child(6) { animation-delay: 0.38s; }
.os-dock-btn svg { width: 27px; height: 27px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#os-dock .os-dock-btn.is-loading {
  animation: osIconBounce 0.8s ease-in-out infinite;
  box-shadow: var(--os-lift), var(--os-rim), 0 0 18px rgba(255, 208, 0, 0.45);
}
@keyframes osIconBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}
.os-dock-btn[aria-pressed="true"]::after {
  content: ""; position: absolute; right: -15px; width: 4px; height: 18px; border-radius: 2px; background: var(--gold);
}
/* the dock slides fully off the left edge while the tribunal is open —
   without this, the tribunal button's open-window tab (right: -15px)
   sticks out at the left edge of the screen */
#os-dock.away .os-dock-btn[aria-pressed="true"]::after {
  content: none;
}
.os-dock-btn .tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--os-panel-solid); border: var(--os-gold-line); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s;
  color: var(--os-text);
}
.os-dock-btn:hover .tip, .os-dock-btn:focus-visible .tip { opacity: 1; }

/* flavor windows (Commons / Browser / Editor / Terminal / Care) */
.os-win {
  position: fixed; z-index: 30; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: var(--os-panel); border: var(--os-gold-line);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--os-lift), var(--os-rim);
}
.os-win.pop { animation: osPop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes osPop { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.os-win[hidden] { display: none !important; }
.os-win.min { height: 40px !important; }
.os-win.min .os-win-body { display: none; }
.os-win-title {
  flex-shrink: 0; height: 40px; background: var(--os-header); border-bottom: 1px solid rgba(255, 208, 0, 0.4);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; user-select: none; cursor: grab;
}
.os-win-controls { display: flex; gap: 10px; flex-shrink: 0; }
.os-win-controls span {
  width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #2a2a2a; cursor: pointer; transition: opacity 0.15s;
}
.os-win-controls span:hover { opacity: 0.75; }
.os-wc-close { background: var(--gold); }
.os-wc-min { background: var(--gold); opacity: 0.7; }
.os-wc-max { background: var(--gold); opacity: 0.5; }
.os-w-title { flex: 1; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--os-text); }
.os-win-body { flex: 1; overflow: auto; padding: 14px; color: var(--os-text); }

/* the tribunal app as a shell window: the game's own #titlebar is the
   window chrome (drag + window controls live there). Windowed by default
   geometry; .max fills the viewport under the OS topbar. */
body.os-shell > #app {
  position: fixed;
  left: 23%; top: 11%; width: 660px; height: 430px;
  z-index: 40;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--os-lift), var(--os-rim);
  display: flex;
}
body.os-shell > #app.max {
  left: 0 !important; top: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0;
}
body.os-shell > #app.pop { animation: osPop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
/* Opening travel (2026-10-05): at launch the windowed tribunal animates to
   fill the viewport — a layout animation (left/top/width/height), so the
   frame moves while the letterboxed scene inside stays put. .max is applied
   only when the travel ends: its !important geometry would override the
   keyframes mid-flight (author !important beats animations). */
body.os-shell > #app.open {
  animation: osOpen 0.34s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes osOpen {
  from { left: 23%; top: 11%; width: 660px; height: 430px; border-radius: 12px; }
  to   { left: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.os-shell > #app.open { animation: none; }
}
body.os-shell > #app[hidden] { display: none !important; }
body.os-shell > #app.min { height: 40px !important; }
body.os-shell > #app.min #content,
body.os-shell > #app.min #settings-menu { display: none; }

/* --- flavor window contents (ported from the concept demo) --- */
.os-f-row { display: flex; align-items: baseline; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13px; }
.os-f-row:hover { background: rgba(255, 208, 0, 0.07); }
.os-f-row svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; align-self: center; }
.os-f-row .os-f-note { margin-left: auto; font-size: 11.5px; color: var(--os-muted); }
.os-f-sub { padding: 2px 8px 2px 33px; color: var(--os-muted); font-size: 12.5px; }
.os-f-sub:hover { background: rgba(255, 255, 255, 0.05); border-radius: 7px; }
.os-br-hero { text-align: center; padding: 26px 0 18px; }
.os-br-hero svg { width: 52px; height: 52px; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linecap: round; }
.os-br-hero p { margin-top: 12px; font-size: 13px; color: var(--os-muted); }
.os-br-links { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.os-br-links a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; padding: 6px 8px; border-radius: 7px; }
.os-br-links a:hover { background: rgba(255, 208, 0, 0.08); }
.os-ed-doc { font-family: var(--os-mono); font-size: 12.5px; line-height: 1.75; }
.os-ed-doc .h { color: var(--gold); margin-bottom: 6px; font-size: 13px; }
.os-ed-doc .m { color: var(--os-muted); }
.os-term { font-family: var(--os-mono); font-size: 12px; line-height: 1.8; min-height: 100%; }
.os-term .ok { color: var(--os-green); }
.os-term .mt { color: var(--os-muted); }
.os-cursor { animation: osBlink 1.1s steps(1) infinite; color: var(--gold); }
@keyframes osBlink { 50% { opacity: 0; } }
.os-care { text-align: center; padding: 18px 8px; }
.os-care svg { width: 44px; height: 44px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-care h3 { margin-top: 12px; font-size: 14px; font-weight: 500; }
.os-care p { margin-top: 8px; font-size: 12.5px; color: var(--os-muted); line-height: 1.6; }
.os-care .dot-ok { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--os-green); margin-right: 5px; }

/* ---- prelude windows (orientation pre-case beats, 2026-09-13) ----------
   The prelude opens these AFTER the tribunal is fullscreen. #os-desktop is a
   stacking context at z-index 45 (above #app's 40), so its children already
   paint over the tribunal; .prelude-win raises the window within that context
   (below #os-dock 50 / #os-topbar 60) and centres it on screen, nudged 50px
   left so the Killchain.gif clears the expanded messenger (bottom-right). */
.prelude-win { z-index: 48; left: calc(50% - 50px); top: 50%; transform: translate(-50%, -50%); }

/* The Legal_judgment.doc opens OVERLAID on the Killchain.gif window (t83):
   offset right + down from the shared CSS centre so the two windows overlap
   while both title bars stay grabbable — the killchain's 40 px bar sits
   above the doc's top edge (its centre is uncovered), and the doc paints
   above the killchain (later in the DOM) so its own bar is on top. The doc
   now hugs its (taller, auto-height) content, so it is pushed further down
   (+110px) to keep its top edge clear of the killchain's title bar. The +6px
   left is the shared +50px prelude nudge minus its original +56px offset, so
   it keeps the same 56px-overlap relationship with the (nudged) killchain. */
#win-doc.prelude-win { left: calc(50% + 6px); top: calc(50% + 110px); }

/* Killchain.gif body — the six-stage line (ported from
   killchain-stages-line.html). A light paper canvas (the "file content")
   inside the dark OS window chrome. */
.kc-body { position: relative; padding: 0; overflow: hidden; background: #f6f5f1; color: #141414; }
.kc-stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 480px;
  transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: center; }
.kc-head { position: absolute; top: 64px; left: 0; right: 0; text-align: center; }
.kc-head h1 { font-family: var(--os-sans); font-size: 46px; font-weight: 700; letter-spacing: 8px; color: #141414; }
.kc-line { position: absolute; left: 90px; top: 269px; width: 900px; height: 2px; background: rgba(20, 20, 20, 0.45); }
.kc-fill { position: absolute; left: 90px; top: 268px; width: 0; height: 4px; background: #e8491d; }
.kc-st { position: absolute; width: 0; height: 0; }
.kc-st .num { position: absolute; left: 50%; top: -58px; transform: translateX(-50%); font: 600 15px var(--os-mono); letter-spacing: 2px; color: rgba(20, 20, 20, 0.62); }
.kc-st .dot { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(20, 20, 20, 0.7); background: #f6f5f1; transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .4s, border-color .4s; }
.kc-st .name { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); font-size: 26px; font-weight: 700; letter-spacing: 3px; color: #141414; white-space: nowrap; }
.kc-st .d { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); width: 180px; text-align: center; font-size: 19px; line-height: 1.45; color: rgba(20, 20, 20, 0.85); opacity: 0; transition: opacity .5s ease; }
.kc-st.shown .d { opacity: 1; }
.kc-st.active .dot { background: #e8491d; border-color: #e8491d; transform: translate(-50%, -50%) scale(1.3); }
.kc-st.lit .dot { background: #141414; border-color: #141414; }

/* Legal_judgment.doc body — the three-part capitalist judgment, styled as a
   legal proceeding (serif paper document: centred case caption, a double
   rule, justified findings, a centred DISPOSITION, and a signature line).
   The window hugs its content (height auto in the markup) so there is no
   scrollbar. Kept compact so the window stays close to the old 520px height
   (the prelude overlap geometry with the Killchain.gif window depends on it). */
.lc-doc {
  position: relative; padding: 16px 26px 14px; overflow: visible;
  background: #f6f5f1; color: #141414;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 12.5px; line-height: 1.45;
}
.lc-doc .lc-src {
  text-align: center; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(20, 20, 20, 0.55); margin-bottom: 4px;
}
.lc-doc .lc-title {
  text-align: center; font-size: 15px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.01em; margin: 3px 0 0;
}
.lc-doc .lc-rule { height: 1px; background: rgba(20, 20, 20, 0.28); margin: 12px 0; }
.lc-doc .lc-rule-double {
  height: 3px; margin: 10px 0 13px;
  border-top: 2px solid rgba(20, 20, 20, 0.7);
  border-bottom: 1px solid rgba(20, 20, 20, 0.45);
}
.lc-doc p { margin: 0 0 9px; text-align: justify; text-indent: 1.5em; }
.lc-doc p:first-of-type { text-indent: 0; }
.lc-doc .lc-disp { margin-top: 2px; }
.lc-doc .lc-disp-h {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #141414; margin-bottom: 5px;
}
.lc-doc .lc-disp p { text-indent: 0; text-align: center; font-style: italic; margin-bottom: 0; }
.lc-doc .lc-sign { margin-top: 10px; text-align: center; }
.lc-doc .lc-sign-line { width: 200px; height: 1px; background: rgba(20, 20, 20, 0.55); margin: 0 auto 4px; }
.lc-doc .lc-sign-cap { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(20, 20, 20, 0.55); }

.os-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  #os-poweron *, #os-splash *, #os-desktop *, body.os-shell > #app { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  #os-power-btn svg { animation: none; opacity: 1; filter: none; }
}

/* zoom / narrow-viewport fallbacks (ported from the a11y pass) */
@media (max-width: 860px) {
  #os-topbar { gap: 10px; }
  .os-tb-menu { display: none; }
  .os-tb-clock { gap: 10px; }
  #os-tb-date { display: none; }
  .os-win { max-width: calc(100vw - 24px); max-height: calc(100vh - 200px); }
  body.os-shell > #app { width: 88vw !important; left: 10px !important; }
}
@media (max-width: 560px) {
  #os-dock { left: 6px; gap: 6px; }
  .os-dock-btn { width: 44px; height: 44px; border-radius: 11px; }
  .os-dock-btn svg { width: 22px; height: 22px; }
  .os-sp-word { font-size: 22px; }
}