/* The futuristic workspace chrome is hidden until the shell renders it. */
.future-topbar,
.future-command-palette,
.future-sidebar-pin,
.notification-center { display: none; }

/* Future workspace.
   The palette is NOT defined here. It used to be — on body.app-body, which beat
   the :root block in app.css and meant the signed-out pages (body.auth-body)
   quietly ran a different set of colours from the rest of the app. Only the
   chrome-specific aliases live here now, and each one points at a real token. */
html[data-layout="future"] body.app-body {
  --future-accent-text: var(--accent);
  --future-panel: var(--sheet);
  --future-panel-solid: var(--sheet);
  --future-panel-bright: var(--sheet-2);
  --future-line: var(--rule);
  --future-line-strong: var(--rule-strong);
  background: var(--paper);
  font-family: var(--font-text);
}
html[data-layout="future"] .app-shell {
  position: relative;
  z-index: 1;
  grid-template-columns: 64px minmax(0, 1fr);
}

@media (min-width: 851px) {
  /* Hovering the rail lays it over the page; only pinning widens its grid
     column. The column used to widen on hover too, which re-laid out the whole
     page on every frame of the animation — with a 2,000-row table on the page,
     ~380ms of layout per hover at 4x CPU throttling, against ~15ms for the rail
     alone — and shoved everything 168px sideways each time the pointer crossed
     the rail. Pinning is a decision, so the page may move for it; a pointer
     passing by is not.
     When pinning, the column and the rail animate the same change, so both read
     the same timing: when they ran .2s and .16s the rail slid out over the
     command bar by 21px for 40ms. Both directions are slow enough to be seen as
     a movement: .2s on a curve that spent most of its travel in the first frames
     read as a jump, and .35s open / .22s close still read as instant. Closing
     stays a touch quicker, because by then the pointer has left for the page. */
  html[data-layout="future"] .app-shell {
    --rail-open: .6s cubic-bezier(.4, 0, .2, 1);
    --rail-close: .5s cubic-bezier(.4, 0, .2, 1);
    transition: grid-template-columns var(--rail-close);
  }
  html[data-layout="future"][data-sidebar-pinned="true"] .app-shell {
    grid-template-columns: 232px minmax(0, 1fr);
    transition: grid-template-columns var(--rail-open);
  }
  /* Flush to the edge and attached to the page. The rail used to float as a
     rounded glass slab with a blur and a drop shadow, which put a decorative
     object between the window edge and the work; a sheet with a rule reads as
     part of the frame instead of as another card. */
  html[data-layout="future"] .sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 64px;
    height: 100dvh;
    align-items: stretch;
    align-self: start;
    margin: 0;
    padding: 12px 10px;
    overflow: visible;
    border: 0;
    border-right: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    box-shadow: none;
    backdrop-filter: none;
    transition: width var(--rail-close), box-shadow var(--rail-close);
  }
  /* Opened by keyboard focus, not by any focus: a mouse click on the pin or a
     group heading left focus inside the rail, and :focus-within then held the
     rail open over the page after the pointer had gone. */
  html[data-layout="future"] .sidebar:hover,
  html[data-layout="future"] .sidebar:has(:focus-visible),
  html[data-layout="future"][data-sidebar-pinned="true"] .sidebar {
    width: 232px;
    transition: width var(--rail-open), box-shadow var(--rail-open);
  }
  /* A shadow means "above the page", which the rail only is while it overlays
     it. Pinned, it is part of the frame. */
  html[data-layout="future"]:not([data-sidebar-pinned="true"]) .sidebar:hover,
  html[data-layout="future"]:not([data-sidebar-pinned="true"]) .sidebar:has(:focus-visible) {
    box-shadow: var(--shadow-pop);
  }
  /* Nothing inside the rail moves when it opens. Every row is laid out at the
     same place and height in both states — icons 22px in, text already beside
     them and clipped — so opening it only changes its width. The icon under the
     pointer stays under the pointer. It used to be the other way round: headings
     and account links appeared from display: none and pushed every row down,
     and icons hopped from centred to left-aligned. */
  html[data-layout="future"] .sidebar .brand {
    min-height: 44px;
    gap: 10px;
    padding: 0 0 0 3px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
  }
  html[data-layout="future"] .sidebar .brand-mark,
  html[data-layout="future"] .sidebar .brand-logo { width: 38px; height: 38px; flex-basis: 38px; }
  /* A fixed basis, or the collapsed rail squeezes the name onto a third line and
     the brand grows taller than it is open. */
  html[data-layout="future"] .sidebar .brand > span:last-child { flex: 0 0 150px; white-space: nowrap; }
  html[data-layout="future"] .future-sidebar-pin {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid var(--future-line);
    border-radius: 12px;
    color: var(--muted);
    background: color-mix(in srgb, var(--mint-bright) 6%, transparent);
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
  }
  html[data-layout="future"] .future-sidebar-pin:hover,
  html[data-layout="future"] .future-sidebar-pin[aria-pressed="true"] {
    color: var(--future-accent-text);
    background: color-mix(in srgb, var(--mint-bright) 12%, transparent);
  }
  html[data-layout="future"] .future-sidebar-pin svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html[data-layout="future"] .future-sidebar-pin span { font-size: .68rem; font-weight: 750; }
  html[data-layout="future"] .main-nav {
    width: 100%;
    margin-top: 18px;
    padding: 0;
    scrollbar-width: none;
  }
  html[data-layout="future"] .main-nav::-webkit-scrollbar { display: none; }
  /* Always in the layout, so opening the rail cannot push the rows beneath it
     down. Collapsed, the heading's text is transparent and a short rule stands
     in for it. The arrow is positioned rather than floated: in a heading with no
     room, a float drops the text onto a second line and changes its height. */
  html[data-layout="future"] .main-nav details > summary {
    position: relative;
    margin: 16px 10px 5px;
    overflow: hidden;
    color: transparent;
    font-size: .6875rem;
    white-space: nowrap;
    transition: color .15s ease;
  }
  html[data-layout="future"] .main-nav details > summary::after { position: absolute; right: 12px; float: none; }
  html[data-layout="future"] .main-nav details > summary::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 20px;
    height: 1px;
    background: var(--rule);
    content: "";
    transition: opacity .15s ease;
  }
  html[data-layout="future"] .main-nav a {
    width: 100%;
    /* Every row shrank again, and the margin dropped to nothing, so the
       standard navigation still fits a 1000px-tall window without scrolling
       now that Meetings is one more entry than the 44px/1px tuning above was
       sized for. */
    height: 36px;
    justify-content: flex-start;
    /* 12px padding, 20px icon, 12px gap: the label starts exactly where the
       collapsed row's clip ends, so not one pixel of it shows. */
    gap: 12px;
    margin: 0;
    padding: 0 12px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .82rem;
    white-space: nowrap;
  }
  html[data-layout="future"] .main-nav a .nav-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    color: currentColor;
  }
  html[data-layout="future"] .main-nav a .nav-icon svg { width: 19px; height: 19px; }
  html[data-layout="future"] .main-nav a:hover {
    color: var(--ink);
    background: var(--sheet-2);
    text-decoration: none;
  }
  html[data-layout="future"] .main-nav a.active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: none;
    font-weight: 600;
  }
  html[data-layout="future"] .main-nav a.active::before {
    position: absolute;
    left: 0;
    width: 2px;
    height: 18px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
    box-shadow: none;
    content: "";
  }
  html[data-layout="future"] .main-nav a { position: relative; }
  html[data-layout="future"] .sidebar-footer { width: 100%; }
  html[data-layout="future"] .user-summary {
    padding-top: 10px;
    padding-left: 5px;
    border-top-color: var(--future-line);
  }
  /* nowrap keeps these the same height at any width; "Sign out" wrapped onto
     two lines in the collapsed rail and lifted the avatar above them. */
  html[data-layout="future"] .sidebar .install-button,
  html[data-layout="future"] .account-links a,
  html[data-layout="future"] .account-links button { overflow: hidden; white-space: nowrap; }

  /* Text fades rather than pops: out quickly, before the closing rail clips it
     mid-word, and in a beat late, once there is room to read it. */
  html[data-layout="future"] .sidebar .brand > span:last-child,
  html[data-layout="future"] .future-sidebar-pin span,
  html[data-layout="future"] .user-summary > span:last-child,
  html[data-layout="future"] .account-links,
  html[data-layout="future"] .sidebar .install-button {
    opacity: 0;
    transition: opacity .15s ease;
  }
  html[data-layout="future"] .sidebar:hover .brand > span:last-child,
  html[data-layout="future"] .sidebar:hover .future-sidebar-pin span,
  html[data-layout="future"] .sidebar:hover .user-summary > span:last-child,
  html[data-layout="future"] .sidebar:hover .account-links,
  html[data-layout="future"] .sidebar:hover .install-button,
  html[data-layout="future"] .sidebar:has(:focus-visible) .brand > span:last-child,
  html[data-layout="future"] .sidebar:has(:focus-visible) .future-sidebar-pin span,
  html[data-layout="future"] .sidebar:has(:focus-visible) .user-summary > span:last-child,
  html[data-layout="future"] .sidebar:has(:focus-visible) .account-links,
  html[data-layout="future"] .sidebar:has(:focus-visible) .install-button,
  html[data-layout="future"][data-sidebar-pinned="true"] .sidebar .brand > span:last-child,
  html[data-layout="future"][data-sidebar-pinned="true"] .future-sidebar-pin span,
  html[data-layout="future"][data-sidebar-pinned="true"] .user-summary > span:last-child,
  html[data-layout="future"][data-sidebar-pinned="true"] .account-links,
  html[data-layout="future"][data-sidebar-pinned="true"] .sidebar .install-button {
    opacity: 1;
    transition: opacity .35s ease .15s;
  }
  html[data-layout="future"] .sidebar:hover .main-nav details > summary,
  html[data-layout="future"] .sidebar:has(:focus-visible) .main-nav details > summary,
  html[data-layout="future"][data-sidebar-pinned="true"] .main-nav details > summary {
    color: var(--muted);
    transition: color .35s ease .15s;
  }
  html[data-layout="future"] .sidebar:hover .main-nav details > summary::before,
  html[data-layout="future"] .sidebar:has(:focus-visible) .main-nav details > summary::before,
  html[data-layout="future"][data-sidebar-pinned="true"] .main-nav details > summary::before { opacity: 0; }
}

html[data-layout="future"] .install-button {
  border-color: var(--future-line-strong);
  color: var(--future-accent-text);
}
html[data-layout="future"] .user-summary strong { color: var(--ink); }
html[data-layout="future"] .user-summary small { color: var(--muted); }
html[data-layout="future"] .account-links a,
html[data-layout="future"] .account-links button {
  border-color: var(--future-line);
  color: var(--muted);
  background: color-mix(in srgb, var(--mint-bright) 5%, transparent);
}
html[data-layout="future"] .account-links a:hover,
html[data-layout="future"] .account-links button:hover {
  border-color: var(--future-line-strong);
  color: var(--ink);
  background: color-mix(in srgb, var(--mint-bright) 10%, transparent);
}

html[data-layout="future"] .main-content {
  position: relative;
  padding: 0 0 44px;
  scrollbar-color: var(--rule-strong) transparent;
}
html[data-layout="future"] .page-stage { padding: 20px 28px 0; }
/* Flush against the top of the window with a rule beneath it, so it reads as
   the frame of the application rather than a floating card of its own. */
html[data-layout="future"] .future-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(280px, 1fr) minmax(235px, .8fr);
  align-items: center;
  gap: 18px;
  max-width: none;
  margin: 0;
  padding: 8px 20px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: var(--sheet);
  box-shadow: none;
  backdrop-filter: none;
}
.future-route-title { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.future-route-title > span { color: var(--ink-3); font-size: .8125rem; }
.future-route-title > span::after { margin-left: 8px; color: var(--rule-strong); content: "/"; }
.future-route-title strong { overflow: hidden; color: var(--ink); font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.future-route-person { display: none; }
.future-mobile-menu { display: none; }
.future-command-trigger {
  min-width: 0;
  height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.future-command-trigger:hover { border-color: var(--rule-strong); color: var(--ink-2); }
.future-command-trigger svg,
.future-theme-toggle svg,
.future-mobile-menu svg,
.future-command-card svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.future-command-trigger span { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.future-topbar kbd,
.future-command-card kbd {
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-3);
  background: var(--sheet);
  font-family: inherit;
  font-size: .6875rem;
  box-shadow: none;
}
.future-top-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.future-connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: .6875rem;
  font-weight: 600;
}
.future-connection-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); box-shadow: none; }
.future-connection-pill.offline i { background: var(--flag); box-shadow: none; }
.future-theme-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.future-theme-toggle:hover { color: var(--ink); background: var(--paper); }
.future-user-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px 3px 3px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: transparent;
  transition: background .12s ease;
}
.future-user-chip:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
.future-user-chip > span:first-child {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  font-size: .6875rem;
  font-weight: 700;
}
.future-user-chip > span:last-child { min-width: 0; display: grid; }
.future-user-chip strong,
.future-user-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.future-user-chip strong { font-size: .75rem; font-weight: 600; line-height: 1.3; }
.future-user-chip small { color: var(--ink-3); font-size: .6875rem; line-height: 1.3; }

/* Notification centre */
html[data-layout="future"] .notification-center { position: relative; display: block; }
.notification-bell {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.notification-bell svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notification-bell:hover { color: var(--ink); background: var(--paper); }
.notification-bell[data-state="alert"] {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: none;
}
.notification-bell[data-state="alert"] svg {
  transform-origin: 50% 15%;
  animation: notification-swing 2.6s ease-in-out infinite;
}
@keyframes notification-swing {
  0%, 62%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(11deg); }
  72% { transform: rotate(-9deg); }
  78% { transform: rotate(6deg); }
  84% { transform: rotate(-4deg); }
  90% { transform: rotate(0deg); }
}
.notification-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  color: var(--accent-ink);
  background: var(--flag);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--sheet);
}
.notification-count[hidden] { display: none; }
.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: min(400px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 130px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--sheet);
  box-shadow: var(--shadow-pop);
}
.notification-panel[hidden] { display: none !important; }
.notification-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--rule);
}
.notification-panel > header h2 { margin: 0; color: var(--ink); font-size: .9375rem; font-weight: 600; }
.notification-panel > header .eyebrow { margin-bottom: 2px; }
.notification-list { overflow-y: auto; padding: 6px; }
.notification-empty { padding: 24px 16px; color: var(--ink-2); font-size: .8125rem; text-align: center; }
.notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.notification-item:hover { background: var(--accent-soft); }
.notification-item + .notification-item { border-top: 1px solid var(--rule); }
.notification-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: .8125rem;
}
.notification-open {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.notification-open strong { color: var(--ink); font-size: .875rem; font-weight: 600; }
.notification-open small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: .8125rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.notification-open em {
  color: var(--ink-3);
  font-size: .75rem;
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.notification-item.unread .notification-open strong::after {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--flag);
  vertical-align: middle;
  content: "";
}
.notification-item.kind-meeting .notification-icon,
.notification-item.kind-visit .notification-icon { background: var(--accent-soft); }
.notification-item.kind-ticket .notification-icon { background: var(--danger-soft); }
.notification-item.kind-task .notification-icon { background: var(--positive-soft); }
.notification-dismiss {
  align-self: center;
  padding: 5px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: none;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.notification-dismiss:hover { color: var(--ink); border-color: var(--ink-3); background: var(--sheet-2); }
.notification-dismiss:disabled { opacity: .5; cursor: default; }
/* "Remind me later": a quiet second line under the text, clearer on hover. */
.notification-snooze { grid-column: 2 / -1; display: flex; gap: 6px; opacity: .55; transition: opacity .12s ease; }
.notification-item:hover .notification-snooze,
.notification-snooze:focus-within { opacity: 1; }
.notification-snooze button {
  padding: 2px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: none;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.notification-snooze button:hover { color: var(--ink); border-color: var(--ink-3); background: var(--sheet-2); }
.notification-join {
  align-self: center;
  padding: 5px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.notification-panel > footer {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  font-size: .75rem;
}
.notification-panel > footer a { color: var(--accent); font-weight: 600; }

/* No entrance animation. A fade-and-slide on every page load is motion nobody
   asked for, and it delayed the one thing the page is opened to read. The
   keyframes stay defined so nothing that still names them breaks. */
html[data-layout="future"] .page-stage {
  max-width: 1580px;
  margin: 0 auto;
}
html[data-layout="future"] .personal-task-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
html[data-layout="future"] .personal-task-layout > .panel {
  width: 100%;
  min-height: 100%;
  align-self: stretch;
}
html[data-layout="future"] .personal-task-create {
  position: relative;
  top: auto;
  height: 100%;
}
/* app.css stacks the form above the board below 850px, but the two rules above
   outrank its media query, so on a phone the form and the task board stayed
   squeezed side by side at half the screen each. The stack is restated here. */
@media (max-width: 850px) {
  html[data-layout="future"] .personal-task-layout { grid-template-columns: 1fr; }
  html[data-layout="future"] .personal-task-layout > .panel { min-height: 0; }
  html[data-layout="future"] .personal-task-create { height: auto; }
}
@keyframes future-view-in { from { opacity: 0; transform: translateY(7px); } }
/* The hero header is gone. Every page used to open with a 142px block whose
   title repeated what the breadcrumb two lines above already said; the header
   rule in app.css now puts the title, its description and the page actions on
   one row, and this file only holds the layout's own gutter. */
html[data-layout="future"] .page-header {
  min-height: 0;
  max-width: 1400px;
  padding: 0 0 14px;
}
html[data-layout="future"] .page-header.dashboard-header { min-height: 0; margin-bottom: 18px; padding: 0 0 14px; }
html[data-layout="future"] .page-header.dashboard-header h1 { margin-bottom: 0; }
html[data-layout="future"] .page-header.dashboard-header p { font-size: .8125rem; }
html[data-layout="future"] .eyebrow { color: var(--accent); letter-spacing: 0; }
html[data-layout="future"] .auth-story .eyebrow { color: var(--brand-panel-accent); }
/* Sheets, not floating cards. A panel in the document flow carries a rule and a
   modest radius and nothing else; the shadow that used to sit under every one of
   these is now reserved for the layers that genuinely leave the page. */
html[data-layout="future"] .panel,
html[data-layout="future"] .stat-card,
html[data-layout="future"] .resource-card,
html[data-layout="future"] .department-item-card,
html[data-layout="future"] .personal-task-card,
html[data-layout="future"] .ticket-stat,
html[data-layout="future"] .network-source-card {
  border-color: var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-layout="future"] .panel,
html[data-layout="future"] .stat-card { position: relative; }
html[data-layout="future"] .button { border-radius: var(--radius-sm); }
html[data-layout="future"] .button.primary {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: none;
}
html[data-layout="future"] .button.primary:hover { color: var(--accent-ink); background: var(--accent-hover); }
html[data-layout="future"] .button.secondary {
  border-color: var(--field-border);
  color: var(--ink);
  background: var(--sheet);
}
html[data-layout="future"] .button.secondary:hover { border-color: var(--ink-3); background: var(--sheet-2); }
/* Tick boxes are deliberately NOT in this list, the same trap as .calendar-day
   below: they are drawn in app.css, and because this file loads last the field
   radius here outranked theirs and rounded an 18px checkbox into a circle. */
html[data-layout="future"] input:not([type="checkbox"], [type="radio"]),
html[data-layout="future"] select,
html[data-layout="future"] textarea,
html[data-layout="future"] .data-table select,
html[data-layout="future"] .table-input {
  border-color: var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--sheet);
}
html[data-layout="future"] input:focus,
html[data-layout="future"] select:focus,
html[data-layout="future"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
html[data-layout="future"] .data-table th { color: var(--ink-2); }
html[data-layout="future"] .data-table td { border-color: var(--rule); }
/* .calendar-day is deliberately NOT in this list. It used to be, and because this
   file loads after app.css the flat background here outranked — and silently
   deleted — the month grid's weekend tint, hover and today rules. The grid is the
   one surface whose own stylesheet has the final say on its ground. */
html[data-layout="future"] .manager-team-members,
html[data-layout="future"] .manager-team-summary,
html[data-layout="future"] .holiday-grid > div,
html[data-layout="future"] .phone-sheet,
html[data-layout="future"] .network-file-context-menu {
  border-color: var(--future-line);
  color: var(--ink);
  background: var(--future-panel-solid);
}
html[data-layout="future"] .calendar-day { border-color: var(--rule); color: var(--ink); }

html[data-layout="future"] .future-command-palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding: min(12vh, 100px) 20px 20px;
}
.future-command-palette[hidden] { display: none !important; }
.future-command-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  cursor: default;
}
.future-command-card {
  position: relative;
  width: min(660px, 100%);
  max-height: min(680px, 78vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--sheet);
  box-shadow: var(--shadow-pop-lg);
}
.future-command-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.future-command-card > header input {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
}
.future-command-card h2 { margin: 0; padding: 14px 16px 6px; color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.future-command-results { display: grid; gap: 5px; overflow-y: auto; padding: 4px 10px 14px; }
.future-command-result {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .12s ease, border-color .12s ease;
}
.future-command-result:hover,
.future-command-result:focus-visible {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--accent-soft);
}
.future-command-result .nav-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: var(--radius-sm); color: var(--accent); background: var(--accent-soft); }
.future-command-result .nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.future-command-result > span { display: grid; }
.future-command-result strong { font-size: .875rem; font-weight: 600; }
.future-command-result small { color: var(--ink-3); font-size: .75rem; }
.future-command-empty { padding: 24px 12px; color: var(--ink-2); font-size: .8125rem; text-align: center; }
.future-command-card > footer { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .75rem; }
html[data-layout="future"] body.future-command-open .main-content { overflow: hidden; }

@media (max-width: 1100px) {
  html[data-layout="future"] .future-topbar { grid-template-columns: minmax(150px, .65fr) minmax(240px, 1fr) auto; }
  html[data-layout="future"] .future-user-chip > span:last-child,
  html[data-layout="future"] .future-connection-pill { display: none; }
}

@media (max-width: 850px) {
  html[data-layout="future"] .app-shell { display: block; }
  html[data-layout="future"] .sidebar,
  html[data-layout="future"] .sidebar:hover,
  html[data-layout="future"] .sidebar:focus-within {
    position: fixed;
    inset: 12px auto 12px 12px;
    z-index: 100;
    width: min(330px, calc(100vw - 24px));
    height: auto;
    min-height: 0;
    align-items: stretch;
    margin: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--sheet);
    box-shadow: var(--shadow-pop-lg);
    transform: translateX(calc(-100% - 26px));
    transition: transform .22s ease;
  }
  html[data-layout="future"] .sidebar.mobile-nav-open { transform: translateX(0); }
  html[data-layout="future"] .sidebar .brand { width: max-content; border: 0; background: transparent; box-shadow: none; }
  html[data-layout="future"] .sidebar .brand > span:last-child { display: flex; }
  html[data-layout="future"] .main-nav { margin-top: 14px; }
  html[data-layout="future"] .main-nav details > summary { display: block; }
  html[data-layout="future"] .main-nav a {
    height: auto;
    justify-content: flex-start;
    padding: 9px 12px;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    background: transparent;
    font-size: .875rem;
  }
  html[data-layout="future"] .mobile-nav-toggle {
    border-color: var(--rule-strong);
    color: var(--ink);
    background: var(--sheet);
  }
  html[data-layout="future"] .main-content { padding: 0 0 calc(104px + env(safe-area-inset-bottom)); }
  html[data-layout="future"] .page-stage { padding: 14px 14px 0; }
  /* Flush on the phone too. A rounded white card floating under the status bar
     reads as a widget on top of the page; the bar is the frame, so it is full
     bleed with a rule under it exactly as on the desktop. The dock below still
     floats — that one is a control placed for the thumb, not chrome. */
  html[data-layout="future"] .future-topbar {
    top: 0;
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) 40px auto;
    gap: 9px;
    margin-bottom: 0;
    padding: 7px 12px;
    border-radius: 0;
  }
  .future-mobile-menu { display: none; }
  .future-route-title > span { display: none; }
  .future-route-title > strong { font-size: .8125rem; }
  /* The user chip is hidden at this width, so on Overview the bar's title names
     the person signed in rather than repeating the page heading under it. */
  .future-route-title .future-route-page { display: none; }
  .future-route-title .future-route-person { display: inline; }
  .future-command-trigger {
    width: 40px;
    height: 40px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    padding: 0;
  }
  .future-command-trigger span,
  .future-command-trigger kbd { display: none; }
  html[data-layout="future"] .future-theme-toggle { width: 38px; height: 38px; flex-basis: 38px; }
  html[data-layout="future"] .future-user-chip { display: none; }
  html[data-layout="future"] .page-header { min-height: 0; padding: 2px 3px 12px; }
  html[data-layout="future"] .page-header h1 { font-size: 1.25rem; }
  html[data-layout="future"] .page-header.dashboard-header { min-height: 0; padding: 2px 3px 8px; }
  html[data-layout="future"] .page-header.dashboard-header h1 { font-size: 1.25rem; }
}

@media (max-width: 620px) {
  html[data-layout="future"] .future-topbar { grid-template-columns: minmax(0, 1fr) 40px auto; }
  .notification-panel { position: fixed; top: 72px; right: 12px; left: 12px; width: auto; }
  .future-command-card > footer span:last-child { display: none; }
}

/* app.css stacks .page-header into a column at 600px and asks for flex-start,
   but the flex-end above outranks it, so the stacked block sits against the
   right edge. Every other page hides this because its title is long enough to
   fill the width; "Overview" is short enough to show it. Stretch makes the
   title block full width, which left-aligns it whatever the title's length. */
@media (max-width: 600px) {
  html[data-layout="future"] .page-header.dashboard-header { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout="future"] .page-stage { animation: none; }
  /* Through the variables, because the open states set their own transition
     at a specificity a plain `transition: none` here would lose to. */
  html[data-layout="future"] .app-shell { --rail-open: 0s; --rail-close: 0s; }
  html[data-layout="future"] .sidebar { transition: none; }
  .notification-bell[data-state="alert"] svg { animation: none; }
}

@media print {
  html[data-layout="future"] .future-topbar,
  html[data-layout="future"] .notification-center,
  html[data-layout="future"] .future-command-palette { display: none !important; }
  /* Clearing the ground rather than painting it white: the shorthand resets the
     background to transparent, so the sheet of paper shows through in either
     theme and no colour literal has to live in this file. */
  html[data-layout="future"] body.app-body { background: none !important; }
}

/* Keyboard focus, last word.
   Several components below set `box-shadow` for their own look — the primary
   button's flat fill, the active nav link's inset bar, the ticket filters — and
   because each does it at a higher specificity than the global `:focus-visible`
   in app.css, every one of them was silently erasing its own focus ring. A
   keyboard user had no indicator at all on the main call to action.
   This block sits at the end of the last stylesheet and restates the ring at a
   specificity that beats all of them, so the rule is: components own their
   resting look, this owns focus. */
html[data-layout="future"] .button:focus-visible,
html[data-layout="future"] .button.primary:focus-visible,
html[data-layout="future"] .button.secondary:focus-visible,
html[data-layout="future"] .icon-button:focus-visible,
html[data-layout="future"] .text-button:focus-visible,
html[data-layout="future"] .main-nav a:focus-visible,
html[data-layout="future"] .main-nav a.active:focus-visible,
html[data-layout="future"] .ticket-stat:focus-visible,
html[data-layout="future"] .notification-bell:focus-visible,
html[data-layout="future"] .future-command-trigger:focus-visible,
html[data-layout="future"] .future-theme-toggle:focus-visible,
html[data-layout="future"] .future-user-chip:focus-visible,
html[data-layout="future"] .future-sidebar-pin:focus-visible,
html[data-layout="future"] .knowledge-category:focus-visible,
html[data-layout="future"] .calendar-day:focus-visible,
html[data-layout="future"] .mobile-dock a:focus-visible,
html[data-layout="future"] .mobile-dock button:focus-visible,
html[data-layout="future"] .switch input:focus-visible + span,
html[data-layout="future"] input:focus-visible,
html[data-layout="future"] select:focus-visible,
html[data-layout="future"] textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
/* The grid cell already draws a 1px inset ring to mark hover; on keyboard focus
   it needs the same ring everything else gets, so both are stated together. */
html[data-layout="future"] .calendar-day:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent), var(--focus);
}
/* The toggle's real input is a 1px sliver behind the track, so the ring has to be
   drawn on the track it controls. */
html[data-layout="future"] .switch input:focus-visible + span { box-shadow: var(--focus); }