/* The app's navigation, for the views whose route asks for it (Route.header; every page for now): <nav-bar>, its top
   bar, and the keys of a page's views (components/view-keys.js). Since Task indoor part b both are the kit the owner
   approved on the canvas (docs/design/indoor/: Main and Kit-phone). The bar: navy, 64px high, the robot and the app's
   name, the links and the groups' names as pills, a group's links in a white box, «؟», the bell and «حسابك»; under
   768px wide 56px, ☰, the robot and the name, and the bell, its links a navy panel over the screen. The keys: pills
   (in a page's navy band, its own, below), and under 500px a navy bar at the bottom of the screen. Signed out the bar
   is the visitors' (site.css), which takes from here what both bars share. A computer's look is the rules' own; a
   phone's overrides it (max-width), so no width falls between the two. */

/* ── The top bar ─────────────────────────────────────────────────────────────────────────────────────────── */

nav-bar {
  display: block;
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--site-navy);
  color: var(--site-navy-title);
}

/* on the visitors' bar's column */
.nb-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-block-size: var(--header-height);
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* on navy, the keyboard's ring is yellow (in a white box, the page's: below) */
nav-bar :focus-visible {
  outline-color: var(--site-focus);
}

.nb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  font-size: var(--font-size-brand);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* the robot signed in (the visitors' is site.css's): it smiles while its link is pointed at or has the keyboard */
.nb-robot {
  display: block;
  flex: none;
  inline-size: var(--bar-robot);
  aspect-ratio: 69 / 49;
}

.nb-brand:hover .nb-robot .bot-f-idle,
.nb-brand:focus-visible .nb-robot .bot-f-idle {
  opacity: 0;
}

.nb-brand:hover .nb-robot .bot-f-happy,
.nb-brand:focus-visible .nb-robot .bot-f-happy {
  opacity: 1;
}

.nb-toggle {
  display: none;
  position: relative;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* ☰: three bars that turn into ✕ while the panel is open (the button is a grid: their margins add up, so they stand
   6px apart, and ✕ closes on the middle one) */
.nb-bar {
  display: block;
  inline-size: 1.375rem;
  block-size: 3px;
  margin-block: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}

.nb-toggle[aria-expanded="true"] .nb-bar:nth-child(1) {
  transform: translateY(9px) rotate(-45deg);
}

.nb-toggle[aria-expanded="true"] .nb-bar:nth-child(2) {
  opacity: 0;
}

.nb-toggle[aria-expanded="true"] .nb-bar:nth-child(3) {
  transform: translateY(-9px) rotate(45deg);
}

/* on a phone, how many reported items wait, by ☰ (Task 8.6b; not by ✕, nav-bar.js) */
.nb-toggle-count {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  box-shadow: 0 0 0 1px var(--site-navy);
}

.nb-menu {
  flex: 1;
  min-inline-size: 0;
}

.nb-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body);
}

.nb-item {
  position: relative;
}

/* a link, or a group's name: a pill */
.nb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--site-navy-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* (the visitors' links have their own height and may break their words, site.css; :where keeps a box's links' own
   height below) */
:where(nav-bar:not(.is-visitor)) .nb-link {
  min-block-size: var(--control-height);
  white-space: nowrap;
}

@media (hover: hover) {
  .nb-link:not([aria-current="page"]):hover {
    background: var(--site-navy-hover);
    color: var(--site-navy-title);
  }
}

/* the page you are on, and the name of the group that holds it: a white pill */
.nb-link[aria-current="page"],
.nb-group.is-current > .nb-group-toggle {
  background: var(--site-navy-title);
  color: var(--site-navy);
  font-weight: 700;
}

/* a group: its name with ⌄, and its links in a box under it (on a phone, under its name in the panel) */
.nb-chevron {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform 0.2s;
}

.nb-group.is-open .nb-chevron,
.nb-me-wrap.is-open .nb-chevron {
  transform: rotate(180deg);
}

/* the group's name over its links: in a phone's panel only */
.nb-group-name {
  display: none;
}

.nb-end {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

/* «المساعدة» (Task help) and the bell (Task 8.6b): round squares, lighter on their page and pointed at */
.nb-bell,
.nb-help {
  display: inline-grid;
  position: relative;
  place-items: center;
  inline-size: var(--bar-control);
  block-size: var(--bar-control);
  border-radius: var(--radius);
  color: var(--site-navy-text);
}

.nb-bell .icon,
.nb-help .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.nb-bell[aria-current="page"],
.nb-help[aria-current="page"] {
  background: var(--site-navy-hover);
  color: var(--site-navy-title);
}

@media (hover: hover) {
  .nb-bell:hover,
  .nb-help:hover {
    background: var(--site-navy-hover);
    color: var(--site-navy-title);
  }
}

/* the bell's count over its corner (Task 8.6b): yellow on the navy, navy digits */
.nb-bell-count {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-end: 0;
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--site-yellow);
  box-shadow: 0 0 0 1px var(--site-navy);
  color: var(--site-on-yellow);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.nb-bell-count[hidden] {
  display: none;
}

/* the envelope (Task 8.12b): «الرسائل», with the conversations not read over its corner, as the bell. Hidden from the
   bar since 26 Oct 2026 (the owner's word): «الرسائل» stays in «المجتمع»'s menu */
.nb-envelope {
  display: none;
}

/* how many reported items wait (Task 8.6b), and new messages to answer (Task help part b2), by their link, by their
   group's name and by ☰: yellow on the navy; on a white part (the pill of the page you are on, a white box) a red
   bubble */
.nb-count {
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.nb-link[aria-current="page"] .nb-count,
.nb-group.is-current > .nb-group-toggle .nb-count {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

/* «حسابك» (Task indoor part b): the name's first letter in a teal circle, the first name and ⌄, on a darker pill;
   white on its own pages, as a group's name on its */
.nb-me-wrap {
  position: relative;
}

.nb-me {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--bar-control);
  margin-inline-start: var(--space-2);
  padding-inline: var(--space-1) var(--space-3);
  border: 1px solid var(--site-navy-line);
  border-radius: var(--radius-pill);
  background: var(--site-navy-card);
  color: var(--site-navy-title);
  font: inherit;
  cursor: pointer;
}

.nb-me[aria-expanded="true"] {
  border-color: var(--site-navy-edge);
}

@media (hover: hover) {
  .nb-me:hover {
    border-color: var(--site-navy-edge);
  }
}

.nb-me .nb-chevron {
  color: var(--site-navy-text);
}

.nb-me.is-current {
  border-color: var(--site-navy-title);
  background: var(--site-navy-title);
  color: var(--site-navy);
  font-weight: 700;
}

.nb-me.is-current .nb-chevron {
  color: var(--site-navy);
}

.nb-me-name {
  max-inline-size: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--avatar);
  block-size: var(--avatar);
  border-radius: 50%;
  background: var(--site-teal);
  color: var(--site-navy);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1;
}

.nb-avatar.is-large {
  inline-size: var(--avatar-large);
  block-size: var(--avatar-large);
  font-size: var(--font-size-body);
}

.nb-avatar .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* the name and the email by the letter: the head of «حسابك»'s box and of a phone's panel */
.nb-who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nb-who-words {
  min-inline-size: 0;
}

.nb-who-name,
.nb-who-mail {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.nb-who-name {
  font-weight: 700;
}

/* (written left to right, its end under the name's) */
.nb-who-mail {
  font-size: var(--font-size-small);
  text-align: end;
}

/* The boxes: a group's links, and «حسابك»'s, white under the bar (dark mode's card), the page you are on in them a soft
   teal, a count a red bubble; a group's opens under its name, «حسابك»'s at the bar's end. (A phone has neither: below.) */
.nb-box {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  color: var(--color-text);
}

.nb-sub,
.nb-account {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  z-index: 1;
  min-inline-size: 13.75rem;
  margin-block-start: var(--space-3);
  list-style: none;
}

.nb-sub {
  inset-inline-start: 0;
}

.nb-account {
  inset-inline-end: 0;
  inline-size: 17.5rem;
}

/* the room between a group's name and its box, so the pointer can move down to it */
.nb-sub::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--space-3);
}

.nb-group.is-open .nb-sub,
.nb-me-wrap.is-open .nb-account {
  display: block;
}

.nb-box :focus-visible {
  outline-color: var(--color-focus);
}

.nb-box .nb-link {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--bar-control);
  border-radius: var(--radius-small);
  color: var(--color-text);
}

.nb-box .nb-link[aria-current="page"] {
  background: var(--color-current);
  color: var(--color-text);
}

.nb-box .nb-count {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

@media (hover: hover) {
  .nb-box .nb-link:not([aria-current="page"]):hover {
    background: var(--color-raised);
    color: var(--color-text);
  }
}

.nb-account .nb-who {
  margin-block-end: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}

.nb-account .nb-who-mail {
  color: var(--color-muted);
}

.nb-account-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a line between links, for the eye only */
.nb-box-rule {
  block-size: 1px;
  margin: var(--space-1);
  background: var(--color-rule);
}

/* what a phone's panel has besides the bar's links («حسابك»'s, «المساعدة»): a computer has them in the bar */
.nb-panel-only {
  display: none;
}

/* where the pointer hovers (wide screens), a group opens, as on the old site */
@media (min-width: 48rem) and (hover: hover) {
  .nb-group:hover .nb-sub {
    display: block;
  }

  .nb-group:hover .nb-chevron {
    transform: rotate(180deg);
  }
}

/* Up to 1100px wide: «حسابك» shows its letter alone, so an admin's six links keep one line whatever the first name;
   and up to 992px the parts sit closer, and the app's name is for screen readers only, so they do from 768px (a wider
   font would take a second line) */
@media (min-width: 48rem) and (max-width: 68.75rem) {
  .nb-me {
    padding-inline-end: var(--space-2);
  }

  .nb-me-name {
    display: none;
  }
}

@media (min-width: 48rem) and (max-width: 61.9375rem) {
  .nb-inner {
    padding-inline: var(--space-4);
  }

  .nb-list {
    gap: calc(var(--space-1) / 2);
  }

  nav-bar:not(.is-visitor) .nb-list > .nb-item > .nb-link {
    padding-inline: var(--space-2);
  }

  .nb-name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nb-me {
    margin-inline-start: var(--space-1);
  }
}

/* A phone: the bar is lower, ☰ first, then the robot and the name, and the bell at its end («المساعدة» and «حسابك» are
   in the panel); the links are a navy panel under the bar, over the whole screen, that ☰ opens: the name and the email
   first, a group's links under its name (no box), then «حسابك»'s links, «المساعدة» and «تسجيل الخروج». */
@media (max-width: 47.9375rem) {
  .nb-inner {
    gap: var(--space-1);
    min-block-size: var(--header-height-phone);
    padding-inline: var(--space-2) var(--space-3);
  }

  .nb-toggle {
    display: inline-grid;
    flex: none;
    place-content: center;
    inline-size: var(--bar-control);
    block-size: var(--bar-control);
    padding: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--site-navy-text);
  }

  .nb-toggle[aria-expanded="true"] {
    background: var(--site-navy-hover);
    color: var(--site-navy-title);
  }

  .nb-brand {
    flex: 0 1 auto;
    min-inline-size: 0;
    font-size: var(--font-size-brand-phone);
  }

  .nb-robot {
    inline-size: var(--bar-robot-phone);
  }

  .nb-name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nb-end {
    gap: calc(var(--space-1) / 2);
  }

  .nb-help,
  .nb-me-wrap {
    display: none;
  }

  .nb-menu {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--header-height-phone);
    block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--site-navy);
    visibility: hidden;
    transition: block-size 0.3s ease-in, visibility 0s 0.3s;
  }

  nav-bar.is-open .nb-menu {
    block-size: calc(100dvh - var(--header-height-phone));
    visibility: visible;
    transition: block-size 0.3s ease-in;
  }

  nav-bar:not(.is-visitor) .nb-menu {
    border-block-start: 1px solid var(--site-navy-line);
  }

  .nb-list {
    display: block;
    padding: var(--space-2) var(--space-3) var(--space-4);
  }

  .nb-link {
    display: flex;
    inline-size: 100%;
    border-radius: var(--radius);
  }

  :where(nav-bar:not(.is-visitor)) .nb-link {
    min-block-size: var(--bar-control);
  }

  .nb-group-toggle {
    display: none;
  }

  .nb-group-name {
    display: block;
    margin-block-start: var(--space-3);
    padding-inline: var(--space-3);
    color: var(--color-bar-faint);
    font-size: var(--font-size-small);
    font-weight: 700;
  }

  /* a group's links in the panel, on its navy: no box */
  .nb-sub {
    display: block;
    position: static;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .nb-sub::before {
    content: none;
  }

  .nb-sub .nb-link {
    border-radius: var(--radius);
    color: var(--site-navy-text);
  }

  .nb-sub .nb-link[aria-current="page"] {
    background: var(--site-navy-title);
    color: var(--site-navy);
  }

  .nb-sub .nb-count {
    background: var(--site-yellow);
    color: var(--site-on-yellow);
  }

  .nb-sub .nb-link[aria-current="page"] .nb-count {
    background: var(--color-danger-fill);
    color: var(--color-on-fill);
  }

  .nb-sub :focus-visible {
    outline-color: var(--site-focus);
  }

  .nb-panel-only {
    display: list-item;
  }

  .nb-panel-me {
    margin-block-end: var(--space-2);
    padding: var(--space-2) var(--space-1) var(--space-3);
    border-block-end: 1px solid var(--site-navy-line);
  }

  .nb-panel-me .nb-who-mail {
    color: var(--site-navy-text);
  }

  .nb-panel-rule {
    block-size: 1px;
    margin: var(--space-3) var(--space-1);
    background: var(--site-navy-line);
  }

  /* while the panel is open, the page under it stays still */
  html:has(nav-bar.is-open) {
    overflow: hidden;
  }
}

@media (max-width: 47.9375rem) and (hover: hover) {
  .nb-sub .nb-link:not([aria-current="page"]):hover {
    background: var(--site-navy-hover);
    color: var(--site-navy-title);
  }
}

/* The top bar stays at the top of the screen. What else stays in view while a page scrolls stops under it (the
   question editor's save bar, a running test's bar), and so does what the page scrolls to (a field the keyboard moves
   to). The Learn page's side column stayed in view too until it moved under the question (Task 2.3, 17 Oct 2026). */
:root:has(app-shell.has-nav-bar) {
  --nb-height: var(--header-height);
  scroll-padding-block-start: var(--nb-height);
}

app-shell.has-nav-bar .qb-bar,
app-shell.has-nav-bar .tests-bar {
  inset-block-start: var(--nb-height);
}

@media (max-width: 47.9375rem) {
  :root:has(app-shell.has-nav-bar) {
    --nb-height: var(--header-height-phone);
  }
}

/* ── The keys of a page's views ──────────────────────────────────────────────────────────────────────────── */

/* From 500px wide: a row of pills at the page's top, each its icon and its name, the chosen one filled (navy; yellow in
   dark mode), a count by a key's name a red bubble (yellow on the navy one). «رئيسية» is a phone's only (wider screens
   have the top bar). */
.vk {
  margin-block-end: var(--space-4);
}

.vk-inner {
  display: flex;
}

.vk-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vk-key,
.vk-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.vk-key {
  position: relative;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
}

.vk-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.vk-icon .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
}

@media (hover: hover) {
  .vk-key:not([aria-selected="true"]):hover {
    border-color: var(--color-muted);
  }
}

.vk-key[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

/* a count by a key's name (Task 8.5b: «قيد المراجعة») */
.vk-count {
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.vk-key[aria-selected="true"] .vk-count {
  background: var(--site-yellow);
  color: var(--site-on-yellow);
}

/* (dark mode's chosen key is yellow: its count red) */
@media (prefers-color-scheme: dark) {
  .vk-key[aria-selected="true"] .vk-count {
    background: var(--color-danger-fill);
    color: var(--color-on-fill);
  }
}

.vk-home {
  display: none;
}

/* In a page's navy band (components/page-band.js): navy pills, the chosen one white, a count yellow (red on the white). */
.page-band .vk {
  margin: 0;
  padding-block-end: var(--space-4);
}

.page-band .vk-key {
  border-color: var(--site-navy-line);
  background: var(--site-navy-card);
  color: var(--site-navy-text);
}

.page-band .vk-key[aria-selected="true"] {
  border-color: var(--site-navy-title);
  background: var(--site-navy-title);
  color: var(--site-navy);
}

.page-band .vk-count {
  background: var(--site-yellow);
  color: var(--site-on-yellow);
}

.page-band .vk-key[aria-selected="true"] .vk-count {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

.page-band .vk :focus-visible {
  outline-color: var(--site-focus);
}

@media (hover: hover) {
  .page-band .vk-key:not([aria-selected="true"]):hover {
    border-color: var(--site-navy-edge);
    color: var(--site-navy-title);
  }
}

/* Under 500px: a navy bar fixed to the bottom of the screen (in a band too), «رئيسية» first, each key its icon over its
   name, the chosen one yellow with a soft yellow behind its icon, a count yellow over the icon's corner. */
@media (max-width: 31.1875rem) {
  .vk,
  .page-band .vk {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;
    margin: 0;
    padding-block-end: var(--space-2);
    border-block-start: 1px solid var(--site-navy-line);
    background: var(--site-navy);
  }

  .vk-inner {
    inline-size: 100%;
    overflow-x: auto;
  }

  .vk-keys {
    flex: 1;
    flex-wrap: nowrap;
    gap: 0;
  }

  .vk-key,
  .vk-home {
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
    padding: var(--space-2) var(--space-2) 0;
    color: var(--color-bar-faint);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .vk-key,
  .page-band .vk-key {
    flex: 1 1 0;
    min-inline-size: 4.6875rem;
    min-block-size: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-bar-faint);
  }

  .vk-home {
    display: flex;
    flex: none;
    min-inline-size: 4rem;
  }

  .vk-icon {
    inline-size: 3.25rem;
    block-size: 1.875rem;
    border-radius: var(--radius-pill);
  }

  .vk-icon .icon {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }

  .vk-key[aria-selected="true"],
  .page-band .vk-key[aria-selected="true"] {
    background: none;
    color: var(--site-yellow);
  }

  .vk-key[aria-selected="true"] .vk-icon {
    background: var(--color-bar-chosen);
  }

  /* over the icon's corner, a navy line round it */
  .vk-count,
  .vk-key[aria-selected="true"] .vk-count,
  .page-band .vk-count,
  .page-band .vk-key[aria-selected="true"] .vk-count {
    position: absolute;
    inset-block-start: calc(var(--space-1) / 2);
    inset-inline-end: calc(50% - 1.875rem);
    background: var(--site-yellow);
    box-shadow: 0 0 0 1px var(--site-navy);
    color: var(--site-on-yellow);
  }

  .vk :focus-visible {
    outline-color: var(--site-focus);
    outline-offset: -3px;
  }

  /* room under the page, so the bar never covers its end */
  .has-view-keys {
    padding-block-end: var(--view-keys-room);
  }
}

@media (max-width: 31.1875rem) and (hover: hover) {
  .vk-key:not([aria-selected="true"]):hover,
  .page-band .vk-key:not([aria-selected="true"]):hover,
  .vk-home:hover {
    color: var(--site-navy-title);
  }
}

/* ── The empty page (/empty) ─────────────────────────────────────────────────────────────────────────────── */

.empty-page {
  display: block;
}

.empty-view {
  min-block-size: 12.5rem;
}