/* Authoritative Smiling Monad application shell.
   Shared chrome only: top bar, app-wide navigation, shell spacing and contextual shell integration.
   Participant, Office and operational data/runtime ownership remains unchanged. */
:root{
  --shell-bg:#071827;
  --shell-bg-soft:#0a2138;
  --shell-panel:#0c2237;
  --shell-line:rgba(152,190,220,.17);
  --shell-text:#f8fbff;
  --shell-muted:#93a7ba;
  --shell-cyan:#7ccfff;
  --shell-gold:#f0cf58;
}
html,body{background:var(--shell-bg)!important;color:var(--shell-text)}
.app-shell{min-height:100dvh!important;max-width:100%;min-width:0;padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,#0a2138 0%,#071827 34%,#071827 100%)!important}

/* One quiet top bar that belongs to the new design, not the legacy chrome. */
.topbar,
body.monad-office-home-mode .topbar,
body.monad-circle-redesign-active .topbar,
body:has(.participant-diary) .topbar{
  display:flex!important;
  position:sticky!important;
  top:0!important;
  z-index:1100!important;
  min-height:60px!important;
  padding:7px 14px!important;
  border:0!important;
  border-bottom:1px solid var(--shell-line)!important;
  background:rgba(7,24,39,.97)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px)!important;
}
.brand{gap:10px!important;color:var(--shell-text)!important;text-decoration:none!important}
.brand-mark{width:38px!important;height:38px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.brand-mark img{display:block;width:38px;height:38px;object-fit:contain;border-radius:50%}
.brand-copy{display:grid;gap:2px;min-width:0;line-height:1.03}
.brand-copy strong{font-size:.93rem;color:#fff!important;font-weight:850;white-space:nowrap;letter-spacing:-.01em}
.brand-copy small{font-size:.68rem;color:var(--shell-cyan)!important;font-weight:760;white-space:nowrap;letter-spacing:.02em}
.account-control{gap:7px!important;flex-wrap:nowrap!important}
.account-control .base-badge{
  min-height:38px!important;
  padding:6px 10px!important;
  border:1px solid rgba(152,190,220,.22)!important;
  border-radius:13px!important;
  background:rgba(13,32,52,.72)!important;
  box-shadow:none!important;
  color:#eaf5fd!important;
  font-size:.77rem!important;
  font-weight:760!important
}
.account-control .base-badge:hover,.account-control .base-badge:focus-visible{border-color:rgba(124,207,255,.55)!important;background:#102a43!important}
.account-name{max-width:150px!important;color:#eaf6ff!important;font-size:.82rem!important}

/* Location belongs to the shared shell and mirrors the real route, not a second navigation system. */
.shell-location{display:flex;align-items:center;gap:8px;min-width:0;max-width:1100px;margin:0 auto;padding:8px 20px 0;color:var(--shell-muted);font-size:.76rem;line-height:1.35}
.shell-location[hidden]{display:none!important}
.shell-location a{color:var(--shell-cyan);text-decoration:none;font-weight:800;min-height:32px;display:inline-flex;align-items:center}
.shell-location strong{min-width:0;color:#ecf6ff;font-weight:800;overflow-wrap:anywhere}
.shell-location-divider{color:var(--shell-muted)}
@media(max-width:720px){.shell-location{padding:6px 12px 0;font-size:.72rem}.shell-location a{min-height:30px}}

/* One flat app bar everywhere. No floating dock and no legacy green selected block. */
.bottom-nav,
body.monad-office-redesign-active .bottom-nav,
body.monad-circle-redesign-active .bottom-nav,
body:has(.participant-diary) .bottom-nav,
body.monad-circle-redesign-active:has(.participant-diary) .bottom-nav{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  transform:none!important;
  z-index:1050!important;
  width:100%!important;
  min-height:74px!important;
  height:auto!important;
  padding:5px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  overflow:visible!important;
  border:0!important;
  border-top:1px solid var(--shell-line)!important;
  border-radius:0!important;
  background:rgba(7,24,39,.985)!important;
  box-shadow:0 -12px 30px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px)!important;
}
.bottom-nav>a,.bottom-nav>button,.bottom-more>summary{
  position:relative!important;
  min-width:0!important;
  min-height:60px!important;
  padding:5px 2px 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--shell-muted)!important;
  text-decoration:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  cursor:pointer;
  font:inherit!important
}
.bottom-nav>a .nav-icon,.bottom-nav>button .nav-icon,.bottom-more>summary .nav-icon{font-size:20px!important;line-height:1!important;color:inherit!important}
.bottom-nav>a small,.bottom-nav>button small,.bottom-more>summary small{font-size:.7rem!important;line-height:1.05!important;font-weight:800!important;white-space:nowrap!important;text-align:center!important;color:inherit!important}
.bottom-nav>a.active,.bottom-nav>a[aria-current="page"],.bottom-more[open]>summary,.bottom-more:has(a.active)>summary{color:#fff!important;background:transparent!important}
.bottom-nav>a.active .nav-icon,.bottom-nav>a[aria-current="page"] .nav-icon,.bottom-more[open]>summary .nav-icon,.bottom-more:has(a.active)>summary .nav-icon{color:#fff!important}
.bottom-nav>a.active::after,.bottom-nav>a[aria-current="page"]::after,.bottom-more[open]>summary::after,.bottom-more:has(a.active)>summary::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:28px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--shell-gold)
}
.bottom-more{display:block!important;position:relative!important;min-width:0!important;overflow:visible!important}\n.bottom-more[open]{z-index:2100!important}
.bottom-more>summary{list-style:none!important}.bottom-more>summary::-webkit-details-marker{display:none}.bottom-more>summary::marker{content:""}
.bottom-more-menu{
  position:absolute!important;
  right:8px!important;
  bottom:calc(100% + 10px)!important;
  width:248px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:min(78vh,620px)!important;
  overflow:auto!important;
  padding:8px!important;
  border:1px solid rgba(152,190,220,.20)!important;
  border-radius:18px!important;
  background:#0b2135!important;
  box-shadow:0 20px 48px rgba(0,0,0,.42)!important;
}
.bottom-more-menu a{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:46px!important;padding:7px 9px!important;border-radius:12px!important;color:#dce8f2!important;text-decoration:none!important;background:transparent!important;touch-action:manipulation!important}
.bottom-more-menu a .nav-icon{font-size:19px!important;text-align:center}.bottom-more-menu a small{text-align:left!important;font-size:.86rem!important;line-height:1.2!important;white-space:nowrap!important}
.bottom-more-menu a.active{background:rgba(124,207,255,.10)!important;color:#fff!important}
.bottom-more-label{display:block;padding:7px 9px 3px;color:#9bb0c4;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.bottom-more-subhead{display:none!important}
.bottom-more-divider{height:1px;margin:5px 7px;background:var(--shell-line)}

.app-route-loading{min-height:46vh;display:grid;align-content:center;gap:6px;max-width:720px;margin:0 auto;padding:28px 4px}
.app-route-loading h1{margin:0;font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.08}
.app-route-loading p{margin:0;color:var(--shell-muted)}

/* The shared shell remains visible around every content renderer. */
.main{width:min(1100px,100%);max-width:100%;min-width:0;padding-bottom:28px!important}
body.monad-circle-redesign-active:not(.monad-circle-home-mode) .main,
body:has(.participant-diary) .main{padding-bottom:28px!important}
body .kimi-root .kimi-launch,
body:has(.participant-diary) .kimi-root .kimi-launch{display:none!important}

/* All V4 spaces share the same phone viewport boundary. */
.main>.card,.main>.grid,.main>.space-hero,.main>.worker-office,.main>.participant-diary,.main>.learn-grid,.main>.wellbeing-grid,.main>.shop-grid,.main>.shift-report-focus{min-width:0;max-width:100%}
.main img,.main video,.main canvas{max-width:100%;height:auto}
.main pre,.main code{overflow-wrap:anywhere}

/* Office is content inside the shell, not a second shell. */
body.monad-office-home-mode .moh-brand{display:none!important}
body.monad-office-home-mode .moh-header{justify-content:flex-end!important;padding:8px 16px 0!important}
body.monad-office-home-mode .moh-profile{display:none!important}
body.monad-office-home-mode .monad-office-home{min-height:auto!important;padding-bottom:24px!important;background:transparent!important}
body.monad-office-home-mode .moh-main{padding-top:0!important}
body.monad-office-home-mode [data-monad-office-home]~[data-monad-office-home]{display:none!important}

/* Circle is content inside the shell, not another bottom-navigation owner. */
.monad-circle-quickbar,.monad-circle-more-sheet{display:none!important}
.monad-circle-inline-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.monad-circle-inline-actions button,.monad-circle-inline-actions a,.monad-circle-secondary button,.monad-circle-secondary a{
  min-height:46px;border:1px solid var(--shell-line);border-radius:13px;background:#102640;color:#eef8ff;font:inherit;font-size:.78rem;font-weight:820;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 9px
}
.monad-circle-inline-actions button:first-child{color:#d8c8ff}.monad-circle-inline-actions button:nth-child(2){color:#bfeeff}.monad-circle-inline-actions a{color:#dce8f2}
.monad-circle-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}
.monad-circle-secondary button:first-child{color:#ffb9cf}.monad-circle-secondary button:nth-child(2){color:#ccefbf}.monad-circle-secondary button:nth-child(3){color:#bfe9ff}
.monad-circle-back{display:inline-flex!important;align-items:center!important;width:max-content!important;min-height:40px!important;margin:0 0 8px!important;padding:6px 9px!important;border-radius:11px!important;border:1px solid var(--shell-line)!important;background:#0d2034!important;color:#cfeeff!important;text-decoration:none!important;font-size:.78rem!important;font-weight:850!important}

/* Shared home tile language: dark cards first, colour only as a semantic accent. */
.monad-office-home,.monad-circle-home{color:var(--shell-text)!important}
.moh-tile,.monad-tile{
  --tile-accent:var(--shell-cyan);
  border:1px solid var(--shell-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#102640 0%,#0c2033 100%)!important;
  box-shadow:inset 3px 0 0 var(--tile-accent),0 12px 26px rgba(0,0,0,.20)!important;
  color:var(--shell-text)!important;
}
.moh-tile:after{display:none!important}
.moh-tile strong,.monad-tile strong{color:#fff!important}
.moh-tile small,.monad-tile small{color:var(--shell-muted)!important}
.moh-tile-icon,.monad-tile-icon{
  width:42px!important;
  height:42px!important;
  border:1px solid var(--shell-line)!important;
  border-radius:13px!important;
  background:#0a1c2e!important;
  color:var(--tile-accent)!important;
  display:grid!important;
  place-items:center!important;
  font-size:21px!important;
  line-height:1!important;
}
.moh-tile>b{color:var(--tile-accent)!important}
.violet,.monad-messages{--tile-accent:#a98bff}
.pink,.monad-goals{--tile-accent:#ff7eaa}
.cyan,.monad-documents{--tile-accent:#7ccfff}
.green,.monad-people{--tile-accent:#91dc7b}
.moh-tile:hover,.moh-tile:focus-visible,.monad-tile:hover,.monad-tile:focus-visible{border-color:var(--tile-accent)!important;background:linear-gradient(180deg,#122b45 0%,#0d2237 100%)!important}

/* Circle relationship colours use the same restrained semantic palette as the rest of the app. */
.monad-centre{background:#102640!important;border:1px solid var(--shell-line)!important;box-shadow:0 14px 30px rgba(0,0,0,.24)!important}
.monad-centre-inner{background:#081a2a!important;border-color:var(--shell-line)!important}
.monad-node{
  --node-accent:var(--shell-cyan);
  background:#102640!important;
  border:1px solid var(--node-accent)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.20)!important;
}
.monad-node span{color:var(--node-accent)!important}
.monad-family{--node-accent:#91dc7b}.monad-support{--node-accent:#a98bff}.monad-allied{--node-accent:#7ccfff}.monad-community{--node-accent:#f0bd68}.monad-services{--node-accent:#ff7eaa}

@media(max-width:720px){
  html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}
  .app-shell{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .main{width:100%;max-width:100%;min-width:0;padding:10px 12px calc(30px + env(safe-area-inset-bottom))!important}
  .topbar{min-height:58px!important;padding:6px 10px!important}
  .brand-mark,.brand-mark img{width:34px!important;height:34px!important}.brand-copy strong{font-size:.84rem}.brand-copy small{font-size:.62rem}
  .account-name{display:none!important}.account-control .base-badge{min-height:36px!important;padding:5px 9px!important;font-size:.72rem!important}
  .bottom-nav{min-height:70px!important;padding:4px max(4px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important}
  .bottom-nav>a,.bottom-nav>button,.bottom-more>summary{min-height:56px!important;padding:4px 1px 8px!important;gap:3px!important}.bottom-nav>a .nav-icon,.bottom-nav>button .nav-icon,.bottom-more>summary .nav-icon{font-size:19px!important}.bottom-nav>a small,.bottom-nav>button small,.bottom-more>summary small{font-size:.72rem!important}
  .bottom-more-menu{right:4px!important;width:238px!important}
  body .kimi-root{bottom:calc(78px + env(safe-area-inset-bottom))!important;right:9px!important}
  body:has(.participant-diary) .main{padding:8px 10px 23px!important}
  .monad-circle-inline-actions,.monad-circle-secondary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .monad-circle-inline-actions button,.monad-circle-inline-actions a,.monad-circle-secondary button,.monad-circle-secondary a{min-height:43px;padding:6px 5px;font-size:.7rem}
  .moh-tile,.monad-tile{border-radius:16px!important}
  .moh-tile-icon,.monad-tile-icon{width:36px!important;height:36px!important;border-radius:11px!important;font-size:18px!important}
}

/* Mobile readability baseline: readable by default; dense weekly information scrolls instead of shrinking the whole app. */
@media(max-width:720px){
  body{font-size:1rem!important;line-height:1.5!important}

  .brand-copy strong{font-size:.94rem!important}
  .account-control .base-badge{font-size:.78rem!important}

  /* Circle navigation: keep labels readable and let the row scroll rather than compressing five labels. */
  .quick-circle-access{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important}
  .quick-access.quick-access-circle{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:4px!important;
    padding:4px!important;
    scrollbar-width:none!important;
    overscroll-behavior-x:contain!important
  }
  .quick-access.quick-access-circle::-webkit-scrollbar{display:none}
  .quick-access.quick-access-circle a{
    flex:0 0 auto!important;
    min-width:92px!important;
    min-height:44px!important;
    padding:8px 10px!important;
    font-size:.79rem!important;
    line-height:1.15!important
  }
  .quick-office-menu>summary{
    min-height:44px!important;
    padding:7px 9px!important;
    font-size:.76rem!important
  }

  /* Participant header and calendar: larger labels without global zoom. */
  .participant-diary .pd-person>a{font-size:.82rem!important}
  .participant-diary .pd-person-row small{font-size:.84rem!important}
  .participant-diary .pd-calendar-head h2{font-size:1.55rem!important}
  .participant-diary .pd-weekdays{font-size:.74rem!important}
  .participant-diary .pd-calendar-day{
    min-height:44px!important;
    font-size:.9rem!important;
    border-radius:10px!important
  }
  .participant-diary .pd-legend{font-size:.78rem!important}
  .participant-diary .kicker{font-size:.72rem!important}
  .participant-diary .pd-day-head h2{font-size:1.4rem!important}
  .participant-diary .pd-coming p,
  .participant-diary .pd-plan-focus p,
  .participant-diary .pd-plan-goals article>p,
  .participant-diary .pd-plan-goals details p{font-size:.84rem!important}
  .participant-diary .pd-routine strong,
  .participant-diary .pd-ideas strong{font-size:.9rem!important}
  .participant-diary .pd-routine small,
  .participant-diary .pd-ideas small{font-size:.76rem!important}

  /* Weekly roster: show a few readable days at a time and swipe sideways for the rest. */
  .pd-roster-week{overflow:visible!important}
  .pd-roster-head h2{font-size:1.25rem!important}
  .pd-roster-head p{font-size:.84rem!important;line-height:1.45!important}
  .pd-roster-nav button{min-height:44px!important;font-size:.82rem!important}
  .pd-roster-legend{font-size:.78rem!important;gap:10px!important}
  .pd-roster-scroll{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important
  }
  .pd-roster-weekgrid.compact{
    grid-template-columns:repeat(7,150px)!important;
    min-width:1050px!important
  }
  .pd-roster-dayhead{min-height:58px!important;padding:8px 7px!important}
  .pd-roster-dayhead strong{font-size:.84rem!important}
  .pd-roster-dayhead span{font-size:.75rem!important}
  .pd-roster-daycol{min-height:126px!important;padding:8px!important;gap:7px!important}
  .pd-roster-block{min-height:68px!important;padding:8px 9px!important}
  .pd-roster-block strong{font-size:.82rem!important;line-height:1.25!important}
  .pd-roster-block span{font-size:.74rem!important;line-height:1.4!important}
  .pd-roster-block small{font-size:.7rem!important;line-height:1.35!important}
  .pd-roster-empty-day{font-size:.74rem!important;padding:10px 5px!important}
  .pd-roster-add summary{font-size:.86rem!important}
  .pd-roster-add label,.pd-roster-editor label{font-size:.78rem!important}

  /* Recent days and operational text should be readable without zooming the browser. */
  .pd-story-row strong{font-size:.9rem!important;line-height:1.35!important}
  .pd-story-row small{font-size:.76rem!important}
  .pd-story-row time{font-size:.76rem!important}
}

@media(max-width:390px){
  .quick-access.quick-access-circle a{min-width:88px!important;font-size:.77rem!important}
  .pd-roster-weekgrid.compact{grid-template-columns:repeat(7,146px)!important;min-width:1022px!important}
}