/* The citizen's workspace, full screen and in glass after Raven (oscar-soirey/Raven, its glass looks),
   once signed in: body.ws-immersive on every page behind the dashboard (app.js, WORKSPACE_PATHS).
   The site's emergency line, header and footer stay out. The menu is a rail of icons on the left
   (its names as tooltips; the More button of the island widens it into a drawer with names); on a
   phone the rail is that drawer, sliding in from the left. An island at the top carries the
   chevron (back, or held for a second, home), the main places and the menu. Cards, buttons and
   fields take Raven's materials: frosted panels with a rim of light over a pastel wallpaper (a flat
   dark grey in the dark look), solid accent pills, translucent controls. Messages keeps its own
   island (message-glass.css). Loaded after every page's stylesheet, so its surfaces win. */
body.ws-immersive{
  --rv-window:#ffffff;--rv-text:#1c1c1e;--rv-muted:rgba(60,60,67,.62);--rv-placeholder:rgba(60,60,67,.5);
  --rv-panel:color-mix(in srgb,var(--rv-accent) 5%,rgba(255,255,255,.46));--rv-panel-2:color-mix(in srgb,var(--rv-accent) 4%,rgba(255,255,255,.66));--rv-border:rgba(60,60,67,.16);--rv-rim:rgba(255,255,255,.9);
  --rv-control:rgba(255,255,255,.5);--rv-control-hover:rgba(255,255,255,.68);--rv-control-border:rgba(60,60,67,.18);
  --rv-input:rgba(255,255,255,.5);--rv-row-hover:rgba(60,60,67,.07);--rv-tab-active:rgba(255,255,255,.86);
  --rv-popup:rgba(250,250,250,.8);--rv-bar:rgba(28,30,40,.78);--rv-bar-text:#f5f5f7;
  --rv-accent:var(--accent-glass,#007aff);--rv-accent-hover:color-mix(in srgb,var(--rv-accent) 82%,white);--rv-accent-pressed:color-mix(in srgb,var(--rv-accent) 84%,black);--rv-selection:color-mix(in srgb,var(--rv-accent) 18%,transparent);
  --rv-switch:#34c759;--rv-danger:#d70015;--rv-link:#0066cc;
  --rv-shadow:0 14px 34px rgba(0,0,0,.14);--rv-shadow-sm:0 6px 16px rgba(0,0,0,.1);
  /* The wallpaper is one hue, the chosen accent: a faintly tinted canvas, a soft light of that hue from the top-left and a
     fainter one from the bottom-right. No second colour, so the canvas stays quiet behind the glass; the panels lean the same way. */
  --rv-window:color-mix(in srgb,var(--rv-accent) 6%,#f4f6f9);--rv-wall-a:color-mix(in srgb,var(--rv-accent) 24%,#ffffff);--rv-wall-b:color-mix(in srgb,var(--rv-accent) 10%,#ffffff);
  --rv-spring:cubic-bezier(.34,1.56,.64,1);--rv-settle:cubic-bezier(.2,.8,.2,1);
  --ws-island:62px;
  /* One family of shades: the site's teal tokens follow the glass accent here (Raven's blue until an accent is chosen). */
  --theme-accent:var(--rv-accent);--teal-700:var(--rv-accent);--teal-600:var(--rv-accent-hover);--teal:var(--rv-accent);
  --theme-tint:color-mix(in srgb,var(--rv-accent) 13%,white);--mint-soft:color-mix(in srgb,var(--rv-accent) 10%,white);--teal-100:color-mix(in srgb,var(--rv-accent) 16%,white);--theme-on-accent:#fff
}
:root[data-theme=dark] body.ws-immersive{
  /* In the dark look nothing warm sits against the glass: the site's amber and orange tokens take the accent's family. */
  --theme-warm:var(--theme-accent);--theme-warm-bg:var(--theme-tint);--amber-100:var(--theme-tint);--orange:var(--rv-accent);--orange-soft:var(--theme-tint);--orange-dark:var(--rv-accent);
  --rv-window:#2a2a2e;--rv-text:#f5f5f7;--rv-muted:rgba(235,235,245,.6);--rv-placeholder:rgba(235,235,245,.47);
  --rv-panel:color-mix(in srgb,var(--rv-accent) 8%,rgba(58,58,63,.46));--rv-panel-2:color-mix(in srgb,var(--rv-accent) 6%,rgba(70,70,76,.62));--rv-border:rgba(255,255,255,.13);--rv-rim:rgba(255,255,255,.22);
  --rv-control:rgba(255,255,255,.11);--rv-control-hover:rgba(255,255,255,.18);--rv-control-border:rgba(255,255,255,.24);
  --rv-input:rgba(26,26,29,.35);--rv-row-hover:rgba(255,255,255,.08);--rv-tab-active:rgba(255,255,255,.2);
  --rv-popup:rgba(51,51,55,.78);--rv-bar:rgba(22,22,26,.74);
  --rv-accent:var(--accent-glass,#0a84ff);--rv-selection:color-mix(in srgb,var(--rv-accent) 45%,transparent);
  --rv-switch:#30d158;--rv-danger:#ff453a;--rv-link:#6cb6ff;
  --rv-shadow:0 18px 44px rgba(0,0,0,.43);--rv-shadow-sm:0 8px 20px rgba(0,0,0,.35);
  /* The same two lights, deep shades of the accent over Raven's dark window, so the frost still reads as glass in the dark look. */
  --rv-wall-a:color-mix(in srgb,var(--rv-accent) 34%,#1d1d22);--rv-wall-b:color-mix(in srgb,var(--rv-accent) 14%,#222227);
  /* The site's own tokens follow Raven's dark window, so every page's text and lines sit right on it. */
  --cream:#2a2a2e;--paper:#36363b;--line:rgba(255,255,255,.14);--theme-surface:#36363b;--theme-soft:#3d3d43;--theme-border:rgba(255,255,255,.14);
  --theme-accent:color-mix(in srgb,var(--rv-accent) 62%,white);--teal-700:var(--rv-accent);--teal-600:var(--rv-accent-hover);--teal:var(--rv-accent);
  --theme-tint:color-mix(in srgb,var(--rv-accent) 22%,#2a2a2e);--mint-soft:color-mix(in srgb,var(--rv-accent) 18%,#2a2a2e);--teal-100:color-mix(in srgb,var(--rv-accent) 26%,#2a2a2e);--theme-on-accent:color-mix(in srgb,var(--rv-accent) 25%,black)
}
@supports not (backdrop-filter:blur(1px)){
  body.ws-immersive{--rv-panel:rgba(255,255,255,.92);--rv-panel-2:rgba(255,255,255,.97);--rv-bar:rgba(28,30,40,.96)}
  :root[data-theme=dark] body.ws-immersive{--rv-panel:rgba(58,58,63,.95);--rv-panel-2:rgba(70,70,76,.97)}
}
/* ---- The canvas, the site's chrome out ---- */
body.ws-immersive{background:var(--rv-window)}
body.ws-immersive :is(.platform-ribbon,.site-header,.site-footer,.workspace-menu-toggle){display:none!important}
body.ws-immersive .app-shell{position:relative;isolation:isolate;z-index:0;min-height:100dvh}
body.ws-immersive .app-shell::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(85% 70% at 0% 0%,var(--rv-wall-a),transparent 70%),
  radial-gradient(70% 55% at 100% 100%,var(--rv-wall-b),transparent 70%),var(--rv-window)}
body.ws-immersive .app-shell:not(.with-sidebar) main{min-height:0}
body.ws-immersive main{min-width:0;padding-top:var(--ws-island)}
body.ws-immersive .app-shell.with-sidebar .page{width:min(1180px,calc(100% - 40px))}
/* ---- The island: a dark tinted capsule in both looks, the pressed item a solid pill ---- */
.ws-island{position:fixed;top:10px;left:50%;z-index:70;display:flex;align-items:center;gap:2px;max-width:calc(100% - 16px);padding:5px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:var(--rv-bar,rgba(28,30,40,.78));color:var(--rv-bar-text,#f5f5f7);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--rv-shadow,0 14px 34px rgba(0,0,0,.2));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transform:translateX(-50%);will-change:transform}
.ws-island .ws-item{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;text-decoration:none;font:inherit;transition:background .18s,color .18s,transform .35s var(--rv-spring,cubic-bezier(.34,1.56,.64,1))}
.ws-island .ws-item:hover{background:rgba(255,255,255,.14);color:#fff}
.ws-island .ws-item:active{transform:scale(.92)}
.ws-island .ws-item[aria-current=page],.ws-island .ws-more[aria-expanded=true]{background:var(--rv-accent,#007aff);color:#fff}
.ws-island .ws-item:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ws-island .ws-item svg{width:22px;height:22px}
.ws-island .ws-item>.notification-badge{position:absolute;top:1px;right:1px;margin:0;min-width:1.05rem;height:1.05rem;font-size:.6rem;background:var(--rv-danger,#d70015)}
.ws-island .ws-back{margin-right:4px;background:rgba(255,255,255,.1);-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none;overflow:visible}
.ws-island .ws-back[hidden]{display:none}
.ws-island .ws-back::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;opacity:0;pointer-events:none}
.ws-island .ws-back.is-holding{background:rgba(255,255,255,.2)}
.ws-island .ws-back.is-holding::after{opacity:1;animation:ws-hold 1s linear forwards}
@keyframes ws-hold{from{transform:rotate(0deg);border-color:var(--rv-accent,#007aff) transparent transparent transparent}to{transform:rotate(360deg);border-color:var(--rv-accent,#007aff)}}
.ws-island .ws-more svg:last-child{display:none}
body.ws-menu-open .ws-island .ws-more svg:first-child{display:none}
body.ws-menu-open .ws-island .ws-more svg:last-child{display:block}
/* ---- The rail: the dashboard's menu as a frosted column of icons; More widens it into a drawer with names ---- */
body.ws-immersive .app-shell.with-sidebar{grid-template-columns:86px minmax(0,1fr);transition:grid-template-columns .35s var(--rv-settle)}
body.ws-immersive .dashboard-nav{position:sticky;top:10px;z-index:65;align-self:start;width:76px;height:calc(100dvh - 20px);margin:10px 0 10px 10px;padding:14px 10px 14px;overflow:auto;border:1px solid var(--rv-border);border-radius:22px;background:var(--rv-panel);color:var(--ink);box-shadow:inset 0 1px 0 var(--rv-rim),var(--rv-shadow-sm);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);scrollbar-width:none;transition:width .35s var(--rv-settle)}
body.ws-immersive .dashboard-nav::-webkit-scrollbar{display:none}
body.ws-immersive .citizen-workspace-shell .dashboard-nav{top:10px;height:calc(100dvh - 20px);padding:14px 10px 14px}
/* The rail opens without a jolt: every icon, the picture and the brand mark keep their place in both states, and only
   the names appear beside them (clipped to nothing when closed, revealed when open). The rail's horizontal padding
   never changes, the links keep one padding, and the group titles keep their height while closed, so nothing shifts. */
body.ws-immersive .dashboard-nav .nav-user{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0 0 12px;padding:0 0 12px 7px;border-bottom:1px solid var(--rv-border)}
body.ws-immersive .dashboard-nav .nav-user>div{display:block;max-width:0;min-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .25s var(--rv-settle),opacity .1s}
body.ws-immersive .dashboard-nav .nav-user>div :is(strong,small){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ws-immersive .dashboard-nav nav{display:grid;gap:8px}
body.ws-immersive .cd-nav-group{display:grid;gap:3px}
/* A group's title keeps its row while the rail is closed, drawn as a short hairline; the words take its place when the rail opens. */
body.ws-immersive .cd-nav-group>p{display:block;height:14px;margin:2px 15px 2px;font-size:.62rem;line-height:14px;letter-spacing:.08em;color:transparent;background:linear-gradient(var(--rv-border),var(--rv-border)) 50% 50%/22px 1px no-repeat;overflow:hidden;white-space:nowrap;transition:color .12s,background-size .2s}
body.ws-immersive .dashboard-nav a{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:11px;width:100%;min-height:46px;margin:0;padding:0 15px;border-radius:14px;color:var(--ink);font-size:.84rem;font-weight:550;text-decoration:none;transition:background .15s,color .15s}
body.ws-immersive .dashboard-nav a .cd-nav-ic{color:var(--muted)}
body.ws-immersive .dashboard-nav a:hover .cd-nav-ic,body.ws-immersive .dashboard-nav a[aria-current=page] .cd-nav-ic{color:inherit}
body.ws-immersive .dashboard-nav a .cd-nav-ic{display:grid;place-items:center;width:24px;height:24px;flex:none}
body.ws-immersive .dashboard-nav a .cd-nav-label{flex:0 1 auto;max-width:0;min-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:max-width .25s var(--rv-settle),opacity .1s}
body.ws-immersive .dashboard-nav a:hover{background:var(--rv-row-hover)}
body.ws-immersive .dashboard-nav a[aria-current=page]{background:var(--rv-accent);color:#fff;font-weight:650}
body.ws-immersive .dashboard-nav a[aria-current=page] .cd-nav-ic svg{fill:none;stroke-width:1.9}
body.ws-immersive .dashboard-nav a>.notification-badge{position:absolute;top:3px;left:32px;right:auto;margin:0;min-width:1.05rem;height:1.05rem;font-size:.6rem;background:var(--rv-danger)}
body.ws-immersive .dashboard-nav [data-logout]{display:block;margin:8px auto 0;padding:6px 8px;border-radius:10px;font-size:.66rem!important;color:var(--muted)!important;text-decoration:none;text-align:center}
body.ws-immersive .dashboard-nav [data-logout]:hover{background:var(--rv-row-hover)}
/* Appearance at the rail's foot: the theme as three icons, the language, the accent swatches. */
/* Appearance, the same way: the three looks are rows whose icons stay put and whose names appear; the titles keep
   their rows; the language box grows from its left edge; the swatches re-flow from two columns to one row. */
body.ws-immersive .ws-appearance{display:grid;gap:6px;justify-items:stretch;margin-top:4px;padding:12px 0 0;border-top:1px solid var(--rv-border)}
body.ws-immersive .ws-appearance>p,body.ws-immersive .dashboard-nav .accent-picker>[data-accent-title]{display:block;height:14px;margin:0 0 0 15px;padding:0;font-size:.62rem;line-height:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:transparent;overflow:hidden;white-space:nowrap;transition:color .12s}
html:is(:lang(mr),:lang(hi)) body.ws-immersive :is(.ws-appearance>p,.dashboard-nav .accent-picker>[data-accent-title]){letter-spacing:0}
body.ws-immersive .dashboard-nav .accent-picker>[data-accent-hint]{display:none}
/* Nothing inside may widen the column (a title on one line would, through a grid item's automatic minimum width) and leave the rail scrolling sideways. */
body.ws-immersive .dashboard-nav :is(nav,.cd-nav-group,.ws-appearance,.ws-theme)>*{min-width:0}
body.ws-immersive .ws-theme{display:grid;gap:2px;width:100%}
body.ws-immersive .ws-theme button{display:flex;align-items:center;justify-content:flex-start;gap:13px;width:100%;height:40px;padding:0 17px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;text-align:left}
body.ws-immersive .ws-theme button svg{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.ws-immersive .ws-theme button span{display:block;flex:0 1 auto;max-width:0;min-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:max-width .25s var(--rv-settle),opacity .1s}
body.ws-immersive .ws-theme button:hover{background:var(--rv-row-hover);color:var(--ink)}
body.ws-immersive .ws-theme button[aria-pressed=true]{background:var(--rv-tab-active);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.ws-immersive .ws-language{display:block;width:100%}
body.ws-immersive #main-content .ws-language select,body.ws-immersive .ws-language select{width:54px;min-height:36px;margin:0;padding:4px 6px;border:1px solid var(--rv-control-border);border-radius:10px;background:var(--rv-input);color:var(--ink);font-size:.74rem;transition:width .25s var(--rv-settle)}
body.ws-immersive .dashboard-nav .accent-picker{width:100%;margin:0;padding:10px 0 0;border-top:1px solid var(--rv-border)}
body.ws-immersive .dashboard-nav .accent-picker>[role=group]{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 0}
body.ws-immersive .dashboard-nav .accent-swatch{box-sizing:border-box;width:24px;height:24px;min-width:24px;min-height:24px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
/* Open: the names come back, the drawer takes room. */
/* Open (by More, or by the pointer resting on it), the rail widens over the page rather than pushing it. */
body.ws-immersive.ws-menu-open .dashboard-nav{width:276px;padding:14px 10px 16px}
body.ws-immersive .dashboard-nav{transition:width .25s var(--rv-settle)}
/* The way out to the site itself: the brand mark at the top of the rail, its name in the drawer. */
body.ws-immersive .dashboard-nav .ws-site-home{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:44px;margin:0 0 8px;padding:0 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:.82rem;font-weight:650}
body.ws-immersive .dashboard-nav .ws-site-home:hover{background:var(--rv-control)}
body.ws-immersive .dashboard-nav .ws-site-home img{width:26px;height:26px;border-radius:50%;flex:none}
body.ws-immersive.ws-menu-open .dashboard-nav .ws-site-home{padding:0 14px}
/* Room inside a glass capsule. */
body.ws-immersive .js-disclosure{padding:0 22px}
body.ws-immersive .js-disclosure>summary{padding:17px 0}
body.ws-immersive.ws-menu-open .dashboard-nav .nav-user{padding:0 0 12px 7px}
body.ws-immersive.ws-menu-open .dashboard-nav .nav-user>div{max-width:200px;opacity:1;transition:max-width .25s var(--rv-settle),opacity .18s .06s}
body.ws-immersive.ws-menu-open .cd-nav-group>p{opacity:1;transition:opacity .18s .08s}
body.ws-immersive.ws-menu-open .dashboard-nav a{padding:0 15px}
body.ws-immersive.ws-menu-open .dashboard-nav a .cd-nav-label{max-width:220px;opacity:1;transition:max-width .25s var(--rv-settle),opacity .18s .08s}
/* The person's picture at the top of the rail keeps its round 40px frame in both states (the link rules above would stretch it). */
body.ws-immersive .dashboard-nav a.nav-user-avatar,body.ws-immersive.ws-menu-open .dashboard-nav a.nav-user-avatar{flex:0 0 40px;width:40px;min-height:40px;height:40px;margin:0;padding:0;border-radius:50%;overflow:hidden;justify-content:center}
body.ws-immersive .dashboard-nav a.nav-user-avatar:hover{background:transparent}
body.ws-immersive.ws-menu-open .dashboard-nav [data-logout]{margin:10px 12px 0;text-align:left;font-size:.8rem!important}
body.ws-immersive.ws-menu-open .cd-nav-group>p{color:var(--muted);background-size:0 1px;transition:color .18s .08s,background-size .2s}
body.ws-immersive.ws-menu-open .ws-appearance>p,body.ws-immersive.ws-menu-open .dashboard-nav .accent-picker>[data-accent-title]{color:var(--muted);transition:color .18s .08s}
body.ws-immersive.ws-menu-open .ws-theme button span{max-width:200px;opacity:1;transition:max-width .25s var(--rv-settle),opacity .18s .08s}
body.ws-immersive.ws-menu-open .ws-language select{width:100%}
/* ---- Raven's materials for what every page is made of ---- */
body.ws-immersive :is(.card,.cd-card,.cs-surface,.jf-panel,.jf-card,.jf-citizen-hero,.js-society,.js-record,.js-disclosure,.js-directory-result,.sw-find,.jc-card,.jc-panel,.jc-event,.pl-card,.pl-panel,.vc-main,.vc-page .vc-side :is(form,section),.si-report,.si-day-head,.sw-overview,.sw-next,.sw-task,.sw-facts,.notice,.empty-state,.profile-stats,.ps-card,.jn-card,.sx-pane,.sx-card,.cv-rail>.card,.cv-rail .ci-panel,.cl-main .cml-review,.cs-workspace .cs-my-post,.cs-workspace #cs-details-form,.cs-workspace #cs-details>.cs-grid>aside,.jf-feed-page .jf-area-panel,.jf-feed-page .jf-composer-panel,.jf-feed-page .jf-signin-panel,.jf-feed-page .jf-empty,.jf-feed-page .jf-tools-content,.jf-toolbar,.al-day h2){background:var(--rv-panel);border:1px solid var(--rv-border);border-radius:18px;box-shadow:inset 0 1px 0 var(--rv-rim),var(--rv-shadow-sm)}
:root[data-theme=dark] body.ws-immersive :is(.card,.cd-card,.cs-surface,.jf-panel,.jf-card,.jf-citizen-hero,.js-society,.js-record,.js-disclosure,.js-directory-result,.sw-find,.jc-card,.jc-panel,.jc-event,.pl-card,.pl-panel,.vc-main,.vc-page .vc-side :is(form,section),.si-report,.si-day-head,.sw-overview,.sw-next,.sw-task,.sw-facts,.notice,.empty-state,.profile-stats,.ps-card,.jn-card,.sx-pane,.sx-card,.cv-rail>.card,.cv-rail .ci-panel,.cl-main .cml-review,.cs-workspace .cs-my-post,.cs-workspace #cs-details-form,.cs-workspace #cs-details>.cs-grid>aside,.jf-feed-page .jf-area-panel,.jf-feed-page .jf-composer-panel,.jf-feed-page .jf-signin-panel,.jf-feed-page .jf-empty,.jf-feed-page .jf-tools-content,.jf-toolbar,.al-day h2){background:var(--rv-panel);border-color:var(--rv-border);box-shadow:inset 0 1px 0 var(--rv-rim),var(--rv-shadow-sm)}
body.ws-immersive .notice{border-left-width:4px}
body.ws-immersive .button,body.ws-immersive #main-content .button{border:0;border-radius:999px;background:var(--rv-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px color-mix(in srgb,var(--rv-accent) 30%,transparent);transition:background .15s,transform .35s var(--rv-spring),box-shadow .2s}
body.ws-immersive .button:hover,body.ws-immersive #main-content .button:hover{background:var(--rv-accent-hover);transform:none}
body.ws-immersive .button:active{background:var(--rv-accent-pressed);transform:scale(.96)}
body.ws-immersive :is(.button-ghost,.button-ghost-light,.button-white,.button-danger-outline),body.ws-immersive #main-content :is(.button-ghost,.button-ghost-light,.button-white){background:var(--rv-control);color:var(--ink);border:1px solid var(--rv-control-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
body.ws-immersive :is(.button-ghost,.button-ghost-light,.button-white):hover{background:var(--rv-control-hover)}
body.ws-immersive .button-danger,body.ws-immersive #main-content .button-danger{background:var(--rv-danger);box-shadow:none}
body.ws-immersive #main-content :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])),select,textarea){background:var(--rv-input);border:1px solid var(--rv-control-border);border-radius:12px;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
body.ws-immersive #main-content :is(input,select,textarea):focus{border-color:var(--rv-accent);box-shadow:0 0 0 3px var(--rv-selection)}
body.ws-immersive #main-content .eyebrow,body.ws-immersive .case-wizard-progress small{color:var(--rv-accent)}
body.ws-immersive .wizard-dots i.active{background:var(--rv-accent)}
body.ws-immersive .nb-page{--nb-island-top:calc(var(--ws-island) + 2px)}
/* A page's own full-screen sheet (the planner's task detail on a phone) takes the screen: the island steps aside, so the sheet's close button is reachable. */
@media(max-width:1100px){body.ws-immersive:has(.pl-page.has-detail) .ws-island{display:none}}
/* ---- Phones: the island spans the top, the rail is a drawer behind the More button ---- */
@media(max-width:900px){
  .ws-island{top:8px;left:8px;right:8px;max-width:none;justify-content:space-between;transform:none}
  body.ws-immersive{--ws-island:66px}
  body.ws-immersive .app-shell.with-sidebar,body.ws-immersive.ws-menu-open .app-shell.with-sidebar{display:block}
  /* An explicit height, not top + bottom: with height:auto Chrome lets a long menu grow past the viewport and drops the drawer to the top, under the island. The menu scrolls inside the drawer instead. */
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav,body.ws-immersive .citizen-workspace-shell .dashboard-nav{position:fixed;top:var(--ws-island);left:8px;bottom:auto;width:min(300px,calc(100% - 16px));height:calc(100dvh - var(--ws-island) - 8px);margin:0;padding:14px 14px 16px;overflow:auto;overscroll-behavior:contain;transform:translateX(calc(-100% - 16px));transition:transform .35s var(--rv-settle);visibility:hidden}
  body.ws-immersive.ws-menu-open .app-shell.with-sidebar .dashboard-nav,body.ws-immersive.ws-menu-open .citizen-workspace-shell .dashboard-nav{transform:none;visibility:visible}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav nav,body.ws-immersive .citizen-workspace-shell .dashboard-nav nav{display:grid;width:auto;gap:12px;padding:0}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav .nav-user,body.ws-immersive .citizen-workspace-shell .dashboard-nav .nav-user{display:flex;justify-content:flex-start;gap:12px;padding:0 6px 12px}
  /* The drawer slides in whole, so it always shows the names: nothing here waits for the open state. */
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav .nav-user>div,body.ws-immersive .citizen-workspace-shell .dashboard-nav .nav-user>div{max-width:none;opacity:1}
  body.ws-immersive .app-shell.with-sidebar .cd-nav-group>p,body.ws-immersive .citizen-workspace-shell .cd-nav-group>p{color:var(--muted);background-size:0 1px}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav a,body.ws-immersive .citizen-workspace-shell .dashboard-nav a{justify-content:flex-start;width:auto;margin:0;padding:0 12px;white-space:normal}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav a.nav-user-avatar,body.ws-immersive .citizen-workspace-shell .dashboard-nav a.nav-user-avatar{width:40px;padding:0;justify-content:center}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav a .cd-nav-label,body.ws-immersive .citizen-workspace-shell .dashboard-nav a .cd-nav-label{max-width:none;opacity:1;white-space:normal}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav a>.notification-badge,body.ws-immersive .citizen-workspace-shell .dashboard-nav a>.notification-badge{position:static;margin-left:auto}
  body.ws-immersive .app-shell.with-sidebar .dashboard-nav [data-logout],body.ws-immersive .citizen-workspace-shell .dashboard-nav [data-logout]{margin:10px 12px 0;text-align:left;font-size:.8rem!important}
  body.ws-immersive .app-shell.with-sidebar .ws-appearance>p,body.ws-immersive .app-shell.with-sidebar .dashboard-nav .accent-picker>[data-accent-title]{color:var(--muted)}
  body.ws-immersive .app-shell.with-sidebar .ws-theme button span{max-width:none;opacity:1}
  body.ws-immersive .app-shell.with-sidebar .ws-language select{width:100%}
  body.ws-immersive.ws-menu-open .app-shell::after{content:"";position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35)}
  body.ws-immersive .app-shell.with-sidebar .page{width:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){
  body.ws-immersive .dashboard-nav,body.ws-immersive .app-shell.with-sidebar,.ws-island .ws-item,body.ws-immersive .button{transition:none!important}
  .ws-island .ws-back.is-holding::after{animation:none;opacity:1;border-color:var(--rv-accent,#007aff)}
}
/* ---- The society pages and the circles: what matters stays, the rest folds ---- */
body.ws-immersive .sw-landing-head{gap:16px;padding:0 0 14px}
body.ws-immersive .sw-landing-head h1{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:2px 0 6px;letter-spacing:-.03em}
body.ws-immersive .sw-landing-head>div>p:last-child{font-size:.92rem}
body.ws-immersive :is(.sw-home-mark,.sw-feature-strip,.jc-orbits,.sw-page .js-back,.cs-back,.sa-circle-guide>p){display:none}
body.ws-immersive .sw-page .js-disclosure>summary{min-height:46px}
body.ws-immersive .jc-hero{display:block;padding:0 0 14px}
body.ws-immersive .jc-hero h1{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:2px 0 6px;letter-spacing:-.03em}
body.ws-immersive .jc-hero p{font-size:.95rem;line-height:1.55}
body.ws-immersive .jc-button.primary{background:var(--rv-accent);border-color:transparent;color:#fff}
body.ws-immersive .jc-button.primary:hover{background:var(--rv-accent-hover)}
/* Controls inside a dark banner keep their own look; an icon inside a button keeps its size */
body.ws-immersive #main-content :is(.cd-welcome,.dashboard-top,.cl-search) :is(input,select,textarea){background:transparent;border:0;border-radius:0;box-shadow:none;color:#fff}
body.ws-immersive #main-content .cl-search input:focus{box-shadow:none}
body.ws-immersive .button>svg:not([width]){width:18px;height:18px;flex:0 0 auto}
/* Inside the private society space the dark look's text is proper white, its secondary text a light grey. */
:root[data-theme=dark] body.ws-immersive .sw-page{--ink:#f5f5f7;--muted:rgba(235,235,245,.78);color:#f5f5f7}
:root[data-theme=dark] body.ws-immersive .sw-page :is(h1,h2,h3,h4,strong,summary){color:#fff}
:root[data-theme=dark] body.ws-immersive .sw-page .sw-nav a:not([aria-current=page]){color:#f5f5f7}
:root[data-theme=dark] body.ws-immersive .sw-page :is(.sw-nav-group>p,.sh-eyebrow,.sw-head-facts,.js-muted,p){color:rgba(235,235,245,.8)}
/* ---- One hue inside the workspace: what the pages painted in the site's teal and mint follows the accent ---- */
/* The soft surfaces (society cards, tabs, intro boxes) take a faint tint of the accent in the light look instead of mint; the dark look already sets its own. */
body.ws-immersive{--theme-soft:color-mix(in srgb,var(--rv-accent) 7%,#f6f7fa)}
/* The dashboard's hero: a deep panel of the accent, its photo in that hue (luminosity over the panel), its ring and its small lines in a light tint of it. */
body.ws-immersive .cd-welcome{isolation:isolate;background:linear-gradient(118deg,color-mix(in srgb,var(--rv-accent) 16%,#121620) 0%,color-mix(in srgb,var(--rv-accent) 32%,#121620) 52%,color-mix(in srgb,var(--rv-accent) 60%,#121620) 100%);box-shadow:var(--rv-shadow)}
body.ws-immersive .cd-welcome::after{border-color:color-mix(in srgb,var(--rv-accent) 50%,transparent);box-shadow:0 0 0 60px color-mix(in srgb,var(--rv-accent) 9%,transparent),0 0 0 130px color-mix(in srgb,var(--rv-accent) 5%,transparent)}
body.ws-immersive .cd-hero-art{filter:grayscale(1);mix-blend-mode:luminosity;opacity:.36}
body.ws-immersive .cd-welcome :is(.cd-kicker,.cd-clear,h1>span){color:color-mix(in srgb,var(--rv-accent) 42%,#fff)}
body.ws-immersive .cd-welcome :is(.cd-ring-card,.cd-darbar){background:rgba(8,10,16,.4)}
body.ws-immersive .cd-welcome :is(.cd-ring-card,.cd-darbar):hover{background:rgba(8,10,16,.55)}
body.ws-immersive .cd-ring-track{stroke:rgba(255,255,255,.18)}
body.ws-immersive .cd-ring-fill{stroke:color-mix(in srgb,var(--rv-accent) 60%,#fff)}
/* The society home's attention and amenity cards. */
body.ws-immersive .sh-attention{background:linear-gradient(135deg,color-mix(in srgb,var(--rv-accent) 16%,var(--rv-panel-2)),var(--rv-panel-2) 70%)}
body.ws-immersive .sh-amenity{background:linear-gradient(160deg,color-mix(in srgb,var(--rv-accent) 52%,#101420),color-mix(in srgb,var(--rv-accent) 24%,#101420));color:#fff}
body.ws-immersive .sh-amenity .sh-eyebrow{color:color-mix(in srgb,var(--rv-accent) 40%,#fff)}
body.ws-immersive .sh-amenity .sh-meta{color:rgba(255,255,255,.8)}
/* Nearby Connect keeps its own glass, but inside the workspace its wallpaper's four lights and its glow are shades of the accent, over the workspace window. */
body.ws-immersive .nb-page{--nb-wall:var(--rv-window);--nb-wall-a:color-mix(in srgb,var(--rv-accent) 28%,#fff);--nb-wall-b:color-mix(in srgb,var(--rv-accent) 14%,#fff);--nb-wall-c:color-mix(in srgb,var(--rv-accent) 10%,#fff);--nb-wall-d:color-mix(in srgb,var(--rv-accent) 6%,#fff);--nb-accent-2:color-mix(in srgb,var(--rv-accent) 70%,#fff);--nb-glow:var(--rv-accent);--nb-warm:var(--rv-accent);--nb-warm-dark:var(--rv-accent-pressed)}
:root[data-theme=dark] body.ws-immersive .nb-page{--nb-wall:var(--rv-window);--nb-wall-a:var(--rv-accent);--nb-wall-b:color-mix(in srgb,var(--rv-accent) 70%,#2a2a2e);--nb-wall-c:color-mix(in srgb,var(--rv-accent) 50%,#2a2a2e);--nb-wall-d:color-mix(in srgb,var(--rv-accent) 30%,#2a2a2e)}
/* My profile: the header card is a glass panel, the tabs a frosted capsule with the chosen one a solid accent pill, the photo picker a dashed glass well. */
body.ws-immersive .cs-workspace .cs-profile-head{background:var(--rv-panel);border:1px solid var(--rv-border);box-shadow:inset 0 1px 0 var(--rv-rim),var(--rv-shadow-sm)}
body.ws-immersive .cs-workspace .cs-studio-tabs{background:var(--rv-control);border:1px solid var(--rv-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.ws-immersive .cs-workspace .cs-studio-tabs button{color:var(--rv-muted)}
body.ws-immersive .cs-workspace .cs-studio-tabs button:hover{color:var(--rv-text);background:var(--rv-row-hover)}
body.ws-immersive .cs-workspace .cs-studio-tabs button[aria-selected=true]{background:var(--rv-accent);color:#fff;box-shadow:var(--rv-shadow-sm)}
body.ws-immersive .cs-workspace .cs-head-sub .cs-handle{color:var(--rv-text)}
body.ws-immersive .cs-workspace .cs-profile-head .cs-head-avatar{box-shadow:0 0 0 3px var(--rv-rim)}
body.ws-immersive #main-content .cs-workspace input[type=file]{border:1px dashed var(--rv-control-border);background:var(--rv-input)}
/* Nearby's own painted pieces (the visibility card, avatars, the hold-to-talk button, the app notice, the other person's dot) were teal and orange; inside the workspace they are the accent. */
body.ws-immersive .nb-page .nb-visibility{background:linear-gradient(135deg,color-mix(in srgb,var(--rv-accent) 62%,#0b1220),var(--rv-accent) 60%,color-mix(in srgb,var(--rv-accent) 62%,#fff));color:#fff}
body.ws-immersive .nb-page .nb-avatar{background:linear-gradient(135deg,var(--rv-accent),color-mix(in srgb,var(--rv-accent) 70%,#000))}
body.ws-immersive .nb-page .nb-talk{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rv-accent) 55%,#fff),var(--rv-accent) 45%,var(--rv-accent-pressed))}
body.ws-immersive .nb-page .nb-talk[data-state=listening]{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rv-accent) 30%,#fff),color-mix(in srgb,var(--rv-accent) 60%,#fff) 55%,var(--rv-accent));color:color-mix(in srgb,var(--rv-accent) 30%,#000)}
body.ws-immersive .nb-page .nb-notice-app{background:radial-gradient(500px 200px at 100% 0%,rgba(255,255,255,.22),transparent 60%),linear-gradient(120deg,color-mix(in srgb,var(--rv-accent) 78%,#000),var(--rv-accent))}
body.ws-immersive .nb-page .nb-sonar-them{background:linear-gradient(135deg,color-mix(in srgb,var(--rv-accent) 55%,#fff),var(--rv-accent))}