/* Workspace navigation (docs/features/navigation.md). Signed in, a charcoal
 * sidebar sits beside the page from 48rem and collapses to an icon rail
 * (users.sidebar_collapsed, on body as data-sidebar="collapsed"). Narrower
 * screens get a top bar and a slide-out drawer, a native dialog with the same
 * navigation. The sidebar is dark in both themes, so its text and dividers are
 * literal colors; flyouts and the account menu use the page's tokens.
 *
 * Rows keep the same left padding at both widths, so icons stay where they are
 * when the sidebar collapses: each icon is centered in the 4.5rem rail. */
/* Signed-out pages' white, 60px minimum header with the centered Align or
 * school logo; signed-in pages use the top bar below.
 * In the dark theme the logos sit on a light plate, since their colors are
 * chosen for a white background. */
.workspace .workspace-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.workspace .workspace-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: min(var(--content-width), 100%); min-height: 3.75rem; margin: auto; padding: .5rem 2.125rem; }
.workspace .brand { display: flex; align-items: center; justify-self: center; min-width: 0; max-width: 100%; min-height: max(2.75em, 44px); padding: .25rem .5rem; border-radius: var(--radius); background: var(--logo-plate); }
.workspace .brand img { display: block; width: 8.5625rem; max-width: 100%; height: auto; }
.workspace .account-navigation { display: flex; justify-content: flex-end; min-width: 0; }
.workspace .account-navigation a, .workspace .account-navigation button { display: inline-flex; align-items: center; justify-content: center; min-height: max(2.75em, 44px); padding: .5rem; border: 0; border-radius: var(--radius); color: var(--ink); background: transparent; font: inherit; text-transform: none; letter-spacing: normal; text-decoration: none; overflow-wrap: normal; }
.workspace .account-navigation a:hover, .workspace .account-navigation button:hover { background: var(--canvas); text-decoration: underline; }

.workspace .brand .school-logo { max-height: 3rem; object-fit: contain; }

@media (max-width: 35rem) {
  .workspace .workspace-header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5em; padding-inline: 1em; }
  .workspace .brand img { width: min(6rem, 25vw); }
}

/* Rows shared by the sidebar and the drawer (.sidebar-panel). */
.workspace .sidebar-panel { --sidebar-line: rgb(255 255 255 / 16%); --sidebar-hover: rgb(255 255 255 / 8%); --sidebar-active: rgb(255 255 255 / 14%); --sidebar-indicator: color-mix(in oklab, var(--action) 45%, #fff); color: #fff; }
.workspace .sidebar-panel :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.workspace .sidebar-nav { padding: .5rem .625rem; }
.workspace .sidebar-group-label { margin: 0; padding: 1rem .75rem .375rem; color: var(--sidebar-muted); font-size: .6875rem; font-weight: 700; line-height: 1.5; letter-spacing: .09rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.workspace .sidebar-list, .workspace .sidebar-sublist { margin: 0; padding: 0; list-style: none; }
.workspace .sidebar-row { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; min-height: 2.75rem; margin-block: 1px; padding: .5rem .75rem .5rem .875rem; border: 0; border-radius: .5rem; color: #fff; background: transparent; font: inherit; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-align: left; text-decoration: none; text-transform: none; overflow-wrap: normal; cursor: pointer; }
.workspace .sidebar-row:hover { color: #fff; background: var(--sidebar-hover); text-decoration: none; }
.workspace .sidebar-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--sidebar-muted); }
.workspace .sidebar-row:hover .sidebar-icon, .workspace .sidebar-row[aria-current] .sidebar-icon, .workspace .sidebar-section.is-current > .sidebar-row .sidebar-icon { color: #fff; }
.workspace .sidebar-label { flex: 1 1 auto; min-width: 0; }
.workspace .sidebar-chevron, .workspace .parent-menu-chevron { flex: none; width: 1rem; height: 1rem; color: var(--sidebar-muted); }
.workspace .sidebar-section > .sidebar-row[aria-expanded="true"] .sidebar-chevron { transform: rotate(90deg); }
/* The current page, and the section holding it: a lighter row and a bar in
 * a tint of the school color. */
.workspace .sidebar-row[aria-current], .workspace .sidebar-section.is-current > .sidebar-row { background: var(--sidebar-active); }
.workspace .sidebar-row[aria-current]::before, .workspace .sidebar-section.is-current > .sidebar-row::before { position: absolute; inset-block: .6875rem; left: 0; width: 3px; border-radius: 3px; background: var(--sidebar-indicator); content: ""; }
.workspace .sidebar-flyout { display: none; }
.workspace .sidebar-section[data-open] > .sidebar-flyout { display: block; }
.workspace .sidebar-flyout-title { display: none; }
/* Section links line up with the section's label. */
.workspace .sidebar-sublist { padding: 0 0 .375rem 2.25rem; }
.workspace .sidebar-subrow { display: flex; align-items: center; min-height: 2.25rem; margin-block: 1px; padding: .375rem .75rem .375rem .875rem; border-radius: .4375rem; color: var(--sidebar-muted); line-height: 1.3; text-decoration: none; }
.workspace .sidebar-subrow:hover { color: #fff; background: var(--sidebar-hover); text-decoration: none; }
.workspace .sidebar-subrow[aria-current="page"] { color: #fff; background: var(--sidebar-active); font-weight: 700; }

/* Desktop sidebar. The page scrolls; the sidebar stays in view and its
 * navigation scrolls on its own. */
.workspace .sidebar { --sidebar-width: 16rem; --rail-width: 4.5rem; position: sticky; top: 0; z-index: 10; flex: none; width: var(--sidebar-width); height: 100vh; height: 100dvh; background: var(--drawer); overflow: hidden; }
.workspace .sidebar-inner { display: flex; flex-direction: column; width: var(--sidebar-width); height: 100%; }
/* A fixed height, so a two-line school name does not move the rows below
 * when the sidebar collapses. */
.workspace .sidebar-head { display: flex; flex: none; align-items: center; gap: .75rem; height: 4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--sidebar-line); }
.workspace .sidebar-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5625rem; color: var(--on-action); background: var(--action); font-weight: 700; letter-spacing: .0625rem; }
/* An uploaded favicon fits inside the same square on a white plate, since
 * school icons are usually made for light backgrounds. Without a favicon the
 * initials remain; the logo is never used here. The image area is 2.125rem;
 * SchoolSettingsController::FAVICON_SIDES requires favicons large enough for
 * it on 3x screens, so check that when resizing the mark. */
.workspace .sidebar-mark.has-favicon { padding: .1875rem; background: #fff; }
.workspace .sidebar-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.workspace .sidebar-school { display: -webkit-box; font-weight: 700; line-height: 1.25; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.workspace .sidebar .sidebar-nav { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* When the menu is taller than the sidebar, its scrollbar is hidden and its
 * edges fade into the sidebar instead: sticky gradients at its top and bottom,
 * each shown by a scroll-state query while items lie beyond that edge, so a
 * menu that fits has none. They are gradients rather than a mask on the menu,
 * which would hide the rail's flyouts. Scroll padding keeps a focused item
 * clear of them. Browsers without scroll-state queries, and forced colors,
 * keep the thin scrollbar. */
@supports (container-type: scroll-state) {
  @media not (forced-colors: active) {
    .workspace .sidebar .sidebar-nav { container-type: scroll-state; scroll-padding-block: 1.5rem; scrollbar-width: none; }
    .workspace .sidebar .sidebar-nav::before, .workspace .sidebar .sidebar-nav::after { position: sticky; z-index: 1; display: block; height: 1.5rem; margin-inline: -.625rem; content: ""; opacity: 0; pointer-events: none; transition: opacity .15s; }
    /* Sticky offsets count from inside the menu's .5rem padding, so offset
     * by it to reach the menu's edges. */
    .workspace .sidebar .sidebar-nav::before { top: -.5rem; margin-bottom: -1.5rem; background: linear-gradient(var(--drawer), transparent); }
    .workspace .sidebar .sidebar-nav::after { bottom: -.5rem; margin-top: -1.5rem; background: linear-gradient(transparent, var(--drawer)); }
    @container scroll-state(scrollable: top) {
      .workspace .sidebar .sidebar-nav::before { opacity: 1; }
    }
    @container scroll-state(scrollable: bottom) {
      .workspace .sidebar .sidebar-nav::after { opacity: 1; }
    }
  }
}
.workspace .sidebar-footer { flex: none; padding: .5rem .625rem .625rem; border-top: 1px solid var(--sidebar-line); }
.workspace .sidebar-footer form { margin: 0; }
.workspace .sidebar .when-collapsed, .workspace[data-sidebar="collapsed"] .sidebar .when-expanded { display: none; }
.workspace[data-sidebar="collapsed"] .sidebar .when-collapsed { display: revert; }

/* The collapsed rail. The inner column narrows at once, so rows never reflow,
 * and the sidebar's width animates to meet it. Labels stay in the
 * accessibility tree as each control's name. Group labels keep their space
 * as dividers, so the rows below do not move up. */
.workspace[data-sidebar="collapsed"] .sidebar, .workspace[data-sidebar="collapsed"] .sidebar-inner { width: var(--rail-width); }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-chevron { display: none; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-group-label { color: transparent; background: linear-gradient(var(--sidebar-line), var(--sidebar-line)) center / calc(100% - 1rem) 1px no-repeat; user-select: none; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-section > .sidebar-flyout { display: none; }

/* Rail flyouts (sidebar_controller.js), fixed beside the item's row. A
 * transparent border bridges the gap, so the pointer can move onto them. */
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-item:not(.sidebar-section).is-flyout-open > .sidebar-row .sidebar-label { position: fixed; top: var(--flyout-middle); left: var(--flyout-left); z-index: 1; width: max-content; max-width: 16rem; height: auto; margin: 0; padding: .375rem .75rem; border-left: .5rem solid transparent; border-radius: .75rem .4375rem .4375rem .75rem; background: var(--ink) padding-box; color: var(--surface); clip-path: none; overflow: visible; white-space: normal; transform: translateY(-50%); box-shadow: 0 .25rem .875rem rgb(0 0 0 / 20%); }
.workspace[data-sidebar="collapsed"] .sidebar .is-flyout-open > .sidebar-flyout { display: block; position: fixed; top: var(--flyout-top); left: var(--flyout-left); z-index: 1; padding-left: .5rem; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-flyout-panel { padding: .375rem; border: 1px solid var(--line); border-radius: .625rem; color: var(--ink); background: var(--surface); box-shadow: 0 .625rem 1.75rem rgb(0 0 0 / 18%), 0 1px 3px rgb(0 0 0 / 20%); min-width: 14.5rem; max-width: min(20rem, calc(100vw - var(--rail-width) - 2rem)); max-height: calc(100vh - 1rem); overflow-y: auto; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-flyout-title { display: block; margin: 0; padding: .625rem .625rem .375rem; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .09rem; text-transform: uppercase; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-sublist { padding: 0; }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-subrow { padding-left: .625rem; color: var(--ink); }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-subrow:hover { color: var(--ink); background: var(--canvas); }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-subrow[aria-current="page"] { color: var(--ink); background: var(--selected); }
.workspace[data-sidebar="collapsed"] .sidebar .sidebar-flyout-panel :focus-visible { outline-color: var(--focus); }

/* Staff viewing a parent: the rail's button expands the staff menu over the
 * parent's menu (data-sidebar="peek", sidebar_controller.js). The negative
 * margin keeps the rail's place, so the parent's menu and the page stay put. */
.workspace[data-sidebar="peek"] .sidebar { margin-right: calc(var(--rail-width) - var(--sidebar-width)); box-shadow: .625rem 0 2rem rgb(0 0 0 / 28%); }

/* A parent's menu as staff see it (_parent_menu): beside the staff rail from
 * 48rem, and first in the phone drawer. --parent-panel, white or a grey lighter
 * than the staff menu, sets the two apart. School colors are only borders on
 * it, since dark shades can fall below 4.5:1 there; links sit on --canvas in
 * the family details (docs/runbooks/accessibility.md#color-themes). --line
 * vanishes on the dark grey, so dividers mix from the text color. */
.workspace .parent-panel { --sidebar-muted: var(--muted); --sidebar-line: color-mix(in srgb, currentColor 18%, transparent); --sidebar-hover: var(--row-hover); --sidebar-active: var(--selected); --sidebar-indicator: var(--action); color: var(--ink); background: var(--parent-panel); }
.workspace .parent-panel :focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.workspace .parent-panel .sidebar-row, .workspace .parent-panel .sidebar-row:hover { color: var(--ink); }
.workspace .parent-panel .sidebar-row:hover .sidebar-icon, .workspace .parent-panel .sidebar-row[aria-current] .sidebar-icon { color: var(--ink); }
.workspace .workspace-shell > .parent-panel { position: sticky; top: 0; z-index: 9; display: flex; flex: none; flex-direction: column; width: 16rem; height: 100vh; height: 100dvh; border-right: 1px solid var(--sidebar-line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* As tall as the top bar beside it. */
.workspace .parent-menu-top { display: flex; flex: none; align-items: center; gap: .75rem; min-height: calc(4rem - 1px); padding: .5rem 1rem; border-bottom: 1px solid var(--sidebar-line); }
.workspace .parent-menu-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5625rem; color: #1c4e66; background: #dcebef; font-weight: 700; letter-spacing: .0625rem; }
.workspace .parent-menu-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.workspace .parent-menu-eyebrow { color: var(--sidebar-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .09rem; text-transform: uppercase; }
.workspace .parent-menu-name { font-size: 1rem; font-weight: 700; }
.workspace .parent-menu-actions { padding: .75rem 1rem 0; }
.workspace .parent-menu-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .75rem; border: 2px solid var(--action); border-radius: var(--radius); color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; }
.workspace .parent-menu-action:hover { color: var(--on-action); background: var(--action); text-decoration: none; }
.workspace .parent-menu-action .icon { width: 1rem; height: 1rem; }
.workspace .parent-menu-details { margin: .5rem .625rem 0; }
.workspace .parent-menu-details summary { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .25rem .375rem; border-radius: .4375rem; font-weight: 700; cursor: pointer; list-style: none; }
.workspace .parent-menu-details summary::-webkit-details-marker { display: none; }
.workspace .parent-menu-details summary:hover { background: var(--sidebar-hover); }
.workspace .parent-menu-details[open] .parent-menu-chevron { transform: rotate(90deg); }
.workspace .parent-menu-details dl { margin: .25rem 0 0; padding: .625rem .75rem; border-radius: .4375rem; background: var(--canvas); font-size: .8125rem; }
.workspace .parent-menu-details dt { margin: 0; color: var(--muted); font-weight: 700; }
.workspace .parent-menu-details dd { margin: 0 0 .5rem; }
.workspace .parent-menu-details dd:last-child { margin-bottom: 0; }
.workspace .parent-menu-details ul { margin: 0; padding: 0; list-style: none; }
.workspace .parent-panel .sidebar-nav { margin-top: .5rem; border-top: 1px solid var(--sidebar-line); }

/* Account actions at the foot of the phone drawer (_account_actions).
 * Colors follow the surrounding text, light or dark. */
.workspace .account-summary { margin-bottom: .375rem; padding: .5rem .625rem .625rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.workspace .account-summary p { margin: 0; }
.workspace .account-name { font-weight: 700; }
.workspace .account-email { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.workspace .drawer-footer .account-email { color: var(--sidebar-muted); }
.workspace .theme-toggle { margin: 0; }
.workspace .drawer-footer .button_to { display: block; }
.workspace .theme-toggle button, .workspace .account-sign-out { gap: .75rem; }
.workspace .account-link { display: flex; }
.workspace .account-sign-out .icon { width: 1.25rem; height: 1.25rem; }
/* Dark theme toggle (color_scheme_controller.js). Its name stays "Dark theme";
 * the switch and its On/Off text show aria-pressed. Browsers without
 * light-dark() keep the light theme (workspace_theme.css), so they get no toggle. */
.workspace .theme-toggle-switch { position: relative; flex: none; width: 2.25rem; height: 1.25rem; margin-left: auto; border: 2px solid currentColor; border-radius: .625rem; }
.workspace .theme-toggle-switch::after { position: absolute; top: .125rem; left: .125rem; width: .75rem; height: .75rem; border-radius: 50%; background: currentColor; content: ""; }
.workspace .theme-toggle [aria-pressed="true"] .theme-toggle-switch::after { left: 1.125rem; }
.workspace .theme-toggle-state { min-width: 1.75em; }
.workspace .theme-toggle-state::before { content: "Off"; }
.workspace .theme-toggle [aria-pressed="true"] .theme-toggle-state::before { content: "On"; }
@supports not (color: light-dark(#000, #fff)) {
  .workspace .theme-toggle { display: none; }
}

/* Top bar: search and account controls. It stays at the top
 * while the page scrolls, except on short screens, and the page keeps room
 * beneath it so keyboard focus is never hidden behind it (WCAG 2.4.11). */
/* The wrapper only carries navigation_controller.js; without a box of its own
 * the bar sticks within the whole page column. */
.workspace .workspace-navigation { display: contents; }
.workspace .workspace-topbar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.workspace .workspace-topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; min-height: calc(4rem - 1px); padding: .5rem 1.25rem; }
:root:has(.workspace-topbar) { scroll-padding-top: 5rem; }
@media (height < 30rem) {
  .workspace .workspace-topbar { position: static; }
  :root:has(.workspace-topbar) { scroll-padding-top: 0; }
}
.workspace .breadcrumbs { min-width: 0; margin-bottom: 1.25rem; }
.workspace .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0; padding: 0; color: var(--muted); font-weight: 700; list-style: none; }
.workspace .breadcrumbs li { display: flex; align-items: center; gap: .5rem; }
.workspace .breadcrumbs li + li::before { color: var(--border); font-weight: 400; content: "/" / ""; }
.workspace .breadcrumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--muted); }
.workspace .breadcrumbs a:hover { color: var(--action); }
.workspace .breadcrumbs [aria-current="page"] { color: var(--ink); }

/* Phone menu button and drawer. */
.workspace .workspace-topbar .menu-trigger { flex: none; width: max(2.75em, 44px); min-width: max(2.75em, 44px); margin-left: -.625rem; padding: .625rem; border: 0; color: var(--ink); background: transparent; }
.workspace .workspace-topbar .menu-trigger:hover { color: var(--ink); background: var(--canvas); }
.workspace .menu-trigger .icon, .workspace .menu-close .icon { width: 1.5rem; height: 1.5rem; }
.workspace.menu-is-open { overflow: hidden; }
.workspace .workspace-drawer { position: fixed; inset: 0 auto 0 0; width: min(18rem, 100%); max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; margin: 0; padding: 0; border: 0; color: #fff; background: var(--drawer); box-shadow: 2px 2px 4px rgb(0 0 0 / 38%); overflow-y: auto; overscroll-behavior: contain; }
.workspace .workspace-drawer[open], .workspace .workspace-drawer[open] > .sidebar-panel { display: flex; flex-direction: column; }
.workspace .workspace-drawer > .sidebar-panel { flex: 1 0 auto; }
.workspace .workspace-drawer::backdrop { background: var(--backdrop); }
.workspace .drawer-heading { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .75rem .625rem .75rem 1rem; border-bottom: 1px solid var(--sidebar-line); }
.workspace .drawer-school { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 700; line-height: 1.25; }
.workspace .workspace-drawer .menu-close { flex: none; width: 2.75rem; padding: .625rem; border: 0; color: #fff; background: transparent; }
.workspace .workspace-drawer .menu-close:hover { color: #fff; background: var(--sidebar-hover); }
.workspace .drawer-footer { margin-top: auto; padding: .5rem .625rem 1rem; border-top: 1px solid var(--sidebar-line); }
/* On a parent's pages: the parent's menu or the staff menu, each with a
 * button that switches to the other (navigation_controller.js). */
.workspace .drawer-view { display: flex; flex: 1 0 auto; flex-direction: column; }
.workspace .drawer-switch { width: auto; margin: .625rem .625rem 0; border: 1px solid var(--sidebar-line); }

@media (prefers-reduced-motion: no-preference) {
  .workspace .sidebar { transition: width .18s ease, margin-right .18s ease; }
  .workspace .sidebar-chevron, .workspace .parent-menu-chevron { transition: transform .15s ease; }
  .workspace .workspace-drawer[open] { animation: workspace-drawer-enter 200ms ease-out; }
  @keyframes workspace-drawer-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}

/* The sidebar replaces the drawer from 48rem. Phones show only the current
 * page's crumb; the rest stay for screen readers. */
@media (width < 48rem) {
  .workspace .sidebar, .workspace .workspace-shell > .parent-panel { display: none; }
  .workspace .workspace-topbar-inner { padding-inline: 1rem; }
  .workspace .breadcrumbs li:not([aria-current]) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .workspace .breadcrumbs li[aria-current]::before { display: none; }
}
@media (width >= 48rem) {
  .workspace .workspace-topbar .menu-trigger { display: none; }
}

/* Windows high contrast replaces backgrounds, so mark the current page and
 * keep the rail's flyouts outlined. */
@media (forced-colors: active) {
  .workspace .sidebar-row[aria-current]::before, .workspace .sidebar-section.is-current > .sidebar-row::before { background: CanvasText; forced-color-adjust: none; }
  .workspace .sidebar-subrow[aria-current="page"] { text-decoration: underline; }
  .workspace[data-sidebar="collapsed"] .sidebar .sidebar-group-label { visibility: hidden; }
  .workspace[data-sidebar="collapsed"] .sidebar .sidebar-item:not(.sidebar-section).is-flyout-open > .sidebar-row .sidebar-label { border: 1px solid CanvasText; }
}

@media print {
  .workspace .sidebar, .workspace .workspace-shell > .parent-panel, .workspace .workspace-navigation { display: none; }
}