/* First Watch, aligned with the Dubai Health visual language:
   navy on white, pastel accents, the Dubai typeface, pill controls, rounded outlined cards.
   Palette values follow dubaihealth.ae. Pastel fills always carry navy text. */

/* The Dubai typeface is used when it is installed on the reader's device (it ships with Microsoft Office).
   To serve it to everyone, add the licensed .woff2 files to assets/fonts/ and add url() sources below. */
@font-face{font-family:"Dubai Web"; font-weight:400; font-display:swap; src:local("Dubai Regular"), local("Dubai-Regular"), local("Dubai")}
@font-face{font-family:"Dubai Web"; font-weight:500; font-display:swap; src:local("Dubai Medium"), local("Dubai-Medium")}
@font-face{font-family:"Dubai Web"; font-weight:700; font-display:swap; src:local("Dubai Bold"), local("Dubai-Bold")}

:root{
  --navy:#002F70; --navy-deep:#0A233C; --on-fill:#002F70;
  --paper:#FFFFFF; --paper-2:#F5F7F9; --paper-3:#E5EBF0; --card:#FFFFFF;
  --ink:#1C1C24; --ink-2:#4D7094; --ink-3:#6685A3; --line:#CCD6E0; --head:#002F70; --accent:#037BC5; --fill:#002F70; --on-navy:#FFFFFF;
  /* accent fills; the names are kept from the first design because the page script refers to them */
  --rust:#FF8F8A; --blue:#32AFFC; --sky:#77DEFC; --green:#A5FFBC; --gold:#FABC4C; --purple:#AC9DFF; --pink:#EFBFE2;
  --tint-blue:#EBF7FF; --tint-sky:#F1FCFF; --tint-green:#EDFFF1; --tint-pink:#FBEFF8; --tint-orange:#FEF8ED;
  --shadow:0 10px 30px -16px rgba(0,47,112,.28); --r:20px; --r-sm:12px;
  --sans:"Dubai Web", "Dubai", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --serif:var(--sans); --mono:var(--sans);
  --w:1180px;
}
[data-theme="dark"]{
  --paper:#0A233C; --paper-2:#0D2A48; --paper-3:#15385E; --card:#102F50;
  --ink:#FFFFFF; --ink-2:#B2C2D1; --ink-3:#8099B2; --line:#1F4670; --head:#FFFFFF; --accent:#5BBFFD; --fill:#11448F;
  --tint-blue:rgba(50,175,252,.14); --tint-sky:rgba(119,222,252,.12); --tint-green:rgba(165,255,188,.12); --tint-pink:rgba(239,191,226,.13); --tint-orange:rgba(250,188,76,.13);
  --shadow:0 16px 36px -20px rgba(0,0,0,.7);
}
/* navy bands: the hero and the patient section */
.band{background:var(--navy); color:#fff; --ink:#FFFFFF; --ink-2:#CCD6E0; --ink-3:#99ADC2; --line:rgba(255,255,255,.2); --card:rgba(255,255,255,.07); --head:#FFFFFF; --accent:#77DEFC; --paper-3:rgba(255,255,255,.12)}
[data-theme="dark"] .band{background:#002A63}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--sans); font-weight:700; color:var(--head); margin:0}
h2{font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.15}
h3{font-size:1.25rem; margin:2.4rem 0 1rem}
p{margin:0 0 1rem} a{color:inherit}
.fine{font-size:.87rem; color:var(--ink-2)} .sr,.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--navy); color:#fff; padding:.5rem 1rem; border-radius:50px}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:8px}
button{font:inherit; color:inherit; cursor:pointer}

/* top bar */
.top{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.2rem; padding:.6rem clamp(1rem,3vw,2rem); background:var(--paper); box-shadow:0 2px 14px rgba(0,47,112,.08); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:700; font-size:1.05rem; color:#fff; background:var(--navy); padding:.55rem 1rem .55rem .75rem; border-radius:var(--r-sm); line-height:1}
.brand svg{width:26px; height:26px} .b3{fill:var(--green)} .b2{fill:var(--sky)} .b1{fill:var(--blue)}
.top nav{display:flex; gap:.15rem; margin-left:auto; flex-wrap:wrap}
.top nav a{font-weight:500; font-size:.92rem; text-decoration:none; padding:.4rem .8rem; border-radius:50px; color:var(--head)}
.top nav a:hover{background:var(--tint-blue)} .top nav a.on{background:var(--fill); color:#fff}
.menu{display:none; margin-left:auto; border:1px solid var(--head); background:none; color:var(--head); border-radius:50px; padding:.4rem 1.1rem; font-weight:700; font-size:.9rem}
.theme{white-space:nowrap; border:1px solid var(--line); background:var(--card); color:var(--head); border-radius:50px; padding:.4rem 1rem; font-weight:500; font-size:.85rem}
.theme:hover{background:var(--tint-blue)}
[data-theme="light"] .moon,[data-theme="dark"] .sun{display:none}

/* hero */
.hero-band{position:relative; overflow:hidden; border-radius:0 0 32px 32px}
.hero-band::before{content:""; position:absolute; inset:0; background:radial-gradient(900px 520px at 88% 8%, rgba(50,175,252,.35), transparent 62%), radial-gradient(700px 420px at 0% 100%, rgba(165,255,188,.14), transparent 60%); pointer-events:none}
.hero{position:relative; max-width:var(--w); margin:0 auto; padding:clamp(2.5rem,6vw,5rem) clamp(1rem,3vw,2rem) 3rem; display:grid; grid-template-columns:1.05fr .95fr; gap:2rem 3rem; align-items:center}
.kicker{display:flex; gap:.6rem; flex-wrap:wrap; font-weight:500; font-size:.85rem; margin:0}
.kicker span{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:.3rem .9rem; border-radius:50px}
.kicker span+span{background:var(--green); border-color:var(--green); color:var(--on-fill); font-weight:700}
h1{font-size:clamp(3.4rem,8.5vw,6.6rem); line-height:.95; letter-spacing:-.02em; margin:1.2rem 0 1.4rem}
h1 em{font-style:normal; color:var(--sky)}
.lede{font-size:1.2rem; line-height:1.55; max-width:40ch; color:#E5EBF0}
.owners{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.6rem; margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line)}
.owners dt{font-size:.8rem; color:var(--ink-3)} .owners dd{margin:.1rem 0 0; font-weight:500; line-height:1.3}
.dial-wrap{position:relative}
.dial{width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible}
.ring{stroke:var(--navy); stroke-width:6; cursor:pointer; transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .3s; transform-box:fill-box; transform-origin:center}
.ring.green{fill:var(--green)} .ring.blue{fill:var(--sky)} .ring.rust{fill:var(--blue)}
.thread{fill:none; stroke:var(--pink); stroke-width:11; stroke-linecap:round; cursor:pointer; stroke-dasharray:700; stroke-dashoffset:700; animation:draw 1.8s .7s ease forwards}
.layer:hover,.layer.on{filter:brightness(1.06) saturate(1.15)} .ring.on{transform:scale(1.03)}
.dl{font:700 12px var(--sans); letter-spacing:.16em; fill:var(--on-fill); text-anchor:middle; pointer-events:none}
.bezel line{stroke:rgba(255,255,255,.35); stroke-width:1.5} .bezel line.maj{stroke:#fff; stroke-width:2.5}
.bezel{animation:spin 120s linear infinite; transform-origin:center}
.dial-info{margin:1.4rem auto 0; max-width:500px; min-height:7.5rem; padding:1.1rem 1.3rem; border-left:5px solid var(--green); border-radius:var(--r-sm); background:var(--card); backdrop-filter:blur(6px)}
.dial-info b{display:block; font-size:1.2rem; margin-bottom:.25rem} .dial-info p{margin:0; font-size:.95rem; color:var(--ink-2)}
.facts{grid-column:1/-1; list-style:none; margin:1.5rem 0 0; padding:1.6rem 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; border-top:1px solid var(--line); text-align:center}
.facts b{display:block; font-size:2.6rem; line-height:1.1; font-weight:700} .facts span{font-size:.9rem; color:var(--ink-2)}

/* sections */
.sec{padding:clamp(3.2rem,7vw,6rem) clamp(1rem,3vw,2rem)}
.sec>*{max-width:var(--w); margin-left:auto; margin-right:auto}
.sec.alt{background:var(--paper-2)}
.sec.dark{background:var(--navy)} [data-theme="dark"] .sec.dark{background:#002A63}
.sec-h{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem; margin-bottom:2.8rem}
.sec-h .num{font-weight:700; font-size:.8rem; color:var(--on-fill); background:var(--sky); padding:.2rem .85rem; border-radius:50px; letter-spacing:.06em}
.sec-h p{max-width:68ch; color:var(--ink-2); margin:0; font-size:1.05rem}
.cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem} .cols-2{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.loss b{font-size:1.15rem; display:block; margin-bottom:.4rem; color:var(--head)}
.loss{border-top:6px solid var(--blue)} .loss:nth-child(2){border-top-color:var(--green)} .loss:nth-child(3){border-top-color:var(--pink)}
.aims{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.4rem}
.aim{padding:2rem; border-radius:var(--r)} .aim:nth-child(1){background:var(--tint-blue)} .aim:nth-child(2){background:var(--tint-green)}
.aim h3{margin:0 0 .6rem; font-size:1.4rem} .aim p{margin:0}
.rails{margin-top:2.6rem} .rails h3{text-align:center} .rails ol{list-style:none; counter-reset:r; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem}
.rails li{counter-increment:r; padding:1rem 0 1rem 3.2rem; border-top:1px solid var(--line); position:relative}
.rails li::before{content:counter(r); position:absolute; left:0; top:.95rem; width:2rem; height:2rem; border-radius:50%; background:var(--tint-blue); color:var(--head); font-weight:700; font-size:.9rem; display:grid; place-items:center}

/* timeline */
.tl{display:grid; grid-template-columns:repeat(10,1fr); gap:.5rem}
.tl button{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem .7rem 1rem; text-align:left; min-height:112px; transition:border-color .2s, box-shadow .2s}
.tl button:hover{border-color:var(--blue)}
.tl button[aria-selected="true"]{background:var(--fill); border-color:var(--fill); color:#fff; box-shadow:var(--shadow)}
.tl .m{font-weight:700; font-size:1.3rem; display:block; color:var(--head)} .tl .y{font-size:.75rem; color:var(--ink-3)}
.tl button[aria-selected="true"] .m,.tl button[aria-selected="true"] .y{color:#fff}
.dots{display:flex; gap:4px; flex-wrap:wrap; margin-top:.6rem} .dot{width:10px; height:10px; border-radius:50%}
.t-block{background:var(--rust)} .t-systems{background:var(--blue)} .t-skills{background:var(--pink)} .t-drills{background:var(--green); border-radius:3px} .t-sp{background:var(--gold)} .t-obs{background:var(--gold); transform:rotate(45deg); border-radius:0} .t-career{background:var(--purple)} .t-exercise{background:var(--green); outline:2px solid var(--accent); border-radius:3px} .t-cert{background:var(--accent)}
.tl-panel{margin-top:.8rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 2rem; display:grid; grid-template-columns:1fr 1.6fr; gap:2rem}
.tl-panel h3{margin:0; font-size:1.6rem} .tl-panel ul{margin:0; padding-left:1.1rem} .tl-panel li{margin-bottom:.45rem} .tl-panel li::marker{color:var(--accent)}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem} .tag{font-size:.8rem; font-weight:500; background:var(--paper-2); border:1px solid var(--line); padding:.2rem .7rem; border-radius:50px; display:inline-flex; gap:.4rem; align-items:center}
.fig{margin-top:1.6rem} .fig summary{cursor:pointer; display:inline-block; list-style:none; font-weight:700; font-size:.9rem; color:var(--head); border:1px solid var(--head); border-radius:50px; padding:.45rem 1.2rem} .fig summary::-webkit-details-marker{display:none} .fig summary:hover,.fig[open] summary{background:var(--fill); border-color:var(--fill); color:#fff}
.fig img{width:100%; margin-top:1rem; border:1px solid var(--line); border-radius:var(--r); background:#FFFFFF}
.figs{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}

/* block */
.weeks{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-bottom:1.4rem}
.weeks button{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.weeks button:hover{border-color:var(--blue)}
.weeks button[aria-selected="true"]{background:var(--tint-blue); border-color:var(--blue); box-shadow:var(--shadow)}
.weeks .p{font-size:.8rem; font-weight:700; color:var(--accent)} .weeks b{display:block; font-size:1.05rem; line-height:1.25; margin:.25rem 0; color:var(--head)} .weeks small{color:var(--ink-2)}
.block-grid{display:grid; grid-template-columns:minmax(260px,.8fr) 1.6fr; gap:1.4rem; align-items:start}
.days{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.days button{width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem 1rem; display:grid; grid-template-columns:2.6rem 1fr; gap:.1rem .8rem}
.days button:hover{border-color:var(--blue)}
.days button[aria-pressed="true"]{background:var(--fill); color:#fff; border-color:var(--fill)}
.days .dn{font-size:1.7rem; line-height:1; font-weight:700; grid-row:span 2; color:var(--accent)} .days button[aria-pressed="true"] .dn{color:var(--sky)} .days .dd{font-size:.78rem; opacity:.8} .days .dt{font-weight:500; line-height:1.25}
.day-detail{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:2rem; box-shadow:var(--shadow); position:sticky; top:92px}
.day-detail h3{margin:.2rem 0 .6rem; font-size:1.5rem} .day-detail .aim-t{color:var(--ink-2); font-size:1.05rem; background:var(--tint-sky); border-radius:var(--r-sm); padding:.8rem 1rem}
.agenda{width:100%; border-collapse:collapse; margin:1.2rem 0} .agenda td{padding:.6rem 0; border-top:1px solid var(--line); vertical-align:top} .agenda td:first-child{font-weight:700; font-size:.85rem; color:var(--accent); width:4.4rem; padding-top:.72rem}
.meta{display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:.92rem} .meta span{display:block; font-size:.8rem; color:var(--ink-3)}

/* field work */
.hd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
.hd{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; border-top:6px solid var(--blue)} .hd.skills{border-top-color:var(--pink)}
.hd .mo{font-size:.8rem; font-weight:700; color:var(--accent)} .hd b{display:block; font-size:1.1rem; line-height:1.2; margin:.3rem 0 .5rem; color:var(--head)} .hd p{margin:0; font-size:.9rem; color:var(--ink-2)}
.rot{margin-top:3rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem}
.rot-h,.drill-h{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap} .rot-h h3,.drill-h h3{margin:0} .drill-h{margin-top:3rem}
.seg{display:inline-flex; gap:.3rem; flex-wrap:wrap; background:var(--paper-2); border:1px solid var(--line); border-radius:50px; padding:.25rem}
.seg button{background:none; border:0; border-radius:50px; padding:.4rem 1.1rem; font-weight:500; font-size:.88rem; color:var(--head)} .seg button:hover{background:var(--tint-blue)} .seg button[aria-checked="true"]{background:var(--fill); color:#fff; font-weight:700}
.rot-table{display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; margin:1.4rem 0 1rem}
.rot-m{border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem .7rem; background:var(--paper-2)} .rot-m span{font-size:.8rem; font-weight:700; color:var(--head); display:block; margin-bottom:.5rem}
.chip{display:block; width:100%; text-align:left; border:0; border-radius:10px; padding:.45rem .6rem; margin-top:.35rem; font-weight:700; font-size:.82rem; color:var(--on-fill); background:var(--sky)} .chip.physical{background:var(--green)} .chip small{display:block; font-weight:400; font-size:.74rem; line-height:1.2}
.chip:hover{filter:brightness(1.05) saturate(1.2)}
.drill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.9rem; margin-top:1.2rem}
.drill{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; text-align:left; display:block; width:100%; transition:transform .2s, box-shadow .2s, border-color .2s}
.drill:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue)}
.drill .id{display:inline-block; font-weight:700; font-size:.8rem; color:var(--on-fill); background:var(--sky); border-radius:50px; padding:.05rem .65rem} .drill.physical .id{background:var(--green)} .drill b{display:block; font-size:1.1rem; line-height:1.2; margin:.45rem 0 .4rem; color:var(--head)} .drill p{margin:0; font-size:.88rem; color:var(--ink-2)}
.drill .when{display:block; margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.8rem; font-weight:500; color:var(--accent)}
.live{float:right; font-size:.72rem; font-weight:700; color:var(--on-fill); background:var(--pink); padding:.1rem .6rem; border-radius:50px}
.dlg{border:0; border-radius:var(--r); padding:2.2rem; max-width:560px; width:calc(100% - 2rem); background:var(--paper); color:var(--ink); box-shadow:0 30px 80px rgba(0,47,112,.35)} .dlg::backdrop{background:rgba(10,35,60,.6); backdrop-filter:blur(3px)}
.dlg .x{position:absolute; right:1rem; top:.8rem; width:2.2rem; height:2.2rem; border:0; border-radius:50%; background:var(--tint-blue); color:var(--head); font-size:1.4rem; line-height:1} .dlg h3{margin:.2rem 0 1rem; font-size:1.6rem} .dlg dt{font-size:.82rem; font-weight:700; color:var(--accent); margin-top:1rem} .dlg dd{margin:.2rem 0 0} .dlg .trap{background:var(--tint-pink); border-radius:var(--r-sm); padding:.7rem .9rem}

/* patient */
.pull{font-weight:500; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.15; margin:0 auto 3rem; color:var(--green); max-width:24ch; text-align:center} .pull cite{display:block; font-size:.9rem; font-weight:400; font-style:normal; color:var(--ink-2); margin-top:1rem}
.steps{list-style:none; padding:0; margin:0 0 3rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem}
.steps li{padding:1.2rem; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.steps span{font-size:.8rem; font-weight:700; color:var(--on-fill); background:var(--sky); border-radius:50px; padding:.1rem .7rem} .steps b{display:block; font-size:1.08rem; line-height:1.2; margin:.7rem 0 .4rem} .steps p{font-size:.88rem; color:var(--ink-2); margin:0}
.ticks,.crosses,.dashes{list-style:none; padding:0; margin:0} .ticks li,.crosses li,.dashes li{padding:.5rem 0 .5rem 1.7rem; border-top:1px solid var(--line); position:relative; font-size:.95rem}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700} .crosses li::before{content:"×"; position:absolute; left:.1rem; color:var(--rust); font-weight:700} .dashes li::before{content:"–"; position:absolute; left:0; color:var(--ink-3)}
.sp-cols h3{margin-top:0}

/* exercise */
.ex-nums{list-style:none; padding:0; margin:0 0 2.6rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; text-align:center} .ex-nums li{background:var(--tint-blue); border-radius:var(--r); padding:1.2rem .8rem} .ex-nums li:nth-child(even){background:var(--tint-green)} .ex-nums b{display:block; font-size:2.1rem; line-height:1.1; color:var(--head)} .ex-nums span{font-size:.88rem; color:var(--ink-2)}
.ex-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:2.4rem; align-items:start} .ex-grid h3{margin-top:0}
.stations{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.st{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:.9rem 1rem} .st:hover{border-color:var(--blue)} .st[aria-pressed="true"]{background:var(--green); color:var(--on-fill); border-color:var(--green)}
.st b{display:block; font-size:1rem; line-height:1.2; color:var(--head)} .st[aria-pressed="true"] b{color:var(--on-fill)} .st small{font-size:.78rem; font-weight:500; opacity:.85} .st p{margin:.4rem 0 0; font-size:.84rem; opacity:.9}
.st:last-child{grid-column:1/-1}
.injects{list-style:none; margin:0; padding:0; max-height:640px; overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.injects li{display:grid; grid-template-columns:3.8rem 1fr; gap:.2rem .8rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--line)} .injects li:last-child{border-bottom:0} .injects time{font-weight:700; font-size:.85rem; color:var(--accent); padding-top:.1rem}
.injects b{font-weight:500; color:var(--head)} .injects p{margin:.25rem 0 0; font-size:.88rem; color:var(--ink-2)} .injects em{font-size:.76rem; font-style:normal; font-weight:500; color:var(--ink-3)}
.link{background:none; border:0; text-decoration:underline; font-weight:500; font-size:.85rem; color:var(--accent)}

/* assessment */
.src-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
.src{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem} .src .n{display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; font-weight:700; font-size:1.4rem; color:var(--on-fill); background:var(--sky)} .src:nth-child(2) .n{background:var(--pink)} .src:nth-child(3) .n{background:var(--gold)} .src:nth-child(4) .n{background:var(--green)}
.src b{display:block; font-size:1.12rem; line-height:1.2; margin:.8rem 0 .2rem; color:var(--head)} .src small{color:var(--ink-3); display:block; margin-bottom:.7rem} .src p{font-size:.88rem; margin:0 0 .6rem} .src .rem{font-size:.82rem; color:var(--ink-2); border-top:1px solid var(--line); padding-top:.6rem} .src .rem b{color:inherit; margin:0}
.rule{margin-top:2.4rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:2rem; box-shadow:var(--shadow)} .rule h3{margin-top:0}
.rc{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.6rem 0; border-top:1px solid var(--line)} .rc .seg button{padding:.3rem .9rem}
.verdict{padding:1.8rem; border-radius:var(--r); color:var(--on-fill); display:flex; flex-direction:column; justify-content:center; transition:background .35s}
.verdict.ok{background:var(--green)} .verdict.rem{background:var(--gold)} .verdict.no{background:var(--rust)} .verdict.def{background:var(--line)} [data-theme="dark"] .verdict.def{background:#B2C2D1}
.verdict span{font-size:.82rem; font-weight:700} .verdict b{font-size:2rem; line-height:1.1; margin:.4rem 0 .8rem} .verdict p{margin:0; font-size:.95rem}

/* governance */
.gov-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem} .gov{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; border-top:6px solid var(--blue)} .gov:nth-child(2){border-top-color:var(--sky)} .gov:nth-child(3){border-top-color:var(--green)} .gov:nth-child(4){border-top-color:var(--pink)}
.gov span{font-size:.8rem; font-weight:700; color:var(--accent)} .gov b{display:block; font-size:1.12rem; line-height:1.2; margin:.35rem 0 .6rem; color:var(--head)} .gov p{margin:0; font-size:.9rem; color:var(--ink-2)}
#governance h3{text-align:center; margin-top:3rem}
.partners{display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem} .partners div{display:grid; grid-template-columns:230px 1fr; gap:1rem; padding:.75rem 0; border-top:1px solid var(--line); font-size:.92rem} .partners b{font-weight:700; color:var(--head)} .partners span{color:var(--ink-2)}
.decisions{list-style:none; counter-reset:d; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.decisions li{counter-increment:d; background:var(--navy); color:#fff; border-radius:var(--r); padding:1.5rem 1.5rem 1.5rem 4.6rem; position:relative} [data-theme="dark"] .decisions li{background:var(--fill)}
.decisions li::before{content:counter(d); position:absolute; left:1.3rem; top:1.3rem; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:1.2rem; color:var(--on-fill); background:var(--green)} .decisions b{display:block; font-size:1.12rem; margin-bottom:.3rem} .decisions p{margin:0; font-size:.92rem; color:#CCD6E0}
.tbl-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r)} .bench{width:100%; border-collapse:collapse; font-size:.92rem; min-width:720px} .bench th{font-weight:700; font-size:.85rem; text-align:left; color:#fff; background:var(--navy); padding:.8rem 1rem} .bench td{padding:.8rem 1rem; border-top:1px solid var(--line); vertical-align:top} .bench tbody tr:nth-child(even){background:var(--paper-2)} .bench td:first-child{font-weight:700; color:var(--head)}

/* library */
.lib-tools{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.4rem} .search{flex:1; min-width:260px} .search input{width:100%; font:inherit; padding:.75rem 1.3rem; border:1px solid var(--line); border-radius:50px; background:var(--card); color:var(--ink)} .search input:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint-blue)}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:.9rem}
.doc{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem; text-align:left; width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; transition:transform .2s, box-shadow .2s, border-color .2s} .doc:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue)}
.doc .c{font-size:.76rem; font-weight:700; color:var(--on-fill); background:var(--pink); border-radius:50px; padding:.05rem .7rem} .doc b{font-size:1.12rem; line-height:1.2; color:var(--head)} .doc p{margin:0; font-size:.88rem; color:var(--ink-2)} .doc small{margin-top:auto; padding-top:.7rem; font-size:.8rem; color:var(--ink-3)} .doc mark{background:var(--gold); color:var(--on-fill); border-radius:3px}
.reader{position:fixed; inset:0; z-index:60; background:var(--paper); overflow:auto} .reader[hidden]{display:none}
.reader-bar{position:sticky; top:0; display:flex; align-items:center; gap:1rem; padding:.8rem clamp(1rem,3vw,2rem); background:var(--navy); color:#fff; z-index:2} .reader-bar strong{font-size:1.05rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.back{background:#fff; border:0; border-radius:50px; padding:.4rem 1.1rem; font-weight:700; font-size:.88rem; color:var(--navy)}
.reader-body{display:grid; grid-template-columns:260px minmax(0,760px); gap:3rem; max-width:1120px; margin:0 auto; padding:2.5rem clamp(1rem,3vw,2rem) 6rem}
#readerToc{position:sticky; top:80px; align-self:start; max-height:calc(100vh - 110px); overflow:auto; font-size:.88rem; border-left:2px solid var(--line); padding-left:1rem} #readerToc a{display:block; padding:.25rem 0; text-decoration:none; color:var(--ink-2)} #readerToc a:hover{color:var(--accent)} #readerToc a.l3{padding-left:.9rem; font-size:.82rem; color:var(--ink-3)}
.prose h1{font-size:2.4rem; line-height:1.1; letter-spacing:0; margin:0 0 1rem} .prose h2{font-size:1.6rem; margin:2.6rem 0 1rem; padding-top:1.4rem; border-top:1px solid var(--line)} .prose h3{font-size:1.25rem} .prose h4{font-weight:700; font-size:1rem; color:var(--head); margin:1.4rem 0 .4rem}
.prose table{width:100%; border-collapse:collapse; font-size:.88rem; margin:1.2rem 0; display:block; overflow:auto} .prose th{background:var(--navy); color:#fff; text-align:left; padding:.55rem .7rem; font-weight:700} .prose td{border:1px solid var(--line); padding:.55rem .7rem; vertical-align:top} .prose tbody tr:nth-child(even){background:var(--paper-2)}
.prose blockquote{margin:1rem 0; padding:.8rem 1.2rem; border-radius:var(--r-sm); background:var(--tint-blue); color:var(--ink)} .prose blockquote p:last-child{margin:0} .prose img{max-width:100%; border:1px solid var(--line); border-radius:var(--r); background:#FFFFFF} .prose hr{border:0; border-top:1px solid var(--line); margin:2rem 0} .prose code{font-family:ui-monospace, Menlo, monospace; font-size:.85em; background:var(--paper-3); padding:.1em .3em; border-radius:4px} .prose pre{background:var(--paper-2); border-radius:var(--r-sm); padding:1rem; overflow:auto} .prose pre code{background:none; padding:0} .prose a{color:var(--accent)}

.foot{padding:3rem clamp(1rem,3vw,2rem); background:var(--navy); color:#CCD6E0; display:grid; grid-template-columns:1fr 1fr; gap:2rem} .foot strong{font-size:1.4rem; color:#fff} .foot p{max-width:56ch; font-size:.92rem} .foot .fine{color:#99ADC2}
[data-theme="dark"] .foot{background:#002A63}

/* motion */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1; transform:none}
.hero-text>*{animation:rise .9s both cubic-bezier(.2,.8,.2,1)} .hero-text>*:nth-child(2){animation-delay:.08s} .hero-text>*:nth-child(3){animation-delay:.2s} .hero-text>*:nth-child(4){animation-delay:.32s}
.ring{animation:pop .9s both cubic-bezier(.2,.9,.3,1.2)} .ring.blue{animation-delay:.15s} .ring.rust{animation-delay:.3s}
@keyframes rise{from{opacity:0; transform:translateY(24px)}} @keyframes pop{from{opacity:0; transform:scale(.6)}} @keyframes draw{to{stroke-dashoffset:0}} @keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .reveal{opacity:1; transform:none} .thread{stroke-dashoffset:0} html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1100px){.top nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:.8rem 1rem} .top nav.open{display:flex} .menu{display:block} .theme{margin-left:0}
  .src-grid,.gov-grid,.hd-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .rot-table{grid-template-columns:repeat(4,1fr)} .facts{grid-template-columns:repeat(3,1fr)} .tl{grid-template-columns:repeat(5,1fr)}}
@media (max-width:820px){body{font-size:16px} .hero,.block-grid,.ex-grid,.rule,.cols-2,.cols-3,.aims,.tl-panel,.figs,.foot,.partners,.decisions,.rails ol{grid-template-columns:1fr} .day-detail{position:static} .tl button{min-height:92px} .weeks{grid-template-columns:1fr 1fr} .ex-nums{grid-template-columns:1fr 1fr} .partners div{grid-template-columns:1fr; gap:.1rem} .reader-body{grid-template-columns:1fr} #readerToc{display:none} .owners{grid-template-columns:1fr} .hero-band{border-radius:0 0 22px 22px}}
@media (max-width:520px){.src-grid,.gov-grid,.hd-grid,.stations,.weeks,.steps{grid-template-columns:1fr} .rot-table{grid-template-columns:1fr 1fr} .facts{grid-template-columns:1fr 1fr} .tl{grid-template-columns:repeat(3,1fr)} .st:last-child{grid-column:auto}}
@media print{.top,.theme,.menu,.reader-bar .back{display:none} .sec{break-inside:avoid}}