/* ─────────────────────────────────────────────────────────────────────────
   SquadGoals design system
   Glass surfaces, tasteful gradients, and motion that respects the member's
   reduce-motion preference. Everything is driven by MudBlazor palette tokens
   so it follows whichever theme preset the member has chosen.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --sg-glass-bg:      rgba(255, 255, 255, 0.62);
    --sg-glass-border:  rgba(255, 255, 255, 0.55);
    --sg-glass-blur:    18px;
    --sg-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --sg-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --sg-shadow-lg: 0 12px 20px -4px rgba(16, 24, 40, .10), 0 4px 8px -4px rgba(16, 24, 40, .06);
    --sg-ring: color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    --sg-tint-1: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --sg-tint-2: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent);
}

.sg-dark {
    --sg-glass-bg:     rgba(24, 26, 30, 0.58);
    --sg-glass-border: rgba(255, 255, 255, 0.10);
    --sg-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --sg-shadow-md: 0 4px 10px rgba(0,0,0,.45);
    --sg-shadow-lg: 0 16px 28px rgba(0,0,0,.5);
}

/* ── Ambient background: two soft primary/secondary washes ───────────── */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 12% -8%,  var(--sg-tint-1), transparent 60%),
        radial-gradient(50rem 36rem at 92% 4%,   var(--sg-tint-2), transparent 62%),
        radial-gradient(46rem 34rem at 68% 108%, var(--sg-tint-1), transparent 60%);
}

/* ── Glass surface ──────────────────────────────────────────────────── */
.sg-glass {
    background: var(--sg-glass-bg);
    -webkit-backdrop-filter: blur(var(--sg-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--sg-glass-blur)) saturate(160%);
    border: 1px solid var(--sg-glass-border);
    box-shadow: var(--sg-shadow-md);
    border-radius: 16px;
}

.sg-glass-soft {
    background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

/* A hairline highlight along the top edge — what sells the "glass" read. */
.sg-glass::after,
.sg-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent,
                rgba(255,255,255,.75) 22%, rgba(255,255,255,.75) 78%, transparent);
    opacity: .7;
    pointer-events: none;
}
.sg-dark .sg-glass::after { opacity: .18; }

/* ── Hero band ──────────────────────────────────────────────────────── */
.sg-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    color: #fff;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 92%, #000 8%) 0%,
            color-mix(in srgb, var(--mud-palette-primary) 68%, var(--mud-palette-secondary) 32%) 55%,
            color-mix(in srgb, var(--mud-palette-secondary) 78%, #000 10%) 100%);
    box-shadow: var(--sg-shadow-lg);
}
.sg-hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 32rem; height: 32rem;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%);
    pointer-events: none;
}
.sg-hero .mud-typography { color: #fff; }
.sg-hero-sub { opacity: .86; }

/* ── Stat card ──────────────────────────────────────────────────────── */
.sg-stat {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: var(--sg-glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--sg-glass-border);
    box-shadow: var(--sg-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.sg-stat:hover { transform: translateY(-2px); box-shadow: var(--sg-shadow-md); }
.sg-stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.sg-stat-label { font-size: .74rem; text-transform: uppercase;
                 letter-spacing: .07em; opacity: .62; }
.sg-stat-icon {
    position: absolute; right: -.35rem; bottom: -.6rem;
    font-size: 3.6rem; opacity: .09; pointer-events: none;
}
.sg-stat-accent { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 3px; }

/* ── Section card ───────────────────────────────────────────────────── */
.sg-card {
    background: var(--sg-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--sg-glass-border);
    border-radius: 16px;
    box-shadow: var(--sg-shadow-sm);
    overflow: hidden;
}
.sg-card-head {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-primary) 6%, transparent), transparent);
}
.sg-card-body { padding: 1.1rem; }

/* ── Rows ───────────────────────────────────────────────────────────── */
.sg-row { display: flex; align-items: center; gap: .65rem; padding: .6rem .2rem; }
.sg-row + .sg-row { border-top: 1px solid var(--mud-palette-lines-default); }
.sg-row-hover:hover { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }

/* ── Empty state ────────────────────────────────────────────────────── */
.sg-empty { text-align: center; padding: 2.5rem 1rem; }
.sg-empty-icon {
    font-size: 2.6rem; opacity: .28; margin-bottom: .4rem;
    color: var(--mud-palette-primary);
}

/* ── Pills ──────────────────────────────────────────────────────────── */
.sg-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .55rem; border-radius: 99px;
    font-size: .74rem; font-weight: 500;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}
.sg-pill-warn { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
                color: var(--mud-palette-warning-darken); }
.sg-pill-error{ background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
                color: var(--mud-palette-error); }
.sg-pill-ok   { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
                color: var(--mud-palette-success-darken); }

/* ── Skeleton shimmer ───────────────────────────────────────────────── */
.sg-skel {
    border-radius: 10px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-lines-default) 45%, transparent) 25%,
        color-mix(in srgb, var(--mud-palette-lines-default) 18%, transparent) 37%,
        color-mix(in srgb, var(--mud-palette-lines-default) 45%, transparent) 63%);
    background-size: 400% 100%;
    animation: sg-shimmer 1.3s ease infinite;
}
@keyframes sg-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ── Entrance ───────────────────────────────────────────────────────── */
.sg-rise { animation: sg-rise .34s cubic-bezier(.22,.8,.3,1) both; }
@keyframes sg-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Honour the member's reduce-motion preference and the OS setting. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── App bar and drawer get the glass treatment ─────────────────────── */
.mud-appbar {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    background: color-mix(in srgb, var(--mud-palette-appbar-background) 88%, transparent) !important;
    box-shadow: var(--sg-shadow-sm) !important;
}
.mud-drawer {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent) !important;
    border-right: 1px solid var(--mud-palette-lines-default);
}
.mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
    border-radius: 0 99px 99px 0;
}

/* ── Tables read better with a quiet header ─────────────────────────── */
.mud-table-head .mud-table-cell {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7;
}

/* ── Sign-out button inside the account menu ────────────────────────── */
.mud-menu-logout {
    all: unset; cursor: pointer; display: block; width: 100%;
    padding: .5rem 1rem; font: inherit; color: var(--mud-palette-error);
}
.mud-menu-logout:hover { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sg-hero { padding: 1.1rem 1.1rem; border-radius: 14px; }
    .sg-stat { padding: .8rem .85rem; }
    .sg-stat-value { font-size: 1.4rem; }
    .sg-card-body { padding: .85rem; }
}

/* High contrast strips the glass — legibility beats decoration. */
.sg-contrast .sg-glass, .sg-contrast .sg-card, .sg-contrast .sg-stat {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--mud-palette-surface);
    border-width: 2px; border-color: var(--mud-palette-text-primary);
}
.sg-contrast body::before { display: none; }
.sg-contrast .sg-hero { background: var(--mud-palette-primary); }

/* ── Mobile bottom navigation ───────────────────────────────────────── */
.sg-bottom { display: none; }

@media (max-width: 700px) {
    /* Tag-qualified so it outranks `.sg-glass { position: relative }`, which is
       defined later in this file and otherwise un-fixes the bar — the bottom
       navigation then scrolled away with the page and overhung the right edge. */
    nav.sg-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        /* Both edges pinned and the width left to the browser. A width of 100%
           here starts the bar at the left inset and runs 8px past the right
           edge, which is enough to give the whole page a horizontal scrollbar. */
        position: fixed;
        left: .5rem; right: .5rem; bottom: .5rem; width: auto;
        z-index: 1300;
        border-radius: 18px;
        padding: .35rem .25rem;
        /* Keep clear of the iOS home indicator. */
        padding-bottom: max(.35rem, env(safe-area-inset-bottom));
    }
    .sg-bottom-item {
        display: flex; flex-direction: column; align-items: center; gap: .1rem;
        padding: .35rem 0; border-radius: 12px;
        text-decoration: none; color: var(--mud-palette-text-secondary);
        font-size: .66rem; line-height: 1;
    }
    .sg-bottom-item.on {
        color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }
    /* Stop the last row of content hiding behind the bar. */
    .mud-main-content { padding-bottom: 5rem !important; }
}

/* ── Charts ───────────────────────────────────────────────────────────── */
.sg-chart { width: 100%; }
.sg-chart svg { width: 100%; height: calc(100% - 20px); display: block; overflow: visible; }
.sg-chart-axis {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .72rem; color: var(--mud-palette-text-secondary);
  padding-top: 4px; gap: 8px;
}
.sg-chart-range { font-variant-numeric: tabular-nums; opacity: .75; }
.sg-chart-empty {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 96px; font-size: .82rem; color: var(--mud-palette-text-secondary);
  border: 1px dashed var(--mud-palette-divider); border-radius: 12px;
}

/* ── Print: crew sheets and reports go on a noticeboard ───────────────── */
@media print {
  .mud-appbar, .mud-drawer, .sg-bottom, .sg-no-print, .mud-overlay { display: none !important; }
  .mud-main-content { padding: 0 !important; margin: 0 !important; }
  .sg-glass, .sg-card, .mud-paper {
    box-shadow: none !important; backdrop-filter: none !important;
    background: #fff !important; border: 1px solid #ccc !important;
  }
  body, .mud-layout { background: #fff !important; color: #000 !important; }
  .sg-print-only { display: block !important; }
  a[href]::after { content: ""; }
  .sg-sheet { page-break-inside: avoid; }
}
.sg-print-only { display: none; }

/* A small colour key, used where a squad or activity needs identifying at a glance. */
.sg-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 12%, transparent);
}

/* ═════════════════════════════════════════════════════════════════════════
   Liquid glass
   Real glass does three things a flat panel does not: it bends light at its
   edges, it catches a specular highlight that moves with the viewer, and it
   sits in front of something. The rules below add all three, and every one of
   them is switched off under prefers-reduced-motion or the contrast theme.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    --sg-lg-edge:  rgba(255, 255, 255, 0.75);
    --sg-lg-sheen: rgba(255, 255, 255, 0.28);
    --sg-lg-inner: rgba(255, 255, 255, 0.45);
    --sg-aurora-1: color-mix(in srgb, var(--mud-palette-primary)   40%, transparent);
    --sg-aurora-2: color-mix(in srgb, var(--mud-palette-secondary) 34%, transparent);
    --sg-aurora-3: color-mix(in srgb, var(--mud-palette-tertiary)  28%, transparent);
}

.sg-dark {
    --sg-lg-edge:  rgba(255, 255, 255, 0.16);
    --sg-lg-sheen: rgba(255, 255, 255, 0.10);
    --sg-lg-inner: rgba(255, 255, 255, 0.06);
    --sg-aurora-1: color-mix(in srgb, var(--mud-palette-primary)   34%, transparent);
    --sg-aurora-2: color-mix(in srgb, var(--mud-palette-secondary) 28%, transparent);
    --sg-aurora-3: color-mix(in srgb, var(--mud-palette-tertiary)  22%, transparent);
}

/* ── Aurora: the thing the glass is in front of ──────────────────────────
   Three washes drifting on different periods so they never repeat a pattern.
   Sixty-second cycles — slow enough to read as light rather than animation. */
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38rem 30rem at 20% 25%, var(--sg-aurora-1), transparent 60%),
        radial-gradient(34rem 28rem at 78% 18%, var(--sg-aurora-2), transparent 62%),
        radial-gradient(42rem 32rem at 55% 88%, var(--sg-aurora-3), transparent 58%);
    filter: blur(46px);
    opacity: .85;
    animation: sg-aurora 64s ease-in-out infinite alternate;
}

@keyframes sg-aurora {
    0%   { transform: translate3d(0, 0, 0)         scale(1);    }
    33%  { transform: translate3d(2.5%, -2%, 0)    scale(1.06); }
    66%  { transform: translate3d(-2%, 1.5%, 0)    scale(1.02); }
    100% { transform: translate3d(1.5%, 2.5%, 0)   scale(1.08); }
}

/* ── Refraction at the edge ──────────────────────────────────────────────
   A glass panel is brightest where it is thickest: along the top edge and
   fading down the left. One gradient border does both. */
.sg-glass, .sg-card, .sg-stat {
    position: relative;
    isolation: isolate;
}

.sg-glass::before, .sg-card::before, .sg-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg,
        var(--sg-lg-edge) 0%,
        transparent 38%,
        transparent 62%,
        color-mix(in srgb, var(--sg-lg-edge) 45%, transparent) 100%);
    /* Paint only the 1px ring, not the fill. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* An inner light, so the surface has thickness rather than being a cut-out. */
.sg-card, .sg-stat {
    box-shadow:
        var(--sg-shadow-md),
        inset 0 1px 0 var(--sg-lg-inner),
        inset 0 -1px 0 color-mix(in srgb, var(--mud-palette-surface) 40%, transparent);
}

/* ── Specular sheen that follows the pointer ─────────────────────────────
   --sg-x/--sg-y are set by keys.js on pointer move; the fallback keeps a
   static highlight for keyboard and touch users. */
.sg-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        14rem 14rem at var(--sg-x, 30%) var(--sg-y, 0%),
        var(--sg-lg-sheen), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
}

.sg-sheen:hover::after { opacity: 1; }

/* ── Depth on lift ───────────────────────────────────────────────────────
   Cards rise slightly and their blur deepens, which reads as the panel
   floating further from the background. */
.sg-card, .sg-stat {
    transition: transform .28s cubic-bezier(.22,.8,.3,1),
                box-shadow .28s ease,
                backdrop-filter .28s ease;
}

.sg-card:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--sg-shadow-lg),
        inset 0 1px 0 var(--sg-lg-inner),
        0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* ── Gradient headings ───────────────────────────────────────────────────
   Used sparingly: page titles and hero figures only. */
.sg-gradient-text {
    background: linear-gradient(120deg,
        var(--mud-palette-primary) 0%,
        color-mix(in srgb, var(--mud-palette-secondary) 80%, var(--mud-palette-primary)) 60%,
        var(--mud-palette-tertiary) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ── Frosted chrome ──────────────────────────────────────────────────────
   The bar and drawer sit over content, so they get the heaviest blur. */
.mud-appbar.mud-appbar-fixed-top {
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--sg-lg-edge);
}

/* ── Focus, which glass must not swallow ─────────────────────────────────
   Low-contrast surfaces make default focus rings disappear. This one sits
   above the sheen and the edge highlight. */
.sg-card:focus-within, .sg-glass:focus-within {
    outline: 2px solid var(--sg-ring);
    outline-offset: 2px;
}

/* ── Opt-outs ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
    .sg-card, .sg-stat { transition: none; }
    .sg-card:hover { transform: none; }
    .sg-sheen::after { display: none; }
}

/* High contrast strips every translucent effect rather than dimming it. */
.sg-contrast body::after { display: none; }
.sg-contrast .sg-glass::before,
.sg-contrast .sg-card::before,
.sg-contrast .sg-stat::before,
.sg-contrast .sg-sheen::after { display: none; }
.sg-contrast .sg-card, .sg-contrast .sg-stat { box-shadow: none; }
.sg-contrast .sg-gradient-text {
    background: none; color: var(--mud-palette-text-primary);
    -webkit-text-fill-color: currentColor;
}

/* backdrop-filter is still missing in a few engines; without it a translucent
   panel is just washed-out text on a busy background. Fall back to opaque. */
@supports not (backdrop-filter: blur(1px)) {
    .sg-glass, .sg-card, .sg-stat, .mud-appbar.mud-appbar-fixed-top {
        background: var(--mud-palette-surface);
    }
    body::after { opacity: .25; }
}

@media print {
    body::after, .sg-sheen::after,
    .sg-glass::before, .sg-card::before, .sg-stat::before { display: none !important; }
}

/* ── Hero: a deeper, layered gradient ────────────────────────────────────
   The flat two-stop gradient read as a coloured box. Three stops on a
   diagonal, plus a soft light from the top-left, give it a surface. */
.sg-hero {
    background:
        radial-gradient(28rem 18rem at 12% -30%, rgba(255,255,255,.22), transparent 70%),
        linear-gradient(125deg,
            var(--mud-palette-primary) 0%,
            color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-secondary)) 52%,
            color-mix(in srgb, var(--mud-palette-secondary) 78%, #101827) 100%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* A slow highlight sweeping across the hero, once every twelve seconds. Its own
   element rather than a pseudo-element: ::before already draws the corner glow
   and ::after the top hairline, and the sweep has to move independently. */
.sg-hero-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 30%,
        rgba(255,255,255,.10) 45%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.10) 55%,
        transparent 70%);
    transform: translateX(-60%);
    animation: sg-sweep 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.sg-hero > * { position: relative; z-index: 1; }

@keyframes sg-sweep {
    0%, 70%  { transform: translateX(-60%); }
    100%     { transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
    .sg-hero-sweep { animation: none; opacity: .5; }
}

.sg-contrast .sg-hero-sweep { display: none; }

/* ── Let the ambient layers through ──────────────────────────────────────
   MudBlazor paints an opaque background on the layout and main content, which
   sits above body::before and body::after however low their z-index is. The
   washes and the aurora were being rendered and then covered up. */
.mud-layout,
.mud-main-content,
.mud-container { background-color: transparent !important; }

/* The drawer keeps a surface of its own — it must stay legible over the
   aurora rather than becoming a second translucent layer on top of it. */
.mud-drawer {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
            backdrop-filter: blur(16px) saturate(160%);
}

/* With the aurora now visible, cards need a touch more opacity to stay readable. */
.sg-card, .sg-stat {
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
            backdrop-filter: blur(16px) saturate(170%);
}

.sg-dark .sg-card, .sg-dark .sg-stat,
.sg-dark .sg-card, .sg-dark .sg-stat {
    background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
}

/* ── Why the ambient layers were invisible ───────────────────────────────
   body::before and body::after sit at z-index -1 and -2, which puts them
   behind their parent's own background — and MudBlazor gives body a solid
   background colour. Both layers were being painted and then covered by the
   element that owns them.

   Moving the base colour up to <html> leaves body transparent, so the washes
   and the aurora have something to sit in front of. */
html {
    background-color: var(--mud-palette-background, #f7f8fa);
}

body {
    background-color: transparent !important;
}

.sg-dark {
    --sg-base: var(--mud-palette-background);
}

/* ── A block within a session plan ───────────────────────────────────────
   "6 x 750 m @ AT r28-30, 3′ rest" is one idea and must not wrap mid-notation;
   the title after it is the part that can be trimmed. */
.sg-block {
    display: grid;
    grid-template-columns: 5.5rem auto 1fr;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
}
.sg-block-kind { justify-content: center; }
.sg-block-note { white-space: nowrap; }
.sg-block-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
@media (max-width: 500px) {
    .sg-block { grid-template-columns: 5rem 1fr; }
    .sg-block-title { grid-column: 2; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Command palette
   ═════════════════════════════════════════════════════════════════════════ */
.sg-palette-dialog .mud-dialog { border-radius: 14px; overflow: hidden; }
.sg-palette { display: flex; flex-direction: column; max-height: min(70vh, 34rem); }

.sg-palette-input {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-palette-field {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-size: 1rem; font-family: inherit;
    color: var(--mud-palette-text-primary);
}
.sg-palette-field::placeholder { color: var(--mud-palette-text-secondary); }

.sg-palette-results { overflow-y: auto; padding: .35rem 0; flex: 1; }
.sg-palette-group {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    padding: .55rem 1rem .2rem;
}
.sg-palette-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem 1rem; cursor: pointer;
    border-left: 2px solid transparent;
}
.sg-palette-row.sel {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-left-color: var(--mud-palette-primary);
}
.sg-palette-icon { color: var(--mud-palette-text-secondary); flex: none; }
.sg-palette-row.sel .sg-palette-icon { color: var(--mud-palette-primary); }
.sg-palette-text { min-width: 0; flex: 1; }
.sg-palette-title { font-size: .9rem; line-height: 1.3; }
.sg-palette-detail {
    font-size: .76rem; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-palette-empty {
    padding: 2rem 1rem; text-align: center;
    color: var(--mud-palette-text-secondary); font-size: .85rem;
}
.sg-palette-foot {
    display: flex; align-items: center; gap: .9rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .72rem; color: var(--mud-palette-text-secondary);
}
.sg-kbd {
    font: inherit; font-size: .68rem; line-height: 1;
    padding: .18rem .35rem; border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}
@media (max-width: 600px) {
    .sg-palette-foot span:not(:last-child) { display: none; }
    .sg-palette { max-height: 78vh; }
}

/* ═════════════════════════════════════════════════════════════════════════
   App bar: it must fit
   The bar carried eight controls. On a 390px screen that is 457px of buttons,
   so notifications and the profile menu were rendered off the edge of the
   display and could not be reached at all.
   ═════════════════════════════════════════════════════════════════════════ */
.mud-appbar .mud-toolbar { gap: 0; }
.sg-brand { font-weight: 600; letter-spacing: -.01em; }

/* The palette trigger reads as a search box on desktop and an icon on mobile. */
.sg-cmd-trigger {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 34px; padding: 0 .7rem;
    border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: inherit; font-size: .82rem;
    min-width: 13rem;
    transition: background .2s ease, border-color .2s ease;
}
.sg-cmd-trigger:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }
.sg-cmd-trigger .sg-kbd {
    border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: inherit;
}

@media (max-width: 1100px) { .sg-cmd-trigger { min-width: 9rem; } }
@media (max-width: 860px) {
    .sg-cmd-trigger { min-width: 0; padding: 0 .5rem; border: 0; background: transparent; }
    .sg-cmd-trigger .sg-cmd-label, .sg-cmd-trigger .sg-kbd { display: none; }
    .sg-brand { font-size: 1.05rem; }
}
@media (max-width: 420px) {
    .sg-brand { display: none; }        /* the icons matter more than the wordmark */
}

/* Nothing in the shell may cause a horizontal scroll. */
html, body { overflow-x: hidden; }
.mud-appbar, .mud-toolbar { max-width: 100vw; }

/* ── Theme picker ────────────────────────────────────────────────────────── */
.sg-theme-picker { min-width: 15.5rem; }
.sg-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.bar-swatch {
    width: 100%; height: 30px; border-radius: 7px; cursor: pointer;
    border: 2px solid transparent; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.bar-swatch.sel {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}
.bar-swatch:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.sg-notif-menu { min-width: min(24rem, 92vw); max-width: 26rem; }
.sg-account-menu { min-width: min(17rem, 90vw); }

/* MudGrid uses negative margins for its gutters. Inside a padded container that is
   fine, but any element that escapes still lengthens the page's scroll width, and a
   phone then rubber-bands sideways. Clip rather than scroll. */
.mud-main-content { overflow-x: clip; }

/* ── Hero in dark mode ───────────────────────────────────────────────────
   The hero paints white text on `--mud-palette-primary`. In dark mode that
   token is deliberately *light* so it can be read against a dark surface, so
   the hero became pale blue with white text on it — the worst contrast on the
   page. In dark mode the band is built from the surface instead, tinted with
   the accent, and the text takes the normal foreground colour. */
.sg-dark .sg-hero {
    background:
        radial-gradient(28rem 18rem at 12% -30%,
            color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 70%),
        linear-gradient(125deg,
            color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)) 0%,
            color-mix(in srgb, var(--mud-palette-secondary) 14%, var(--mud-palette-surface)) 55%,
            var(--mud-palette-surface) 100%);
    border: 1px solid var(--mud-palette-lines-default);
}
.sg-dark .sg-hero .mud-typography { color: var(--mud-palette-text-primary); }
.sg-dark .sg-hero-sub { color: var(--mud-palette-text-secondary); opacity: 1; }
.sg-dark .sg-hero .mud-icon-root { color: var(--mud-palette-primary); }
/* The outlined action in the hero is styled for a coloured band; on dark it needs
   the ordinary border colour or it disappears. */
.sg-dark .sg-hero .mud-button-outlined {
    color: var(--mud-palette-text-primary) !important;
    border-color: var(--mud-palette-lines-default) !important;
}
.sg-dark .sg-hero-sweep { opacity: .35; }

/* ── Sign out ────────────────────────────────────────────────────────────
   A bare <button> inside a menu, because signing out has to be a form POST
   with an antiforgery token. Style it to match the menu items around it. */
.mud-menu-logout {
    display: flex; align-items: center; gap: .75rem;
    width: 100%; padding: .55rem 1rem;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .9rem; text-align: left;
    color: var(--mud-palette-error);
}
.mud-menu-logout::before {
    content: "";
    width: 20px; height: 20px; flex: none;
    background-color: currentColor;
    -webkit-mask: var(--sg-logout-icon) center / contain no-repeat;
            mask: var(--sg-logout-icon) center / contain no-repeat;
}
:root {
    --sg-logout-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.59L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z'/></svg>");
}
.mud-menu-logout:hover { background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent); }
.mud-menu-logout:focus-visible { outline: 2px solid var(--mud-palette-error); outline-offset: -2px; }

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.sg-shim-table { width: 100%; }
.sg-shim-row {
    display: grid; grid-template-columns: 2fr repeat(auto-fit, minmax(0, 1fr));
    gap: 1rem; align-items: center;
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-shim-head { opacity: .55; }
.sg-shim-cards {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.sg-shim-stats {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.sg-shim-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px; padding: 1rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
}
.sg-shim-chart { width: 100%; }

/* The shimmer sweep is decoration; under reduce-motion hold a flat placeholder. */
@media (prefers-reduced-motion: reduce) {
    .sg-skel { animation: none; background-position: 50% 50%; }
}

/* ── Permission matrix ───────────────────────────────────────────────────
   Wide by nature: one column per capability. The member and role columns stay
   put while the capabilities scroll, so a row never loses its label. */
.sg-matrix-wrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.sg-matrix { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.sg-matrix th, .sg-matrix td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: .3rem .45rem;
    font-size: .8rem;
}
.sg-matrix thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--mud-palette-surface);
    vertical-align: bottom;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}
.sg-matrix .sg-matrix-name { position: sticky; left: 0; z-index: 2;
    background: var(--mud-palette-surface); min-width: 11rem; }
.sg-matrix .sg-matrix-role { position: sticky; left: 11rem; z-index: 2;
    background: var(--mud-palette-surface); min-width: 7rem; }
.sg-matrix thead .sg-matrix-name, .sg-matrix thead .sg-matrix-role { z-index: 4; }
.sg-matrix-sub { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.sg-matrix-inactive { opacity: .5; }
.sg-matrix-cap { width: 2.6rem; height: 8.5rem; }
.sg-matrix-cap-label {
    display: block; white-space: nowrap;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-weight: 500; font-size: .74rem;
    max-height: 8rem; overflow: hidden;
}
.sg-matrix-cell { text-align: center; }
.sg-matrix tbody tr:hover td { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.sg-matrix tbody tr:hover .sg-matrix-name,
.sg-matrix tbody tr:hover .sg-matrix-role {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.sg-cap {
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent; color: var(--mud-palette-success); padding: 0;
    position: relative;
}
.sg-cap.on { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
             border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
.sg-cap:hover { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.sg-cap:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* A hand-set cell is marked, so an officer can see at a glance which permissions
   were decided deliberately and which merely follow the role. */
.sg-cap.manual::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mud-palette-warning);
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

/* ── Seat racing ─────────────────────────────────────────────────────────── */
.sg-piece {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px; padding: .85rem; margin-bottom: 1rem;
}
.sg-piece.void { opacity: .5; }
.sg-boats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sg-boat { border-radius: 10px; padding: .5rem .6rem; font-size: .84rem; }
.sg-boat.a { background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent); }
.sg-boat.b { background: color-mix(in srgb, var(--mud-palette-secondary) 9%, transparent); }
.sg-boat-name { font-weight: 600; font-size: .76rem; text-transform: uppercase;
                letter-spacing: .04em; opacity: .75; margin-bottom: .3rem; }
.sg-boat-empty { color: var(--mud-palette-text-secondary); font-style: italic; }
.sg-boat-seat { display: flex; align-items: center; gap: .4rem; padding: .1rem 0; }
.sg-boat-seat.moved { font-weight: 600; color: var(--mud-palette-warning); }
.sg-boat-seatnum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 5px; flex: none;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: .68rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) { .sg-boats { grid-template-columns: 1fr; } }

.sg-crew-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem; }
.sg-pick {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .6rem; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent; color: inherit; font: inherit; font-size: .84rem;
    text-align: left;
}
.sg-pick-tag { font-size: .7rem; opacity: .7; }
.sg-pick-1 { background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
             border-color: var(--mud-palette-primary); }
.sg-pick-2 { background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
             border-color: var(--mud-palette-secondary); }
.sg-pick:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── Rack plan ───────────────────────────────────────────────────────────
   Drawn the way the shed actually looks: the top rack at the top. Reading a
   plan upside down against the real thing is how boats end up in the wrong bay. */
.sg-rack-level { display: flex; align-items: stretch; gap: .6rem; margin-bottom: .5rem; }
.sg-rack-label {
    width: 2rem; flex: none; display: flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    border-right: 2px solid var(--mud-palette-lines-default);
}
.sg-rack-row { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1; }
.sg-slot {
    min-width: 8.5rem; min-height: 3.1rem; flex: 1 1 8.5rem;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: .1rem; padding: .4rem .6rem; cursor: pointer;
    border-radius: 9px; border: 1px dashed var(--mud-palette-lines-default);
    background: transparent; color: inherit; font: inherit; text-align: left;
}
.sg-slot-name { font-size: .84rem; font-weight: 600; }
.sg-slot-sub { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.sg-slot.club {
    border-style: solid;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.sg-slot.private {
    border-style: solid;
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-secondary) 10%, transparent);
}
.sg-slot.oos {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--mud-palette-error) 7%, transparent) 0 6px,
        transparent 6px 12px);
}
.sg-slot:hover { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.sg-slot:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── Physio ──────────────────────────────────────────────────────────────── */
.sg-injury {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px; padding: .75rem .9rem; margin-bottom: .75rem;
}
.sg-physio-note {
    font-size: .82rem; padding: .45rem 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.sg-physio-note:first-child { border-top: 0; }

/* ── Camps ───────────────────────────────────────────────────────────────── */
.sg-camp-day {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: .7rem 0; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-camp-day:last-child { border-bottom: 0; }
.sg-camp-date {
    width: 2.9rem; flex: none; text-align: center;
    border-radius: 9px; padding: .3rem 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.sg-camp-dow { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.sg-camp-num { font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.sg-camp-slots { font-size: .84rem; display: grid; gap: .15rem; }

/* ── Video annotation overlay ────────────────────────────────────────────
   The note sits on the frame it is about. Corners are chosen per note so the
   card does not cover the thing being described. */
.sg-video-overlay { position: absolute; inset: 0; pointer-events: none; }
.sg-vo {
    position: absolute; max-width: min(24rem, 62%);
    pointer-events: auto;
    background: rgba(14, 16, 20, .86);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
            backdrop-filter: blur(10px) saturate(150%);
    color: #f2f4f6;
    border-radius: 12px; padding: .7rem .85rem;
    border-left: 4px solid var(--mud-palette-primary);
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    animation: sg-vo-in .22s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes sg-vo-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.sg-vo-topleft     { top: 1rem;  left: 1rem; }
.sg-vo-topright    { top: 1rem;  right: 1rem; }
.sg-vo-bottomleft  { bottom: 3.4rem; left: 1rem; }
.sg-vo-bottomright { bottom: 3.4rem; right: 1rem; }
.sg-vo-centre      { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.sg-vo-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.sg-vo-kind {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
    padding: .1rem .4rem; border-radius: 4px;
    background: rgba(255,255,255,.16);
}
.sg-vo-time { font-size: .7rem; opacity: .7; font-variant-numeric: tabular-nums; }
.sg-vo-body { font-size: .9rem; line-height: 1.45; }
.sg-vo-go {
    margin-top: .55rem; cursor: pointer;
    font: inherit; font-size: .76rem;
    background: rgba(255,255,255,.14); color: inherit;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 7px; padding: .22rem .6rem;
}
.sg-vo-go:hover { background: rgba(255,255,255,.24); }

.sg-vo-praise { border-left-color: #4caf50; }
.sg-vo-fix    { border-left-color: #ef5350; }
.sg-vo-drill  { border-left-color: #42a5f5; }
.sg-vo-timing { border-left-color: #ffb300; }

/* Cue markers on the scrub bar, so a coach can see where the notes are. */
.sg-video-track {
    position: relative; height: 6px; margin-top: .5rem; border-radius: 99px;
    background: var(--mud-palette-lines-default);
}
.sg-video-cue {
    position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px;
    background: var(--mud-palette-primary); cursor: pointer;
    border: 0; padding: 0;
}
.sg-video-cue.praise { background: var(--mud-palette-success); }
.sg-video-cue.fix    { background: var(--mud-palette-error); }
.sg-video-cue.drill  { background: var(--mud-palette-info); }
.sg-video-cue.timing { background: var(--mud-palette-warning); }
.sg-video-cue:hover  { transform: scaleX(2.2); }

/* ── Comparison table ────────────────────────────────────────────────────── */
.sg-compare td, .sg-compare th { text-align: left; padding: .45rem .7rem; }
.sg-compare-group td {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    padding-top: .6rem !important;
}
.sg-compare-best {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    box-shadow: inset 2px 0 0 var(--mud-palette-success);
}
.sg-compare-figs { display: grid; gap: .45rem; font-size: .86rem; }
.sg-compare-figs > div { display: flex; justify-content: space-between; gap: 1rem; }
.sg-compare-figs span { color: var(--mud-palette-text-secondary); }

/* ── Import ──────────────────────────────────────────────────────────────── */
.sg-import { background: transparent; }
.sg-import-bad td { background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent); }

/* ── Bulk operations ─────────────────────────────────────────────────────── */
.sg-bulk-list {
    max-height: 24rem; overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.sg-bulk-row {
    display: flex; align-items: center; gap: .3rem; cursor: pointer;
    padding: .1rem .5rem .1rem .2rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .86rem;
}
.sg-bulk-row:last-child { border-bottom: 0; }
.sg-bulk-row.on { background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent); }
.sg-bulk-examples {
    font-size: .84rem; display: grid; gap: .2rem;
    padding: .7rem .9rem; border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

/* Our own crews, so they can be picked out of a hundred-line results sheet. */
.sg-result-ours td {
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    font-weight: 500;
}
.sg-result-ours td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }

/* ── Qualification cover ─────────────────────────────────────────────────── */
.sg-cover-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .5rem 0; font-size: .86rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-cover-row:last-child { border-bottom: 0; }
.sg-cover-row.short { box-shadow: inset 3px 0 0 var(--mud-palette-error); padding-left: .6rem; }

/* ── RowSafe checklist ───────────────────────────────────────────────────── */
.sg-rowsafe {
    padding: .7rem .8rem; border-radius: 10px; margin-bottom: .6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 4px;
}
.sg-rowsafe.met      { border-left-color: var(--mud-palette-success); }
.sg-rowsafe.partly   { border-left-color: var(--mud-palette-warning); }
.sg-rowsafe.not-met  { border-left-color: var(--mud-palette-error); }
.sg-rowsafe.na       { border-left-color: var(--mud-palette-lines-default); opacity: .6; }

/* A blade, drawn from the club's own colours. */
.sg-blade {
    width: 96px; height: 34px; flex: none;
    border-radius: 4px 14px 14px 4px;
    border: 1px solid var(--mud-palette-lines-default);
}

.sg-audit-before { text-decoration: line-through; opacity: .7; }
.sg-audit-after  { color: var(--mud-palette-success); font-weight: 500; }

/* ── Member timeline ─────────────────────────────────────────────────────── */
.sg-timeline { position: relative; padding-left: .5rem; }
.sg-tl-item {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: .55rem 0; position: relative;
}
.sg-tl-item::before {
    content: ""; position: absolute; left: 15px; top: 2.1rem; bottom: -.55rem;
    width: 2px; background: var(--mud-palette-lines-default);
}
.sg-tl-item:last-child::before { display: none; }
.sg-tl-dot {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-lines-default);
    position: relative; z-index: 1;
}

/* ── Duplicate comparison ────────────────────────────────────────────────── */
.sg-dupe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sg-dupe-side {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px; padding: .8rem;
}
@media (max-width: 700px) { .sg-dupe { grid-template-columns: 1fr; } }
.sg-kept { margin: .4rem 0 0 1.1rem; font-size: .84rem; }
.sg-kept li { margin-bottom: .25rem; }

/* ── Squad health ────────────────────────────────────────────────────────── */
.sg-health {
    padding: .6rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-health:last-child { border-bottom: 0; }
.sg-health-bars { display: flex; gap: .35rem; align-items: flex-end; height: 34px; }
.sg-health-bar {
    flex: 1; height: 100%; border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-lines-default) 50%, transparent);
    display: flex; align-items: flex-end; overflow: hidden;
}
.sg-health-fill { width: 100%; border-radius: 4px; transition: height .3s ease; }

.sg-streak {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .84rem;
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent);
    color: var(--mud-palette-warning);
}

/* ── Where you stand ─────────────────────────────────────────────────────── */
.sg-standing { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sg-standing-item {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px; padding: .8rem;
}
.sg-standing-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
}
.sg-standing-value { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Shortcut help ───────────────────────────────────────────────────────── */
.sg-shortcuts { display: grid; gap: .3rem; }
.sg-shortcut {
    display: grid; grid-template-columns: 7rem 1fr; gap: .8rem;
    align-items: center; font-size: .86rem;
    padding: .18rem 0;
}

/* ── Rack labels ─────────────────────────────────────────────────────────
   Sized for a sheet of adhesive labels: three across on A4, tall enough for
   the code to scan from arm's length in a badly lit shed. */
.sg-labels {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.sg-label {
    display: flex; align-items: center; gap: .8rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px; padding: .6rem;
    break-inside: avoid;
}
.sg-label-qr { width: 78px; height: 78px; flex: none; }
.sg-label-name { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.sg-label-sub { font-size: .74rem; color: var(--mud-palette-text-secondary); }

@media print {
    .sg-labels { grid-template-columns: repeat(3, 1fr); gap: .3rem; }
    .sg-label { border-style: solid; border-color: #ccc; }
    .sg-label-sub { color: #555; }
}

/* ── Race pack ───────────────────────────────────────────────────────────
   A single sheet somebody carries in a pocket at a regatta, printed the night
   before. Styled for paper first. */
.sg-pack { max-width: 60rem; }
.sg-pack-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; padding-bottom: .6rem; margin-bottom: 1rem;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}
.sg-pack h1 { font-size: 1.5rem; margin: 0; }
.sg-pack h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.sg-pack-club { font-weight: 600; }
.sg-pack-sub { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.sg-pack section { margin-bottom: 1.6rem; }
.sg-pack-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sg-pack-table th, .sg-pack-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: .3rem .45rem; text-align: left; vertical-align: top;
}
.sg-pack-table th { background: var(--mud-palette-background-gray); font-weight: 600; }
.sg-pack-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .9rem; font-size: .84rem;
}
.sg-pack-safety {
    border: 2px solid var(--mud-palette-error);
    border-radius: 10px; padding: .9rem;
}
.sg-pack-warning {
    font-size: .78rem; margin-top: .5rem;
    color: var(--mud-palette-error);
}
.sg-pack-signoff {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    margin-top: 1rem; font-size: .84rem;
}
@media print {
    .sg-pack section { page-break-inside: avoid; }
    .sg-pack-table th { background: #eee !important; }
}

.sg-missing { font-size: .84rem; line-height: 1.6; }
.sg-budget-group {
    background: var(--mud-palette-background-gray) !important;
    font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}

/* ── Conditions ──────────────────────────────────────────────────────────── */
.sg-weather { text-align: center; min-width: 4.5rem; }
.sg-weather-temp { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.sg-weather-temp.cold  { color: var(--mud-palette-info); }
.sg-weather-temp.windy { color: var(--mud-palette-warning); }
.sg-weather-sub { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.sg-precautions { margin: .4rem 0 0 1.1rem; font-size: .84rem; }
.sg-precautions li { margin-bottom: .15rem; }

.sg-hotspot {
    padding: .6rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.sg-hotspot:last-child { border-bottom: 0; }