:root{
  --navy:#071B33;
  --royal:#12365B;
  --royal-top:#1D5B8D;
  --royal-mid:#164974;
  --royal-bottom:#0A2948;
  --gold:#D4AF37;
  --gold-light:#F0D36B;
  --gold-hi:#F7E39A;
  --gold-deep:#9A6C12;
  --white:#F7F7F4;
  --bar-h:72px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#031323;color:var(--white);font-family:Arial,Helvetica,sans-serif}
button{font:inherit}.hidden{display:none!important}
a.tile,a.row,a.conference-current,.bottom-nav a{text-decoration:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:3px}
#content:focus{outline:none}

/* The new official seal is used untouched inside a very thin external gold ring. */
.seal-frame{display:grid;place-items:center;border-radius:50%;padding:1px;background:linear-gradient(145deg,var(--gold-hi),var(--gold-light) 30%,var(--gold) 62%,var(--gold-deep));box-shadow:0 6px 18px #0007,0 0 8px #d4af3722;overflow:hidden}
.seal-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

#splash{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;background:var(--navy);color:var(--gold-light);text-align:center}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:24px}
.splash-seal{width:min(47vw,216px);height:min(47vw,216px)}
.splash-title{font:700 clamp(28px,7vw,40px) Georgia,serif;text-shadow:0 2px 8px #000}

.app-shell{width:100%;min-height:100vh;background:var(--navy);position:relative;margin:0 auto;box-shadow:0 0 40px #0006}
#hero{background:url('assets/home-bg.png') center 52%/cover no-repeat;border-bottom:1px solid var(--gold)}
.hero-shade{min-height:266px;padding:14px 10px 4px;text-align:center;background:linear-gradient(#071b3312,#071b334c 44%,#071b33e5)}
.home-seal{width:116px;height:116px;margin:0 auto}
.hero-shade h1{margin:7px 0 4px;color:var(--gold-light);font:700 clamp(29px,7.4vw,43px) Georgia,serif;text-shadow:0 2px 7px #000}
.org-name{margin:0 auto 2px;font:600 clamp(11.5px,3.35vw,18px) Georgia,serif;white-space:nowrap;text-shadow:0 2px 6px #000}
.gold-rule{display:flex;align-items:center;justify-content:center;gap:7px;margin:3px auto;color:var(--gold-light);font-size:9px}
.gold-rule:before,.gold-rule:after{content:"";height:1px;width:min(27vw,112px);background:linear-gradient(90deg,transparent,var(--gold-light))}
.gold-rule:after{background:linear-gradient(90deg,var(--gold-light),transparent)}
.tagline{margin:1px 0 0;font-size:clamp(14px,3.7vw,18px);font-style:italic;text-shadow:0 2px 6px #000}

main{max-width:900px;margin:auto;padding:2px max(9px,env(safe-area-inset-right)) calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px) max(9px,env(safe-area-inset-left));background:linear-gradient(#071B33,#06182f)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(4px,.7vh,7px)}
.tile{min-height:clamp(72px,9.3vh,88px);border:2px solid transparent;border-radius:13px;padding:6px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:var(--white);background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 45%,var(--royal-bottom) 100%) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold) 50%,var(--gold-deep)) border-box;box-shadow:inset 0 1px #ffffff3a,0 4px 11px #0005;cursor:pointer}
.tile:active,.row:active,.conference-current:active{transform:scale(.985);filter:brightness(1.08)}
.tile-icon{width:clamp(40px,5.2vh,46px);height:clamp(40px,5.2vh,46px);display:block;filter:drop-shadow(0 2px 2px #0007)}
.tile-label{font-size:12.8px;line-height:1.03;font-weight:800;text-shadow:0 1px 3px #000;max-width:100%}
.spheres-tile{grid-column:2;text-decoration:none}

.utilities{margin:12px auto 0;max-width:680px}
.install-panel{border:1px solid #d4af37d6;border-radius:10px;background:#0b2949;color:var(--gold-light);overflow:hidden;margin-top:7px}
.install-panel summary{list-style:none;cursor:pointer;padding:8px 11px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px}
.install-panel summary::-webkit-details-marker{display:none}.install-panel summary:after{content:"＋";font-size:18px;line-height:1}.install-panel[open] summary:after{content:"−"}
.install-body{padding:2px 14px 15px;color:var(--white);font-size:15px;line-height:1.5}.install-body h3{color:var(--gold-light);margin:12px 0 5px;font-size:17px}.install-body ol{margin:5px 0 12px;padding-left:22px}.install-body li{margin:7px 0}.install-note{font-size:13px;color:#d8e0e8;border-top:1px solid #ffffff20;padding-top:9px}
.native-install{display:none;width:100%;margin:8px 0 4px;border:1px solid var(--gold-light);border-radius:9px;padding:10px;background:linear-gradient(var(--gold-light),var(--gold));color:var(--navy);font-weight:900}
.check-box{margin-top:7px}.small-action{width:100%;border:1px solid var(--gold);border-radius:10px;padding:8px 11px;background:linear-gradient(#174a79,#0b2949);color:var(--gold-light);font-weight:800;cursor:pointer}.check-result{display:block;padding:6px 4px 0;font-size:13px}
@media(display-mode:standalone){.install-panel{display:none}}

.screen-title{font:700 28px Georgia,serif;color:var(--gold-light);margin:2px 0 10px}
.secondary-grid{display:block}
.row,.conference-current{width:100%;border:2px solid transparent;border-radius:12px;display:flex;align-items:center;gap:10px;text-align:left;font-weight:700;cursor:pointer;color:var(--white);background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 50%,var(--royal-bottom)) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold),var(--gold-deep)) border-box;box-shadow:0 3px 8px #0004}
.row{min-height:52px;margin:6px 0;padding:6px 11px;font-size:16.5px}
.conference-current{min-height:92px;margin:3px 0 16px;padding:12px 15px;font-size:20px;justify-content:center;text-align:center;flex-direction:column}
.conference-current .row-icon{width:38px;height:38px;flex-basis:38px}
.archive-group{border-top:1px solid #d4af3766;padding-top:7px}
.row-icon{width:31px;height:31px;flex:0 0 31px;display:block;filter:drop-shadow(0 1px 1px #0006)}
.row .label{flex:1;min-width:0;overflow-wrap:anywhere}.chev{color:var(--gold-light);font-size:24px}
.featured{border:2px solid transparent;border-radius:15px;padding:13px;margin:0 0 12px;background:linear-gradient(180deg,var(--royal-top),var(--royal-mid) 60%,var(--royal-bottom)) padding-box,linear-gradient(145deg,var(--gold-hi),var(--gold),var(--gold-deep)) border-box;box-shadow:0 4px 11px #0004}
.featured small{color:var(--gold-light);font-weight:800}.featured h2{margin:5px 0 10px;font:700 22px Georgia,serif}.featured button,.featured a,.dialog button{border:1px solid var(--gold-light);border-radius:9px;background:linear-gradient(var(--gold-light),var(--gold));color:var(--navy);font-weight:900;padding:10px 15px;cursor:pointer}.featured a{display:inline-block;text-decoration:none}

.about{font-size:17px;line-height:1.58}.about h1{font-size:29px}.about h2{font:700 24px Georgia,serif;color:var(--gold-light);margin-top:25px}.about strong{color:#fff}.about li{margin:8px 0}.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0}.triad div{border:2px solid var(--gold);border-radius:10px;padding:9px 5px;text-align:center;color:var(--gold-light);font-weight:900;background:linear-gradient(var(--royal-top),var(--royal))}.version{text-align:center;color:#b8c2ce;font-size:12px;margin-top:26px}

.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,960px);height:calc(var(--bar-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-columns:repeat(5,1fr);background:#041427f9;border-top:1.5px solid var(--gold);z-index:50;box-shadow:0 -3px 12px #0005}
.bottom-nav button,.bottom-nav a{min-width:0;border:0;background:transparent;color:var(--gold-light);font-weight:800;font-size:11.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;padding:2px 0}
.bottom-nav button.active{background:linear-gradient(#d4af3728,transparent);color:#f8e08a}.nav-icon{width:25px;height:25px;display:block;filter:drop-shadow(0 1px 1px #0006)}

.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:20px;z-index:1300;overflow:auto}.dialog{width:100%;max-width:420px;background:var(--navy);border:2px solid var(--gold);border-radius:16px;padding:24px;box-shadow:0 14px 38px #0008}.dialog h2{color:var(--gold-light);font:700 24px Georgia,serif}.dialog .secondary{margin-left:8px;background:transparent;color:#fff;border:1px solid #ffffff77}
#offlineBrowser{display:block;color:var(--gold-light);margin:12px 0}
@media(prefers-reduced-motion:reduce){.tile:active,.row:active,.conference-current:active{transform:none}}

@media(max-width:365px){.hero-shade{min-height:258px;padding-top:12px}.home-seal{width:108px;height:108px}.org-name{font-size:11.2px}.tile{min-height:70px}.tile-icon{width:39px;height:39px}.tile-label{font-size:11.8px}.bottom-nav button,.bottom-nav a{font-size:10.7px}.nav-icon{width:24px;height:24px}}
@media(orientation:landscape) and (max-height:600px){.hero-shade{min-height:170px;padding:5px 8px 2px}.home-seal{width:68px;height:68px}.hero-shade h1{font-size:25px;margin:2px 0}.org-name,.tagline{font-size:12px}.gold-rule{margin:1px auto}.tile{min-height:72px}.tile-icon{width:36px;height:36px}.tile-label{font-size:12px}.secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.secondary-grid .row{margin:0;min-height:50px}.conference-current{min-height:70px;margin-bottom:10px}}
@media(min-width:961px){.app-shell{max-width:960px}body{background:radial-gradient(circle at top,#12365B,#031323 58%)}}

/* Keep the team's responsive spacing clear of display cutouts in installed mode. */
.hero-shade{padding-top:calc(14px + env(safe-area-inset-top,0px));padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
#hero.hidden + main{padding-top:calc(9px + env(safe-area-inset-top,0px))}
@media(max-width:365px){.hero-shade{padding-top:calc(12px + env(safe-area-inset-top,0px))}.org-name{white-space:normal}}
@media(orientation:landscape) and (max-height:600px){.hero-shade{padding-top:calc(5px + env(safe-area-inset-top,0px));padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}}

/* Beta 0.8: keep the ten Home tiles visible without changing the approved hero composition. */
#hero:not(.hidden)+main{padding-top:2px}