:root {
  --color-ivory: #F6F0E8;
  --color-blush: #E8C9C5;
  /* Matches the logo's actual pink (public/assets/logo.svg, fill/stroke #c47f84) -
     the accent color everywhere should trace back to the logo, not an ad-hoc pink. */
  --color-dusty-rose: #C47F84;
  --color-muted-rose: #AD7074;
  --color-taupe: #B69A88;
  --color-beige: #E8D9CC;
  --color-cocoa: #68463A;
  --color-soft-brown: #8A6658;
  --color-white: #FFFDFC;

  --font-display: 'Montserrat', sans-serif;
  --font-script: 'Pacifico', cursive;
  --font-body: 'Montserrat', sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-soft: 0 6px 24px rgba(104, 70, 58, 0.08);
  --content-width: 1180px;
  --header-h: 65px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-ivory);
  color: var(--color-cocoa);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Touch devices have no :hover - let our own :active styles show instead of the
     browser's default gray/blue tap-highlight flash. */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  color: var(--color-cocoa);
  font-weight: 500;
}

.font-script {
  font-family: var(--font-script);
  color: var(--color-dusty-rose);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-dusty-rose);
}

.content-wrap {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  background-color: var(--color-dusty-rose);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-primary:active { background-color: var(--color-muted-rose); }
/* Hover only where there is a real pointer: on phones a tap would leave the button stuck in its hover color. */
@media (hover: hover) { .btn-primary:hover { background-color: var(--color-muted-rose); } }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 2px solid var(--color-cocoa); outline-offset: 2px; }

.btn-secondary {
  background-color: transparent;
  color: var(--color-cocoa);
  border: 1.5px solid var(--color-cocoa);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-secondary:active { background-color: var(--color-beige); }
@media (hover: hover) { .btn-secondary:hover { background-color: var(--color-beige); } }
.btn-secondary:active { transform: scale(0.98); }
.btn-secondary:focus-visible { outline: 2px solid var(--color-cocoa); outline-offset: 2px; }

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.tab-pill {
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}
.tab-pill[data-active="true"] {
  background-color: var(--color-cocoa);
  color: var(--color-white);
}
.tab-pill:not([data-active="true"]) {
  background-color: var(--color-beige);
  color: var(--color-cocoa);
}

input, textarea, select {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-sm);
  color: var(--color-cocoa);
  font-family: var(--font-body);
}
/* iPhone Safari gives date/time inputs a fixed native width and ignores width:100%, so a date field
   pushes its form wider than the screen. Dropping the native look and forcing a fluid box fixes it
   (the tap-to-pick calendar still works). */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;      /* 44px: an empty date input otherwise collapses on iOS */
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.5em;
}
select { max-width: 100%; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-dusty-rose);
  box-shadow: 0 0 0 3px rgba(199, 123, 128, 0.15);
}

/* Order status - text label plus color, shared by the backoffice queue and order view. */
.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill[data-status="pending"] { background: #FEF3C7; color: #92400E; }
.status-pill[data-status="accepted"] { background: #DBEAFE; color: #1E40AF; }
.status-pill[data-status="ready"] { background: #D1FAE5; color: #065F46; }
.status-pill[data-status="completed"] { background: #E5E7EB; color: #374151; }
.status-pill[data-status="cancelled"],
.status-pill[data-status="dismissed"] { background: #FEE2E2; color: #991B1B; }

.order-card {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  min-height: 76px;
  padding: 0;
  overflow: hidden; /* the status strip on the left follows the rounded corners */
  background: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.order-card:active { transform: scale(0.99); }
.order-card-body { padding: 0.75rem 0; align-self: center; }
/* The status as a vertical strip on the card's left edge (replaces the old coloured border and the pill), text reading upward. */
.status-strip {
  flex: 0 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #9CA3AF;
  color: #fff;
}
/* Anything with flowers in it - a checkout line, a queue card, an order line - gets this one pale-rose
   background so a bouquet is never mistaken for a kitchen item. Beats the status colours on the queue
   card; its left border and status pill still show the status. */
.flower-tint,
.order-card[data-status].flower-tint { background: #F9EDEE; }
.order-card[data-status="pending"] { background: #FFFBEB; }
.order-card[data-status="pending"] .status-strip { background: #F59E0B; color: #451A03; }
.order-card[data-status="accepted"] .status-strip { background: #2563EB; }
.order-card[data-status="ready"] .status-strip { background: #047857; }
.order-card[data-status="completed"] { opacity: 0.8; }
.order-card[data-status="completed"] .status-strip { background: #6B7280; }
.order-card[data-status="cancelled"] { opacity: 0.6; }
.order-card[data-status="cancelled"] .status-strip { background: #DC2626; }
.order-card[data-status="dismissed"] { opacity: 0.6; }
.order-card[data-status="dismissed"] .status-strip { background: #92400E; }
.order-card-new { animation: new-order-glow 1.6s ease-in-out 6; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@keyframes new-order-glow {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.4s ease both; }

/* Homepage header (see public/home-header.js): hidden at the top of the page; once the visitor scrolls a little the
   brand pieces glide in from the hero (one timed transition) and the bar and menu fade in. Rules only apply once the
   script has set html.home-hdr, so the header is a normal one without it. */
[data-home-header] .hdr-logo, [data-home-header] .hdr-word, [data-home-header] .hdr-sub { transform-origin: 0 0; will-change: transform; }
[data-home-header].hdr-anim .hdr-logo, [data-home-header].hdr-anim .hdr-word, [data-home-header].hdr-anim .hdr-sub {
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.home-hdr [data-home-header] .hdr-bar-bg { opacity: 0; transition: opacity 0.2s ease; }
html.home-hdr [data-home-header] .hdr-actions { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
html.home-hdr.home-docked [data-home-header] .hdr-bar-bg { opacity: 1; transition: opacity 0.35s ease 0.3s; }
html.home-hdr.home-docked [data-home-header] .hdr-actions { opacity: 1; pointer-events: auto; transition: opacity 0.35s ease 0.3s; }
html.home-hdr:not(.home-hdr-ready) [data-home-header] .hdr-brand { visibility: hidden; }
/* The header's own brand pieces are hidden until the glide plays (and while it plays in reverse). */
html.home-hdr.home-hdr-ready:not(.home-docked) [data-home-header] .hdr-brand { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
/* The hero copies of the brand (and the tagline with its white glow) vanish the moment the header pieces take over,
   and come back as the pieces glide home. */
html.home-hdr #hero-logo, html.home-hdr #hero-word, html.home-hdr #hero-sub, html.home-hdr #hero-tagline { transition: opacity 0.3s ease; }
html.home-hdr.home-docked #hero-logo, html.home-hdr.home-docked #hero-word, html.home-hdr.home-docked #hero-sub { opacity: 0; transition: none; }
html.home-hdr.home-docked #hero-tagline { opacity: 0; transition: opacity 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-home-header].hdr-anim .hdr-logo, [data-home-header].hdr-anim .hdr-word, [data-home-header].hdr-anim .hdr-sub,
  html.home-hdr [data-home-header] .hdr-bar-bg, html.home-hdr [data-home-header] .hdr-actions, html.home-hdr #hero-logo, html.home-hdr #hero-word, html.home-hdr #hero-sub, html.home-hdr #hero-tagline { transition: none !important; }
}

/* Homepage slideshow animations (also used by the admin framing preview). The zoom / crop
   framing uses the separate CSS `scale` property, so these transforms stack on top of it. */
@keyframes hero-zoom-in { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes hero-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hero-pan-right { from { transform: scale(1.1) translateX(-4%); } to { transform: scale(1.1) translateX(4%); } }
@keyframes hero-pan-left { from { transform: scale(1.1) translateX(4%); } to { transform: scale(1.1) translateX(-4%); } }
.hero-anim-zoom-in { animation: hero-zoom-in var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-zoom-out { animation: hero-zoom-out var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-pan-right { animation: hero-pan-right var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-pan-left { animation: hero-pan-left var(--hero-anim-dur, 7s) ease-in-out forwards; }
@keyframes hero-drift-up { from { transform: scale(1.12) translateY(3%); } to { transform: scale(1.12) translateY(-3%); } }
@keyframes hero-drift-down { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.12) translateY(3%); } }
@keyframes hero-drift-diagonal { from { transform: scale(1.05) translate(-2%, 2%); } to { transform: scale(1.15) translate(2%, -2%); } }
@keyframes hero-focus-in { from { transform: scale(1.08); filter: blur(8px); } to { transform: scale(1); filter: blur(0); } }
.hero-anim-drift-up { animation: hero-drift-up var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-drift-down { animation: hero-drift-down var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-drift-diagonal { animation: hero-drift-diagonal var(--hero-anim-dur, 7s) ease-in-out forwards; }
.hero-anim-focus-in { animation: hero-focus-in var(--hero-anim-dur, 7s) ease-out forwards; }
@media (prefers-reduced-motion: reduce) { [class*="hero-anim-"] { animation: none !important; } }

[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-ivory); }
::-webkit-scrollbar-thumb { background: var(--color-beige); border-radius: 999px; }

/* ---- Admin dashboard (the cards of the Dashboard tab) ---- */
.ic { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dash-card { container-type: inline-size; background: var(--color-white); border: 1px solid var(--color-beige); border-radius: 1.25rem; box-shadow: var(--shadow-soft); padding: 1rem 1.15rem; min-width: 0; }
.dash-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; font-weight: 600; font-size: 1.05rem; }
.dash-title > .ic { color: var(--color-dusty-rose); }
.dash-sub { font-size: 0.78rem; color: var(--color-soft-brown); }
.dash-big { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.dash-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.dash-stat { display: flex; align-items: center; gap: 0.75rem; }
.dash-stat > .ic { width: 2rem; height: 2rem; color: var(--color-dusty-rose); }
.dash-mini { border: 1px solid var(--color-beige); border-radius: 1rem; padding: 0.8rem 0.95rem; }
.dash-speed { background: color-mix(in srgb, var(--color-beige) 40%, transparent); border-radius: 0.9rem; padding: 0.7rem 0.4rem; }
.dash-tile { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; border-radius: 1rem; padding: 0.8rem 0.9rem; border: 1px solid transparent; transition: filter 0.15s; }
.dash-tile:hover { filter: brightness(0.98); }
.dash-tile .dash-ic { width: 2.9rem; height: 2.9rem; flex: none; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; }
.dash-tile .dash-ic .ic { width: 1.4rem; height: 1.4rem; }
.dash-tile[data-tone="rose"] { background: rgba(217,142,147,0.14); border-color: rgba(217,142,147,0.35); }
.dash-tile[data-tone="rose"] .dash-ic { color: #D98E93; }
.dash-tile[data-tone="amber"] { background: rgba(233,162,59,0.14); border-color: rgba(233,162,59,0.38); }
.dash-tile[data-tone="amber"] .dash-ic { color: #E9A23B; }
.dash-tile[data-tone="green"] { background: rgba(91,162,122,0.14); border-color: rgba(91,162,122,0.38); }
.dash-tile[data-tone="green"] .dash-ic { color: #5BA27A; }
.dash-tile[data-tone="violet"] { background: rgba(139,123,200,0.14); border-color: rgba(139,123,200,0.38); }
.dash-tile[data-tone="violet"] .dash-ic { color: #8B7BC8; }
.dash-action { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.8rem 0.95rem; border-radius: 0.95rem; font-weight: 500; border: 1px solid transparent; min-height: 3rem; }
.dash-action .chev { color: var(--color-soft-brown); }
.dash-action[data-tone="rose"] { background: rgba(217,142,147,0.16); border-color: rgba(217,142,147,0.3); }
.dash-action[data-tone="sand"] { background: rgba(196,162,147,0.18); border-color: rgba(196,162,147,0.32); }
.dash-action[data-tone="coral"] { background: rgba(224,122,110,0.2); border-color: rgba(224,122,110,0.35); }
.dash-action[data-tone="violet"] { background: rgba(139,123,200,0.16); border-color: rgba(139,123,200,0.32); }
.dash-action[data-tone="green"] { background: rgba(91,162,122,0.16); border-color: rgba(91,162,122,0.34); }
/* Columns that follow the room a block really has (not the window): as many as fit, at least --min wide each */
.dash-auto { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 10rem), 100%), 1fr)); }
/* One order of the Today's orders card: two lines when the card is narrow, one line when it is wide (a container query on the card) */
.dash-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num name amt" "time pill view"; gap: 0.3rem 0.6rem; align-items: center; padding: 0.6rem 0; }
.dash-row > :nth-child(1) { grid-area: num; }
.dash-row > :nth-child(2) { grid-area: name; }
.dash-row > :nth-child(3) { grid-area: time; }
.dash-row > :nth-child(4) { grid-area: pill; justify-self: start; }
.dash-row > :nth-child(5) { grid-area: amt; justify-self: end; }
.dash-row > :nth-child(6) { grid-area: view; justify-self: end; }
@container (min-width: 34rem) {
  .dash-row { grid-template-columns: 5.2rem minmax(0, 1fr) 5.5rem 6.5rem 5rem 3.8rem; grid-template-areas: "num name time pill amt view"; }
}
.dash-sys { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.1rem; min-height: 2.9rem; font-size: 0.9rem; }
.dash-sys > .ic:first-child { color: var(--color-soft-brown); }
.dash-sys .chev { color: var(--color-soft-brown); }
.dash-info { width: 1.35rem; height: 1.35rem; flex: none; border-radius: 9999px; border: 1.5px solid var(--color-soft-brown); color: var(--color-soft-brown); font-size: 0.75rem; font-weight: 700; font-style: italic; font-family: Georgia, serif; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.dash-info[aria-expanded="true"] { background: var(--color-dusty-rose); border-color: var(--color-dusty-rose); color: #fff; }
.dash-explain { margin-top: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 0.8rem; background: color-mix(in srgb, var(--color-beige) 45%, transparent); font-size: 0.8rem; line-height: 1.45; }
.dash-meter { height: 100%; border-radius: 9999px; }
.dash-meter[data-tone="green"] { background: #5BA27A; }
.dash-meter[data-tone="amber"] { background: #E9A23B; }
.dash-meter[data-tone="red"] { background: #DC2626; }
.dash-pill { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; text-align: center; }
.dash-pill[data-tone="rose"] { background: rgba(217,142,147,0.22); color: #9B3B44; }
.dash-pill[data-tone="amber"] { background: rgba(233,162,59,0.24); color: #8A5A0B; }
.dash-pill[data-tone="green"] { background: rgba(91,162,122,0.24); color: #2F6B4A; }
.dash-pill[data-tone="gray"] { background: rgba(120,113,108,0.2); color: #57534E; }
.dash-pill[data-tone="red"] { background: rgba(220,38,38,0.16); color: #991B1B; }
.dash-rank { width: 1.7rem; height: 1.7rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; background: color-mix(in srgb, var(--color-dusty-rose) 20%, transparent); color: var(--color-dusty-rose); flex: none; }
@media print { .dash-card { box-shadow: none; } }
.dash-speed .dash-big { font-size: 1.2rem; white-space: nowrap; }

/* ---- One-screen dashboard: columns that fill top to bottom, whatever does not fit folds into a tile ---- */
.dash-root { position: relative; column-width: 19rem; column-gap: 0.9rem; column-fill: balance; overflow: hidden; --chart-h: 10rem; }
.dash-root > .dash-card, .dash-root > .dash-aside > .dash-card { position: relative; display: block; break-inside: avoid; margin: 0 0 0.75rem; width: 100%; }
.dash-head { display: flex; align-items: center; gap: 0.4rem; padding-right: 2.2rem; min-height: 1.7rem; }
.is-fitting { visibility: hidden; }
.dash-hide { display: none !important; }
.dash-ctl { position: absolute; top: 0.5rem; right: 0.55rem; display: flex; align-items: center; gap: 0.25rem; z-index: 2; }
.dash-ctl-btn { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-soft-brown); }
.dash-ctl-btn:hover { background: color-mix(in srgb, var(--color-beige) 60%, transparent); }
.dash-ctl-txt { font-size: 0.75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--color-dusty-rose); margin-right: 0.3rem; }
.lbl-short { display: none; }
.dash-chart { height: var(--chart-h); }
.dash-chart-axis { height: var(--chart-h); }
.dash-card.is-sheet { position: fixed; z-index: 40; top: 2.75rem; left: 0; right: 0; bottom: 0; margin: 0; width: auto; border-radius: 0; border: 0; overflow-y: auto; padding: 1rem max(1rem, calc(50% - 24rem)); box-shadow: none; --chart-h: 12rem; }
.dash-card.is-sheet .dash-head { padding-right: 9rem; }
.dash-card.is-sheet .dash-opt { display: revert; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.dash-ftile { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem; border-radius: 0.9rem; background: var(--color-white); border: 1px solid var(--color-beige); box-shadow: var(--shadow-soft); min-height: 2.7rem; text-align: left; }
.dash-ftile > .ic { color: var(--color-dusty-rose); }
/* dense: when the screen is small, the helper sentences go and everything tightens */
.is-dense .dash-opt { display: none; }
.is-dense .dash-root { --chart-h: 6rem; column-gap: 0.7rem; }
.is-dense .dash-card { padding: 0.65rem 0.85rem; }
.is-dense .dash-root > .dash-card, .is-dense .dash-root > .dash-aside > .dash-card { margin-bottom: 0.55rem; }
.is-dense .dash-big { font-size: 1.25rem; }
.is-dense .dash-num { font-size: 1.5rem; }
.is-dense .dash-action { min-height: 2.5rem; padding: 0.5rem 0.8rem; }
.is-dense .dash-sys { min-height: 2.4rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
/* ultra: the smallest screens (a small phone, or a phone held sideways) when even the essentials do not fit */
.is-ultra .dash-greet h1 { display: none; }
.is-ultra .dash-greet { justify-content: flex-end; }
.is-ultra .dash-root > .dash-card, .is-ultra .dash-root > .dash-aside > .dash-card { padding: 0.45rem 0.6rem; margin-bottom: 0.4rem; }
.is-ultra .dash-root > .dash-card[data-card="attention"] > .dash-head,
.is-ultra .dash-root > .dash-card[data-card="today"] > .dash-head { display: none; }
.is-ultra .dash-wait { margin-top: 0.3rem; padding: 0.3rem 0.45rem; }
.is-ultra .dash-wait > p { display: none; }
.is-ultra .dash-attn, .is-ultra .dash-today { margin-top: 0; }
.is-ultra .dash-ftile { min-height: 2.1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.is-ultra .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.is-ultra .dash-ftile-sub { display: none; }
.is-ultra .dash-ftile > .ic { width: 1rem; height: 1rem; }
.is-ultra .lbl-full { display: none; }
.is-ultra .lbl-short { display: inline; }
@media print {
  .dash-root { height: auto !important; column-count: 1; overflow: visible; }
  .dash-fold { display: none !important; }
  .dash-ctl, .dash-tiles { display: none !important; }
}

/* Phones: Needs attention and Today in four small columns, the folded tiles three across, so the important cards fit above them */
@media (max-width: 480px) {
  .dash-attn { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .dash-today { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
  .dash-today .dash-stat > .ic { display: none; }
  .dash-today .dash-big { font-size: 1rem; }
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .dash-ftile { padding: 0.5rem 0.65rem; gap: 0.55rem; min-height: 3.1rem; }
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
}
/* ultra on a wide but very short screen (a phone held sideways): the same compact tiles as on a narrow phone */
.is-ultra .dash-attn { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.is-ultra .dash-today { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.is-ultra .dash-today .dash-stat > .ic { display: none; }
.is-ultra .dash-today .dash-big { font-size: 1rem; }
/* an opened card: a toolbar row on top (Keep on dashboard ... Close), then the card at full width */
.dash-card.is-sheet .dash-ctl { position: static; justify-content: space-between; margin: 0 0 0.35rem; }
.dash-card.is-sheet .dash-head { padding-right: 0; }

.is-dense .dash-mini { padding: 0.55rem 0.7rem; }
.is-dense .dash-root .dash-body.mt-3 { margin-top: 0.5rem; }

/* Quick actions on top and System under it, in a column of their own at the right on wide screens; on narrower screens they are ordinary cards */
.dash-aside { display: contents; }
@media (min-width: 1100px) {
  .dash-root.has-aside { padding-right: 21.9rem; }
  .dash-root.has-aside > .dash-aside { display: flex; flex-direction: column; position: absolute; top: 0; right: 0; width: 21rem; }
}
@media print {
  .dash-main { display: block !important; }
}

/* Navigation tabs: slide-in underline and soft highlight on hover */
.nav-tab { position: relative; border-radius: 0.5rem 0.5rem 0 0; transition: background-color 0.2s ease, color 0.2s ease; }
.nav-tab::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -2px; height: 2px; background: rgba(255, 255, 255, 0.75); transform: scaleX(0); transition: transform 0.25s ease; border-radius: 2px; }
.nav-tab:hover { background-color: rgba(255, 255, 255, 0.1); }
.nav-tab:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav-tab, .nav-tab::after { transition: none; } }

/* Printed report */
.print-report { display: none; }
@media print {
  @page { margin: 14mm; }
  .print-flow { height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; padding-left: 0 !important; padding-right: 0 !important; }
  .dash-greet, .dash-main, .dash-tiles { display: none !important; }
  .print-report { display: block; color: #000; font-size: 10.5pt; line-height: 1.35; }
  .print-report h1 { font-size: 18pt; font-weight: 700; }
  .print-report h2 { font-size: 13pt; font-weight: 700; margin: 14pt 0 5pt; padding-bottom: 2pt; border-bottom: 1.5px solid #000; }
  .print-report h3 { font-size: 10pt; font-weight: 700; margin: 8pt 0 3pt; }
  .print-report .pr-sub { font-size: 9.5pt; color: #333; }
  .print-report table { width: 100%; border-collapse: collapse; }
  .print-report .pr-kv th { text-align: left; font-weight: 500; padding: 2pt 6pt 2pt 0; }
  .print-report .pr-kv td { text-align: right; font-weight: 700; padding: 2pt 0; white-space: nowrap; }
  .print-report .pr-kv tr { border-bottom: 0.5px solid #bbb; }
  .print-report .pr-grid th, .print-report .pr-grid td { padding: 2.5pt 5pt; border-bottom: 0.5px solid #bbb; text-align: left; }
  .print-report .pr-grid thead th { border-bottom: 1.5px solid #000; font-weight: 700; }
  .print-report .pr-grid tfoot th { border-top: 1.5px solid #000; font-weight: 700; }
  .print-report .r { text-align: right !important; }
  .print-report .pr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14pt; align-items: start; }
  .print-report .pr-note { margin-top: 8pt; }
  .print-report .pr-range, .print-report table, .print-report .pr-cols > div { break-inside: avoid; }
  .print-report h2 { break-after: avoid; }
}

/* Tablets and desktops in the squeezed (dense) layout: the folded tiles shrink to one line each, so the cards above them keep their room */
@media (min-width: 481px) {
  .is-dense .dash-ftile-sub { display: none; }
  .is-dense .dash-ftile { min-height: 2.3rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
}
/* A phone held sideways: ten small tiles in two rows of five */
@media (min-width: 600px) {
  .is-ultra .dash-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Server Stats: a column of bars normally; two across in the squeezed layout, so the card fits in the gap under Service speed */
.dash-stats-list { display: flex; flex-direction: column; gap: 0.75rem; }
.is-dense .dash-stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.8rem; }
.is-dense .dash-sgroup { display: contents; }
.is-dense .dash-sgroup > .dash-explain { grid-column: 1 / -1; margin-top: 0; }
.is-dense .dash-stats-list > p { grid-column: 1 / -1; }
.is-dense .dash-srow-txt { font-size: 0.68rem; margin-top: 0.1rem; }
/* Service speed: the three averages in one row in the squeezed layout */
.is-dense .dash-speedgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.is-dense .dash-speedgrid .dash-speed { padding: 0.45rem 0.25rem; }
.is-dense .dash-speedgrid .dash-sub { font-size: 0.68rem; line-height: 1.15; }
/* Squeezed layout on tablets and desktops: Needs attention and Today use the compact phone arrangement, so more cards fit on one screen */
@media (min-width: 481px) {
  .is-dense .dash-attn { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .is-dense .dash-card:not(.is-sheet) .lbl-full { display: none; }
  .is-dense .dash-card:not(.is-sheet) .lbl-short { display: inline; }
  .is-dense .dash-today { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
  .is-dense .dash-today .dash-stat > .ic { display: none; }
  .is-dense .dash-today .dash-big { font-size: 1rem; }
}
.is-dense .dash-srow .text-sm { font-size: 0.74rem; }

html.bo-page { scrollbar-gutter: stable; }

/* Needs attention tiles: no coloured circle; the icon (in the tile's colour) sits in the number's row at the number's size, the label is centred under them and wraps */
.dash-tile { flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0.65rem 0.5rem; text-align: center; }
.dash-tile-top { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.dash-tile .dash-ic { width: auto; height: auto; background: none; border-radius: 0; flex: none; }
.dash-tile .dash-ic .ic { width: 1.9rem; height: 1.9rem; stroke-width: 1.9; }
.dash-tile-label { font-size: 0.875rem; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; text-wrap: balance; }
.is-dense .dash-tile .dash-ic .ic { width: 1.5rem; height: 1.5rem; }
@media (max-width: 480px) {
  .dash-tile { padding: 0.45rem 0.25rem; }
  .dash-attn .dash-num { font-size: 1.4rem; }
  .dash-tile .dash-ic .ic { width: 1.4rem; height: 1.4rem; }
  .dash-tile-label { font-size: 0.7rem; }
}
.is-ultra .dash-tile { padding: 0.35rem 0.25rem; }
.is-ultra .dash-attn .dash-num { font-size: 1.3rem; }
.is-ultra .dash-tile .dash-ic .ic { width: 1.3rem; height: 1.3rem; }
.is-ultra .dash-tile-label { font-size: 0.68rem; }
@media (min-width: 481px) {
  .is-dense .dash-tile { padding: 0.45rem 0.25rem; }
  .is-dense .dash-tile-label { font-size: 0.7rem; }
}
/* The right-hand column fills the screen's height: Quick actions takes the spare room by spreading its buttons */
@media (min-width: 1100px) {
  .dash-root.has-aside > .dash-aside { bottom: 0; }
  .dash-root.has-aside > .dash-aside > .dash-card[data-card="quick"] { flex: 1 1 auto; display: flex; flex-direction: column; }
  .dash-root.has-aside > .dash-aside > .dash-card[data-card="quick"] > .dash-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5rem; }
  .dash-root.has-aside > .dash-aside > .dash-card[data-card="quick"] .dash-action { flex: 1 1 auto; margin-top: 0; max-height: 4.4rem; }
}