/* Jellyn Glass: the layer that floats over the page is a liquid glass material.
   The header, the sidebars, menus, popovers, dialogs, toasts, the unsaved bar and rows of choices are glass: they
   tint, blur and brighten what passes under them, light catches their rim, and a soft glint follows the pointer.
   Content (the cards you read and fill in) stays on solid surfaces, so text is always easy to read.
   In Chromium the glass also bends what is under it near its edges, like a lens: js/glass.js adds the two SVG
   filters and .lg-refract on <html>. Other browsers get the same glass without the bend; browsers without
   backdrop-filter, and anyone who asks for less transparency or more contrast, get solid surfaces.
   Jellyn's own CSS, written for this site: no code, images, fonts or wording taken from anyone else.
   Loaded last on every page, so it settles the look of the shared parts. */

:root{
  /* The header floats: a bar of --header-bar with --header-gap around it. Everything that sticks under it
     (sidebars, sticky headings) uses --header-h, the room it takes. */
  --header-bar:56px;
  --header-gap:10px;
  /* A site notice sticks under the header and adds its own room (--notice-h, set by js/script.js). */
  --header-h:calc(var(--header-bar) + 2 * var(--header-gap) + var(--notice-h, 0px));
  /* The material */
  --lg-tint:light-dark(rgb(255 253 249 / .56),rgb(34 31 29 / .5));
  --lg-tint-thick:light-dark(rgb(255 253 249 / .8),rgb(28 26 24 / .8));
  --lg-well:light-dark(rgb(60 45 30 / .06),rgb(255 255 255 / .05));
  --lg-blur:18px;
  --lg-sat:175%;
  --lg-rim:light-dark(rgb(255 255 255 / .95),rgb(255 255 255 / .2));
  --lg-rim-soft:light-dark(rgb(255 255 255 / .5),rgb(255 255 255 / .07));
  --lg-edge:light-dark(rgb(60 40 20 / .12),rgb(0 0 0 / .5));
  --lg-glint:light-dark(rgb(255 255 255 / .75),rgb(255 255 255 / .1));
  --lg-shade:0 14px 34px -16px light-dark(rgb(70 45 20 / .3),rgb(0 0 0 / .8)),0 2px 8px -3px light-dark(rgb(70 45 20 / .14),rgb(0 0 0 / .45));
  /* Shapes: glass is rounder than paper; things inside a card follow its curve */
  --r-glass:22px;
  --r-card:20px;
  --r-inner:14px;
}

/* ---------- The material ----------
   Applied to the element itself (menus, popovers, dialogs, toasts) or, for a container whose children are glass
   too, to its ::before: an element with a backdrop-filter is the only backdrop its children's glass can see, so
   the header and sidebars keep theirs on a layer behind their content and their menus still see the page. */
:is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,.unsaved-bar,dialog,.lg-glass),
:is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before{
  background-color:var(--lg-tint);
  background-image:
    radial-gradient(260px circle at var(--lg-x,18%) var(--lg-y,-30%),var(--lg-glint),transparent 70%),
    linear-gradient(180deg,light-dark(rgb(255 255 255 / .35),rgb(255 255 255 / .04)),transparent 42%);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-color:transparent;
  box-shadow:
    inset 0 1px 0 0 var(--lg-rim),
    inset 0 -1px 0 0 var(--lg-rim-soft),
    inset 0 0 0 1px var(--lg-rim-soft),
    0 0 0 1px var(--lg-edge),
    var(--lg-shade);
}
/* What is read on it gets a thicker glass. */
:is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,dialog){background-color:var(--lg-tint-thick)}
:is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
/* A view-transition-name (or a filter, opacity, mask…) would make the container all that the glass behind it can
   see: these keep none, and cross-fade with the page when it changes. */
.site-header,.server-sidebar,.account-sidebar{view-transition-name:none}
/* In Chromium the glass bends what is under its edges (js/glass.js). The wide filter is for bars. The bend comes
   last: put first, Chrome drops the blur after it on high-density screens. */
.lg-refract :is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,dialog,.lg-glass),
.lg-refract :is(.server-sidebar,.account-sidebar)::before{
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-bend);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-bend);
}
.lg-refract :is(.site-header,.panel-bar)::before,.lg-refract .unsaved-bar{
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-bend-wide);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)) url(#lg-bend-wide);
}
.lg-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* A soft wash of Jellyn's raspberry at the top of the page, so the glass has colour to catch. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(70% 55% at 12% -12%,color-mix(in oklab,var(--accent) 11%,transparent),transparent 72%),
  radial-gradient(55% 45% at 96% -8%,color-mix(in oklab,var(--grape) 7%,transparent),transparent 70%)}

/* ---------- The header: a floating glass bar ---------- */
.site-header{position:sticky;top:var(--header-gap);isolation:isolate;margin:var(--header-gap) var(--header-gap) 0;border:0;border-radius:var(--r-glass);background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-layout=site] .site-header{width:min(1320px + 2 * var(--gutter),100% - 2 * var(--header-gap));margin-inline:auto}
.header-inner{height:var(--header-bar);padding-inline:16px 10px}
body[data-layout=site] .header-inner{max-width:none;margin:0}
.main-nav>a,.main-nav>span[aria-disabled],.nav-menu>summary{height:36px;padding:0 13px;border-radius:999px}
.main-nav>a:hover,.nav-menu>summary:hover,.nav-menu[open]>summary{background:var(--lg-well);color:var(--ink)}
.main-nav>a[aria-current=page]{border-radius:999px;background:color-mix(in oklab,var(--accent) 15%,transparent);box-shadow:inset 0 1px 0 var(--lg-rim-soft);color:var(--accent)}
.mega-menu{top:calc(100% + 14px);border:0;border-radius:var(--r-glass)}
.mega-grid>a,.mega-grid>span[aria-disabled]{border-radius:var(--r-inner)}
.mega-grid>a:hover{background:var(--lg-well)}
.menu-symbol{border:0;border-radius:12px;background:color-mix(in oklab,var(--accent) 12%,transparent);box-shadow:inset 0 1px 0 var(--lg-rim-soft)}
.search-launch{height:38px;border:0;border-radius:999px;background:var(--lg-well);box-shadow:inset 0 0 0 1px var(--lg-rim-soft);transition:background-color .2s,color .2s,box-shadow .2s}
.search-launch:hover{background:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09));color:var(--ink)}
.search-launch kbd{border-radius:999px;padding-inline:8px}
.account-actions .icon-button,.menu-toggle{border-radius:999px}
.account-actions .icon-button:hover,.notification-link[aria-expanded=true]{background:var(--lg-well)}
.notification-link.has-unread::after{border-color:transparent}
.notification-popover,.profile-dropdown>div{top:calc(100% + 14px);border:0;border-radius:var(--r-glass)}
.profile-dropdown summary:hover,.profile-dropdown[open] summary{border-color:transparent;background:var(--lg-well)}
.notification-preview-card,.profile-dropdown>div>a,.profile-dropdown>div>.text-button{border-radius:12px}
.notification-preview-card:hover,.profile-dropdown>div>a:hover,.profile-dropdown>div>.text-button:hover{background:var(--lg-well)}
.notification-view-all{border:0;border-radius:999px;background:var(--lg-well)}
.notification-view-all:hover{background:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09))}
.item-menu>div{border:0;border-radius:16px}
.item-menu button{border-radius:10px}
.item-menu button:hover:not(:disabled){background:var(--lg-well)}

/* ---------- Sidebars: floating glass panels ---------- */
.server-shell{grid-template-columns:272px minmax(0,1fr)}
.server-sidebar,.account-sidebar{isolation:isolate;top:var(--header-h);height:calc(100dvh - var(--header-h) - var(--header-gap));margin:var(--header-gap) 0 var(--header-gap) var(--header-gap);border:0;border-radius:var(--r-glass);background:none}
.server-sidebar{padding:14px 12px}
.server-nav a,.server-sidebar-foot a,.server-nav-toggle{border-radius:12px}
.server-nav a:hover,.server-back:hover,.server-nav-toggle:hover{background:var(--lg-well)}
.server-nav a[aria-current=page]{background:color-mix(in oklab,var(--accent) 15%,transparent);box-shadow:inset 0 1px 0 var(--lg-rim-soft)}
.server-nav>a[aria-current=page]::before{display:none}
.server-nav-sub{border-left-color:color-mix(in oklab,var(--ink) 10%,transparent)}
.server-switch{border:0;border-radius:16px;background:var(--lg-well);box-shadow:inset 0 0 0 1px var(--lg-rim-soft)}
.server-switch:hover{background:light-dark(rgb(255 255 255 / .6),rgb(255 255 255 / .08))}
.server-sidebar-foot .server-panel-link{border-radius:999px}
.account-sidebar nav a{border-radius:12px}

/* ---------- Content: solid cards, rounder, with a lit top edge ---------- */
.panel{border-radius:var(--r-card);box-shadow:inset 0 1px 0 light-dark(rgb(255 255 255 / .9),rgb(255 255 255 / .04)),var(--shadow-sm)}
.empty-state{border-radius:var(--r-inner)}
.page-icon{border-radius:16px;box-shadow:inset 0 1px 0 var(--lg-rim-soft)}

/* ---------- Buttons: capsules with a liquid sheen, that give a little when pressed ---------- */
.button{border-radius:999px;background-image:linear-gradient(180deg,rgb(255 255 255 / .16),transparent 58%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(0 0 0 / .1),0 1px 2px light-dark(rgb(60 30 20 / .18),rgb(0 0 0 / .4));transition:background-color .15s,transform .35s var(--spring),border-color .15s,box-shadow .2s}
.button.small{border-radius:999px}
.button:active:not(:disabled,[aria-disabled=true]){transform:scale(.96)}
.button.ghost{background-color:var(--lg-well);background-image:linear-gradient(180deg,light-dark(rgb(255 255 255 / .5),rgb(255 255 255 / .05)),transparent 60%);border-color:transparent;box-shadow:inset 0 1px 0 var(--lg-rim-soft),inset 0 0 0 1px var(--lg-rim-soft),0 0 0 1px var(--lg-edge)}
.button.ghost:hover:not(:disabled){background-color:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09))}
.dash-chip{border:0;background:var(--lg-well);box-shadow:inset 0 1px 0 var(--lg-rim-soft),inset 0 0 0 1px var(--lg-rim-soft),0 0 0 1px var(--lg-edge);transition:background-color .15s,transform .35s var(--spring)}
.dash-chip:hover{background:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09))}
.dash-chip.primary{background-image:linear-gradient(180deg,rgb(255 255 255 / .18),transparent 60%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 1px 2px light-dark(rgb(60 30 20 / .18),rgb(0 0 0 / .4))}
.dash-chip:active:not(.soon){transform:scale(.96)}
.dash-chip.soon:hover{background:var(--lg-well)}

/* ---------- Rows of choices: a glass lens slides to the choice (js/glass.js) ----------
   Without the lens (no script yet), the chosen one is lit as before. Held down, the lens grows and turns to clear
   glass, and follows the finger along the row (sliding along picks, js/script.js). */
:is(.seg-toggle,.command-tabs,.view-toggle){position:relative;isolation:isolate;border:0;border-radius:999px;background:var(--lg-well);box-shadow:inset 0 1px 2px light-dark(rgb(60 40 20 / .12),rgb(0 0 0 / .45)),inset 0 0 0 1px var(--lg-rim-soft)}
:is(.seg-toggle,.command-tabs,.view-toggle) button{position:relative;z-index:1;border-radius:999px}
:is(.seg-toggle,.command-tabs,.view-toggle).has-lens button[aria-pressed=true]{background:transparent;box-shadow:none}
.lg-lens{position:absolute;top:0;left:0;z-index:0;width:0;height:0;border-radius:999px;pointer-events:none;background-color:var(--block);background-image:linear-gradient(180deg,light-dark(rgb(255 255 255 / .9),rgb(255 255 255 / .08)),transparent 70%);box-shadow:inset 0 1px 0 var(--lg-rim),inset 0 0 0 1px var(--lg-rim-soft),0 2px 6px -1px light-dark(rgb(70 45 20 / .22),rgb(0 0 0 / .6));transition:transform .5s var(--spring),width .5s var(--spring),height .5s var(--spring),background-color .2s,scale .3s var(--spring)}
.lg-lens.instant{transition:none}
.is-held>.lg-lens{scale:1.14;background-color:light-dark(rgb(255 255 255 / .3),rgb(255 255 255 / .06));-webkit-backdrop-filter:blur(1px) saturate(160%);backdrop-filter:blur(1px) saturate(160%)}
.lg-refract .is-held>.lg-lens{-webkit-backdrop-filter:saturate(160%) url(#lg-bend);backdrop-filter:saturate(160%) url(#lg-bend)}

/* ---------- Windows, toasts and the unsaved bar ---------- */
dialog{border:0;border-radius:26px}
dialog::backdrop{background:light-dark(rgb(40 28 18 / .26),rgb(0 0 0 / .55));-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
#site-search input{border-radius:16px}
#site-results a,.search-unavailable{border-radius:12px}
.toast{border:0;border-radius:20px}
.toast-icon{border-radius:12px}
.toast-close{border-radius:999px}
.unsaved-bar{border:0;border-radius:var(--r-glass)}
.unsaved-save,.unsaved-reset{border-radius:999px}
.unsaved-bar.failed{background-color:color-mix(in oklab,var(--stop) 14%,var(--lg-tint-thick))}
.conn-card{border:0;border-radius:var(--r-glass)}

/* ---------- The moderator panel's bar: a glass toolbar ---------- */
.panel-app{padding-top:var(--header-gap)}
.panel-bar{position:relative;z-index:80;isolation:isolate;padding:8px 10px;border-radius:var(--r-glass)}
.panel-bar-links a{border:0;border-radius:999px;background:var(--lg-well);box-shadow:inset 0 0 0 1px var(--lg-rim-soft)}
.panel-bar-links a:hover{background:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09));color:var(--accent)}

/* ---------- The site notice (js/script.js): a glass bar that sticks under the header ---------- */
.site-notice{position:sticky;top:calc(var(--header-bar) + var(--header-gap) + 8px);z-index:49;isolation:isolate;display:flex;align-items:center;gap:12px;margin:8px var(--header-gap) 0;padding:8px 8px 8px 12px;border-radius:18px;background-color:var(--lg-tint-thick);color:var(--ink);font-size:.875rem;line-height:1.45}
body[data-layout=site] .site-notice{width:min(1320px + 2 * var(--gutter),100% - 2 * var(--header-gap));margin-inline:auto}
.site-notice.tone-info,.site-notice.tone-maintenance,.site-notice.tone-warning{border:0}
.site-notice.tone-info{--tone:var(--accent)}
.site-notice.tone-maintenance{--tone:var(--warn)}
.site-notice.tone-warning{--tone:var(--bad)}
.site-notice-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:999px;background:color-mix(in oklab,var(--tone) 18%,transparent);color:var(--tone)}
.site-notice-text{flex:1;min-width:0;margin:0;color:var(--ink);overflow-wrap:anywhere}
.site-notice-text strong{margin-right:6px;color:var(--tone)}
.site-notice-link{display:inline-flex;align-items:center;gap:5px;flex:none;padding:6px 12px;border-radius:999px;background:var(--lg-well);color:var(--ink);font-size:.8125rem;font-weight:600;white-space:nowrap;transition:background-color .15s}
.site-notice-link:hover{background:light-dark(rgb(255 255 255 / .7),rgb(255 255 255 / .09))}
.site-notice-link .icon{width:13px;height:13px}
.site-notice-close{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.site-notice-close:hover{background:var(--lg-well);color:var(--ink)}
@media (max-width:600px){
  /* On a phone it scrolls with the page: stuck under the header it would take too much of the screen. */
  .site-notice{position:relative;top:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:4px 10px}
  .site-notice-link{grid-column:2;justify-self:start}
  .site-notice-close{grid-column:3;grid-row:1}
}

/* ---------- Phones ---------- */
@media (max-width:980px){
  .main-nav{top:calc(100% + 8px);left:0;right:0;padding:8px;border:0;border-radius:var(--r-glass);background-color:var(--lg-tint-thick);-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));box-shadow:inset 0 1px 0 var(--lg-rim),inset 0 0 0 1px var(--lg-rim-soft),0 0 0 1px var(--lg-edge),var(--lg-shade)}
  .main-nav>a,.main-nav>span[aria-disabled],.nav-menu>summary{border-radius:14px}
  .main-nav>a[aria-current=page]{box-shadow:none;border-radius:14px}
  .mega-menu{border-radius:16px;background-color:var(--lg-well);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:980px){.account-sidebar{position:relative;top:auto;height:auto;margin:var(--header-gap) var(--header-gap) 0}}
@media (max-width:900px){
  .server-shell{grid-template-columns:1fr}
  .server-sidebar{position:relative;top:auto;height:auto;margin:var(--header-gap) var(--header-gap) 0}
}

/* ---------- Asked for less: solid surfaces ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,.unsaved-bar,dialog,.lg-glass),
  :is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before{background-color:var(--block)}
}
@media (prefers-reduced-transparency:reduce){
  :is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,.unsaved-bar,dialog,.lg-glass),
  :is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before,.main-nav{background-color:var(--block)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body::before{display:none}
  .is-held>.lg-lens{background-color:var(--block);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,.unsaved-bar,dialog,.lg-glass),
  :is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before{background-color:var(--block);background-image:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--line-2),var(--lg-shade)}
  body::before{display:none}
}
@media (forced-colors:active){
  :is(.mega-menu,.notification-popover,.profile-dropdown>div,.item-menu>div,.conn-card,.toast,.unsaved-bar,dialog,.lg-glass),
  :is(.site-header,.server-sidebar,.account-sidebar,.panel-bar)::before{border:1px solid CanvasText}
  .lg-lens{border:2px solid Highlight}
}
@media (prefers-reduced-motion:reduce){
  .lg-lens{transition:none}
  .button,.dash-chip{transition:background-color .15s,border-color .15s}
  .button:active:not(:disabled,[aria-disabled=true]),.dash-chip:active:not(.soon){transform:none}
  .is-held>.lg-lens{scale:1}
}