/*
 * RitualOS shell stylesheet.
 *
 * Extracted from the inline <style> block in header.php so the browser can cache it instead of
 * re-downloading it on every navigation (responses are Cache-Control: no-store, so the inline
 * copy was re-sent with each page).
 *
 * This file styles the application chrome: topbar, drawer, auth modal, toast, command palette
 * and the button/form primitives. The reusable component vocabulary lives in
 * assets/css/components.css, and the design tokens in assets/css/tokens.css.
 *
 * Linked with ?v=<filemtime>, so edits are picked up immediately despite long caching.
 */

/*
 * Wrapped in @layer components so it participates in the cascade order declared at the top of
 * assets/css/tokens.css. Without this, every rule here was unlayered and therefore beat
 * assets/css/components.css outright -- .btn's background won over .btn-ghost, for instance.
 *
 * The pages' own inline <style> blocks stay unlayered and so still win over everything here,
 * which is what keeps a half-migrated app looking like itself.
 */
@layer components {
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  body {
      font-family: var(--font-body);
      background: var(--app-bg);
      color: var(--text-primary);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
  }

  h1, h2, h3, h4, .brand {
      font-family: var(--font-display);
      font-weight: 600;
  }

  /* Glassmorphism utility card */
  .glass-card {
      background: var(--surface-1);
      border: 1px solid var(--border-default);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-2);
      padding: 1.5rem;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      will-change: transform, box-shadow;
  }

  .glass-card:hover {
      border-color: var(--accent-line);
      box-shadow: 0 8px 30px 0 var(--accent-softer);
      transform: translateY(-2px);
  }

  /* The app bar: 48px, flat, the Windows app title row. */
  header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: var(--topbar-h);
      padding: 0 var(--sp-3);
      border-bottom: 1px solid var(--border-subtle);
      background: var(--surface-1);
      position: sticky;
      top: 0;
      z-index: var(--z-header);
  }

  .topbar__btn {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--text-primary);
      cursor: default;
      position: relative;
      transition: background var(--dur-fast) var(--ease-decel);
  }
  .topbar__btn .z-icon { width: 18px; height: 18px; }
  .topbar__btn:hover { background: var(--surface-raise-2); }
  .topbar__btn:active { background: var(--surface-raise-3); }

  .topbar__search {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      height: 32px;
      min-width: 220px;
      padding: 0 var(--sp-3);
      margin-left: var(--sp-2);
      border: 1px solid var(--border-strong);
      border-radius: var(--r-sm);
      background: var(--surface-3);
      color: var(--text-muted);
      font: inherit;
      font-size: var(--fs-sm);
      cursor: text;
      transition: border-color var(--dur-fast) var(--ease-decel);
  }
  .topbar__search:hover { border-color: var(--text-muted); }
  .topbar__search .z-icon { width: 16px; height: 16px; }
  .topbar__search span { flex: 1; text-align: left; }
  .topbar__search kbd {
      font-family: inherit;
      font-size: var(--fs-2xs);
      padding: 0 5px;
      border: 1px solid var(--border-default);
      color: var(--text-faint);
  }
  [data-theme="light"] .topbar__search { background: #ffffff; }

  .brand {
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
      color: var(--text-primary);
      letter-spacing: 0;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 0 var(--sp-2);
  }
  .brand .ritual-mark { width: 20px; height: 20px; }
  .brand span { color: inherit; text-shadow: none; }
  .brand:hover { text-decoration: none; }

  .user-nav-actions {
      display: flex;
      align-items: center;
      gap: var(--sp-1);
  }

  .nav-rpg-status {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      padding: 0 var(--sp-3);
      margin-right: var(--sp-2);
      height: 32px;
      border-radius: var(--r-sm);
      font-size: var(--fs-xs);
  }

  .nav-rpg-item {
      display: flex;
      align-items: center;
      gap: 0.3rem;
  }

  /* Drawer slide-out sidebar navigation (Unified Interlink) */
  /* NavigationView pane. */
  .drawer {
      position: fixed;
      top: 0;
      left: -320px;
      width: 320px;
      height: 100%;
      background: var(--surface-1);
      border-right: 1px solid var(--border-default);
      z-index: var(--z-drawer);
      transition: left var(--dur-slow) var(--ease-decel);
      display: flex;
      flex-direction: column;
      padding: var(--sp-1) var(--sp-2) var(--sp-4);
      overflow-y: auto;
  }

  .drawer.active {
      left: 0;
  }

  .drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--surface-scrim);
      z-index: var(--z-drawer-overlay);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
  }

  .drawer-overlay.active {
      opacity: 1;
      pointer-events: auto;
  }

  /* Search input inside sidebar */
  .search-container {
      margin-bottom: 1.5rem;
      position: relative;
  }

  .search-results {
      background: var(--surface-2);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: 250px;
      overflow-y: auto;
      z-index: var(--z-raised);
      display: none;
      margin-top: 0.5rem;
      box-shadow: 0 4px 20px var(--surface-scrim);
  }

  .search-item {
      padding: 0.6rem 0.8rem;
      font-size: 0.85rem;
      cursor: pointer;
      border-bottom: 1px solid var(--surface-raise-2);
      display: flex;
      flex-direction: column;
  }

  .search-item:hover {
      background: var(--accent-soft);
  }

  /* Category menu groups */
  .menu-category {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-top: 1.5rem;
      margin-bottom: 0.5rem;
      font-weight: 700;
  }

  .menu-link {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      color: var(--text-primary);
      text-decoration: none;
      padding: 0.6rem 0.8rem;
      border-radius: 8px;
      font-size: 0.9rem;
      transition: all 0.2s;
  }

  .menu-link:hover, .menu-link.active {
      background: var(--accent-soft);
      color: var(--accent);
  }

  /* Global buttons and utilities */
  .btn {
      background: var(--accent);
      color: var(--text-on-accent);
      border: none;
      padding: 0.6rem 1.2rem;
      font-family: var(--font-display);
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
  }

  .btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 0 15px var(--accent-glow);
  }

  .btn-secondary {
      background: var(--surface-raise-2);
      border: 1px solid var(--border-default);
      color: var(--text-primary);
  }

  .btn-secondary:hover {
      background: var(--border-strong);
  }

  /* Forms */
  .form-group {
      margin-bottom: 1rem;
  }

  .form-group label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.85rem;
      color: var(--text-muted);
  }

  .form-control {
      width: 100%;
      background: var(--surface-inset);
      border: 1px solid var(--border-default);
      color: var(--text-primary);
      padding: 0.75rem;
      border-radius: 8px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
  }

  .form-control:focus {
      border-color: var(--accent);
  }

  /* Auth Modals */
  .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--surface-scrim);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: var(--z-modal);
      opacity: 0;
      pointer-events: none;
      /* `visibility` carries the closed state alongside opacity, for two reasons.

         It cannot be overridden by an animation the way opacity was: the entrance sequence in
         aero.css runs with fill-mode `both`, and a filled `to { opacity: 1 }` outranks a
         normal declaration, which left ten pages showing a permanently open, permanently
         inert dialog. That selector is fixed, but this makes the closed state hold even if
         something else animates opacity again later.

         It also takes a closed modal out of the tab order. An overlay at opacity 0 is still
         focusable, so Tab walked into the fields of invisible dialogs on every page carrying
         one -- the keyboard half of the same bug, and the reason a screen reader announced
         forms that were not on screen.

         visibility is transitioned at 0s but DELAYED by the fade duration when closing, so
         the overlay stays visible long enough to fade out; opening clears the delay so it
         appears at once. */
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0s linear 0s;
  }

  .auth-container {
      width: 100%;
      max-width: 450px;
  }

  .tab-buttons {
      display: flex;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid var(--border-default);
  }

  .tab-btn {
      flex: 1;
      background: none;
      border: none;
      color: var(--text-muted);
      padding: 0.8rem;
      font-family: var(--font-display);
      font-weight: 500;
      cursor: pointer;
  }

  .tab-btn.active {
      color: var(--accent);
      border-bottom: 2px solid var(--accent);
  }

  .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      max-width: 440px;
      padding: 0.85rem 1.25rem;
      background: var(--surface-2);
      border-left: 4px solid var(--accent);
      border-radius: var(--r-md);
      box-shadow: 0 10px 30px var(--surface-scrim), 0 2px 8px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: var(--z-toast);
      font-size: 0.9rem;
      line-height: 1.4;
      backdrop-filter: var(--glass-filter);
      -webkit-backdrop-filter: var(--glass-filter);
  }

  .toast.active {
      transform: translateY(0);
      opacity: 1;
  }

  /* Keyboard shortcut helper (app/shell/shortcuts.php). A sheet over the page, above the
     toast so an error toast does not sit on top of the list explaining how to dismiss it. */
  .z-keys {
      position: fixed;
      inset: 0;
      z-index: var(--z-palette);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 6vh 1rem 1rem;
      background: var(--surface-scrim);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
  }

  .z-keys[hidden] { display: none; }

  .z-keys__panel {
      width: min(720px, 100%);
      max-height: 86vh;
      display: flex;
      flex-direction: column;
      background: var(--surface-2);
      border: 1px solid var(--border-default);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-4);
      overflow: hidden;
  }

  .z-keys__head {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1rem;
      border-bottom: 1px solid var(--border-default);
  }

  .z-keys__head h3 {
      margin: 0;
      font-size: var(--fs-md);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      white-space: nowrap;
  }

  .z-keys__head h3 .z-icon { width: 1.1em; height: 1.1em; }

  .z-keys__filter {
      flex: 1;
      min-width: 0;
  }

  .z-keys__close {
      flex: none;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
  }

  .z-keys__close:hover { background: var(--surface-3); color: var(--text-primary); }
  .z-keys__close .z-icon { width: 16px; height: 16px; }

  .z-keys__list {
      overflow-y: auto;
      padding: 0.5rem 1rem 0.75rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 0.25rem 2rem;
      align-content: start;
  }

  .z-keys__group h4 {
      margin: 0.85rem 0 0.35rem;
      font-size: var(--fs-2xs);
      font-weight: var(--fw-semi);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--text-muted);
  }

  .z-keys__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.3rem 0;
      border-bottom: 1px solid var(--border-subtle);
      font-size: var(--fs-sm);
      color: var(--text-secondary);
  }

  .z-keys__row:last-child { border-bottom: 0; }
  .z-keys__row[hidden], .z-keys__group[hidden] { display: none; }

  .z-keys__label { flex: 1; min-width: 0; }

  .z-keys__combo {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 0.15rem;
      white-space: nowrap;
  }

  .z-keys__combo kbd,
  .z-keys__foot kbd {
      display: inline-block;
      min-width: 1.6em;
      padding: 0.1em 0.45em;
      font-family: var(--font-mono);
      font-size: var(--fs-2xs);
      line-height: 1.5;
      text-align: center;
      color: var(--text-primary);
      background: var(--surface-3);
      border: 1px solid var(--border-strong);
      border-bottom-width: 2px;
      border-radius: var(--r-xs);
  }

  .z-keys__combo i { font-style: normal; color: var(--text-muted); font-size: var(--fs-2xs); }
  .z-keys__combo em { font-style: normal; color: var(--text-muted); font-size: var(--fs-2xs); margin: 0 0.35rem; }

  .z-keys__empty,
  .z-keys__foot {
      margin: 0;
      padding: 0.6rem 1rem;
      font-size: var(--fs-xs);
      color: var(--text-muted);
  }

  .z-keys__foot { border-top: 1px solid var(--border-default); }

  .toast-icon {
      font-size: 1.25rem;
      line-height: 1;
      flex-shrink: 0;
  }

  #toast-message {
      flex: 1;
      color: var(--text-primary);
      word-break: break-word;
  }

  .toast-ack-btn {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--border-default);
      color: var(--text-primary);
      border-radius: var(--r-sm);
      padding: 0.35rem 0.65rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      flex-shrink: 0;
      margin-left: 0.4rem;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
  }

  .toast-ack-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: var(--border-strong);
      transform: scale(1.02);
  }

  .toast-ack-btn:active {
      transform: scale(0.98);
  }

  .toast.success {
      border-color: var(--success);
      box-shadow: 0 10px 30px var(--surface-scrim), 0 0 14px -3px var(--success-soft);
  }

  .toast.warning {
      border-color: var(--warning);
      box-shadow: 0 10px 30px var(--surface-scrim), 0 0 16px -2px var(--warning-soft);
  }

  .toast.error {
      border-color: var(--danger);
      background: color-mix(in srgb, var(--surface-2) 92%, var(--danger) 8%);
      box-shadow: 0 12px 35px var(--surface-scrim), 0 0 20px -2px var(--danger-line);
      animation: z-toast-error-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }

  .toast.error .toast-ack-btn {
      background: var(--danger-soft);
      border-color: var(--danger-line);
      color: var(--danger-text);
  }

  .toast.error .toast-ack-btn:hover {
      background: var(--danger);
      color: var(--surface-0);
  }

  @keyframes z-toast-error-pop {
      0% { transform: translateY(20px) scale(0.95); opacity: 0; }
      50% { transform: translateY(-4px) scale(1.02); }
      70% { transform: translateY(2px) scale(0.99); }
      100% { transform: translateY(0) scale(1); opacity: 1; }
  }

  .app-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: var(--sp-6) var(--sp-8);
      max-width: var(--content-max);
      width: 100%;
      margin: 0 auto;
      gap: var(--sp-5);
  }

  /* ── the app frame ───────────────────────────────────────────────────────────────────────
     Inside a desktop window (body.is-windowed) the page is an app: no centred column, no
     outer margin, content edge to edge with a modest gutter -- and none at all when the page
     is one of the full-height shells that draw their own chrome. */
  body.is-windowed {
      height: 100vh;
      min-height: 100vh;
      overflow: hidden;
  }
  body.is-windowed .app-container {
      padding: var(--sp-4) var(--sp-5);
      max-width: none;
      height: 100%;
      min-height: 0;
      flex: 1;
      gap: var(--sp-4);
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
  }
  body.is-windowed .app-container:has(> .office, > .files-app, > .ml, > .chat-app, > .zterm-app,
                                       > .tm, > .mv, > .cal-app, > .focus-app, > .storage-app,
                                       > .ledger-container, > .pt, > .clock-app-wrapper) {
      padding: 0;
      gap: 0;
      height: 100%;
      min-height: 0;
      flex: 1;
      overflow: hidden;
  }
  /* The window's own title bar names the app, so the page header is a compact command row. */
  body.is-windowed .page-head { padding: var(--sp-1) 0 var(--sp-3); margin-bottom: var(--sp-3); }
  body.is-windowed .page-head__icon { display: none; }
  body.is-windowed .page-head__title { font-size: var(--fs-xl); }
  body.is-windowed .page-head__sub { display: none; }

  /* ============================================================================
     Shell
     Markup that used to be written inline in header.php now lives in app/shell/*.php
     and is styled here instead of through style="..." attributes. Removing inline
     styling is what lets config.php eventually drop 'unsafe-inline' from the CSP.
     ============================================================================ */

  .broadcast-bar {
      background: linear-gradient(90deg, #b45309, #d97706);
      color: #fff;
      font-size: 0.88rem;
      font-weight: 600;
      text-align: center;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid var(--border-default);
      position: relative;
      z-index: var(--z-broadcast);
  }

  .topbar-left {
      display: flex;
      align-items: center;
      gap: 1rem;
  }

  .ritual-mark {
      display: block;
      flex: none;
      color: var(--text-primary);
  }

  /* Button variants. .btn-primary and .btn-danger were used on 15 and 14 pages
     respectively but had never been defined anywhere, so every Delete button in the
     app rendered as an ordinary button. .btn-xs was used 59 times and defined only
     inside index.php. */
  .btn-primary { background: var(--accent); color: var(--text-on-accent); }

  .btn-danger {
      background: var(--danger-soft);
      border: 1px solid var(--danger-line);
      color: var(--danger);
  }
  .btn-danger:hover {
      background: var(--danger-soft);
      box-shadow: none;
  }

  .btn-success {
      background: var(--success-soft);
      border: 1px solid var(--success-line);
      color: var(--success);
  }
  .btn-success:hover { background: var(--success-soft); box-shadow: none; }

  .btn-xs { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
  .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
  .btn-icon { padding: 0.6rem; }
  .btn-block { width: 100%; justify-content: center; margin-top: 1rem; }

  .btn-search { padding: 0.4rem 0.9rem; font-size: var(--fs-sm); }
  .btn-search kbd {
      font-size: 0.7rem;
      background: var(--border-default);
      padding: 0.1rem 0.3rem;
      border-radius: 3px;
      font-family: inherit;
  }

  /* Drawer */
  .drawer-head {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      height: var(--topbar-h);
      margin-bottom: var(--sp-2);
      padding-left: 0;
  }
  .drawer-head h3 {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
  }
  .drawer-head .ritual-mark { width: 20px; height: 20px; }

  .menu-link-icon {
      width: 1.4rem;
      flex: none;
      text-align: center;
  }

  .menu-link-label { flex: 1; }

  .menu-children {
      margin: 0.15rem 0 0.35rem 1.5rem;
      padding-left: 0.6rem;
      border-left: 1px solid var(--border-default);
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
  }

  .menu-link-child {
      font-size: 0.85rem;
      padding: 0.45rem 0.6rem;
      color: var(--text-muted);
  }
  .menu-link-child.active { color: var(--accent); }

  /* Auth modal */
  .auth-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 1px;
  }

  .auth-note {
      border-radius: 8px;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.5;
  }
  .auth-note strong { color: var(--text-primary); }
  .auth-note-locked {
      background: var(--accent-softer);
      border: 1px solid var(--accent-glow);
  }
  .auth-note-open {
      background: var(--success-soft);
      border: 1px solid var(--success-line);
  }

  .mono-input {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }

  /* Command palette */
  .palette-overlay {
      align-items: flex-start;
      justify-content: center;
  }

  .palette-panel {
      max-width: 620px;
      width: 100%;
      padding: 1.5rem;
      margin-top: 8vh;
  }

  .palette-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.25rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid var(--border-default);
  }

  .palette-results {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      max-height: 50vh;
      overflow-y: auto;
      margin-top: 1rem;
  }

  .palette-hint {
      color: var(--text-muted);
      font-size: 0.9rem;
      text-align: center;
      padding: 1rem 0;
  }

  .palette-group {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      font-weight: 700;
      margin-top: 0.6rem;
  }

  .palette-item {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.6rem 0.7rem;
      border-radius: 8px;
      color: var(--text-primary);
      text-decoration: none;
      font-size: 0.9rem;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: left;
      background: none;
      width: 100%;
      font-family: inherit;
  }
  .palette-item:hover,
  .palette-item.active {
      background: var(--accent-soft);
      border-color: var(--accent-line);
  }
  .palette-item-meta {
      margin-left: auto;
      font-size: 0.75rem;
      color: var(--text-muted);
  }

  /* Sixteen pages wrapped their content in a div that re-declared .app-container's own
     padding, max-width and centring, so those pages rendered with 4rem of padding instead
     of 2rem. The wrapper is kept (removing it would orphan its closing tag in files up to
     2,500 lines long) but reduced to a plain full-width block. */
  .page-wrap { width: 100%; }

  /* Theme toggle. The icon is swapped by shell JS to reflect the resolved mode. */
  .theme-toggle { font-size: 1rem; line-height: 1; }


  /* ══ lock screen ══════════════════════════════════════════════════════════════════════════
     Both the sign-in screen (app/shell/auth_modal.php) and the session lock
     (app/shell/lock_screen.php). Deliberately not built on .modal-overlay: see the note in
     the first of those files. A lock screen is the whole surface and cannot be dismissed, so it
     owns the viewport outright.

     Two stages share one grid cell. The lock stage sits on top and slides up out of the way
     when .is-revealed lands on the root; the sign-in stage waits underneath. Text is white on
     the wallpaper in both themes, which is why nothing here reads the theme's text tokens. */
  .z-lock {
      position: fixed;
      inset: 0;
      z-index: var(--z-lock);
      display: grid;
      overflow: hidden;
      background: var(--theme-bg-start);
      color: #fff;
      font-family: var(--font-body);
  }
  html.ritual-is-locked #ritual-lock-screen { display: grid !important; }

  .z-lock__stage {
      grid-area: 1 / 1;
      position: relative;
      display: grid;
      min-height: 0;
      overflow: hidden;
  }

  .z-lock__wall {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: var(--wallpaper) center / cover no-repeat, var(--theme-bg-start);
  }
  .z-lock__wall--blur {
      inset: -40px;
      filter: blur(28px) brightness(0.6);
      transform: scale(1.04);
  }

  /* ── stage 1: the lock ────────────────────────────────────────────────────────────────── */
  .z-lock__stage--lock {
      z-index: 2;
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr auto;
      padding: var(--sp-8) var(--sp-10) var(--sp-10);
      cursor: default;
      transform: none;
      transition: transform var(--dur-slower) var(--ease-decel), opacity var(--dur-slower) var(--ease-decel);
  }
  .z-lock.is-revealed .z-lock__stage--lock {
      transform: translateY(-100%);
      pointer-events: none;
  }

  .z-lock__clock {
      position: relative;
      z-index: 1;
      align-self: end;
      grid-column: 1;
      display: flex;
      flex-direction: column;
      pointer-events: none;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  }
  .z-lock__time {
      font-family: var(--font-display);
      font-size: clamp(4rem, 9vw, 7.5rem);
      font-weight: var(--fw-light);
      line-height: 1;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
  }
  .z-lock__date {
      margin-top: var(--sp-2);
      font-size: clamp(1.25rem, 2.4vw, 2rem);
      font-weight: var(--fw-light);
  }

  .z-lock__hint {
      position: relative;
      z-index: 1;
      grid-column: 1 / -1;
      justify-self: center;
      margin-top: var(--sp-6);
      font-size: var(--fs-sm);
      opacity: 0;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
      animation: z-lock-hint 600ms var(--ease-decel) 1.6s forwards;
  }
  @keyframes z-lock-hint { to { opacity: 0.75; } }

  .z-lock__org {
      position: absolute;
      top: var(--sp-6);
      left: var(--sp-10);
      z-index: 1;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      font-size: var(--fs-md);
      font-weight: var(--fw-semi);
      letter-spacing: 0.04em;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }

  .z-lock__corner {
      position: absolute;
      right: var(--sp-6);
      bottom: var(--sp-6);
      z-index: 1;
      display: flex;
      align-items: center;
      gap: var(--sp-1);
      opacity: 0.9;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .z-lock__corner .z-icon { width: 20px; height: 20px; }
  .z-lock__corner-btn {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      cursor: default;
      transition: background var(--dur-fast) var(--ease-decel);
  }
  button.z-lock__corner-btn:hover { background: rgba(255, 255, 255, 0.12); }

  /* ── stage 2: sign in ─────────────────────────────────────────────────────────────────── */
  .z-lock__stage--auth {
      z-index: 1;
      grid-template-rows: 1fr auto;
      grid-template-columns: auto 1fr auto;
      align-items: end;
      padding: var(--sp-6);
      opacity: 0;
      transition: opacity var(--dur-slow) var(--ease-decel);
  }
  .z-lock.is-revealed .z-lock__stage--auth { opacity: 1; transition-delay: 80ms; }

  .z-lock__panel {
      position: relative;
      z-index: 1;
      grid-row: 1;
      grid-column: 1 / -1;
      justify-self: center;
      align-self: center;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transform: translateY(12px);
      transition: transform var(--dur-slow) var(--ease-decel);
  }
  .z-lock.is-revealed .z-lock__panel { transform: none; transition-delay: 80ms; }

  /* The account picture: a 160px circle, as on the Windows sign-in screen. */
  .z-lock__tile {
      width: 160px;
      height: 160px;
      margin: 0 auto var(--sp-4);
      display: grid;
      place-items: center;
      border-radius: var(--r-full);
      background: rgba(255, 255, 255, 0.12);
      border: 2px solid rgba(255, 255, 255, 0.35);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
      overflow: hidden;
      font-family: var(--font-display);
      font-size: 4rem;
      font-weight: var(--fw-light);
      color: #fff;
  }
  .z-lock__tile--mark { background: var(--accent); border-color: rgba(255, 255, 255, 0.5); }
  .z-lock__avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
  .z-lock__initial { display: grid; place-items: center; width: 100%; height: 100%; text-transform: uppercase; }

  .z-lock__heading {
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: var(--fw-semilight);
      color: #fff;
      margin-bottom: var(--sp-4);
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  }
  .z-lock__sub  { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.85); margin-bottom: var(--sp-3); }
  .z-lock__note { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.75); margin-bottom: var(--sp-3); max-width: 34ch; }
  .z-lock__motto { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); margin-left: var(--sp-2); font-weight: var(--fw-semilight); }

  .z-lock__panel form { width: 100%; }
  .z-lock__label {
      position: absolute;
      width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }

  /* The password box: dark, translucent, a white hairline, the arrow button on its end. */
  .z-lock__field {
      position: relative;
      display: flex;
      align-items: stretch;
      width: 100%;
      height: 36px;
      margin: 0 auto var(--sp-2);
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.55);
      transition: border-color var(--dur-fast) var(--ease-decel), background var(--dur-fast) var(--ease-decel);
  }
  .z-lock__field:focus-within { border-color: #fff; background: rgba(0, 0, 0, 0.6); }
  .z-lock__input {
      flex: 1;
      min-width: 0;
      padding: 0 var(--sp-3);
      background: transparent;
      border: 0;
      color: #fff;
      font: inherit;
      font-size: var(--fs-md);
      outline: none;
  }
  .z-lock__input::placeholder { color: rgba(255, 255, 255, 0.65); }
  .z-lock__input--mono { font-family: var(--font-mono); letter-spacing: 0.08em; }
  .z-lock__input:-webkit-autofill,
  .z-lock__input:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff;
      -webkit-box-shadow: 0 0 0 100px rgba(20, 20, 20, 1) inset;
  }
  .z-lock__reveal {
      flex: none;
      width: 34px;
      border: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.75);
      font-size: var(--fs-md);
      cursor: default;
  }
  .z-lock__reveal:hover, .z-lock__reveal[aria-pressed="true"] { color: #fff; }
  .z-lock__go {
      flex: none;
      width: 34px;
      margin: 3px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 0;
      background: rgba(255, 255, 255, 0.22);
      color: #fff;
      cursor: default;
      transition: background var(--dur-fast) var(--ease-decel);
  }
  .z-lock__go .z-icon { width: 16px; height: 16px; }
  .z-lock__go:hover { background: var(--accent); }
  .z-lock__go:disabled { opacity: 0.5; }

  .z-lock__caps[hidden] { display: none; }
  .z-lock__caps { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: #ffd23f; }

  .z-lock__error[hidden] { display: none; }
  .z-lock__error {
      display: block;
      margin: var(--sp-2) auto 0;
      max-width: 34ch;
      font-size: var(--fs-sm);
      color: #fff;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .z-lock__error:empty { display: none; }

  @keyframes zLockShake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-8px); }
      40%, 80% { transform: translateX(8px); }
  }
  .z-lock__panel.is-invalid { animation: zLockShake 0.4s ease; }

  /* Sign-in options: PIN or password, as small glyph buttons under the field. */
  .z-lock__options { margin-top: var(--sp-5); font-size: var(--fs-sm); }
  .z-lock__options-label { display: block; margin-bottom: var(--sp-2); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
  .z-lock__options-row { display: flex; justify-content: center; gap: var(--sp-2); }
  .z-lock__option {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid transparent;
      border-radius: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.85);
      cursor: default;
      transition: background var(--dur-fast) var(--ease-decel), border-color var(--dur-fast) var(--ease-decel);
  }
  .z-lock__option .z-icon { width: 22px; height: 22px; }
  .z-lock__option:hover { background: rgba(255, 255, 255, 0.12); }
  .z-lock__option.is-active { border-color: #fff; background: rgba(255, 255, 255, 0.18); color: #fff; }

  /* PIN: dots, then the keypad. */
  .z-lock__pin-view { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
  .z-lock__pin-display {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 36px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.55);
  }
  .z-lock__pin-dots { display: flex; align-items: center; justify-content: center; gap: 10px; }
  .z-lock__pin-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.6);
      background: transparent;
      transition: background var(--dur-fast) var(--ease-decel), transform var(--dur-fast) var(--ease-decel);
  }
  .z-lock__pin-dot.is-filled { background: #fff; border-color: #fff; }
  .z-lock__keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      width: 100%;
      max-width: 240px;
      margin: 0 auto;
  }
  .z-lock__key {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 48px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid transparent;
      border-radius: 0;
      color: #fff;
      cursor: default;
      user-select: none;
      transition: background var(--dur-fast) var(--ease-decel), border-color var(--dur-fast) var(--ease-decel);
      font-size: var(--fs-lg);
      font-weight: var(--fw-normal);
      line-height: 1;
  }
  .z-lock__key small { font-size: 0.6rem; letter-spacing: 1px; color: rgba(255, 255, 255, 0.7); margin-top: 3px; }
  .z-lock__key:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
  .z-lock__key:active { background: rgba(255, 255, 255, 0.32); }
  .z-lock__key--action { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); }

  /* Federated sign-in. */
  .z-lock__or {
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      width: 100%;
      margin: var(--sp-3) 0 var(--sp-2);
      color: rgba(255, 255, 255, 0.7);
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 1px;
  }
  .z-lock__or::before, .z-lock__or::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 255, 255, 0.3); }
  .z-lock__sso {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2);
      width: 100%;
      height: 36px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.45);
      color: #fff;
      font-size: var(--fs-sm);
      text-decoration: none;
  }
  .z-lock__sso:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; text-decoration: none; }
  .z-lock__sso + .z-lock__sso { margin-top: var(--sp-2); }
  .z-sso__mark { flex: none; }

  /* The account row, bottom-left, as Windows lists its users. */
  .z-lock__users {
      position: relative;
      z-index: 1;
      grid-row: 2;
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
  }
  .z-lock__user {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      min-width: 200px;
      padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
      border: 1px solid transparent;
      border-radius: 0;
      background: transparent;
      color: #fff;
      font: inherit;
      font-size: var(--fs-sm);
      text-align: left;
      cursor: default;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
      transition: background var(--dur-fast) var(--ease-decel), border-color var(--dur-fast) var(--ease-decel);
  }
  .z-lock__user:hover { background: rgba(255, 255, 255, 0.12); }
  .z-lock__user.active { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
  .z-lock__user-avatar {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: var(--r-full);
      background: rgba(255, 255, 255, 0.2);
      flex: none;
  }
  .z-lock__user-avatar .z-icon { width: 18px; height: 18px; }

  .z-lock__notice {
      position: relative;
      z-index: 1;
      grid-row: 2;
      grid-column: 2;
      align-self: end;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: var(--sp-2);
      padding: 0 var(--sp-4);
      font-size: var(--fs-2xs);
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .z-lock__chip {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      padding: 2px var(--sp-2);
      font-size: var(--fs-2xs);
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.3);
      white-space: nowrap;
  }
  .z-lock__chip.is-open { border-color: var(--success); color: var(--success); }
  .z-lock__chip.is-offline { border-color: var(--danger); color: var(--danger); }

  .z-lock__corner--auth { position: relative; right: auto; bottom: auto; grid-row: 2; grid-column: 3; justify-self: end; }

  /* ── narrow and short ─────────────────────────────────────────────────────────────────── */
  @media (max-width: 719px), (max-height: 639px) {
      .z-lock__tile { width: 96px; height: 96px; font-size: 2.5rem; }
      .z-lock__stage--lock { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
      .z-lock__stage--auth { padding: var(--sp-4); grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto; }
      .z-lock__users, .z-lock__notice, .z-lock__corner--auth { grid-column: 1; grid-row: auto; justify-self: center; }
      .z-lock__keypad { max-width: 210px; }
      .z-lock__key { height: 42px; }
  }

  @media (prefers-reduced-motion: reduce) {
      .z-lock__stage--lock, .z-lock__stage--auth, .z-lock__panel { transition: none; }
      .z-lock__hint { animation: none; opacity: 0.75; }
      .z-lock__panel.is-invalid { animation: none; }
  }


}

/* ── account menu ─────────────────────────────────────────────────────────────────────────
   The topbar previously carried a bare Sign Out button and no avatar, and nothing in the app
   linked to a profile. */
.account { position: relative; }

.account__btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--glass-edge-soft);
    border-radius: var(--r-full);
    background: none;
    cursor: pointer;
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.account__btn:hover { background: var(--surface-raise-2); }

.account__avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    background: var(--accent);
    background-size: cover;
    background-position: center;
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.account__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 230px;
    padding: 0.4rem;
    border-radius: 0;
    background: var(--surface-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-edge);
    box-shadow: var(--aero-bevel), var(--aero-edge), var(--shadow-4);
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.account__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }

.account__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    font-family: var(--font-display);
    border-bottom: 1px solid var(--glass-edge-soft);
    margin-bottom: 0.3rem;
}
.account__head strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.account__item:hover {
    background: var(--surface-raise-2);
    border-color: var(--accent-line);
    color: var(--text-primary);
    text-decoration: none;
}
.account__menu hr { margin: 0.3rem 0; border-top-color: var(--border-subtle); }

/* ── notification bell ────────────────────────────────────────────────────────────────────
   Shares the account menu's panel treatment rather than inventing a second dropdown look:
   both hang off the topbar, and two frosted panels that disagree about their corner radius
   read as a bug. Only what differs is declared here.

   Unlayered, matching .account__* above it -- see the note there. */

.notif { position: relative; }

/* The connectivity pill next to the bell (shell.js ritualNetPaint). Hidden while online with
   nothing queued, which is nearly always. */
.ritual-net-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 24px;
    padding: 0 0.6rem;
    margin-right: 0.35rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border-default);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ritual-net-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.ritual-net-pill.is-offline { border-color: var(--danger); color: var(--danger); }
.ritual-net-pill.is-offline::before { background: var(--danger); animation: ritual-pill-blink 1.6s ease-in-out infinite; }
.ritual-net-pill.is-syncing { border-color: var(--accent); color: var(--accent); }
.ritual-net-pill.is-syncing::before { background: var(--accent); animation: ritual-pill-blink 0.9s ease-in-out infinite; }
.ritual-net-pill.is-auth { border-color: var(--warning); color: var(--warning); }
.ritual-net-pill.is-auth::before { background: var(--warning); }
.ritual-net-pill[hidden] { display: none; }
@keyframes ritual-pill-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* The slim strip under the topbar while a page or a list is a cached copy. */
.ritual-offline-banner {
    padding: 0.4rem 1rem;
    background: var(--warning-soft);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.8rem;
    text-align: center;
}
.ritual-offline-banner[hidden] { display: none; }

.toast-action-btn { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.toast-action-btn:hover { background: var(--accent); filter: brightness(1.1); }

.notif__btn { position: relative; }

.notif__count.is-dnd { background: var(--surface-3); color: var(--text-primary); }
.notif__count.is-dnd:empty::before { content: '🌙'; font-size: 9px; }

.notif__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.notif__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(340px, calc(100vw - 2rem));
    padding: 0.4rem;
    border-radius: 0;
    background: var(--surface-2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-edge);
    box-shadow: var(--aero-bevel), var(--aero-edge), var(--shadow-4);
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.notif__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }

.notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    font-family: var(--font-display);
    border-bottom: 1px solid var(--glass-edge-soft);
    margin-bottom: 0.3rem;
}

/* Capped so a long backlog scrolls inside the panel rather than running off the viewport. */
.notif__list {
    max-height: 60vh;
    overflow-y: auto;
}

.notif__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    text-decoration: none;
}
.notif__item strong { color: var(--text-primary); font-size: 0.9rem; }
.notif__item span   { grid-column: 1; font-size: 0.82rem; color: var(--text-muted); }
.notif__item time   { grid-row: 1; grid-column: 2; font-size: 0.72rem; color: var(--text-muted); }

.notif__item:hover {
    border-color: var(--accent-line);
    color: var(--text-primary);
}

/*
 * Windowed pages: no chrome of their own.
 *
 * app/shell/head.php simply does not render the topbar, drawer or broadcast bar when the
 * request is windowed, so on the server path there is nothing here to hide. This is the
 * fallback for browsers that do not send Sec-Fetch-Dest (Safari before 16.4): there the
 * server cannot tell a framed navigation from a top-level one, so shell.js adds .is-windowed
 * on the client instead and these rules take the chrome back out. Left unlayered so they beat
 * the @layer components rules above without needing !important.
 */
body.is-windowed > header,
body.is-windowed > .broadcast-bar,
body.is-windowed > .drawer,
body.is-windowed > .drawer-overlay {
    display: none;
}