/* Cura Core · shell.css
   The portal frame, dressed as the manual's cover and its first page.
   Sidebar (the cover: flat ink, cream text, a printed mint margin rule), nav,
   agency card, top bar (the paper continuing, blurred), "Viewing as" switcher,
   menus, user menu, content area, ruled page head, breadcrumbs, mobile drawer.
   Tokens come from tokens.css; base components (.btn, .badge, .card, .icon-btn)
   from components.css. Only colour overrides for those live here. */

/* ---------------- portal shell ---------------- */

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* ---------------- the cover: sidebar ---------------- */

.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px;
  overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
  background: var(--cover); color: var(--cover-ink); border-right: 1px solid rgba(255, 255, 255, .06);
}
/* scrollbar-gutter: stable is deliberately not set: on Windows it reserves a visible 11-17px gutter and the cover's
   right margin stops matching the left one. The sidebar only scrolls on very short desktop viewports. */

/* Brand: the serif wordmark. The light version serves the website header, the
   sign-in panel and the footer too (those files override size and colour). */
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; text-decoration: none !important; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 21px; letter-spacing: -.005em; line-height: 1; white-space: nowrap; }
.brand-name .core { color: var(--teal-ink); }
.brand-name small {
  display: block; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 6px; line-height: 1.2;
}
.side .brand, .side .brand:hover { color: #fff; border-bottom: 1px solid var(--cover-line); margin-bottom: 6px; }
.side .brand-name .core { color: var(--mint); }
.side .brand-name small { color: var(--cover-label); }

/* Agency card: a hairline entry, not a box. It follows the brand's rule, so its own top rule is dropped there. */
.agency-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 6px; margin: 0 0 6px;
  background: transparent; border: 0; border-top: 1px solid var(--cover-line); border-bottom: 1px solid var(--cover-line); border-radius: 0;
}
.brand + .agency-card { border-top: 0; margin-top: -6px; }
.agency-card .avatar { width: 36px; height: 36px; border-radius: 6px; background: #fff; color: var(--cover); font-size: 13px; font-weight: 600; }
.agency-card .avatar img { border: 0; padding: 3px; }
.agency-card .name { font-weight: 600; font-size: 14px; line-height: 1.25; color: #fff; }
.agency-card .pkg { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Package tags on the cover are outline tags; their icons inherit. */
.side .badge-blue { background: transparent; color: var(--cover-ink); border-color: var(--cover-line-2); }
.side .badge-gold { background: transparent; color: var(--gold-cover-text); border-color: rgba(243, 211, 149, .45); }

/* Avatars: the default square tile (person or agency) and the white logo slot. */
.avatar {
  width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; font-weight: 600; font-size: 13px;
  background: var(--blue-soft); color: var(--blue-ink); overflow: hidden; flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; border-radius: 6px; border: 1px solid var(--line); }
/* The page-head agency tile follows the mode accent like .person .avatar-org (ink on warm grey in the
   console, blue in the portal), so the console head does not carry the portal's blue. */
.avatar-lg { width: 46px; height: 46px; border-radius: 6px; font-size: 16px; background: var(--accent-soft); color: var(--accent-ink); }

/* Section labels */
.nav-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cover-label); padding: 22px 10px 8px; }
.nav > .nav-label:first-child { padding-top: 12px; }

/* Items */
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; min-height: 40px; margin: 1px 0; border-radius: 6px;
  color: var(--cover-ink); font-weight: 500; font-size: 14.5px; line-height: 1.3; text-decoration: none !important;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav a:hover { background: var(--cover-hover); color: #fff; }
.nav a:hover .i { opacity: 1; }
.nav a.on { background: var(--cover-active); color: #fff; font-weight: 600; }
/* The printed margin rule: a crisp 2px mint line at the cover's edge, not a rounded blob. */
.nav a.on::before { content: ''; position: absolute; left: -16px; top: 7px; bottom: 7px; width: 2px; border-radius: 0; background: var(--mint); }
.nav a .i { width: 18px; height: 18px; opacity: .85; transition: opacity var(--dur-1) var(--ease); }
.nav a.on .i { color: var(--mint); opacity: 1; }
.nav a .lock { margin-left: auto; width: 14px; height: 14px; color: var(--gold-lock); opacity: 1; }
.nav a.on .lock { color: var(--gold-lock); }
.nav a .pill {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--mint); color: var(--cover); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums lining-nums;
}
.nav a:focus-visible { outline-offset: -2px; }

/* Demo help: a hairline box */
.side-help {
  padding: 14px; margin-bottom: 12px; border-radius: 6px; background: transparent; border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px; line-height: 1.45; color: var(--cover-ink);
}
.side-help strong { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; }
.side-help b { color: var(--cover-cream); }

/* Who footer */
.side-foot { margin-top: auto; padding-top: 14px; }
.who { display: flex; align-items: center; gap: 10px; padding: 14px 6px 4px; border: 0; border-top: 1px solid var(--cover-line); border-radius: 0; }
.who .avatar {
  width: 34px; height: 34px; border-radius: 50%; font-size: 12.5px; font-weight: 600;
  background: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.shell-admin .who .avatar { background: var(--cover-3); }
.who .grow { flex: 1; min-width: 0; }
.who .name { font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .role { font-size: 12.5px; color: var(--cover-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- top bar: the paper continuing ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: rgba(244, 241, 234, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: rgba(244, 241, 234, .97); } }
.topbar .menu-btn { display: none; width: 40px; height: 40px; border-radius: 6px; color: var(--ink-2); }
.topbar .brand { display: none; padding: 0; }
.topbar .brand, .topbar .brand:hover { color: var(--ink); }
.topbar .brand-name { font-size: 19px; }
.topbar .brand-name .core { color: var(--teal-ink); }
.topbar .ctx { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.topbar .ctx b { color: var(--ink); font-weight: 600; }
.topbar .ctx > span:not(.badge) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ctx .i { width: 15px; height: 15px; color: var(--ink-3); }
/* "Viewing as their administrator" is an outline tag in the bar */
.topbar .ctx .badge { background: transparent; border-color: var(--blue-line); color: var(--blue-ink); }
.topbar .ctx .badge .i { width: 13px; height: 13px; color: inherit; }
@media (max-width: 1180px) { .topbar .ctx .badge { display: none; } }

/* ---------------- content, page head, crumbs ---------------- */

.content { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 30px 32px 64px; }
#view.content { animation: page-in .18s var(--ease) both; }
.content-narrow { max-width: var(--content-narrow); }
.hello { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--ink-3); margin-bottom: 2px; }
/* The chapter opener: title and actions sit on one hairline rule */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.page-head > div:first-child { min-width: 0; }
.page-head .sub { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: var(--measure); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 12px; min-width: 0; }
.crumbs a { color: var(--ink-3); font-weight: 500; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .i { width: 13px; height: 13px; color: var(--line-2); }
.crumbs > span:last-child { color: var(--ink-2); }

/* ---------------- "Viewing as" switcher ---------------- */

.switcher { position: relative; }
.switch-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--radius-pill); border: 1px solid var(--line-2);
  background: #fff; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink); box-shadow: none; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.switch-btn:hover { border-color: var(--field); box-shadow: var(--shadow); }
.switch-btn[aria-expanded="true"] { border-color: var(--blue-bright); box-shadow: var(--focus-ring); }
.switch-btn .lbl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; text-align: left; }
.switch-btn .lbl small { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1; }
.switch-btn .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
.switch-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Mode chips keep fixed colours in every mode: they say whose screen this is. */
.mode-ico { display: grid; place-items: center; border-radius: var(--radius-pill); flex: none; color: #fff; }
.switch-btn .mode-ico { width: 28px; height: 28px; }
.switch-btn .mode-ico .i { width: 16px; height: 16px; }
.mode-super { background: var(--cover); color: var(--mint); }
.mode-super .i { color: var(--mint); }
.mode-agency { background: var(--blue-bright); color: #fff; }
.mode-staff { background: var(--teal-ink); color: #fff; }

/* Menus */
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 80; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu:not([hidden]) { animation: menu-in var(--dur-2) var(--ease); }
.menu-title { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 6px; }
.menu-item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--ink); text-decoration: none !important; transition: background var(--dur-1) var(--ease);
}
.menu-item > span:not(.mode-ico) { flex: 1; min-width: 0; }
.menu-item:hover { background: var(--surface-2); }
.menu-item.on { background: var(--blue-soft); }
.menu-item.on .t { color: var(--blue-ink); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item .mode-ico { width: 32px; height: 32px; }
.menu-item .mode-ico .i { width: 17px; height: 17px; }
.menu-item .t { font-weight: 600; font-size: 14px; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.menu-item .d { font-size: 12.5px; font-weight: 400; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.menu-item .tick { margin-left: auto; width: 18px; height: 18px; color: var(--blue); align-self: flex-start; margin-top: 1px; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-link {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none !important; text-align: left;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.menu-link:hover { background: var(--surface-2); color: var(--ink); }
.menu-link .i { width: 16px; height: 16px; color: var(--ink-3); }
.menu-link:hover .i { color: var(--ink); }

/* User menu: the avatar takes the mode accent (ink in the console, blue-deep in the portal, teal-ink on the stage) */
.user-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 3px; border-radius: var(--radius-pill); transition: background var(--dur-1) var(--ease); }
.user-btn:hover { background: var(--surface-3); }
.user-btn .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.user-menu { width: 260px; }
.user-menu .who-line { padding: 10px; }
.user-menu .who-line b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.user-menu .who-line span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* mobile scrim (shown by .shell.nav-open below) */
.scrim { display: none; }

/* ---------------- responsive and print rules for this area ---------------- */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  /* The drawer: the cover slides in over the page. Closed, it carries no shadow and is hidden outright:
     its 60px shadow blur would otherwise paint a grey band down the page's left edge while the drawer
     sits off-screen, and its hidden items would still take keyboard focus. Shadow and visibility arrive
     with the slide; on the way out the shadow fades with it and visibility drops once it has gone. */
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 280px; z-index: 60; border-right: 0;
    padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-100%); box-shadow: none; visibility: hidden;
    transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  }
  .shell.nav-open .side {
    transform: none; box-shadow: var(--shadow-lg); visibility: visible;
    transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), visibility 0s;
  }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 50; animation: scrim-in var(--dur-2) var(--ease); }
  .side .nav a { min-height: 44px; font-size: 15px; }
  .topbar { padding: 0 14px; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar .brand { display: flex; }
  .topbar .brand-name small { display: none; }
  .topbar .ctx { display: none; }
  .topbar .spacer { flex: 1; }
  .switch-btn .lbl small { display: none; }
  .content { padding: 22px 16px 56px; }
  h1 { font-size: 28px; }
  .page-head { padding-bottom: 16px; margin-bottom: 20px; }
}
@media (max-width: 640px) {
  /* On phones the menus hang from the top bar (a sticky, so positioned, ancestor) instead of the 40px
     switcher button, so a 340px menu never runs off the left edge of the screen. */
  .switcher { position: static; }
  .menu { right: 12px; top: calc(100% - 2px); width: min(340px, calc(100vw - 24px)); }
}
@media (max-width: 560px) {
  .switch-btn .lbl { display: none; }
  .switch-btn { padding-right: 8px; }
  .page-actions { width: 100%; }
}
@media (pointer: coarse) {
  .nav a, .menu-item, .menu-link { min-height: var(--tap); }
  .user-btn { min-width: 40px; min-height: 40px; }
  /* Breadcrumb links (the way back on the phone reader) get a 40px tap target; the negative margins
     keep the row's visual height at its one text line. */
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0; padding: 0 2px; }
}
@media print {
  .side, .topbar, .scrim, .crumbs { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  #view.content { animation: none; }
}

/* ======================================================================
   Bento layer (October 2026): the frame as plates
   ======================================================================
   The sidebar becomes a floating navy plate (the website hero's light: teal top right, blue bottom
   left), the active nav item a raised glass pill instead of the printed margin rule, the agency card a
   glass plate. The top bar floats as a frosted pill like the website header. Every class and hook is
   where it was. */

.shell { --frame-gap: 14px; }
.side {
  top: var(--frame-gap); height: calc(100vh - 2 * var(--frame-gap)); margin: var(--frame-gap) 0 var(--frame-gap) var(--frame-gap);
  padding: 20px 14px; border-right: 0; border-radius: var(--r-plate-xl);
  background: var(--navy-plate); box-shadow: var(--plate-navy);
}
.shell { grid-template-columns: calc(var(--side-w) + var(--frame-gap)) minmax(0, 1fr); }
.side .brand, .side .brand:hover { border-bottom-color: var(--cover-line); }

.agency-card {
  padding: 14px 12px; margin: 4px 0 8px; border: 0; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 14px 30px -18px rgba(0, 0, 0, .6);
}
.brand + .agency-card { margin-top: 8px; }
.agency-card .avatar { border-radius: 11px; box-shadow: 0 1px 0 #fff inset, 0 6px 12px -6px rgba(0, 0, 0, .6); }
.agency-card .avatar img { border-radius: 11px; }
.side .badge { border-radius: 999px; }

.nav a { border-radius: var(--r-plate-sm); padding: 9px 12px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.nav a.on {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 18px -10px rgba(0, 0, 0, .7);
}
/* the mint mark now sits inside the pill, a short bar at its left edge */
.nav a.on::before { left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; }
.nav a .pill { box-shadow: 0 2px 6px -2px rgba(127, 214, 199, .6); }

.side-help { border-radius: 16px; border: 0; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; }
.who { margin: 0 -4px; padding: 12px 10px 4px; }
.who .avatar { background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 4px 10px -4px rgba(0, 0, 0, .6); }
.shell-admin .who .avatar { background: linear-gradient(180deg, #3B5163, var(--cover-3)); }

/* the frosted pill top bar */
.topbar {
  top: var(--frame-gap, 14px); margin: var(--frame-gap, 14px) 24px 0; padding: 0 10px 0 22px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 0 0 1px rgba(227, 221, 209, .9) inset, 0 10px 30px -14px rgba(22, 34, 44, .28);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: rgba(255, 255, 255, .96); } }
.topbar .ctx .badge { border-radius: 999px; }
.stage-shell .topbar { margin: 14px 24px 0; }

.switch-btn {
  border: 0; background: linear-gradient(180deg, #fff, #FBFAF7);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 4px 10px -6px rgba(22, 34, 44, .25), 0 2px 0 var(--line);
  transition: box-shadow .18s ease, transform .18s ease;
}
.switch-btn:hover { box-shadow: 0 0 0 1px var(--field) inset, 0 10px 18px -8px rgba(22, 34, 44, .3), 0 3px 0 var(--line); transform: translateY(-1px); }
.switch-btn:active { transform: translateY(1px); }
.switch-btn[aria-expanded="true"] { box-shadow: 0 0 0 1px var(--blue-bright) inset, var(--focus-ring); transform: none; }
.mode-ico { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 4px 8px -4px rgba(22, 34, 44, .5); }
.mode-super { background: linear-gradient(145deg, #34495A, var(--cover)); }
.mode-agency { background: linear-gradient(145deg, #3A8AC4, var(--blue-bright)); }
.mode-staff { background: linear-gradient(145deg, #13917F, var(--teal-ink)); }
.user-btn .avatar { background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 4px 10px -4px var(--btn-glow), 0 2px 0 var(--btn-edge); }

.menu { border: 0; border-radius: 22px; padding: 8px; box-shadow: 0 0 0 1px rgba(22, 34, 44, .06), 0 24px 50px -18px rgba(22, 34, 44, .35), 0 6px 14px -8px rgba(22, 34, 44, .2); }
.menu-item, .menu-link { border-radius: 14px; }
.menu-item .mode-ico { width: 34px; height: 34px; }

.avatar-lg { border-radius: 14px; box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(22, 34, 44, .06), 0 8px 16px -10px rgba(22, 34, 44, .35); }

/* the page opener: generous air instead of a printed rule */
.content { padding-top: 34px; }
.page-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    top: 0; margin: 0; height: auto; border-radius: 0 var(--r-plate-xl) var(--r-plate-xl) 0; box-shadow: none;
    padding: calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  }
  .shell.nav-open .side { box-shadow: var(--shadow-lg); }
  .topbar { --frame-gap: 10px; margin: 10px 12px 0; padding: 0 8px 0 6px; }
  .stage-shell .topbar { margin: 10px 12px 0; }
  .content { padding-top: 24px; }
  .page-head { margin-bottom: 22px; }
}
@media print {
  .side, .topbar { box-shadow: none !important; }
}

/* Kept for one release: the pre-redesign gradient on the cover.
.side { background: linear-gradient(180deg, var(--navy) 0%, #0B2640 100%); }
*/