/* ===========================
   Spartan Operations Center — design system
   Modern rounded-card app shell with Spartan/tactical accents: hex shield
   logo, hexagonal readiness gauge, drill-sergeant copy.
   Two themes: NIGHT OPS (dark, default) and DAY OPS (light).
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

/* ---------------------------------------------------------------
   Shape, motion and type — identical in both themes.

   Two families only: Rajdhani for display (titles, section headers,
   numerals, buttons, tab labels) and system UI for everything else,
   including the tracked-out micro-labels that used to be monospace.
   --------------------------------------------------------------- */
:root {
    --soc-r-hero: 16px;      /* hero / feature cards */
    --soc-r-card: 14px;      /* standard cards */
    --soc-r-row: 12px;       /* list rows, CTAs, callouts */
    --soc-r-chip: 8px;       /* month day cells, small tiles */
    --soc-r-check: 7px;      /* order checkbox */
    --soc-r-sm: 6px;         /* hydration cells, chips */
    --soc-r-bar: 4px;        /* progress tracks */
    --soc-r-pill: 999px;
    --zune-radius: 10px;     /* generic controls: inputs, buttons */

    --soc-display: "Rajdhani", "Segoe UI", -apple-system, sans-serif;
    --soc-body: system-ui, -apple-system, "Segoe UI", sans-serif;

    --soc-tabbar-h: 56px;
    --zune-transition: 0.2s ease-out;

    /* Ink on a green fill and inside check marks; white on a blue-selected
       surface. The two differ because green is light enough in both themes
       to need dark text, and blue is not. */
    --soc-ink: #0a1014;
    --soc-on-accent: #ffffff;
}

/* ---------------------------------------------------------------
   NIGHT OPS (default).

   Every token is declared outright in each theme block rather than
   derived with var() from another block. A theme selector and :root
   land on the same element (<html>), so a var() written once on :root
   would resolve against :root's own value and never see the override.
   --------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
    --soc-bg: #0a1014;
    --soc-panel: #111b21;
    --soc-panel2: #16242c;
    --soc-line: rgba(140, 180, 200, 0.14);
    /* Not in the design's token table: the app needs an emphasised boundary
       for overlays and drawers, which the design only ever expresses by
       colouring the whole border accent. */
    --soc-line-hi: rgba(63, 167, 214, 0.35);
    --soc-txt: #e9f2f3;
    --soc-mut: #7d949e;
    --soc-cy: #3fa7d6;
    --soc-cy-rgb: 63, 167, 214;
    --soc-gr: #37c978;
    --soc-gr-rgb: 55, 201, 120;
    --soc-cy-dim: rgba(63, 167, 214, 0.14);
    --soc-gr-dim: rgba(55, 201, 120, 0.14);
    --soc-scrim: rgba(6, 10, 13, 0.72);

    --zune-bg: #0a1014;
    --zune-bg-alt: #0a1014;
    --zune-panel: #111b21;
    --zune-panel-alt: #16242c;
    --zune-surface: #16242c;
    --zune-border: rgba(140, 180, 200, 0.14);
    --zune-text: #e9f2f3;
    --zune-text-muted: #7d949e;
    --zune-accent: #3fa7d6;
    --zune-accent-rgb: 63, 167, 214;
    --zune-accent-soft: #6fc2e4;
    --zune-accent-deep: #2d87b3;
    --zune-accent-glow: rgba(63, 167, 214, 0.14);
    --zune-danger: #f0637a;
    --zune-danger-rgb: 240, 99, 122;
    --zune-focus: #3fa7d6;
    --halo-gold: #d8b45c;
    --halo-green: #37c978;
    --halo-green-soft: #6fdda0;
    --halo-orange: #f5993f;
    --zune-accent-gradient: #3fa7d6;
    --halo-green-gradient: #37c978;
    --zune-shine: none;

    color-scheme: dark;
}

/* ---------------------------------------------------------------
   DAY OPS
   --------------------------------------------------------------- */
:root[data-theme="light"] {
    --soc-bg: #eef3f2;
    --soc-panel: #ffffff;
    --soc-panel2: #e2ecea;
    --soc-line: rgba(20, 60, 70, 0.13);
    --soc-line-hi: rgba(15, 124, 173, 0.35);
    --soc-txt: #13232a;
    --soc-mut: #587077;
    --soc-cy: #0f7cad;
    --soc-cy-rgb: 15, 124, 173;
    --soc-gr: #12904f;
    --soc-gr-rgb: 18, 144, 79;
    --soc-cy-dim: rgba(15, 124, 173, 0.1);
    --soc-gr-dim: rgba(18, 144, 79, 0.12);
    --soc-scrim: rgba(19, 35, 42, 0.45);

    --zune-bg: #eef3f2;
    --zune-bg-alt: #eef3f2;
    --zune-panel: #ffffff;
    --zune-panel-alt: #e2ecea;
    --zune-surface: #e2ecea;
    --zune-border: rgba(20, 60, 70, 0.13);
    --zune-text: #13232a;
    --zune-text-muted: #587077;
    --zune-accent: #0f7cad;
    --zune-accent-rgb: 15, 124, 173;
    --zune-accent-soft: #3f9bc4;
    --zune-accent-deep: #0b638b;
    --zune-accent-glow: rgba(15, 124, 173, 0.1);
    --zune-danger: #c2283c;
    --zune-danger-rgb: 194, 40, 60;
    --zune-focus: #0f7cad;
    --halo-gold: #9a7412;
    --halo-green: #12904f;
    --halo-green-soft: #0e7540;
    --halo-orange: #b85c05;
    --zune-accent-gradient: #0f7cad;
    --halo-green-gradient: #12904f;
    --zune-shine: none;

    color-scheme: light;
}

/* ---------------------------------------------------------------
   Army Green — an accent swap layered on either theme, not a third
   palette. Only the blue channel moves; --soc-gr stays the success
   colour so "done" still reads differently from "active".
   --------------------------------------------------------------- */
:root.theme-army-green {
    --soc-cy: #5cc98a;
    --soc-cy-rgb: 92, 201, 138;
    --soc-cy-dim: rgba(92, 201, 138, 0.14);
    --soc-line-hi: rgba(92, 201, 138, 0.35);

    --zune-accent: #5cc98a;
    --zune-accent-rgb: 92, 201, 138;
    --zune-accent-soft: #86dda9;
    --zune-accent-deep: #3fa066;
    --zune-accent-glow: rgba(92, 201, 138, 0.14);
    --zune-accent-gradient: #5cc98a;
    --zune-focus: #5cc98a;
}

:root[data-theme="light"].theme-army-green {
    --soc-cy: #1a7a45;
    --soc-cy-rgb: 26, 122, 69;
    --soc-cy-dim: rgba(26, 122, 69, 0.1);
    --soc-line-hi: rgba(26, 122, 69, 0.35);

    --zune-accent: #1a7a45;
    --zune-accent-rgb: 26, 122, 69;
    --zune-accent-soft: #3f9765;
    --zune-accent-deep: #125c33;
    --zune-accent-glow: rgba(26, 122, 69, 0.1);
    --zune-accent-gradient: #1a7a45;
    --zune-focus: #1a7a45;
}

/* Base reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

html {
    -webkit-text-size-adjust: 100%;
    font-size: 108%;
}

/* Body copy is system UI; Rajdhani is reserved for display numerals,
   titles and buttons, and Share Tech Mono for uppercase micro-labels. */
body {
    background-color: var(--zune-bg);
    color: var(--zune-text);
    font-family: var(--soc-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ===========================
   Layout Shell
   =========================== */

.zune-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Top chrome - callsign header (hex logo + identity + theme toggle) */
.zune-titlebar {
    background: var(--zune-bg);
    color: var(--zune-text-muted);
    padding: 0.55rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--zune-border);
    position: relative;
    flex: none;
}

.soc-header-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Hex shield: 32x32, blue→green gradient, laconic lambda. The wiggle is on
   a wrapper so the clip-path element itself stays untransformed — rotating a
   clipped box re-clips it and the hex corners crawl. */
.soc-hex-wrap {
    display: inline-flex;
    flex: none;
    animation: soc-shield 6s ease-in-out infinite;
}

.soc-hex {
    width: 32px;
    height: 32px;
    flex: none;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, var(--soc-cy), var(--soc-gr));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--soc-ink);
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

@keyframes soc-shield {
    0%, 86%, 100% { transform: rotate(0) scale(1); }
    88% { transform: rotate(-8deg) scale(1.08); }
    92% { transform: rotate(8deg) scale(1.08); }
    96% { transform: rotate(-4deg) scale(1.04); }
}

.soc-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.soc-header-title {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 2.5px;
    line-height: 1;
    color: var(--zune-text);
    text-transform: uppercase;
    white-space: nowrap;
}

/* The expansion of SOC. Tracking is tight and the size steps down on narrow
   phones because "Spartan Operations Center" has to share one line with the
   drawer toggle, the shield and the theme pill. */
.soc-header-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--zune-text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Theme toggle pill */
.soc-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    color: var(--zune-text-muted);
    border-radius: var(--soc-r-pill);
    padding: 6px 12px;
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--zune-transition), border-color var(--zune-transition);
}

.soc-theme-toggle:hover {
    color: var(--soc-cy);
    border-color: var(--soc-cy);
}

/* Radar dish: the bowl group sweeps, the mast and base stay put, and two
   arcs ping in sequence above it. */
.soc-radar {
    flex: none;
    overflow: visible;
    color: var(--soc-cy);
}

:root[data-theme="light"] .soc-radar {
    color: var(--soc-gr);
}

.soc-radar-dish {
    animation: soc-radar 3s ease-in-out infinite;
    transform-origin: 12px 14px;
}

.soc-radar-ping {
    animation: soc-ping 3s infinite;
}

.soc-radar-ping-2 {
    animation: soc-ping 3s infinite 0.35s;
}

@keyframes soc-radar {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(30deg); }
}

@keyframes soc-ping {
    0%, 60%, 100% { opacity: 0; }
    10%, 40% { opacity: 1; }
}

/* Main content area */
.zune-main {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ===========================
   Left Navigation - tactical sidebar
   =========================== */

.zune-nav {
    width: 220px;
    background: var(--zune-panel);
    border-right: 1px solid var(--zune-border);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    /* Nothing escapes the rail: the module list scrolls instead. */
    overflow: hidden;
}

.zune-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zune-accent);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-family: var(--soc-display);
}

.zune-nav-section-title {
    font-family: var(--soc-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--zune-text-muted);
    margin-bottom: 0.5rem;
}

.zune-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The module list takes the leftover height and scrolls within it, so the
   user block at the bottom keeps its space at every viewport height. Without
   this, ten modules plus an avatar overlap the user info below ~760px tall —
   the list simply overflowed its box, because both it and the rail were
   overflow:visible. */
.zune-nav-modules {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.zune-nav-modules::-webkit-scrollbar {
    width: 6px;
}

.zune-nav-modules::-webkit-scrollbar-thumb {
    background: var(--zune-border);
    border-radius: 3px;
}

.zune-nav-modules::-webkit-scrollbar-track {
    background: transparent;
}

/* The user block never shrinks or scrolls away */
.zune-nav-user {
    flex: 0 0 auto;
}

.zune-nav-item {
    margin-bottom: 0.15rem;
}

.zune-nav-link {
    display: block;
    padding: 0.45rem 0.6rem;
    color: var(--zune-text);
    text-decoration: none;
    font-family: var(--soc-display);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.65;
    transition: all var(--zune-transition);
    border-left: 3px solid transparent;
    border-radius: var(--soc-r-sm);
    font-weight: 600;
}

.zune-nav-link:hover {
    opacity: 1;
    color: var(--zune-accent);
    border-left-color: var(--zune-accent);
    background: var(--soc-cy-dim);
}

.zune-nav-link.is-active {
    opacity: 1;
    color: var(--zune-accent);
    border-left-color: var(--zune-accent);
    background: var(--soc-cy-dim);
}

/* ===========================
   Nav User Info
   =========================== */

.zune-nav-user {
    margin-top: auto;
    padding: 1rem 0.5rem;
    border-top: 1px solid var(--zune-border);
    text-align: center;
    min-width: 0;
}

.zune-nav-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--zune-accent);
    background: var(--soc-cy-dim);
    padding: 4px;
    margin-bottom: 0.5rem;
}

/* Nickname falls back to the email address, which is routinely wider than the
   220px rail — clip both rather than letting them run into the border. */
.zune-nav-user-name {
    color: var(--zune-accent);
    font-family: var(--soc-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zune-nav-user-email {
    color: var(--zune-text-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zune-nav-user-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
}

.zune-nav-user-link {
    color: var(--zune-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--zune-transition);
}

.zune-nav-user-link:hover {
    color: var(--zune-accent);
}

/* ===========================
   Content Area
   =========================== */

.zune-content {
    flex: 1;
    background: var(--zune-bg-alt);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pivot header */
.zune-pivot-bar {
    padding: 1.25rem 2rem 0.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    min-width: 0;
}

.zune-pivot {
    font-family: var(--soc-display);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zune-text-muted);
    cursor: pointer;
    transition: all var(--zune-transition);
    opacity: 0.55;
    text-decoration: none;
}

.zune-pivot:hover {
    opacity: 1;
    color: var(--zune-accent);
}

.zune-pivot.is-active {
    color: var(--zune-accent);
    opacity: 1;
}

/* Pivot item - link-based tabs (Health, WorkHours) */
.zune-pivot-item {
    font-family: var(--soc-display);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zune-text-muted);
    text-decoration: none;
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--soc-r-pill);
    transition: all var(--zune-transition);
    white-space: nowrap;
}

.zune-pivot-item:hover {
    color: var(--zune-text);
    background: var(--soc-cy-dim);
}

.zune-pivot-item.is-active {
    color: var(--zune-accent);
    background: var(--soc-cy-dim);
    border-color: var(--soc-line-hi);
}

/* Page title + toolbar */
/* Wraps rather than clips: the header sets overflow:hidden for the scan sweep,
   so an un-wrapped toolbar loses its last button off the right edge. */
.zune-page-header {
    padding: 0.5rem 2rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid var(--zune-border);
    position: relative;
}


.zune-page-title {
    font-family: var(--soc-display);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.1;
    color: var(--zune-text);
}

.zune-page-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--zune-text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.zune-source-indicator {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zune-text-muted);
    border: 1px solid var(--zune-border);
    padding: 0.15rem 0.5rem;
    border-radius: var(--soc-r-sm);
}

/* Tasks page layout */
.zune-tasks-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.zune-tasks-toolbar {
    flex: 1;
    justify-content: flex-end;
}

.zune-quick-add-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.zune-quick-add-form .zune-input {
    width: 220px;
}

/* AI Insights */
.zune-ai-insights-btn {
    color: var(--zune-accent) !important;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.zune-ai-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--zune-text);
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.zune-mobile-close {
    display: none;
    color: var(--zune-text-muted);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    transition: all var(--zune-transition);
}

.zune-mobile-close:hover {
    color: var(--zune-accent);
}

/* Toolbar buttons */
.zune-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.zune-toolbar-button {
    background: none;
    border: 1px solid transparent;
    color: var(--zune-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: pointer;
    padding: 0.3rem 0.7rem;
    border-radius: var(--soc-r-pill);
    transition: all var(--zune-transition);
    opacity: 0.8;
    font-family: var(--soc-display);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.zune-toolbar-button:hover {
    color: var(--zune-accent);
    opacity: 1;
    background: var(--soc-cy-dim);
    border-color: var(--soc-line-hi);
}

/* ===========================
   Content Body
   =========================== */

.zune-page-body {
    flex: 1;
    padding: 1.5rem 2rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 2rem;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    /* Rows size to their content instead of splitting the leftover height
       between them. Stretching was invisible when every card sat on a dark
       background; on DAY OPS it reads as arbitrary gaps between cards. */
    align-content: start;
}

/* Plain rounded card. The design carries no corner brackets and no accent
   edge strip — the border and the radius are the whole treatment. */
.zune-panel {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-card);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.zune-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.zune-panel-title {
    font-family: var(--soc-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
}

.zune-panel-meta {
    font-size: 0.8rem;
    color: var(--zune-text-muted);
}

/* Track list */
.zune-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.zune-list-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--zune-border);
    font-size: 0.9rem;
    cursor: default;
    transition: background var(--zune-transition);
}

.zune-list-item:hover {
    background: var(--soc-cy-dim);
}

.zune-list-item.is-playing {
    color: var(--zune-accent);
}

.zune-list-index {
    text-align: right;
    color: var(--zune-text-muted);
    font-size: 0.8rem;
}

.zune-list-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zune-list-duration {
    font-size: 0.8rem;
    color: var(--zune-text-muted);
}

/* Now Playing */
.zune-nowplaying {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zune-artwork {
    background: var(--zune-panel-alt);
    border-radius: var(--soc-r-card);
    border: 1px solid var(--zune-border);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zune-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.zune-track-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.zune-track-title {
    font-size: 1.2rem;
    font-weight: 400;
}

.zune-track-artist {
    font-size: 0.9rem;
    color: var(--zune-text-muted);
}

.zune-track-album {
    font-size: 0.85rem;
    color: var(--zune-text-muted);
}

/* ===========================
   Player Bar (Bottom)
   =========================== */

.zune-playerbar {
    background: linear-gradient(180deg, var(--zune-panel-alt) 0%, var(--zune-bg) 100%);
    border-top: 1px solid var(--zune-border);
    padding: 0.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1.8fr 2fr 1.2fr;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}

.zune-player-track {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.zune-player-track-title {
    font-size: 0.95rem;
}

.zune-player-track-artist {
    color: var(--zune-text-muted);
}

.zune-player-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.zune-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.zune-control-button {
    background: none;
    border: none;
    color: var(--zune-text);
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.8;
    transition: all var(--zune-transition);
}

.zune-control-button:hover {
    color: var(--zune-accent);
    opacity: 1;
}

.zune-control-button.is-primary {
    color: var(--zune-accent);
}

/* Progress bar */
.zune-progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zune-progress-time {
    font-size: 0.75rem;
    color: var(--zune-text-muted);
    font-family: "Share Tech Mono", monospace;
}

.zune-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--zune-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.zune-progress-fill {
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--zune-accent);
}

/* Volume */
.zune-player-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.zune-volume {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zune-volume-bar {
    width: 80px;
    height: 4px;
    background: var(--zune-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.zune-volume-fill {
    position: absolute;
    inset: 0;
    width: 60%;
    background: var(--zune-accent-soft);
}

.zune-status-text {
    font-size: 0.75rem;
    color: var(--zune-text-muted);
}

/* ===========================
   Buttons & Inputs - HUD style
   =========================== */

.zune-button {
    background: var(--zune-accent);
    color: var(--soc-on-accent);
    border: 1px solid var(--zune-accent);
    border-radius: var(--zune-radius);
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: pointer;
    font-family: var(--soc-display);
    font-weight: 700;
    transition: all var(--zune-transition);
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.zune-button:hover {
    filter: brightness(1.12);
    color: var(--soc-on-accent);
}

/* Ghost is the design's secondary CTA: inset fill, plain border, body text
   colour. The filled blue variant above is the primary. */
.zune-button.is-ghost {
    background: var(--zune-panel-alt);
    color: var(--zune-text);
    border: 1px solid var(--zune-border);
}

.zune-button.is-ghost:hover {
    border-color: var(--zune-accent);
    color: var(--zune-accent);
}

.zune-button.is-danger {
    background: var(--zune-danger);
    border-color: var(--zune-danger);
    color: #fff;
}

.zune-button.is-danger:hover {
    color: #fff;
    filter: brightness(1.12);
}

.zune-input {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--zune-radius);
    color: var(--zune-text);
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
    font-family: var(--soc-body);
    transition: border-color var(--zune-transition), box-shadow var(--zune-transition);
}

.zune-input:focus {
    outline: none;
    border-color: var(--zune-accent);
    box-shadow: 0 0 0 3px var(--soc-cy-dim);
}

/* Scrollbars */
.zune-panel ::-webkit-scrollbar,
.zune-list ::-webkit-scrollbar {
    width: 8px;
}

.zune-panel ::-webkit-scrollbar-track,
.zune-list ::-webkit-scrollbar-track {
    background: var(--zune-bg-alt);
}

.zune-panel ::-webkit-scrollbar-thumb,
.zune-list ::-webkit-scrollbar-thumb {
    background: var(--zune-border);
}

.zune-panel ::-webkit-scrollbar-thumb:hover,
.zune-list ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--zune-accent-rgb), 0.5);
}

/* ===========================
   Title Bar Extensions
   =========================== */

.zune-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.zune-titlebar-user {
    color: var(--zune-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.zune-titlebar-link {
    color: var(--zune-text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--zune-transition);
}

.zune-titlebar-link:hover {
    color: var(--zune-accent);
}

/* ===========================
   Dashboard Tiles - HUD readouts
   =========================== */

.zune-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Stat tile: plain panel card. Value above label, matching the design's
   stat trio; the vitals cards invert that and are handled per-page. */
.zune-tile {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    padding: 12px 12px 10px;
    transition: all var(--zune-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.zune-tile.is-blue .zune-tile-value {
    color: var(--soc-cy);
}

.zune-tile.is-green .zune-tile-value {
    color: var(--soc-gr);
}

.zune-tile:hover {
    border-color: var(--soc-line-hi);
}

.zune-tiles-compact .zune-tile {
    padding: 0.75rem 1rem;
}

.zune-tiles-compact .zune-tile-value {
    font-size: 1.6rem;
}

.zune-tiles-compact .zune-tile-label {
    font-size: 0.65rem;
}

.zune-tiles-compact .zune-tile-sub {
    font-size: 0.6rem;
}

.zune-tile-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--zune-text);
    line-height: 1.15;
    font-family: var(--soc-display);
}

.zune-tile-value small,
.zune-tile-unit {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--zune-text-muted);
    margin-left: 0.15em;
}

/* Tracked-out micro-label under the numeral, system UI at 600 */
.zune-tile-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zune-text-muted);
    margin-top: 0.15rem;
}

.zune-tile-sub {
    font-size: 11px;
    color: var(--zune-text-muted);
    margin-top: 0.2rem;
}

/* ===========================
   Tables - Tactical readout
   =========================== */

.zune-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.zune-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zune-text-muted);
    border-bottom: 1px solid var(--zune-border);
    font-weight: 700;
}

.zune-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--zune-border);
}

.zune-table tr:hover td {
    background: var(--soc-cy-dim);
}

.zune-table .text-right {
    text-align: right;
}

.zune-table .text-center {
    text-align: center;
}

/* ===========================
   Forms / Inputs Extended
   =========================== */

.zune-form-group {
    margin-bottom: 1rem;
}

.zune-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zune-text-muted);
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.zune-input,
.zune-select,
.zune-textarea {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--zune-radius);
    color: var(--zune-text);
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
    width: 100%;
    font-family: var(--soc-body);
    transition: border-color var(--zune-transition), box-shadow var(--zune-transition);
}

/* The caret is drawn with currentColor so it follows both themes and the
   army-green accent swap; a baked-in hex would stay cyan on a white field. */
.zune-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 0.85rem center, right 0.5rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 1.6rem;
}

.zune-textarea {
    min-height: 80px;
    resize: vertical;
}

.zune-input:focus,
.zune-select:focus,
.zune-textarea:focus {
    outline: none;
    border-color: var(--zune-accent);
    box-shadow: 0 0 0 3px var(--soc-cy-dim);
}

.zune-input-sm {
    width: 60px;
    text-align: center;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
}

.zune-input-inline {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--zune-border);
    border-radius: 0;
    padding: 0.2rem 0.3rem;
    color: var(--zune-text);
    font-size: 1.05rem;
    width: 50px;
    text-align: center;
    font-family: "Share Tech Mono", monospace;
}

.zune-input-inline:focus {
    border-color: var(--zune-accent);
    outline: none;
    box-shadow: 0 1px 0 0 var(--zune-accent);
}

/* ===========================
   Toggle Switch
   =========================== */

.zune-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.zune-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.zune-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--zune-panel-alt);
    border-radius: 20px;
    transition: background var(--zune-transition);
    border: 1px solid var(--zune-border);
}

.zune-toggle-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: var(--zune-text-muted);
    border-radius: 50%;
    transition: transform var(--zune-transition), background var(--zune-transition);
}

.zune-toggle input:checked + .zune-toggle-slider {
    background: var(--soc-cy-dim);
    border-color: var(--zune-accent);
}

.zune-toggle input:checked + .zune-toggle-slider::before {
    transform: translateX(16px);
    background: var(--zune-accent);
}

/* ===========================
   Badges - status indicators
   =========================== */

/* Status chips. Blue fill takes white; green is light enough in both themes
   to need the dark ink instead. */
.zune-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: var(--soc-r-sm);
    background: var(--zune-accent);
    color: var(--soc-on-accent);
    font-weight: 700;
}

.zune-badge-muted {
    background: var(--zune-panel-alt);
    color: var(--zune-text-muted);
    border: 1px solid var(--zune-border);
}

.zune-badge-success {
    background: var(--halo-green);
    color: var(--soc-ink);
}

.zune-badge-danger {
    background: var(--zune-danger);
    color: #fff;
}

/* ===========================
   Modal / Dialog
   =========================== */

.zune-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--soc-scrim);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.zune-modal-overlay.is-open {
    display: flex;
}

.zune-modal {
    background: var(--zune-panel);
    border: 1px solid var(--soc-line-hi);
    border-radius: var(--soc-r-hero);
    padding: 1.5rem;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    position: relative;
}

.zune-modal-title {
    font-family: var(--soc-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    color: var(--zune-accent);
}

.zune-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.spartan-confirm-overlay {
    z-index: 1400;
}

.spartan-confirm-modal {
    max-width: 420px;
}

.spartan-confirm-message {
    color: var(--zune-text);
    font-size: 1rem;
    line-height: 1.45;
    padding: 0.2rem 0 0.35rem;
}

.spartan-confirm-accept {
    background: var(--zune-danger);
    border-color: var(--zune-danger);
}

.spartan-confirm-accept:hover {
    filter: brightness(1.12);
}

/* ===========================
   Task Detail Panel
   =========================== */

.zune-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--soc-scrim);
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.zune-detail-overlay.is-open {
    display: block;
}

.zune-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--zune-panel);
    border-left: 1px solid var(--soc-line-hi);
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.zune-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 1px solid var(--zune-border);
}

.zune-detail-title {
    font-family: var(--soc-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--zune-accent);
    word-break: break-word;
}

.zune-detail-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.zune-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.zune-detail-field .zune-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--zune-text-muted);
}

.zune-detail-field span:last-child,
.zune-detail-field div:last-child {
    font-size: 0.95rem;
    color: var(--zune-text);
}

.zune-detail-actions {
    padding: 1.5rem;
    border-top: 1px solid var(--zune-border);
    display: flex;
    gap: 0.75rem;
}

/* ===========================
   Cards - Tactical data cards
   =========================== */

.zune-card {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-card);
    padding: 0.95rem 1.05rem;
    margin-bottom: 0.8rem;
    transition: all var(--zune-transition);
    position: relative;
}

.zune-card:hover {
    border-color: var(--soc-line-hi);
}

.zune-card-title {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

.zune-card-meta {
    font-size: 11px;
    color: var(--zune-text-muted);
}

/* ===========================
   Task List
   =========================== */

.zune-task-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--zune-border);
    cursor: default;
    border-radius: var(--soc-r-sm);
    transition: background var(--zune-transition);
}

.zune-task-row:hover {
    background: var(--soc-cy-dim);
}

.zune-task-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--zune-accent);
    cursor: pointer;
}

/* Small diamond marking an internal (non-Outlook) task in the list */
.task-source-mark {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    display: inline-block;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: var(--soc-cy);
}

.zune-task-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
}

.zune-task-title.is-completed {
    text-decoration: line-through;
    opacity: 0.4;
}

.zune-task-star {
    cursor: pointer;
    color: var(--zune-text-muted);
    font-size: 1.1rem;
    background: none;
    border: none;
    padding: 0;
    transition: all var(--zune-transition);
}

.zune-task-star.is-starred {
    color: var(--halo-gold);
}

.zune-task-delete {
    cursor: pointer;
    color: var(--zune-danger);
    font-size: 1.2rem;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: color var(--zune-transition);
}

.zune-task-delete:hover {
    color: #ff5a5a;
}

.zune-task-due {
    font-size: 11px;
    color: var(--zune-text-muted);
}

.zune-task-due.is-overdue {
    color: var(--zune-danger);
}

/* ===========================
   Goal Grid
   =========================== */

.zune-goal-grid {
    overflow-x: auto;
}

.zune-goal-grid .zune-table th,
.zune-goal-grid .zune-table td {
    white-space: nowrap;
    min-width: 40px;
}

.zune-goal-grid .zune-table td.goal-cell {
    cursor: pointer;
    text-align: center;
}

.zune-goal-grid .zune-table td.goal-cell:hover {
    background: rgba(var(--zune-accent-rgb), 0.1);
}

.zune-goal-pct {
    font-weight: 700;
    font-family: var(--soc-display);
}

.zune-goal-pct.is-high {
    color: var(--halo-green);
}

.zune-goal-pct.is-mid {
    color: var(--zune-accent);
}

.zune-goal-pct.is-low {
    color: var(--zune-danger);
}

/* ===========================
   Workout Session
   =========================== */

.zune-exercise-card {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: border-color var(--zune-transition);
}

.zune-exercise-card:hover {
    border-color: var(--soc-cy);
}

.zune-exercise-name {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.zune-exercise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.zune-exercise-col-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--zune-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.zune-exercise-fields {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zune-exercise-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.zune-exercise-field-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--zune-text-muted);
    letter-spacing: 0.1em;
}

/* ===========================
   Section Header
   =========================== */

/* A Rajdhani label with an optional counter opposite it. No marker glyph and
   no divider rule — the design separates sections with whitespace and the
   card edges alone. */
.zune-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
}

/* Trailing counter — "3/4 done", "4 active" */
.soc-rule-meta {
    font-size: 11px;
    color: var(--zune-text-muted);
    white-space: nowrap;
}

.zune-section-title {
    font-family: var(--soc-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
    flex: none;
}

/* ===========================
   Workout Template Cards
   =========================== */

.workout-exercise-list {
    margin-top: 0.5rem;
}

.workout-exercise-row {
    font-size: 0.95rem;
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.workout-exercise-sets {
    color: var(--zune-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.workout-exercise-name-link {
    color: var(--zune-accent);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-exercise-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-exercise-weight {
    color: var(--zune-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.workout-card-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===========================
   Workout Timer
   =========================== */

.workout-timer-toolbar {
    align-items: center;
    gap: 0.75rem;
}

.workout-timer-display {
    font-size: 1.4rem;
    color: var(--zune-accent);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.workout-timer-est {
    font-size: 1.4rem;
    color: var(--zune-text-muted);
    font-weight: 300;
}

.workout-timer-bar {
    width: 160px;
    height: 4px;
    background: var(--zune-surface);
    border-radius: 2px;
    margin-top: 0.25rem;
}

/* Phone display helpers */
.show-phone { display: none; }

/* ===========================
   Auth Pages
   =========================== */

.zune-auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--zune-bg);
    position: relative;
    padding: 1.5rem;
}

.zune-auth-box {
    background: linear-gradient(135deg, var(--soc-panel), var(--soc-panel2));
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-hero);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.zune-auth-title {
    font-family: var(--soc-display);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: var(--zune-accent);
}

.zune-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.75rem;
    color: var(--zune-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 700;
}

.zune-auth-divider::before,
.zune-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--zune-border);
}

.zune-auth-socials {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.zune-auth-social {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-sizing: border-box;
    text-align: center;
}

.zune-auth-social svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===========================
   Responsive / Mobile
   =========================== */

/* Drawer opener. It lives inside the header (not as a floating action
   button) because the bottom of a phone screen now belongs to the tab
   bar, and a FAB parked over it swallows the last tab's tap target. */
.zune-nav-toggle {
    display: none;
    flex: none;
    background: var(--zune-panel);
    color: var(--zune-text-muted);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-sm);
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: color var(--zune-transition), border-color var(--zune-transition);
}

.zune-nav-toggle:hover {
    color: var(--soc-cy);
    border-color: var(--soc-cy);
}

/* Responsive utility classes */
.zune-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.zune-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.zune-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    min-width: 0;
}

/* Avatar Picker */
.zune-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.zune-avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--zune-panel);
    border: 2px solid var(--zune-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--zune-transition);
}

.zune-avatar-option img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--zune-accent-rgb), 0.03);
}

.zune-avatar-label {
    font-size: 0.7rem;
    color: var(--zune-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zune-avatar-option:hover {
    border-color: var(--soc-line-hi);
    background: var(--soc-cy-dim);
}

.zune-avatar-option.is-selected {
    border-color: var(--zune-accent);
    background: var(--soc-cy-dim);
}

.zune-avatar-option.is-selected .zune-avatar-label {
    color: var(--zune-accent);
}

.zune-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ---- Tablet (max-width: 1024px) ---- */
@media (max-width: 1024px) {
    .zune-page-body {
        padding: 1rem 1.25rem;
    }

    .zune-pivot-bar {
        padding: 1rem 1.25rem 0.5rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .zune-pivot {
        font-size: 1.1rem;
    }

    .zune-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Phone (max-width: 768px) ---- */
@media (max-width: 768px) {
    .zune-mobile-close {
        display: block;
    }

    .zune-nav {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: left 0.3s ease;
        width: 250px;
        max-height: 100dvh;
        gap: 1rem;
        overflow: hidden;
    }

    .zune-nav-modules {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 0.25rem;
    }

    .zune-nav-user {
        flex: 0 0 auto;
        padding: 0.75rem 0.5rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .zune-nav.is-open {
        left: 0;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }

    .zune-nav-toggle {
        display: inline-flex;
    }

    .zune-titlebar {
        padding: 0.5rem 0.75rem;
    }

    .zune-page-body {
        grid-template-columns: 1fr !important;
        padding: 0.75rem;
        min-height: auto;
        flex-shrink: 0;
    }

    .zune-page-header {
        padding: 0.5rem 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .zune-page-title {
        font-size: 1.5rem;
    }

    /* Header has to fit ≡ + logo + identity + toggle pill on one line */
    .soc-header-title {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .soc-header-sub {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .zune-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tasks page mobile layout */
    .zune-tasks-header {
        flex-direction: column;
        align-items: stretch;
    }

    .zune-tasks-toolbar {
        justify-content: stretch;
        width: 100%;
    }

    .zune-quick-add-form {
        flex: 1;
        width: 100%;
    }

    .zune-quick-add-form .zune-input {
        width: auto;
        flex: 1;
    }

    /* Detail panel full width on mobile */
    .zune-detail-panel {
        width: 100%;
    }

    .zune-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .zune-tile {
        padding: 0.75rem;
    }

    .zune-tile-value {
        font-size: 1.4rem;
    }

    .zune-grid-2 {
        grid-template-columns: 1fr;
    }

    .zune-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .zune-form-grid {
        grid-template-columns: 1fr;
    }

    .zune-goal-grid {
        font-size: 0.8rem;
    }

    .zune-exercise-grid {
        grid-template-columns: 1fr;
    }

    /* Workout page mobile fixes */
    .workout-timer-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .workout-timer-display {
        font-size: 1.1rem;
    }

    .workout-timer-est {
        font-size: 1.1rem;
    }

    .workout-timer-bar {
        width: 100%;
    }

    .zune-exercise-name {
        flex-wrap: wrap;
    }

    .zune-exercise-name .zune-input {
        min-width: 0;
        flex-basis: 100%;
    }

    .zune-exercise-card {
        padding: 0.6rem 0.75rem;
    }

    .zune-flex-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hide-phone { display: none; }
    .show-phone { display: inline; }

    .zune-pivot-bar {
        padding: 0.75rem;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .zune-pivot {
        font-size: 1rem;
    }

    .zune-pivot-item {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    .zune-week-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .zune-week-label {
        font-size: 0.8rem;
        text-align: center;
        width: 100%;
        order: -1;
    }

    .zune-section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .zune-modal {
        width: 95%;
        padding: 1rem;
        max-height: 90vh;
    }

    .zune-card {
        padding: 0.75rem;
    }

    .zune-auth-box {
        margin: 1rem;
        padding: 1.5rem;
    }

    /* Task row becomes more compact on mobile */
    .zune-task-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .zune-task-actions {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    /* Better table handling on mobile */
    .zune-table {
        font-size: 0.8rem;
    }

    .zune-table th,
    .zune-table td {
        padding: 0.35rem 0.5rem;
    }

    /* Goal grid scrollable on mobile */
    .zune-goal-grid {
        -webkit-overflow-scrolling: touch;
    }

    .zune-goal-grid .zune-table th,
    .zune-goal-grid .zune-table td {
        min-width: 32px;
        font-size: 0.75rem;
        padding: 0.3rem 0.35rem;
    }

    /* Ensure all tables with scroll wrapper work */
    .zune-table-scroll {
        -webkit-overflow-scrolling: touch;
    }

    /* Charts fit mobile */
    canvas {
        height: auto !important;
        max-height: 200px;
    }

    /* Forms don't overflow */
    .zune-input,
    .zune-select,
    .zune-textarea,
    .form-control,
    .form-select {
        max-width: 100%;
    }

    /* Titlebar actions wrap on narrow screens */
    .zune-titlebar-actions {
        gap: 0.5rem;
    }
}

/* ---- Small phone (max-width: 480px) ---- */
@media (max-width: 480px) {
    .zune-tiles {
        grid-template-columns: 1fr;
    }

    .zune-grid-4 {
        grid-template-columns: 1fr;
    }

    .zune-tile-value {
        font-size: 1.2rem;
    }

    .zune-page-title {
        font-size: 1.3rem;
        word-break: break-word;
    }

    .soc-header-title {
        font-size: 18px;
        letter-spacing: 1.5px;
    }

    .soc-header-sub {
        font-size: 9px;
        letter-spacing: 0;
    }

    .soc-tab-label {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .zune-toolbar-button {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    .zune-button {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    .zune-pivot {
        font-size: 0.85rem;
    }

    .zune-pivot-bar {
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
    }

    .zune-pivot-item {
        font-size: 0.72rem;
        padding: 0.35rem 0.45rem;
    }

    /* Stack exercise fields */
    .zune-exercise-fields {
        gap: 0.3rem;
    }

    .zune-input-inline {
        width: 40px;
        font-size: 0.8rem;
    }

    /* Workout page small-phone fixes */
    .zune-exercise-name {
        gap: 0.3rem;
    }

    .zune-exercise-name .zune-input {
        font-size: 0.85rem;
    }

    .zune-exercise-card {
        padding: 0.5rem;
    }

    .zune-section-header {
        gap: 0.35rem;
    }

    .zune-section-title {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    .workout-exercise-row {
        font-size: 0.85rem;
        padding: 0.2rem 0;
        gap: 0.35rem;
    }

    .workout-exercise-weight {
        font-size: 0.75rem;
    }

    .workout-card-actions {
        gap: 0.35rem;
    }

    .workout-timer-display {
        font-size: 0.95rem;
    }

    .workout-timer-est {
        font-size: 0.95rem;
    }

    .zune-card-title {
        font-size: 1rem;
    }

    .zune-card-meta {
        font-size: 0.8rem;
    }

    /* Task rows on small phones */
    .zune-task-row {
        position: relative;
        flex-wrap: wrap;
        gap: 0.3rem 0.5rem;
        padding: 0.6rem 0;
        padding-right: 2.6rem;
    }

    .zune-task-row > .zune-task-checkbox {
        position: absolute;
        right: 0.45rem;
        top: 0.6rem;
    }

    .zune-task-row > .zune-task-star {
        position: absolute;
        right: 0.45rem;
        bottom: 0.6rem;
    }

    .zune-task-row > .zune-task-actions {
        position: absolute;
        right: 0.45rem;
        bottom: 0.55rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .zune-task-row:has(> .zune-task-actions) > .zune-task-star {
        position: static;
    }

    .zune-task-title {
        font-size: 1rem;
        flex-basis: calc(100% - 2.6rem);
    }

    .zune-task-due,
    .zune-badge {
        font-size: 0.75rem;
    }

    /* Goal grid more compact */
    .zune-goal-grid .zune-table th,
    .zune-goal-grid .zune-table td {
        min-width: 28px;
        font-size: 0.7rem;
        padding: 0.25rem 0.25rem;
    }

    /* Table cells more compact */
    .zune-table {
        font-size: 0.75rem;
    }

    .zune-table th,
    .zune-table td {
        padding: 0.25rem 0.35rem;
    }

    /* Smaller badges */
    .zune-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    /* Titlebar ultra-compact */
    .zune-titlebar {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }

    .zune-titlebar-user,
    .zune-titlebar-link {
        font-size: 0.85rem;
    }

    /* Page body no padding overflow */
    .zune-page-body {
        padding: 0.5rem;
    }

    /* Modal full width on small phones */
    .zune-modal {
        width: 98%;
        padding: 0.75rem;
    }

    .zune-panel {
        padding: 0.75rem;
    }

    .zune-panel-title {
        font-size: 0.65rem;
    }
}

/* ===========================
   Week Navigation
   =========================== */

.zune-week-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.zune-week-label {
    font-size: 0.85rem;
    color: var(--zune-text);
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 0.05em;
}

/* ===========================
   Alert / Message
   =========================== */

.zune-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--soc-r-row);
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.zune-alert-error {
    background: rgba(var(--zune-danger-rgb), 0.1);
    border: 1px solid var(--zune-danger);
    color: var(--zune-danger);
}

.zune-alert-success {
    background: var(--soc-gr-dim);
    border: 1px solid var(--halo-green);
    color: var(--halo-green);
}

/* ===========================
   Side Panel (Tasks detail)
   =========================== */

.zune-split {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    min-height: 0;
}

.zune-sidebar {
    border-right: 1px solid var(--zune-border);
    padding-right: 1rem;
}

.zune-sidebar-item {
    display: block;
    padding: 0.4rem 0.5rem;
    color: var(--zune-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: var(--zune-radius);
    transition: all var(--zune-transition);
    letter-spacing: 0.03em;
}

.zune-sidebar-item:hover {
    background: rgba(var(--zune-accent-rgb), 0.08);
    color: var(--zune-accent);
}

.zune-sidebar-item.is-active {
    background: rgba(var(--zune-accent-rgb), 0.15);
    color: var(--zune-accent);
    border-left: 2px solid var(--zune-accent);
}

@media (max-width: 768px) {
    /* auto/1fr, not the default equal rows: the filter strip is one line of
       pills and must not stretch to half the pane. */
    .zune-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .zune-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--zune-border);
        padding-right: 0;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zune-sidebar::-webkit-scrollbar {
        display: none;
    }

    .zune-sidebar-item {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
        flex-shrink: 0;
    }

    .zune-sidebar-item:hover {
        background: none;
    }

    .zune-sidebar-item.is-active {
        border-left: none;
        border-bottom: none;
        background: none;
        font-weight: 700;
        color: var(--zune-accent);
    }
}

/* ===========================
   Utility
   =========================== */

.zune-mb-0 { margin-bottom: 0; }
.zune-mb-1 { margin-bottom: 0.5rem; }
.zune-mb-2 { margin-bottom: 1rem; }
.zune-mt-1 { margin-top: 0.5rem; }
.zune-mt-2 { margin-top: 1rem; }
.zune-text-muted { color: var(--zune-text-muted); }
.zune-text-accent { color: var(--zune-accent); }
.zune-text-danger { color: var(--zune-danger); }
.zune-flex { display: flex; }
.zune-flex-between { display: flex; justify-content: space-between; align-items: center; }
.zune-gap-1 { gap: 0.5rem; }
.zune-gap-2 { gap: 1rem; }
.zune-hidden { display: none; }

/* ===========================
   Selection styling
   =========================== */

::selection {
    background: var(--zune-accent);
    color: var(--soc-on-accent);
}

/* ===========================
   Global overflow protection
   =========================== */
.zune-page-body,
.zune-panel,
.zune-card {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Grid/flex children must be able to shrink below content size */
.zune-page-body > * {
    min-width: 0;
}

/* Ensure all images and media respect container */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ===========================
   Loading Indicator
   =========================== */

/* ===========================
   Task Status Bar
   =========================== */

.zune-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--zune-panel);
    border-top: 1px solid var(--zune-border);
    padding: 0.4rem 1.25rem;
    font-size: 10px;
    font-weight: 700;
    color: var(--zune-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Full-screen input blocker when loading */
.spartan-loader-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: var(--soc-cy-dim);
    backdrop-filter: blur(10px) saturate(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(1.04);
    cursor: wait;
    pointer-events: auto;
}
.spartan-loader-overlay.is-active {
    display: block;
}

/* Hard lock: body-level lockdown while busy.
   `inert` on .zune-app is the primary block (JS-applied);
   these rules are a fallback for browsers that ignore `inert`. */
body.is-loading {
    cursor: wait !important;
}
body.is-loading .zune-app {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
body.is-loading .zune-nav-toggle {
    pointer-events: none;
}

.spartan-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9998;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 1.4rem 0.9rem;
    max-width: calc(100vw - 2rem);
    background: var(--zune-panel);
    border: 1px solid var(--soc-line-hi);
    border-radius: var(--soc-r-card);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.spartan-loader.is-active {
    display: flex;
}

/* ---- Radar scope ----------------------------------------------------
   A round scope with a range ring and crosshair, swept by a rotating
   wedge that fades out behind the leading line. */
.soc-scope {
    position: relative;
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--soc-line-hi);
    background: var(--soc-cy-dim);
    overflow: hidden;
}

/* Inner range ring */
.soc-scope::before {
    content: "";
    position: absolute;
    inset: 15px;
    border: 1px solid var(--zune-border);
    border-radius: 50%;
}

/* Crosshair, drawn as two hairlines so it needs no extra element */
.soc-scope::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--zune-border) calc(50% - 0.5px), var(--zune-border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--zune-border) calc(50% - 0.5px), var(--zune-border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* The wedge: a conic gradient whose bright edge sits at 0deg (straight up),
   trailing off anticlockwise so the sweep reads as a decaying afterglow. */
.soc-scope-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(var(--zune-accent-rgb), 0) 0deg,
        rgba(var(--zune-accent-rgb), 0) 240deg,
        rgba(var(--zune-accent-rgb), 0.06) 300deg,
        rgba(var(--zune-accent-rgb), 0.30) 348deg,
        rgba(var(--zune-accent-rgb), 0.55) 360deg
    );
    animation: soc-sweep 1.4s linear infinite;
}

/* Leading line, aligned with the bright edge of the wedge */
.soc-scope-sweep::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1.5px;
    height: 50%;
    margin-left: -0.75px;
    background: linear-gradient(to bottom, var(--zune-accent), rgba(var(--zune-accent-rgb), 0.35));
}

/* Centre pip */
.soc-scope-pip {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--zune-accent);
}

@keyframes soc-sweep {
    to { transform: rotate(360deg); }
}

.spartan-loader-text {
    font-family: var(--soc-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--zune-accent);
    white-space: nowrap;
}

/* ===========================
   Macro Progress Bar
   =========================== */

.zune-macro-progress {
    width: 100%;
    height: 6px;
    background: var(--zune-panel-alt);
    border-radius: var(--soc-r-bar);
    margin-top: 0.5rem;
    overflow: hidden;
}

.zune-macro-progress-fill {
    height: 100%;
    background: var(--zune-accent);
    border-radius: var(--soc-r-bar);
    transition: width 0.4s ease;
}

/* ===========================
   Chart.js dark theme overrides
   =========================== */
canvas {
    max-width: 100%;
}

/* =====================================================================
   DAILY CHECK-IN
   ===================================================================== */
.checkin-page {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    width: min(680px, 100%);
    align-self: flex-start;
    padding-bottom: 5rem; /* room for sticky save bar */
}

.checkin-datenav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--zune-border);
}
.checkin-nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--zune-accent);
    text-decoration: none;
    border: 1px solid var(--zune-border);
    border-radius: var(--zune-radius);
    background: var(--zune-panel);
    transition: all var(--zune-transition);
    font-family: "Share Tech Mono", monospace;
}
.checkin-nav-btn:hover,
.checkin-nav-btn:focus-visible {
    border-color: var(--zune-accent);
    background: var(--zune-accent-glow);
    color: var(--zune-accent-soft);
    outline: none;
}
.checkin-nav-btn:active {
    transform: scale(0.94);
}
.checkin-date {
    text-align: center;
    line-height: 1.15;
}
.checkin-date-dow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--zune-text-muted);
    font-family: "Share Tech Mono", monospace;
}
.checkin-date-full {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--zune-text);
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}

/* Hero summary strip */
.checkin-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    min-height: 74px;
    background: linear-gradient(135deg, var(--soc-panel), var(--soc-panel2));
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-hero);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}
.checkin-hero > * {
    position: relative;
    z-index: 1;
}
.checkin-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}
.checkin-hero-value {
    font-family: var(--soc-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--zune-accent);
    line-height: 1;
    letter-spacing: 0.02em;
}
.checkin-hero-denom {
    font-size: 0.9rem;
    color: var(--zune-text-muted);
    font-weight: 400;
    margin-left: 0.15rem;
}
.checkin-hero-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--zune-text-muted);
    font-family: "Share Tech Mono", monospace;
}
.checkin-hero-bar {
    height: 6px;
    background: var(--zune-panel-alt);
    border-radius: var(--soc-r-pill);
    overflow: hidden;
    position: relative;
}
.checkin-hero-fill {
    position: absolute;
    inset: 0;
    right: auto;
    background: var(--zune-accent);
    transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.checkin-hero-fill.is-met {
    background: var(--halo-green);
}
.checkin-hero-pct {
    font-family: "Share Tech Mono", monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--zune-text);
    min-width: 3.2rem;
    text-align: right;
    letter-spacing: 0.05em;
}

/* Card list */
.checkin-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.5rem;
}

.checkin-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
    position: relative;
    overflow: hidden;
}
.checkin-card-binary {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.checkin-card-binary:active {
    transform: scale(0.995);
}
.checkin-card.is-today {
    background: var(--soc-cy-dim);
}
/* Met: the whole border goes green, matching the order rows in the design. */
.checkin-card.is-met {
    border-color: var(--halo-green);
}

.checkin-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.checkin-card-name {
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: 500;
    color: var(--zune-text);
    line-height: 1.25;
    word-break: break-word;
}

.checkin-card-numeric .checkin-card-name {
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
}

.checkin-toggle {
    flex-shrink: 0;
}

/* Progress row inside card */
.checkin-card-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Share Tech Mono", monospace;
}
.checkin-progress-bar {
    flex: 1 1 auto;
    height: 5px;
    background: var(--zune-panel-alt);
    border-radius: var(--soc-r-pill);
    overflow: hidden;
    position: relative;
}
.checkin-progress-fill {
    position: absolute;
    inset: 0;
    right: auto;
    background: var(--zune-accent);
    transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.checkin-progress-fill.is-met {
    background: var(--halo-green);
}
.checkin-progress-label {
    font-size: 0.78rem;
    color: var(--zune-text-muted);
    white-space: nowrap;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
}
.checkin-progress-num {
    color: var(--zune-accent-soft);
    font-weight: 600;
}
.checkin-progress-sep {
    opacity: 0.5;
    margin: 0 0.15rem;
}
.checkin-progress-period {
    opacity: 0.55;
    margin-left: 0.25rem;
    text-transform: uppercase;
}

/* Numeric input cluster */
.checkin-numeric-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.checkin-num-input {
    width: 90px;
    text-align: center;
    font-size: 1.1rem !important;
    font-family: "Share Tech Mono", monospace;
    font-weight: 600;
    padding: 0.45rem 0.5rem;
}
.checkin-unit {
    font-size: 0.7rem;
    color: var(--zune-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: "Share Tech Mono", monospace;
}

.checkin-card-numeric .checkin-card-main {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}
.checkin-card-numeric .checkin-card-progress {
    flex: 1 1 140px;
    min-width: 140px;
}

/* Sticky save bar */
.checkin-save-bar {
    position: sticky;
    bottom: 0;
    margin-top: 1.5rem;
    padding: 0.75rem 0 max(0.75rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--zune-bg) 40%);
    z-index: 10;
}
.checkin-save-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
}

/* Desktop refinements */
@media (min-width: 769px) {
    .checkin-save-bar {
        position: static;
        background: none;
        padding: 0;
    }
    .checkin-save-btn {
        width: auto;
        min-width: 240px;
    }
    .checkin-page {
        padding-bottom: 1.5rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .checkin-datenav {
        gap: 0.5rem;
    }
    .checkin-date-full {
        font-size: 1rem;
    }
    .checkin-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    .checkin-hero {
        padding: 0.65rem 0.75rem;
        gap: 0.6rem;
        grid-template-columns: auto 1fr;
    }
    .checkin-hero-pct {
        grid-column: 1 / -1;
        text-align: right;
        min-width: 0;
        font-size: 0.85rem;
    }
    .checkin-hero-bar {
        grid-column: 1 / -1;
    }
    .checkin-hero-value {
        font-size: 1.6rem;
    }
    .checkin-card {
        padding: 0.65rem 0.75rem;
    }
    .checkin-card-name {
        font-size: 0.95rem;
    }
    .checkin-num-input {
        width: 80px;
        font-size: 1rem !important;
    }
    .checkin-progress-label {
        font-size: 0.72rem;
    }
}

/* =====================================================================
   MAUI / MOBILE WEBVIEW ENHANCEMENTS
   ===================================================================== */

/* Safe-area (notch) support for iOS/Android MAUI shells */
@supports (padding: max(0px)) {
    .zune-titlebar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(0.35rem, env(safe-area-inset-top));
    }
    .zune-page-body {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
    .zune-status-bar {
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    }
}

/* Mobile nav scrim overlay */
.zune-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}
.zune-nav-scrim.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.nav-open {
    overflow: hidden;
}

/* Mobile ergonomics */
@media (max-width: 768px) {
    /* iOS prevents input zoom when font-size >= 16px */
    .zune-input,
    .zune-input-sm,
    .zune-select,
    .zune-textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Force hardcoded inline grids to stack on phones */
    .zune-page-body [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Larger, easier tap targets */
    .zune-button,
    .zune-toolbar-button {
        min-height: 40px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    .zune-nav-link {
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    /* Workout card actions: even-width tap buttons */
    .workout-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .workout-card-actions .zune-button {
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
    }

    /* Mobile nav list: add a bit of breathing room */
    .zune-nav-list {
        gap: 0.15rem;
    }
}

@media (max-width: 768px) and (max-height: 820px) {
    .zune-nav {
        padding-top: 1rem;
        padding-bottom: 0;
        gap: 0.75rem;
    }
    .zune-logo {
        font-size: 1.05rem;
    }
    .zune-nav-section-title {
        margin-bottom: 0.35rem;
    }
    .zune-nav-link {
        min-height: 34px;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        font-size: 0.82rem;
    }
    .zune-nav-user {
        padding-top: 0.6rem;
    }
    .zune-nav-avatar {
        width: 48px;
        height: 48px;
        margin-bottom: 0.35rem;
    }
    .zune-nav-user-actions {
        gap: 0.45rem;
        margin-top: 0.55rem;
    }
}

/* Very small phones: stop horizontal scroll in titlebar */
@media (max-width: 380px) {
    .zune-titlebar {
        font-size: 0.75rem;
    }
    .zune-logo {
        font-size: 1rem;
    }
}

/* =====================================================================
   RESPONSIVE TABLE: card-collapse pattern
   Usage: <table class="zune-table zune-table-responsive">
          ... <td data-label="Exercise">...</td>
   Desktop renders normally; phones stack each row as a card.
   ===================================================================== */
@media (max-width: 768px) {
    .zune-table-responsive thead {
        display: none;
    }
    .zune-table-responsive,
    .zune-table-responsive tbody,
    .zune-table-responsive tr {
        display: block;
        width: 100%;
    }
    .zune-table-responsive tr {
        border: 1px solid var(--zune-border);
        border-radius: var(--soc-r-row);
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.6rem;
        background: var(--zune-panel);
        animation: zune-card-in 0.35s ease-out both;
    }
    .zune-table-responsive td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: none;
    }
    .zune-table-responsive td::before {
        content: attr(data-label);
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--zune-text-muted);
        flex: 0 0 auto;
        font-family: "Share Tech Mono", monospace;
    }
    .zune-table-responsive td .zune-input,
    .zune-table-responsive td .zune-input-sm {
        flex: 1 1 auto;
        max-width: 65%;
        text-align: right;
    }
    .zune-table-responsive td[data-label=""],
    .zune-table-responsive td:not([data-label]) {
        justify-content: flex-end;
    }
    .zune-table-responsive td[data-label=""]::before,
    .zune-table-responsive td:not([data-label])::before {
        content: "";
    }
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */

/* Page-level entrance: fade + subtle slide */
@keyframes zune-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.zune-content > * {
    animation: zune-page-in 0.32s ease-out both;
}
.zune-content > *:nth-child(2) { animation-delay: 0.05s; }
.zune-content > *:nth-child(3) { animation-delay: 0.09s; }
.zune-content > *:nth-child(4) { animation-delay: 0.13s; }

/* Staggered card entrance */
@keyframes zune-card-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.zune-page-body > .zune-card,
.zune-page-body > .zune-panel,
.zune-page-body > .zune-tile,
.zune-tiles > .zune-tile,
.workout-template-list .zune-card,
.zune-page-body > div > .zune-card {
    animation: zune-card-in 0.4s ease-out both;
}
.zune-page-body > *:nth-child(1),
.zune-tiles > *:nth-child(1),
.zune-page-body > div > *:nth-child(1)  { animation-delay: 0.02s; }
.zune-page-body > *:nth-child(2),
.zune-tiles > *:nth-child(2),
.zune-page-body > div > *:nth-child(2)  { animation-delay: 0.06s; }
.zune-page-body > *:nth-child(3),
.zune-tiles > *:nth-child(3),
.zune-page-body > div > *:nth-child(3)  { animation-delay: 0.10s; }
.zune-page-body > *:nth-child(4),
.zune-tiles > *:nth-child(4),
.zune-page-body > div > *:nth-child(4)  { animation-delay: 0.14s; }
.zune-page-body > *:nth-child(5),
.zune-tiles > *:nth-child(5),
.zune-page-body > div > *:nth-child(5)  { animation-delay: 0.18s; }
.zune-page-body > *:nth-child(6),
.zune-tiles > *:nth-child(6),
.zune-page-body > div > *:nth-child(6)  { animation-delay: 0.22s; }
.zune-page-body > *:nth-child(7),
.zune-tiles > *:nth-child(7),
.zune-page-body > div > *:nth-child(7)  { animation-delay: 0.26s; }
.zune-page-body > *:nth-child(n+8),
.zune-tiles > *:nth-child(n+8),
.zune-page-body > div > *:nth-child(n+8) { animation-delay: 0.30s; }

/* Card hover lift (skipped on touch devices to avoid sticky hover) */
@media (hover: hover) and (pointer: fine) {
    .zune-card {
        transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .zune-card:hover {
        transform: translateY(-2px);
        border-color: var(--soc-line-hi);
        background: var(--soc-cy-dim);
    }
}

/* Tactile button press (class toggled by JS, plus :active fallback) */
.zune-button,
.zune-toolbar-button,
.zune-pivot-item,
.zune-nav-link {
    transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.zune-button.is-pressed,
.zune-toolbar-button.is-pressed {
    transform: scale(0.96);
}
.zune-pivot-item.is-pressed,
.zune-nav-link.is-pressed {
    transform: scale(0.98);
}
.zune-button:active,
.zune-toolbar-button:active {
    transform: scale(0.96);
}

/* Nav-link accent sweep */
.zune-nav-link {
    position: relative;
    overflow: hidden;
}
.zune-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--zune-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.zune-nav-link:hover::after,
.zune-nav-link.is-active::after {
    transform: scaleX(1);
}

/* Badge tap pop-in */
@keyframes zune-badge-pop {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}
.zune-badge {
    animation: zune-badge-pop 0.3s ease-out both;
}

/* Modal / detail panel slide-in (amends existing slideInRight) */
.zune-modal-overlay.is-open .zune-modal {
    animation: zune-card-in 0.25s ease-out both;
}

/* Respect user's reduce-motion preference. The four looping animations are
   killed outright rather than sped up — an infinite loop compressed to 1ms
   still repaints forever. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .soc-hex-wrap,
    .soc-radar-dish,
    .soc-radar-ping,
    .soc-radar-ping-2,
    .soc-gauge-trace,
    .soc-tab-trace,
    .soc-tab-icon.is-train svg {
        animation: none !important;
    }

    /* The busy indicator is the standard exception: it is the only feedback
       that work is in progress, so it keeps sweeping — just slower. Freezing
       it would leave a dialog that looks hung.

       Longhands, not the `animation` shorthand: the blanket rule above sets
       animation-duration and animation-iteration-count as !important
       longhands, and pinning each one here is unambiguous rather than
       relying on shorthand-vs-longhand cascade order. */
    .soc-scope-sweep {
        animation-name: soc-sweep !important;
        animation-duration: 2.6s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
    }
}

/* =====================================================================
   SOC PRIMITIVES
   The pieces of the design language with no equivalent in the older
   system: the hex readiness gauge and its orbiting trace, order rows and
   their checkboxes, progress tracks, the day strip and month grid, and
   the bottom tab bar.
   ===================================================================== */

/* ---- Section label, standalone -------------------------------------- */
.soc-rule {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--soc-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
}

/* ---- Hero card ------------------------------------------------------ */
.soc-hero {
    background: linear-gradient(135deg, var(--soc-panel), var(--soc-panel2));
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-hero);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.soc-hero-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.soc-hero-title {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--zune-text);
}

.soc-hero-sub {
    font-size: 12.5px;
    color: var(--zune-text-muted);
    line-height: 1.45;
}

.soc-hero-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--soc-gr);
}

/* ---- Hex readiness gauge -------------------------------------------- */
.soc-gauge {
    position: relative;
    width: 86px;
    height: 86px;
    flex: none;
}

.soc-gauge svg {
    display: block;
    width: 100%;
    height: 100%;
}

.soc-gauge-track {
    fill: none;
    stroke: var(--zune-border);
    stroke-width: 5;
}

/* Perimeter of the hexagon is 262; the dasharray is set inline as
   "<readiness/100 x 262> 262" so the stroke draws that fraction of the ring. */
.soc-gauge-fill {
    fill: none;
    stroke: var(--soc-gr);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s;
}

/* A short lit segment that orbits the hex once every 4.5s: it travels over
   the first half of the loop (-524 is two laps of the 262 perimeter, which
   is what makes one visible pass) and rests, faded out, for the rest. */
.soc-gauge-trace {
    fill: none;
    stroke: var(--soc-gr);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 34 228;
    filter: drop-shadow(0 0 5px var(--soc-gr));
    animation: soc-trace 4.5s linear infinite;
}

@keyframes soc-trace {
    0% { stroke-dashoffset: 0; opacity: 0; }
    6% { opacity: 0.9; }
    44% { opacity: 0.9; }
    50% { stroke-dashoffset: -524; opacity: 0; }
    100% { stroke-dashoffset: -524; opacity: 0; }
}

.soc-gauge-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.soc-gauge-value {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

.soc-gauge-label {
    font-family: var(--soc-display);
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
}

/* ---- Order row (habits, exercises, any checkable list item) --------- */
.soc-order {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    padding: 12px 14px;
    text-align: left;
    color: var(--zune-text);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--zune-transition);
}

.soc-order:hover {
    border-color: var(--soc-gr);
}

.soc-order.is-training:hover {
    border-color: var(--soc-cy);
}

/* Done: the whole border takes the accent — green for habits, blue for
   training — rather than a separate left rule. */
.soc-order.is-done {
    border-color: var(--soc-gr);
}

.soc-order.is-training.is-done {
    border-color: var(--soc-cy);
}

.soc-order-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.soc-order-name {
    font-size: 14px;
    font-weight: 600;
}

.soc-order.is-done .soc-order-name {
    opacity: 0.55;
    text-decoration: line-through;
}

/* Training rows dim on completion but keep the text readable — the load
   beside them is still the thing you look back at. */
.soc-order.is-training.is-done .soc-order-name {
    text-decoration: none;
}

.soc-order-detail {
    font-size: 11px;
    color: var(--zune-text-muted);
}

.soc-order-status {
    font-size: 11px;
    color: var(--zune-text-muted);
    flex: none;
}

.soc-order.is-done .soc-order-status {
    color: var(--soc-gr);
}

.soc-order-load {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--zune-text-muted);
    flex: none;
}

/* ---- Checkbox -------------------------------------------------------- */
.soc-check {
    width: 22px;
    height: 22px;
    flex: none;
    box-sizing: border-box;
    border-radius: var(--soc-r-check);
    border: 2px solid var(--zune-text-muted);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The tick is always in the markup and hidden by colour, so toggling a
       row never reflows the label beside it. */
    color: transparent;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: background var(--zune-transition), border-color var(--zune-transition), color var(--zune-transition);
}

.soc-order.is-done .soc-check {
    color: var(--soc-ink);
}

/* Training rows use a circle so a glance separates a workout from a habit */
.soc-check.is-round {
    border-radius: 50%;
    font-size: 12px;
}

.soc-order.is-done .soc-check {
    background: var(--soc-gr);
    border-color: var(--soc-gr);
}

.soc-order.is-training.is-done .soc-check {
    background: var(--soc-cy);
    border-color: var(--soc-cy);
}

/* ---- Progress track -------------------------------------------------- */
.soc-track {
    height: 7px;
    border-radius: var(--soc-r-bar);
    background: var(--zune-panel-alt);
    overflow: hidden;
}

.soc-track.is-slim {
    height: 6px;
    border-radius: 3px;
}

.soc-fill {
    height: 100%;
    border-radius: var(--soc-r-bar);
    background: var(--soc-cy);
    transition: width 0.4s ease;
}

.soc-fill.is-green {
    background: var(--soc-gr);
}

/* The program card's fill runs blue into green across the whole cycle */
.soc-fill.is-duotone {
    background: linear-gradient(90deg, var(--soc-cy), var(--soc-gr));
}

/* ---- Goal / campaign card ------------------------------------------- */
.soc-goal {
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-card);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.soc-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.soc-goal-name {
    font-size: 14.5px;
    font-weight: 700;
}

.soc-goal-pct {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--soc-cy);
}

.soc-goal.is-green .soc-goal-pct { color: var(--soc-gr); }

.soc-goal-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--zune-text-muted);
}

/* ---- Callout (Laconic Law) ------------------------------------------ */
.soc-callout {
    background: var(--soc-gr-dim);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    padding: 13px 15px;
    font-size: 12.5px;
    color: var(--zune-text-muted);
    line-height: 1.5;
}

.soc-callout-label {
    color: var(--soc-gr);
    font-family: var(--soc-display);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.soc-callout.is-blue {
    background: var(--soc-cy-dim);
}

.soc-callout.is-blue .soc-callout-label {
    color: var(--soc-cy);
}

/* ---- Next-event / timed row ----------------------------------------- */
.soc-event {
    background: var(--soc-cy-dim);
    border: 1px solid var(--zune-border);
    border-radius: var(--soc-r-row);
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* An inset rounded bar rather than border-left, so the colour keeps its
   own radius instead of being squared off by the card's corner. */
.soc-event-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--soc-cy);
    flex: none;
}

.soc-event-bar.is-green {
    background: var(--soc-gr);
}

.soc-event-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.soc-event-when {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
}

.soc-event-title {
    font-size: 14px;
    font-weight: 600;
}

.soc-event-meta {
    font-size: 12px;
    color: var(--zune-text-muted);
}

.soc-event-time {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--zune-text-muted);
    flex: none;
}

/* ---- Segmented toggle (WEEK / MONTH) --------------------------------- */
.soc-segmented {
    display: flex;
    gap: 6px;
    background: var(--zune-panel);
    border: 1px solid var(--zune-border);
    border-radius: 10px;
    padding: 4px;
}

.soc-segmented > * {
    flex: 1;
    padding: 7px 0;
    border: none;
    border-radius: var(--soc-r-check);
    background: transparent;
    color: var(--zune-text-muted);
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.soc-segmented > .is-active {
    background: var(--soc-cy);
    color: var(--soc-on-accent);
}

/* ---- Week / day strip ------------------------------------------------ */
.soc-daystrip {
    display: flex;
    gap: 6px;
}

.soc-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 0;
    border-radius: var(--soc-r-row);
    border: 1px solid var(--zune-border);
    background: var(--zune-panel);
    color: var(--zune-text);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}

.soc-day.is-selected {
    background: var(--soc-cy);
    border-color: var(--soc-cy);
    color: var(--soc-on-accent);
}

.soc-day-wd {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.75;
}

.soc-day-num {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
}

/* ---- Month grid ------------------------------------------------------ */
.soc-monthgrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.soc-monthgrid-head {
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--zune-text-muted);
    padding: 2px 0;
}

.soc-monthcell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: var(--soc-r-chip);
    background: transparent;
    color: var(--zune-text);
    font-family: var(--soc-display);
    font-weight: 600;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.soc-monthcell.is-today {
    border-color: var(--soc-gr);
}

.soc-monthcell.is-selected {
    background: var(--soc-cy);
    border-color: var(--soc-cy);
    color: var(--soc-on-accent);
}

/* Presence dot: 4px, green, white once the cell is selected */
.soc-monthcell-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
}

.soc-monthcell.has-events .soc-monthcell-dot {
    background: var(--soc-gr);
}

.soc-monthcell.has-events.is-selected .soc-monthcell-dot {
    background: var(--soc-on-accent);
}

/* ---- Empty state ----------------------------------------------------- */
.soc-empty {
    text-align: center;
    color: var(--zune-text-muted);
    font-size: 13px;
    padding: 28px 0;
    border: 1px dashed var(--zune-border);
    border-radius: var(--soc-r-row);
}

/* ---- Full-width CTA -------------------------------------------------- */
.soc-cta {
    display: block;
    width: 100%;
    background: var(--zune-panel-alt);
    color: var(--zune-text);
    border: none;
    border-radius: var(--soc-r-row);
    padding: 14px;
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.soc-cta:hover {
    filter: brightness(1.1);
    color: var(--zune-text);
}

.soc-cta.is-complete {
    background: var(--soc-gr);
    color: var(--soc-ink);
}

.soc-cta.is-complete:hover {
    color: var(--soc-ink);
}

/* ---- Sleep bars ------------------------------------------------------ */
.soc-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 74px;
}

.soc-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.soc-bar {
    width: 100%;
    background: var(--soc-cy);
    border-radius: 5px 5px 2px 2px;
}

.soc-bar.is-goal-met {
    background: var(--soc-gr);
}

.soc-bar-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zune-text-muted);
}

/* ---- Hydration cells -------------------------------------------------- */
.soc-cells {
    display: flex;
    gap: 6px;
}

.soc-cell {
    flex: 1;
    height: 26px;
    border: 1px solid var(--zune-border);
    background: var(--zune-panel-alt);
    border-radius: var(--soc-r-sm);
    cursor: pointer;
    padding: 0;
}

.soc-cell.is-filled {
    background: var(--soc-cy);
}

.soc-cell:hover {
    border-color: var(--soc-cy);
}

/* =====================================================================
   BOTTOM TAB BAR
   Phone only. The five most-used modules; the remaining five stay in the
   drawer, which the header's toggle opens.
   ===================================================================== */

/* min-height pins the bar to --soc-tabbar-h so the token is the truth rather
   than an estimate — the fixed status bar offsets against it and any drift
   would leave a strip of page showing between the two. */
.soc-tabbar {
    display: none;
    flex: none;
    box-sizing: border-box;
    min-height: var(--soc-tabbar-h);
    align-items: center;
    border-top: 1px solid var(--zune-border);
    background: var(--zune-panel);
    padding: 8px 8px 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.soc-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: none;
    color: var(--zune-text-muted);
    min-width: 0;
}

.soc-tab-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.soc-tab-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The target's centre pip is the one filled shape in the icon set */
.soc-tab-icon svg .is-solid {
    fill: currentColor;
    stroke: none;
}

.soc-tab-label {
    font-family: var(--soc-display);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.soc-tab.is-active {
    color: var(--soc-cy);
}

.soc-tab.is-active .soc-tab-icon {
    animation: soc-tab-pop 0.35s ease;
}

@keyframes soc-tab-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---- Per-icon idle motion -------------------------------------------
   These sit on the <svg>, not on .soc-tab-icon, so they compose with the
   active-tab pop above instead of overwriting it. */

/* Vitals: a lit dash runs along the ECG trace. The path measures ~31.5
   units, so a "6 26" dash is one short segment with the rest as the gap,
   and sweeping the offset by one path length walks it end to end. */
.soc-tab-trace {
    stroke: var(--soc-cy);
    stroke-dasharray: 6 26;
    animation: soc-tab-trace 2.2s linear infinite;
}

@keyframes soc-tab-trace {
    from { stroke-dashoffset: 32; }
    to { stroke-dashoffset: 0; }
}

/* Train: the dumbbell swells and settles back */
.soc-tab-icon.is-train svg {
    transform-origin: 50% 50%;
    animation: soc-tab-lift 2.4s ease-in-out infinite;
}

@keyframes soc-tab-lift {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* Content settles in on every navigation, matching the prototype's tab
   switch. Applied to the scroll container, not each card, so a long page
   does not stagger a dozen separate fades. */
@keyframes soc-tab-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .soc-tabbar {
        display: flex;
    }

    .zune-content {
        animation: soc-tab-in 0.3s ease;
    }

    /* The status bar some pages pin to the bottom has to clear the tabs. */
    .zune-status-bar {
        bottom: calc(var(--soc-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: 0.4rem;
    }

    /* Sticky in-page save bars sit above the tab bar too. */
    .checkin-save-bar {
        bottom: 0;
    }
}

/* Desktop keeps the sidebar; the tab bar never appears. */
@media (min-width: 769px) {
    .soc-tabbar {
        display: none;
    }
}