:root {
    color-scheme: dark;
    /* Spacing scale - 4px base unit at 16px root. Use these instead of
       one-off rem values for padding/margin/gap on publisher-facing pages. */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --app-bg: #0b1020;
    --surface: #141925;
    --surface-raised: #191f2e;
    --surface-hero: #182036;
    --surface-subtle: rgba(255, 255, 255, 0.045);
    --surface-hover: rgba(255, 255, 255, 0.072);
    --surface-selected: rgba(139, 108, 255, 0.14);
    --text-primary: #f7f8ff;
    --text-secondary: #b8bfd3;
    --text-muted: #7f879a;
    --text-disabled: #555d70;
    --divider: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(139, 108, 255, 0.5);
    --brand-accent: #9a78ff;
    --brand-accent-hover: #aa91ff;
    --status-success: #67dc97;
    --status-warning: #f7a832;
    --status-danger: #ff6b6b;
    --bottom-navigation-bg: rgba(7, 13, 25, 0.88);
    --modal-backdrop: rgba(0, 0, 0, 0.62);
    --map-overlay-control: rgba(20, 25, 37, 0.86);
    --input-bg: rgba(255, 255, 255, 0.065);
    --pub-bg: var(--app-bg);
    --pub-surface: rgba(20, 25, 37, 0.88);
    --pub-surface-strong: rgba(25, 31, 46, 0.94);
    --pub-line: rgba(255, 255, 255, 0.12);
    --pub-ink: var(--text-primary);
    --pub-subtle: var(--text-secondary);
    --pub-muted: var(--text-muted);
    --pub-purple: var(--brand-accent);
    --pub-green: var(--status-success);
    --pub-orange: var(--status-warning);
    --pub-red: var(--status-danger);
    --pub-info: #5ca8ff;
    --pub-focus: rgba(139, 108, 255, 0.55);
    --pub-overlay: rgba(0, 0, 0, 0.55);
    --pub-radius-sm: 12px;
    --pub-radius-md: 16px;
    --pub-radius-lg: 18px;
    --pub-radius-xl: 22px;
    --pub-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    --pub-speed: 160ms;
    --pub-app-max-width: 31rem;
    --pub-safe-top: env(safe-area-inset-top, 0px);
    --publisher-safe-bottom: env(safe-area-inset-bottom, 0px);
    --publisher-app-gutter: 1.32rem;
    --publisher-app-brand-width: 9.75rem;
    --publisher-nav-rail-width: 5.375rem;
    --publisher-tablet-shell-width: 41.25rem;
    --publisher-desktop-shell-width: 61.25rem;
    --publisher-auth-accent: #7a62df;
    --publisher-auth-accent-muted: rgba(122, 98, 223, 0.78);
    --publisher-auth-accent-faint: rgba(122, 98, 223, 0.12);
    --publisher-card-surface: rgba(15, 24, 42, 0.78);
    --publisher-bottom-nav-height: calc(5.18rem + var(--publisher-safe-bottom));
    --publisher-content-bottom-inset: calc(var(--publisher-bottom-nav-height) + 0.55rem);
    --pub-safe-bottom: var(--publisher-safe-bottom);
    --pub-nav-height: var(--publisher-bottom-nav-height);
    /* Authenticated pages share Home's shell contract; page CSS must not override it. */
    --ph-bg: var(--app-bg);
    --ph-bg-deep: #070c18;
    --ph-surface: var(--surface);
    --ph-surface-raised: var(--surface-raised);
    --ph-surface-soft: var(--surface-subtle);
    --ph-border: var(--divider);
    --ph-divider: var(--divider);
    --ph-text: var(--text-primary);
    --ph-text-secondary: var(--text-secondary);
    --ph-text-muted: var(--text-muted);
    --ph-purple: var(--brand-accent);
    --ph-purple-deep: var(--brand-accent-hover);
    --ph-purple-soft: var(--surface-selected);
    --ph-success: var(--status-success);
    --publisher-auth-control-bg: rgba(8, 13, 24, 0.3);
    --publisher-auth-control-bg-hover: rgba(12, 19, 33, 0.54);
    --publisher-auth-control-bg-pressed: rgba(16, 24, 40, 0.64);
    --publisher-auth-control-border: rgba(184, 191, 211, 0.16);
    --publisher-auth-control-text: var(--ph-text-secondary);
    --publisher-auth-control-placeholder: var(--ph-text-muted);
    --publisher-auth-control-focus-border: var(--ph-purple);
    --publisher-auth-control-focus-ring: rgba(122, 98, 223, 0.22);
}

.publisher-app-body:not(.public-app-body) {
    --pub-purple: var(--publisher-auth-accent);
    --ph-purple: var(--publisher-auth-accent);
    --ph-purple-deep: #604fca;
    --ph-purple-soft: var(--publisher-auth-accent-faint);
    --focus-ring: rgba(122, 98, 223, 0.42);
    --pub-focus: rgba(122, 98, 223, 0.48);
}

* { box-sizing: border-box; min-width: 0; }

.publisher-app-body {
    margin: 0;
    min-height: 100vh;
    color: var(--pub-ink);
    background:
        radial-gradient(circle at 58% -12%, rgba(46, 64, 105, 0.18), transparent 28rem),
        linear-gradient(180deg, #050914 0%, #040812 56%, #030711 100%);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
}

.publisher-app-body button,
.publisher-app-body input,
.publisher-app-body select,
.publisher-app-body textarea,
.publisher-app-body option {
    font: inherit;
}

.publisher-app-body a,
.publisher-app-body button,
.publisher-app-body input,
.publisher-app-body select,
.publisher-app-body textarea {
    -webkit-tap-highlight-color: transparent;
}

.publisher-app-body :focus:not(:focus-visible) {
    outline: none;
}

.publisher-app-body.keyboard-open,
.territory-app.keyboard-open {
    --publisher-content-bottom-inset: 1rem;
}

.publisher-app-body a {
    color: inherit;
    text-decoration: none;
}

.publisher-app-body svg,
.publisher-bottom-nav svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.publisher-shell {
    width: 100%;
    max-width: var(--pub-app-max-width);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(0.75rem + var(--pub-safe-top)) var(--publisher-app-gutter) var(--publisher-content-bottom-inset);
    scroll-padding-bottom: var(--publisher-content-bottom-inset);
    display: grid;
    /* Without this, Grid's default (normal -> stretch) inflates every row to fill any
       leftover space below min-height: 100dvh on pages whose content doesn't reach the
       bottom of the viewport - pushing the header/title down by an arbitrary, content-
       dependent amount instead of packing rows at their natural height from the top. */
    align-content: start;
    gap: var(--space-lg);
}

/* The HTMX shell-navigation swap boundary (see templates/publisher/base.html
   and _bottom_nav.html). It wraps exactly what .publisher-shell's grid used
   to lay out as two separate rows (page_header, content) - display:grid with
   the same gap keeps that same visual spacing/stacking now that they share
   one wrapping element, without changing .publisher-shell's own layout. */
#publisher-main {
    display: grid;
    align-content: start;
    gap: var(--space-lg);
}

.public-shell {
    position: relative;
    width: 100%;
    max-width: 34rem;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(1.75rem + var(--pub-safe-top)) 1rem calc(1.4rem + var(--pub-safe-bottom));
    display: grid;
    align-content: start;
    gap: clamp(1.65rem, 5dvh, 2.55rem);
    padding-top: max(calc(1.85rem + var(--pub-safe-top)), 8dvh);
    z-index: 1;
}

.public-app-body {
    overflow-x: hidden;
}

.public-app-body.login-open-body::before {
    display: none;
}

.public-app-body::before {
    content: "";
    position: fixed;
    inset: -12dvh -40vw auto -64vw;
    height: 58dvh;
    min-height: 27rem;
    pointer-events: none;
    background-image: url("../images/login-world-map.png");
    background-position: 58% 18%;
    background-repeat: no-repeat;
    background-size: max(68rem, 210vw) auto;
    opacity: 0.064;
    filter: saturate(0.72);
    -webkit-mask-image: radial-gradient(ellipse at 50% 28%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.54) 42%, transparent 76%);
    mask-image: radial-gradient(ellipse at 50% 28%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.54) 42%, transparent 76%);
    z-index: 0;
}

.public-brand {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.public-brand .publisher-logo-wordmark {
    width: clamp(10.2rem, 46vw, 12rem);
    max-width: 62vw;
}

.publisher-content-with-nav,
.publisher-scroll-region {
    padding-bottom: var(--publisher-content-bottom-inset);
    scroll-padding-bottom: var(--publisher-content-bottom-inset);
}

.publisher-scroll-region {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.publisher-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
}

.publisher-logo-wordmark {
    width: 138px;
    max-width: 46vw;
    display: inline-flex;
    align-items: center;
}

.publisher-app-brand {
    width: var(--publisher-app-brand-width);
    max-width: 48vw;
}

.publisher-logo-wordmark img {
    width: 100%;
    height: auto;
    display: block;
}

.publisher-logo-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.publisher-icon-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--pub-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--pub-ink);
    display: inline-grid;
    place-items: center;
    position: relative;
}

.publisher-icon-button svg {
    width: 22px;
    height: 22px;
}

.publisher-notification-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ff725e;
    border: 2px solid #12161e;
}

.publisher-account-avatar {
    width: 2.82rem;
    height: 2.82rem;
    margin-top: 0.22rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(145deg, rgba(128, 101, 226, 0.96), rgba(86, 67, 194, 0.96));
    color: rgba(249, 248, 255, 0.94);
    font-size: 0.96rem;
    font-weight: 500;
}

.publisher-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* Opt-in modifier for pages whose subtitle copy is long enough to crowd an
   inline CTA (e.g. Away Periods) - stacks title/subtitle above the action
   instead of forcing them into one row. Most pages using page_action have
   short subtitles/labels that already fit fine in a row, so this is a
   page-level choice rather than a change to the shared row layout. */
.publisher-page-head-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.publisher-page-head > div {
    display: grid;
    gap: var(--space-xl);
}

.publisher-eyebrow {
    margin: 0;
    color: var(--pub-purple);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.publisher-title {
    margin: 0;
    font-size: clamp(1.78rem, 8vw, 2.45rem);
    line-height: 0.95;
    font-weight: 400;
}

.publisher-page-head > div > * {
    margin: 0;
}

.publisher-home-title {
    font-size: clamp(1.42rem, 6vw, 1.82rem);
    line-height: 1.08;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.publisher-muted {
    margin: 0;
    color: var(--pub-subtle);
    font-weight: 400;
}

.publisher-section-title,
.publisher-card-title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.2;
    font-weight: 600;
}

.publisher-home-body .publisher-section-title {
    color: var(--pub-ink);
}

.publisher-body-copy {
    margin: 0;
    color: var(--pub-subtle);
    font-size: 0.92rem;
}

.publisher-action {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(139, 108, 255, 0.35);
    background: rgba(139, 108, 255, 0.13);
    color: var(--pub-purple);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--pub-speed), background var(--pub-speed), box-shadow var(--pub-speed), transform var(--pub-speed);
}

.publisher-action:hover {
    border-color: rgba(169, 148, 255, 0.58);
    background: rgba(139, 108, 255, 0.18);
}

.publisher-action:active {
    transform: translateY(1px) scale(0.99);
}

.publisher-action-danger {
    border-color: rgba(255, 107, 107, 0.42);
    background: rgba(255, 107, 107, 0.14);
    color: var(--pub-red);
}

.publisher-action-destructive {
    border-color: rgba(255, 107, 107, 0.48);
    background: transparent;
    color: #ffaaa7;
}

.publisher-action-destructive:hover {
    border-color: rgba(255, 130, 126, 0.72);
    background: rgba(255, 107, 107, 0.1);
}

.publisher-action[disabled],
.publisher-action[aria-disabled="true"],
button.publisher-action:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.publisher-action svg {
    width: 1.08rem;
    height: 1.08rem;
    margin-right: 0.42rem;
}

.publisher-action-primary {
    background: var(--pub-purple);
    border-color: rgba(76, 53, 156, 0.9);
    color: #fff;
    box-shadow: none;
}

.publisher-action-primary:hover {
    background: rgba(139, 108, 255, 0.88);
    border-color: rgba(92, 66, 189, 0.95);
}

.publisher-action-row,
.publisher-map-info-card {
    align-items: center;
    display: flex;
    gap: 0.78rem;
}

.publisher-action-row {
    flex-wrap: wrap;
}

/* A primary action with one quiet, related secondary action - stacked and centered
   underneath, rather than sitting beside it as a second competing control, so the
   secondary action reads as "also, optionally, this" rather than an unrelated link
   that happens to be nearby. */
.publisher-action-row-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.publisher-action-row-stacked .publisher-action-primary {
    justify-content: center;
}

.publisher-action-row-stacked .publisher-text-link {
    align-self: center;
}

/* Standard authenticated search, sort and list-filter controls must use these shared primitives rather than page-specific grey surfaces. */
.publisher-auth-control {
    border: 1px solid var(--publisher-auth-control-border);
    border-radius: 16px;
    background: var(--publisher-auth-control-bg);
    color: var(--publisher-auth-control-text);
    box-shadow: none;
    transition: background var(--pub-speed), border-color var(--pub-speed), transform var(--pub-speed), color var(--pub-speed);
}

.publisher-auth-control:hover {
    background: var(--publisher-auth-control-bg-hover);
}

.publisher-auth-control:active {
    transform: translateY(1px) scale(0.99);
    background: var(--publisher-auth-control-bg-pressed);
}

.publisher-auth-control:focus-visible {
    outline: 0;
    border-color: var(--publisher-auth-control-focus-border);
    box-shadow: 0 0 0 3px var(--publisher-auth-control-focus-ring);
}

.publisher-auth-search-control {
    min-height: 3.25rem;
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    padding: 0 0.9rem;
}

.publisher-auth-search-control:focus-within {
    border-color: var(--publisher-auth-control-focus-border);
    box-shadow: 0 0 0 3px var(--publisher-auth-control-focus-ring);
}

.publisher-auth-search-control svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--publisher-auth-control-placeholder);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.publisher-auth-search-control input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--publisher-auth-control-text);
    font: inherit;
}

.publisher-auth-search-control input::placeholder {
    color: var(--publisher-auth-control-placeholder);
}

.publisher-auth-icon-control {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.publisher-auth-icon-control svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--publisher-auth-control-placeholder);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.publisher-auth-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.publisher-auth-filter-tab {
    position: relative;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--ph-text-muted);
    font: inherit;
    font-size: clamp(0.84rem, 3.2vw, 0.875rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    padding: 0.3rem 0.15rem 0.55rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.publisher-auth-filter-tab[aria-pressed="true"] {
    color: var(--ph-purple);
}

.publisher-auth-filter-tab[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: clamp(2.6rem, 28%, 3.25rem);
    height: 2px;
    border-radius: 2px;
    background: var(--ph-purple);
    transform: translateX(-50%);
}

.publisher-toast-region {
    position: fixed;
    top: calc(0.8rem + var(--pub-safe-top));
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 1.4rem), 30rem);
    display: grid;
    gap: 0.45rem;
    z-index: 50;
    pointer-events: none;
}

.publisher-toast {
    border: 1px solid rgba(139, 108, 255, 0.28);
    border-radius: 16px;
    padding: 0.72rem 0.85rem;
    background: rgba(12, 15, 22, 0.95);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
    color: var(--pub-ink);
    font-size: 0.82rem;
}

.publisher-filter-rail {
    display: flex;
    gap: 0.38rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 0.05rem;
    max-width: 100%;
}

.publisher-filter-rail::-webkit-scrollbar { display: none; }

.publisher-filter-chip {
    flex: 0 0 auto;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid var(--pub-line);
    background: rgba(255, 255, 255, 0.055);
    color: var(--pub-subtle);
    display: inline-flex;
    align-items: center;
    padding: 0 0.78rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.publisher-filter-chip[aria-pressed="true"] {
    color: var(--pub-purple);
    border-color: rgba(139, 108, 255, 0.42);
    background: rgba(139, 108, 255, 0.13);
}

.publisher-search-panel {
    display: grid;
    gap: 0.55rem;
}

.publisher-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.6rem;
}

.publisher-input,
.publisher-select {
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid var(--pub-line);
    background: rgba(255, 255, 255, 0.055);
    color: var(--pub-ink);
    padding: 0 0.78rem;
    font: inherit;
}

.publisher-select option { color: #111827; }

.publisher-map-grid {
    display: grid;
    gap: var(--space-sm);
}

.publisher-map-card {
    width: 100%;
    min-height: 116px;
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(30, 34, 45, 0.88), rgba(14, 17, 24, 0.82));
    display: grid;
    grid-template-columns: 68px 1fr 18px;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.publisher-map-card:active { transform: scale(0.99); }

.publisher-map-tile {
    width: 68px;
    aspect-ratio: 1;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(139, 108, 255, 0.96), rgba(73, 50, 174, 0.94));
    display: grid;
    place-items: center;
    align-content: center;
    box-shadow: 0 14px 34px rgba(139, 108, 255, 0.2), inset 0 1px rgba(255, 255, 255, 0.28);
}

.publisher-map-tile svg {
    width: 1.1rem;
    height: 1.1rem;
}

.publisher-map-tile span {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.publisher-map-tile strong {
    font-size: 1.46rem;
    line-height: 1;
}

.publisher-map-main {
    display: grid;
    gap: var(--space-2xs);
}

.publisher-map-main h2 {
    margin: 0;
    font-size: 1.08rem;
}

.publisher-status-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
}

.publisher-status-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--pub-muted);
}

.publisher-status-line.available { color: var(--pub-green); }
.publisher-status-line.available .publisher-status-dot { background: var(--pub-green); }
.publisher-status-line.success { color: var(--pub-green); }
.publisher-status-line.success .publisher-status-dot { background: var(--pub-green); }
.publisher-status-line.assigned { color: var(--pub-purple); }
.publisher-status-line.assigned .publisher-status-dot { background: var(--pub-purple); }
.publisher-status-line.in_progress { color: var(--pub-orange); }
.publisher-status-line.in_progress .publisher-status-dot { background: var(--pub-orange); }
.publisher-status-line.warning { color: var(--pub-orange); }
.publisher-status-line.warning .publisher-status-dot { background: var(--pub-orange); }
.publisher-status-line.overdue { color: var(--pub-red); }
.publisher-status-line.overdue .publisher-status-dot { background: var(--pub-red); }
.publisher-status-line.inactive { color: var(--pub-muted); }

.publisher-meta {
    margin: 0;
    color: var(--pub-subtle);
    font-size: 0.74rem;
    line-height: 1.35;
}

.publisher-meta-overdue { color: var(--pub-red); }

.publisher-chips {
    display: flex;
    gap: 0.32rem;
    flex-wrap: wrap;
}

.publisher-mini-chip {
    border-radius: 999px;
    padding: 0.16rem 0.48rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--pub-subtle);
    font-size: 0.66rem;
    font-weight: 600;
}

.publisher-empty,
.publisher-card {
    margin: 0;
    border: 1px solid var(--pub-line);
    border-radius: 18px;
    padding: var(--space-md);
    color: var(--pub-subtle);
    background: rgba(255, 255, 255, 0.05);
}

/* A plain, flat empty state - a divider and restrained secondary text, no
   filled panel. For pages where the generic grey .publisher-empty card
   reads as an unfinished/fake surface rather than a deliberate absence. */
.publisher-empty-flat {
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--pub-line);
    color: var(--pub-subtle);
}

.publisher-card:focus-visible,
.publisher-empty-compact a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.22);
}

.publisher-card {
    display: grid;
    gap: var(--space-sm);
    color: var(--pub-ink);
}

.publisher-card-strong {
    background: linear-gradient(145deg, rgba(139, 108, 255, 0.16), rgba(255, 255, 255, 0.055));
    border-color: rgba(139, 108, 255, 0.28);
}

.publisher-section-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 34px;
}

.publisher-text-link {
    border: 0;
    background: none;
    color: var(--pub-purple);
    font-size: 0.82rem;
    font-weight: 500;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.35rem -0.48rem;
    padding: 0.35rem 0.48rem;
    white-space: nowrap;
    cursor: pointer;
}

.publisher-text-link:focus-visible {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.2);
    outline: 0;
}

/* Restrained destructive text-link (e.g. Remove) - same weight/size as a
   plain .publisher-text-link (Edit), just recoloured, so removal never reads
   as visually stronger than the primary action or as a filled button. */
.publisher-text-link-destructive {
    color: var(--pub-red);
}

.publisher-text-link-destructive:hover {
    color: #ff8a86;
}

.publisher-home-shell {
    /* Width only - vertical rhythm (top padding, shell gap, header row height) is
       intentionally NOT overridden here. Home follows the same --space-lg shell gap,
       --space-xl page-head margin, and 3.25rem header row height as every other page;
       see CLAUDE.md's vertical rhythm spec. The only accepted Home-specific exception
       is content-driven: the two-line greeting typography in .publisher-home-head
       below (a different content shape, not a different spacing rule). */
    max-width: 31rem;
}

.publisher-home-section {
    display: grid;
    gap: var(--space-sm);
}

.publisher-home-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.05rem;
    margin-bottom: var(--space-xl);
}

.publisher-home-greeting-block {
    min-width: 0;
}

.publisher-home-greeting {
    margin: 0;
    display: grid;
    gap: 0.02rem;
    color: var(--ph-text);
    font-size: clamp(1.82rem, 7.7vw, 1.9rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.012em;
}

.publisher-home-greeting strong {
    color: var(--ph-purple);
    font-weight: 400;
}

.publisher-home-body .publisher-section-title {
    color: rgba(151, 160, 183, 0.92);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.publisher-home-hero {
    min-height: 11.5rem;
    color: var(--ph-text);
    display: grid;
    align-content: space-between;
    gap: 0.78rem;
    padding: 0.98rem 1.02rem 0.78rem;
    overflow: hidden;
    position: relative;
    transition: transform 130ms ease;
}

.publisher-home-hero::after {
    content: "";
    position: absolute;
    left: 1.14rem;
    right: 1.14rem;
    bottom: 3.52rem;
    border-top: 1px solid var(--pub-line);
}

.publisher-home-hero:active,
.publisher-home-row:active {
    transform: scale(0.98);
}

.publisher-home-map-art {
    position: absolute;
    inset: -1.75rem -5.4rem 1.35rem 36%;
    pointer-events: none;
    background: url("../images/home-territory-map.svg") center / cover no-repeat;
    opacity: 0.047;
    filter: saturate(0.68) hue-rotate(8deg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 32%, #000 74%, transparent 100%), linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 32%, #000 74%, transparent 100%), linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
    z-index: 0;
}

.publisher-home-hero-top,
.publisher-home-hero-footer {
    position: relative;
    z-index: 1;
}

.publisher-home-hero-top {
    display: grid;
    grid-template-columns: 3.02rem minmax(0, 1fr);
    gap: 0.82rem;
}

.publisher-home-hero-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, rgba(82, 61, 181, 0.9), rgba(50, 38, 120, 0.9));
    color: rgba(197, 183, 255, 0.98);
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.publisher-home-hero-icon svg {
    width: 1.58rem;
    height: 1.58rem;
}

.publisher-home-hero-main {
    display: grid;
    align-content: start;
    gap: 0.24rem;
}

.publisher-home-hero-kicker,
.publisher-home-row-kicker {
    color: var(--ph-purple);
    font-size: 0.71rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.publisher-home-hero-title {
    font-size: clamp(1.56rem, 6.4vw, 1.68rem);
    font-weight: 500;
    line-height: 1.08;
}

.publisher-home-hero-subtitle {
    color: var(--ph-text-secondary);
    font-size: 0.92rem;
    font-weight: 400;
}

.publisher-home-hero .publisher-status-line {
    margin-top: 0.38rem;
    color: var(--ph-text-secondary);
    font-size: 0.84rem;
    font-weight: 400;
}

.publisher-home-hero .publisher-status-dot {
    width: 0.42rem;
    height: 0.42rem;
    background: rgba(243, 243, 245, 0.9);
}

.publisher-home-hero-footer {
    min-height: 2.42rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.72rem;
    padding-top: 0.5rem;
}

.publisher-home-hero-meta,
.publisher-home-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.publisher-home-hero-meta {
    color: var(--ph-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publisher-home-hero-meta svg {
    width: 0.98rem;
    height: 0.98rem;
}

.publisher-home-hero-action {
    color: var(--ph-purple);
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.publisher-home-hero-action svg {
    width: 1.16rem;
    height: 1.16rem;
}

.publisher-home-row {
    min-height: 6.12rem;
    color: var(--ph-text);
    display: grid;
    grid-template-columns: 2.66rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    padding: 0.74rem 0.84rem;
    transition: transform 130ms ease;
}

.publisher-home-row-static {
    color: var(--ph-text);
}

.publisher-home-row-icon {
    width: 2.62rem;
    height: 2.62rem;
    border-radius: 999px;
    background: var(--publisher-auth-accent-faint);
    color: var(--ph-purple);
    display: grid;
    place-items: center;
}

.publisher-home-row-icon svg {
    width: 1.34rem;
    height: 1.34rem;
}

.publisher-home-row-main {
    display: grid;
    gap: var(--space-2xs);
    min-width: 0;
}

.publisher-home-row-main strong {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-width: 0;
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.publisher-home-row-main span:not(.publisher-home-row-kicker):not(.publisher-row-meta):not(.publisher-home-check) {
    color: var(--ph-text-secondary);
    font-size: 0.82rem;
    line-height: 1.28;
}

.publisher-home-check {
    width: 1.08rem;
    height: 1.08rem;
    display: inline-grid;
    place-items: center;
}

.publisher-home-row-main span.publisher-home-check {
    color: rgba(103, 220, 151, 0.96);
}

.publisher-home-check svg {
    width: 1.06rem;
    height: 1.06rem;
    stroke-width: 2.05;
}

/* A single deliberate exception to the flat, chrome-less row treatment above:
   the report reminder needs slightly stronger prominence than a neutral row
   (it represents outstanding, actionable state), but stays restrained - the
   same violet accent already used for row icon circles, not a warning color. */
.publisher-home-reminder {
    display: grid;
    grid-template-columns: 2.66rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    padding: 0.86rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--publisher-auth-accent-faint);
    border: 1px solid color-mix(in srgb, var(--pub-purple) 32%, transparent);
    color: var(--ph-text);
    transition: transform 130ms ease;
}

.publisher-home-reminder:active {
    transform: scale(0.98);
}

.publisher-home-reminder-icon {
    width: 2.62rem;
    height: 2.62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pub-purple) 22%, transparent);
    color: var(--ph-purple);
    display: grid;
    place-items: center;
}

.publisher-home-reminder-icon svg {
    width: 1.34rem;
    height: 1.34rem;
}

.publisher-home-reminder-main {
    display: grid;
    gap: var(--space-2xs);
    min-width: 0;
}

.publisher-home-reminder-main strong {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.18;
}

.publisher-home-reminder-main span {
    color: var(--ph-text-secondary);
    font-size: 0.82rem;
    line-height: 1.28;
}

.publisher-home-reminder-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ph-purple);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.publisher-home-reminder-action svg {
    width: 1.02rem;
    height: 1.02rem;
}

.publisher-screen-reader-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.publisher-home-priority {
    align-items: center;
    grid-template-columns: 1fr;
    border-color: rgba(247, 168, 50, 0.18);
    background: linear-gradient(145deg, rgba(247, 168, 50, 0.1), rgba(255, 255, 255, 0.045));
}

.publisher-home-priority .publisher-card-title {
    margin-top: 0.55rem;
}

.publisher-home-territory {
    align-items: center;
    color: inherit;
    grid-template-columns: 68px 1fr;
    gap: 0.82rem;
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(30, 34, 45, 0.86), rgba(14, 17, 24, 0.76));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
}

.publisher-home-territory-heading {
    align-items: center;
    display: flex;
    gap: 0.52rem;
    justify-content: space-between;
}

.publisher-home-territory-heading .publisher-status-line {
    flex: 0 0 auto;
}

.publisher-home-territory.is-active-session {
    border-color: rgba(247, 168, 50, 0.24);
    background: linear-gradient(145deg, rgba(30, 34, 45, 0.9), rgba(18, 17, 21, 0.82));
}

.publisher-home-territory h3 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
}

.publisher-home-territory-main {
    display: grid;
    gap: 0.16rem;
}

.publisher-territory-area {
    margin: 0;
    color: var(--pub-subtle);
    font-size: 0.88rem;
    font-weight: 400;
}

.publisher-home-territory .publisher-action {
    grid-column: 1 / -1;
    width: 100%;
}

.publisher-map-tile-home {
    background: linear-gradient(145deg, rgba(62, 53, 105, 0.72), rgba(35, 31, 62, 0.78));
    border: 1px solid rgba(139, 108, 255, 0.24);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.12);
}

.publisher-map-tile-muted {
    color: rgba(247, 248, 252, 0.92);
}

.publisher-map-tile-home span {
    line-height: 1;
    opacity: 0.82;
}

.publisher-map-tile-home strong {
    font-size: 1.72rem;
    font-weight: 600;
    margin-top: 0.12rem;
}

.publisher-home-list-section {
    border-color: rgba(255, 255, 255, 0.085);
    background: rgba(255, 255, 255, 0.04);
}

.publisher-home-list-section .publisher-list {
    gap: 0;
}

.publisher-home-list-section .publisher-list-row {
    min-height: 58px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.78rem 0;
}

.publisher-home-list-section .publisher-list-row + .publisher-list-row,
.publisher-home-list-section .publisher-list li + li .publisher-list-row {
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.publisher-home-list-section .publisher-list-row strong {
    font-weight: 500;
}

.publisher-agenda-surface,
.publisher-report-status-row {
    border: 1px solid rgba(255, 255, 255, 0.072);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.032);
}

.publisher-role-pill {
    max-width: 9rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 108, 255, 0.22);
    background: rgba(139, 108, 255, 0.095);
    color: rgba(223, 216, 255, 0.94);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.32rem 0.56rem;
    text-align: right;
}

.publisher-agenda-empty {
    border: 0;
    background: transparent;
}

.publisher-home-report-compact {
    margin-top: -0.08rem;
}

.publisher-report-status-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.62rem;
    padding: 0.64rem 0.82rem;
}

.publisher-report-status-row strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.publisher-empty-compact {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 52px;
    margin: 0;
    padding: var(--space-sm);
}

.publisher-row-meta {
    color: var(--pub-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.publisher-chevron {
    color: var(--pub-muted);
    font-weight: 500;
    display: inline-grid;
    place-items: center;
}

.publisher-chevron svg {
    width: 1.08rem;
    height: 1.08rem;
}

.publisher-stat-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.publisher-stat-card {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-md);
    background: rgba(255, 255, 255, 0.052);
    padding: 0.82rem;
}

.publisher-stat-card span {
    display: block;
    color: var(--pub-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.publisher-stat-card strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 1;
}

.publisher-stat-row {
    display: flex;
    gap: var(--space-xl);
}

.publisher-stat-row span {
    display: block;
    color: var(--pub-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}

.publisher-stat-row strong {
    display: block;
    margin-top: var(--space-3xs);
    font-size: 1.5rem;
    line-height: 1;
}

.publisher-badge {
    border: 1px solid rgba(139, 108, 255, 0.32);
    border-radius: 999px;
    background: rgba(139, 108, 255, 0.13);
    color: var(--pub-purple);
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0 var(--space-xs);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.publisher-badge.success {
    border-color: rgba(103, 220, 151, 0.35);
    background: rgba(103, 220, 151, 0.12);
    color: var(--pub-green);
}

.publisher-badge.warning {
    border-color: rgba(247, 168, 50, 0.35);
    background: rgba(247, 168, 50, 0.12);
    color: var(--pub-orange);
}

.publisher-badge.inactive {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.055);
    color: var(--pub-muted);
}

.publisher-badge.danger {
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.12);
    color: var(--pub-red);
}

.publisher-agenda-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Shared two-column row layout for meeting-detail agenda rows and Schedule/
   Assignments list rows: a flexible primary (title) column plus a secondary
   (status/chevron/badge) column. Uses CSS grid (not flex) so the two columns
   are independent, non-overlapping tracks whose widths are declared rather
   than emergent from both children's content, and the row height always
   follows the taller column - for any title or status length.

   Columns:
   - minmax(0, 1fr): the title. Floored at 0 so it can shrink arbitrarily;
     takes all width the second column leaves.
   - fit-content(45%): the status. Sized to its own content, but never wider
     than 45% of the row - so a long assignee/status can never starve the
     title column, while a short status ("10 min") still sizes tightly.

   Overlap is structurally impossible: grid cells are disjoint areas, and
   overflow-wrap: anywhere (on the cells below) makes even a single very long
   unbreakable word break and wrap inside its own track rather than spill
   into the sibling column. */
.publisher-agenda-row,
.publisher-schedule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(45%);
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    margin: 0 calc(-1 * var(--space-sm));
    border-top: 1px solid var(--pub-line);
}

.publisher-agenda-row-main,
.publisher-agenda-row-status,
.publisher-schedule-row-main {
    min-width: 0;
    overflow-wrap: anywhere;
}

.publisher-agenda-list li:first-child .publisher-agenda-row {
    border-top: 0;
}

.publisher-agenda-row.is-own-assignment {
    background: rgba(139, 108, 255, 0.09);
    box-shadow: inset 3px 0 0 var(--pub-purple);
}

.publisher-agenda-row-status {
    display: grid;
    justify-items: end;
    gap: var(--space-2xs);
    text-align: right;
}

.publisher-agenda-section-label {
    margin: 0;
    color: var(--pub-purple);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.publisher-meeting-info {
    display: grid;
    gap: var(--space-xs);
    margin: 0 0 var(--space-lg);
}

.publisher-meeting-info p {
    margin: 0;
}

.publisher-agenda-section {
    display: grid;
    gap: var(--space-sm);
}

.publisher-schedule-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.publisher-schedule-list .publisher-action-row {
    padding: 0 var(--space-sm) var(--space-sm);
}

.publisher-schedule-row {
    color: inherit;
    text-decoration: none;
}

.publisher-schedule-list li:first-child .publisher-schedule-row {
    border-top: 0;
}

.publisher-schedule-row.is-own-assignment {
    background: rgba(139, 108, 255, 0.09);
    box-shadow: inset 3px 0 0 var(--pub-purple);
}

.publisher-schedule-row-main {
    display: grid;
    gap: var(--space-2xs);
}

.publisher-assignment-responsibilities {
    display: grid;
    gap: 0.32rem;
    margin-top: 0.12rem;
    color: var(--pub-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.publisher-assignment-responsibility {
    display: grid;
    grid-template-columns: 0.45rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    min-width: 0;
}

.publisher-assignment-responsibility-dot {
    width: 0.32rem;
    height: 0.32rem;
    margin-top: 0.46em;
    border-radius: 999px;
    background: var(--pub-purple);
    opacity: 0.78;
}

.publisher-schedule-show-more {
    width: 100%;
    margin: 0 calc(-1 * var(--space-sm));
    padding: var(--space-sm);
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--pub-purple);
    cursor: pointer;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.publisher-schedule-show-more .publisher-schedule-row-main strong {
    color: var(--pub-purple);
}

/* Sub-navigation rows (Schedule hub, e.g.) - a leading icon beside the title,
   inside the same first grid cell .publisher-schedule-row already reserves
   for content, so the shared row/grid contract is untouched everywhere else
   that reuses it (Meetings, More). */
.publisher-schedule-row-main.with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.publisher-schedule-row-main.with-icon > span {
    display: grid;
    gap: var(--space-2xs);
    min-width: 0;
}

.publisher-schedule-row-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    color: var(--pub-purple);
}

.publisher-schedule-row-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.publisher-form {
    display: grid;
    gap: var(--space-md);
}

.publisher-field,
.publisher-check-row {
    display: grid;
    gap: var(--space-xs);
}

.publisher-field label,
.publisher-check-row label {
    color: var(--pub-subtle);
    font-size: 0.78rem;
    font-weight: 600;
}

.publisher-check-row {
    align-items: center;
    grid-template-columns: 1fr auto;
}

.publisher-field input,
.publisher-field select,
.publisher-field textarea,
.publisher-form input:not([type="checkbox"]):not([type="radio"]),
.publisher-form select,
.publisher-form textarea {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--pub-line);
    border-radius: 0;
    background: transparent;
    color: var(--pub-ink);
    padding: 0.72rem 0;
    outline: 0;
}

.publisher-field textarea,
.publisher-form textarea {
    min-height: 7rem;
    resize: vertical;
}

.publisher-field input:focus,
.publisher-field select:focus,
.publisher-field textarea:focus,
.publisher-form input:not([type="checkbox"]):not([type="radio"]):focus,
.publisher-form select:focus,
.publisher-form textarea:focus {
    border-bottom-color: var(--pub-purple);
    box-shadow: none;
}

.publisher-action:focus-visible {
    border-color: var(--pub-focus);
    box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.publisher-form select option,
.publisher-field select option {
    color: #111827;
}

/* Shared picker component (templates/publisher/_picker.html + static/js/publisher-picker.js).
   Stands in for a native <select> so its open panel matches app styling instead of the
   browser's own dropdown chrome - see CLAUDE.md's "Never use a native <select>" rule.
   The real <select> stays in the DOM (visually hidden) as the field that's actually
   submitted/labelled; the trigger button + sheet below are the visible, styled UI. */
.publisher-picker {
    position: relative;
}

.publisher-picker select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.publisher-picker-trigger {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--pub-line);
    border-radius: 0;
    background: transparent;
    color: var(--pub-ink);
    padding: 0.72rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.publisher-picker-trigger:focus-visible {
    outline: 0;
    border-bottom-color: var(--pub-purple);
}

.publisher-picker-trigger:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.publisher-picker-chevron svg {
    display: block;
    width: 18px;
    height: 18px;
    color: var(--pub-subtle);
}

.publisher-picker-sheet {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: grid;
    align-items: end;
    background: rgba(4, 8, 18, 0.62);
    padding: 0 var(--publisher-app-gutter) var(--pub-safe-bottom);
}

.publisher-picker-sheet[hidden] {
    display: none;
}

.publisher-picker-panel {
    max-height: min(62dvh, 26rem);
    width: min(100%, 40rem);
    margin: 0 auto;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius-xl) var(--pub-radius-xl) 0 0;
    background: var(--pub-surface-strong);
    padding: 0.7rem 1rem calc(1rem + var(--pub-safe-bottom));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-sm);
    animation: publisher-picker-sheet-in 200ms ease-out;
}

@keyframes publisher-picker-sheet-in {
    from { transform: translateY(12%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Desktop/tablet presentation of the SAME picker: an anchored dropdown next
   to the trigger instead of a bottom sheet. publisher-picker.js sets
   top/left/width/max-height inline once positioned against the trigger's
   own rect; this block only supplies the anchored panel's visual chrome and
   strips the mobile sheet's full-screen dim/slide-up treatment. The sheet
   itself stays a full-viewport, transparent click-catcher (unchanged inset:0)
   so the existing outside-click-to-close handler needs no anchored-specific
   branch. */
@media (min-width: 768px) {
    .publisher-picker-sheet.is-anchored {
        background: transparent;
        padding: 0;
    }

    .publisher-picker-sheet.is-anchored .publisher-picker-panel {
        position: fixed;
        max-width: calc(100vw - 1rem);
        margin: 0;
        border-radius: var(--pub-radius-lg);
        box-shadow: 0 18px 45px rgba(3, 6, 14, 0.42);
        padding: 0.4rem;
        animation: publisher-picker-panel-in 140ms ease-out;
    }

    .publisher-picker-sheet.is-anchored .publisher-picker-head {
        display: none;
    }
}

@keyframes publisher-picker-panel-in {
    from { transform: translateY(-4px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.publisher-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.publisher-picker-head h2 {
    margin: 0;
    font-size: 1.02rem;
}

.publisher-picker-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    color: var(--pub-subtle);
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
    font: inherit;
}

.publisher-picker-listbox {
    min-height: 0;
    overflow: auto;
    display: grid;
}

.publisher-picker-option {
    min-height: 48px;
    border: 0;
    border-bottom: 1px solid var(--pub-line);
    border-radius: 0;
    background: transparent;
    color: var(--pub-ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: var(--space-xs);
    text-align: left;
    padding: 0 0.72rem;
    cursor: pointer;
    font: inherit;
}

.publisher-picker-option > span:first-child {
    overflow-wrap: anywhere;
}

.publisher-picker-option:last-child {
    border-bottom: 0;
}

.publisher-picker-option[aria-selected="true"] {
    color: var(--pub-purple);
    background: rgba(139, 108, 255, 0.13);
}

.publisher-picker-check {
    opacity: 0;
    text-align: center;
}

.publisher-picker-option[aria-selected="true"] .publisher-picker-check {
    opacity: 1;
}

.publisher-picker-empty {
    color: var(--pub-subtle);
    text-align: center;
}

body.publisher-picker-open {
    overflow: hidden;
}

.publisher-form .errorlist,
.publisher-error-summary {
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: var(--pub-radius-md);
    background: rgba(255, 107, 107, 0.12);
    color: #ffb4b4;
    margin: 0;
    padding: 0.7rem 0.8rem;
}

.publisher-form .helptext,
.publisher-help {
    color: var(--pub-muted);
    font-size: 0.76rem;
}

.publisher-table-wrap {
    overflow-x: auto;
}

.publisher-table {
    border-collapse: collapse;
    min-width: 100%;
}

.publisher-table th,
.publisher-table td {
    border-bottom: 1px solid var(--pub-line);
    color: var(--pub-subtle);
    padding: 0.6rem 0.35rem;
    text-align: left;
}

.publisher-table th {
    color: var(--pub-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.public-auth-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.105);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(23, 27, 38, 0.82), rgba(10, 13, 20, 0.76));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    display: grid;
    gap: clamp(1.45rem, 4.5vw, 1.85rem);
    padding: clamp(1.45rem, 5.6vw, 2rem);
    z-index: 1;
}

.auth-card {
    width: 100%;
}

.login-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: max(3rem, calc(2.7rem + var(--pub-safe-top))) 1.5rem calc(2rem + var(--pub-safe-bottom));
    background:
        radial-gradient(circle at 72% 12%, rgba(43, 60, 106, 0.20), transparent 38%),
        radial-gradient(circle at 10% 45%, rgba(27, 44, 78, 0.12), transparent 42%),
        linear-gradient(180deg, #0a1020 0%, #08101d 54%, #070c18 100%);
}

.login-map-art {
    position: absolute;
    top: -3.2rem;
    left: 50%;
    width: max(55rem, 220vw);
    height: min(28.5rem, 54dvh);
    pointer-events: none;
    transform: translateX(-43%) translate3d(0, 0, 0) scale(1);
    background-image: url("../images/login-world-map.png");
    background-position: 48% 3%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0.125;
    filter: saturate(0.64) hue-rotate(192deg) brightness(1.18) contrast(1.02);
    mix-blend-mode: screen;
    -webkit-mask-image:
        linear-gradient(180deg, transparent 0%, #000 9%, #000 66%, transparent 100%),
        radial-gradient(ellipse at 50% 18%, #000 0%, rgba(0, 0, 0, 0.9) 54%, transparent 84%);
    mask-image:
        linear-gradient(180deg, transparent 0%, #000 9%, #000 66%, transparent 100%),
        radial-gradient(ellipse at 50% 18%, #000 0%, rgba(0, 0, 0, 0.9) 54%, transparent 84%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    z-index: 0;
}

.login-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(22.5rem, calc(100vw - 3rem));
    display: grid;
    align-content: start;
    gap: 0;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    width: clamp(10.75rem, 46.15vw, 11.375rem);
    max-width: 72vw;
}

.login-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.login-masthead {
    display: grid;
    gap: 0;
    text-align: left;
}

.login-title {
    margin: 0;
    color: var(--ph-text);
    font-size: clamp(2rem, 8.7vw, 2.1875rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.012em;
}

.login-logo + .login-title {
    margin-top: clamp(2.875rem, 5.45dvh, 3.25rem);
}

/* Signed-out reuses the exact Login typography scale and shell - only the
   composition is lighter: a short confirmation plus one button has no form
   beneath it to fill the page, so the heading reads as a hero headline at
   Login's full size. Same font family/weight, same shell, smaller size and
   more generous rhythm so it reads as a normal auth-page title. */
.signed-out-body .login-title {
    font-size: clamp(1.5rem, 6.2vw, 1.625rem);
}

.signed-out-body .login-logo + .login-title {
    margin-top: clamp(3.5rem, 7dvh, 4.25rem);
}

.signed-out-body .login-primary-action {
    margin-top: clamp(2.75rem, 5.6dvh, 3.25rem);
}

.login-supporting-copy {
    margin: 0;
    max-width: 21rem;
    color: var(--ph-text-secondary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
}

.login-title + .login-supporting-copy {
    margin-top: 0.68rem;
}

.login-form {
    display: grid;
    gap: 0;
    margin-top: clamp(3.15rem, 6.9dvh, 3.9rem);
}

.login-field {
    display: grid;
    gap: 0.62rem;
    scroll-margin-top: 1.5rem;
}

.login-field + .login-field {
    margin-top: 1.58rem;
}

.login-field-label {
    color: rgba(225, 231, 244, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
}

.login-input-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    border: 1px solid rgba(105, 124, 164, 0.24);
    border-radius: 19px;
    background: rgba(17, 26, 45, 0.88);
    transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
}

.login-input-shell:focus-within {
    border-color: rgba(139, 113, 242, 0.84);
    background: rgba(19, 29, 50, 0.94);
    box-shadow: 0 0 0 3px rgba(139, 113, 242, 0.18);
}

.login-input-shell input {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 19px;
    background: transparent;
    color: var(--ph-text);
    caret-color: var(--ph-purple);
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    outline: 0;
    padding: 0 1.16rem;
    box-shadow: none;
    appearance: none;
}

.login-password-shell input {
    padding-right: 3.55rem;
}

.login-input-shell input::placeholder {
    color: rgba(147, 154, 171, 0.56);
}

.login-input-shell input:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.login-input-shell input:-webkit-autofill,
.login-input-shell input:-webkit-autofill:hover,
.login-input-shell input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ph-text);
    box-shadow: 0 0 0 1000px rgba(17, 26, 45, 0.96) inset;
    caret-color: var(--ph-purple);
    transition: background-color 9999s ease-in-out 0s;
}

.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.48rem;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ph-text-muted);
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition: color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.login-password-toggle svg {
    width: 1.32rem;
    height: 1.32rem;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible,
.login-password-toggle[aria-pressed="true"] {
    color: var(--ph-purple);
    background: var(--ph-purple-soft);
    outline: 0;
}

.login-password-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 113, 242, 0.2);
}

.login-icon-eye-off,
.login-password-toggle[aria-pressed="true"] .login-icon-eye {
    display: none;
}

.login-password-toggle[aria-pressed="true"] .login-icon-eye-off {
    display: inline-grid;
}

.login-primary-action {
    width: 100%;
    height: 58px;
    margin-top: clamp(2rem, 4.2dvh, 2.35rem);
    border: 0;
    border-radius: 19px;
    background: linear-gradient(135deg, #8a6ff2 0%, #755be5 62%, #6b50d8 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(84, 63, 181, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    padding: 0 1.08rem 0 1.35rem;
    transition: transform 170ms ease, opacity 170ms ease, box-shadow 170ms ease;
}

.login-primary-action:hover,
.login-primary-action:focus-visible {
    opacity: 0.94;
    outline: 0;
    box-shadow: 0 10px 22px rgba(84, 63, 181, 0.18), 0 0 0 3px rgba(139, 113, 242, 0.18);
}

.login-primary-action:hover .login-primary-icon,
.publisher-action-primary:hover .login-primary-icon {
    transform: translateX(2px);
}

.login-primary-icon {
    display: inline-grid;
    place-items: center;
    transition: transform var(--pub-speed);
}

.login-primary-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.login-primary-action:active {
    transform: translateY(1px) scale(0.99);
}

.login-secondary-link {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.08rem;
    color: var(--ph-text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color 170ms ease;
}

.login-secondary-link:hover,
.login-secondary-link:focus-visible {
    color: var(--ph-purple);
    outline: 0;
}

/* The auth shell's primary action is an <a> on pages that navigate rather
   than submit (Can't sign in?), and the secondary action is a real <button>
   when it must POST (Sign out). Same visual treatment either way - these only
   neutralise the element defaults, they are not a second button recipe. */
a.login-primary-action {
    box-sizing: border-box;
    text-decoration: none;
}

.login-secondary-form {
    display: grid;
    justify-items: center;
    margin: 0;
}

button.login-secondary-link {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.login-error-summary {
    display: grid;
    gap: 0.24rem;
    border: 1px solid rgba(255, 119, 119, 0.26);
    border-radius: 16px;
    background: rgba(255, 90, 100, 0.09);
    color: #ffbfc4;
    margin-bottom: 1.1rem;
    padding: 0.82rem 0.95rem;
}

.login-error-summary strong {
    color: #ffd7da;
    font-size: 0.92rem;
    font-weight: 500;
}

.login-error-summary p {
    color: rgba(255, 215, 218, 0.84);
    font-size: 0.86rem;
    line-height: 1.35;
}

@media (max-width: 360px) {
    .login-screen {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .login-title {
        font-size: 2.48rem;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .login-screen {
        padding-top: max(calc(0.8rem + var(--pub-safe-top)), 3.2dvh);
        padding-bottom: calc(1rem + var(--pub-safe-bottom));
    }

    .login-map-art {
        top: -7.2rem;
        width: max(56rem, 128vw);
        height: 65dvh;
        opacity: 0.086;
        transform: translateX(-40%) translate3d(0, 0, 0) scale(1);
    }

    .login-content {
        max-width: min(44rem, calc(100vw - 2rem));
        grid-template-columns: minmax(12rem, 0.82fr) minmax(18rem, 1fr);
        column-gap: clamp(1.2rem, 5vw, 2.4rem);
        align-items: start;
    }

    .login-masthead {
        grid-column: 1;
    }

    .login-logo {
        width: clamp(10.3rem, 24vw, 11.25rem);
    }

    .login-logo + .login-title {
        margin-top: 1.35rem;
    }

    .login-title {
        font-size: clamp(1.875rem, 4.2vw, 2rem);
    }

    .login-form {
        grid-column: 2;
    }

    .login-form {
        grid-row: 1 / span 3;
        margin-top: 0.1rem;
    }

    .login-input-shell,
    .login-primary-action {
        height: 54px;
        min-height: 54px;
        max-height: 54px;
    }
}

.auth-intro {
    display: grid;
    gap: 0.62rem;
}

.auth-intro h1 {
    margin: 0;
    color: var(--pub-ink);
    font-size: clamp(1.58rem, 7vw, 2.08rem);
    font-weight: 600;
    line-height: 1.04;
}

.auth-intro p {
    margin: 0;
    color: var(--pub-subtle);
    max-width: 22rem;
    font-size: 0.96rem;
    line-height: 1.55;
}

.auth-form {
    display: grid;
    gap: 1.12rem;
}

.auth-form.publisher-form {
    gap: 1rem;
}

.auth-form.publisher-form p {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.auth-form.publisher-form label,
.auth-field:not(.login-field) label {
    color: rgba(224, 228, 239, 0.78);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.auth-field {
    display: grid;
    gap: 0.62rem;
}

.auth-field input,
.auth-form.publisher-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    min-height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.058);
    color: var(--pub-ink);
    caret-color: var(--pub-purple);
    font: inherit;
    padding: 0 1rem;
    outline: 0;
    box-shadow: none;
    transition: border-color var(--pub-speed), box-shadow var(--pub-speed), background var(--pub-speed);
}

.auth-field input:focus,
.auth-form.publisher-form input:focus {
    border-color: var(--pub-focus);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18), 0 14px 32px rgba(0, 0, 0, 0.16);
}

.auth-field input:disabled,
.auth-form.publisher-form input:disabled {
    color: var(--pub-muted);
    cursor: not-allowed;
    opacity: 0.68;
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus,
.auth-form.publisher-form input:-webkit-autofill {
    -webkit-text-fill-color: var(--pub-ink);
    box-shadow: 0 0 0 1000px #171b25 inset, 0 0 0 3px rgba(139, 108, 255, 0.12);
    caret-color: var(--pub-purple);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-primary-action {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    font: inherit;
    font-weight: 600;
    margin-top: 0.32rem;
    box-shadow: 0 18px 42px rgba(139, 108, 255, 0.24);
}

.auth-primary-action:focus-visible {
    outline: 0;
    box-shadow: 0 18px 42px rgba(139, 108, 255, 0.24), 0 0 0 3px rgba(169, 148, 255, 0.26);
}

.auth-primary-action:disabled {
    opacity: 0.56;
}

.auth-secondary-link {
    align-self: center;
    border-radius: 14px;
    color: var(--pub-subtle);
    font-size: 0.88rem;
    font-weight: 500;
    justify-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.72rem;
}

.auth-secondary-link:hover,
.auth-secondary-link:focus-visible {
    color: var(--pub-purple);
    outline: 0;
}

.auth-secondary-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.18);
}

.auth-error-summary,
.auth-field-errors {
    border: 1px solid rgba(255, 107, 107, 0.35);
    border-radius: var(--pub-radius-md);
    background: rgba(255, 107, 107, 0.12);
    color: #ffb4b4;
}

.auth-error-summary {
    padding: 0.72rem 0.82rem;
}

.auth-error-summary p,
.auth-field-errors p {
    margin: 0;
}

.auth-field-errors {
    padding: 0.55rem 0.68rem;
    font-size: 0.78rem;
}

.auth-form .errorlist {
    list-style: none;
    padding-left: 0;
}

.publisher-detail-grid {
    display: grid;
    gap: 0.65rem;
}

.publisher-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--pub-line);
    padding-top: 0.65rem;
}

.publisher-detail-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.publisher-notice-card {
    border-color: rgba(247, 168, 50, 0.34);
    background: rgba(247, 168, 50, 0.1);
}

.publisher-map-view-shell {
    max-width: 42rem;
}

.publisher-map-summary {
    align-items: center;
    grid-template-columns: 1fr;
}

.publisher-map-panel {
    border: 1px solid var(--pub-line);
    border-radius: 22px;
    background: rgba(12, 15, 22, 0.86);
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.publisher-map-toolbar {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    padding: 0.55rem;
}

.publisher-map-tab {
    min-height: 38px;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--pub-subtle);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 0.82rem;
}

.publisher-map-tab.active {
    color: var(--pub-purple);
    border-color: rgba(139, 108, 255, 0.42);
    background: rgba(139, 108, 255, 0.14);
}

.publisher-map-recenter {
    margin-left: auto;
}

.publisher-map-stage {
    min-height: 420px;
}

.publisher-map-canvas {
    min-height: 420px;
    width: 100%;
}

.publisher-map-fallback {
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: var(--pub-subtle);
}

.publisher-map-marker {
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--marker-color);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
    color: #0b0f16;
    display: grid;
    place-items: center;
    font-size: 0.66rem;
    font-weight: 600;
}

.territory-block-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pub-purple) 80%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.territory-block-label-editable {
    pointer-events: auto;
    cursor: grab;
}

.territory-block-label-editable:active {
    cursor: grabbing;
}

.publisher-map-list {
    display: grid;
    gap: 0.65rem;
    padding: 0 0.65rem 0.75rem;
}

.publisher-map-list[hidden] {
    display: none;
}

.publisher-address-group {
    display: grid;
    gap: 0.42rem;
}

.publisher-address-group h2 {
    margin: 0;
    color: var(--pub-subtle);
    font-size: 0.84rem;
}

.publisher-address-row {
    align-items: center;
    border: 1px solid var(--pub-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 0.7rem;
    justify-content: space-between;
    padding: 0.72rem;
}

.publisher-address-row small {
    color: var(--pub-muted);
    display: block;
    font-size: 0.7rem;
    margin-top: 0.18rem;
}

.publisher-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: var(--pub-nav-height);
    width: min(100%, 31rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0.48rem 0.4rem calc(0.52rem + var(--pub-safe-bottom));
    background: var(--bottom-navigation-bg);
    border: 0;
    border-top: 1px solid rgba(91, 112, 156, 0.14);
    border-radius: 0;
    backdrop-filter: blur(20px);
    z-index: 10;
}

.publisher-bottom-nav a {
    min-height: 3.58rem;
    display: grid;
    place-items: center;
    gap: 0.14rem;
    color: rgba(151, 160, 183, 0.82);
    font-size: 0.64rem;
    font-weight: 400;
    border-radius: 0.9rem;
    transition: color 130ms ease, transform 130ms ease;
}

.publisher-bottom-nav a.active,
.publisher-bottom-nav a[aria-current="page"] {
    color: var(--ph-purple);
}

.publisher-bottom-nav svg {
    width: 1.46rem;
    height: 1.46rem;
}

.publisher-bottom-nav a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(139, 113, 242, 0.2);
}

.publisher-bottom-nav a:active {
    transform: scale(0.97);
}

:focus-visible {
    outline: 3px solid rgba(139, 108, 255, 0.72);
    outline-offset: 2px;
}

@media (max-width: 430px) {
    .publisher-home-greeting {
        font-size: clamp(1.82rem, 7.7vw, 1.9rem);
    }

    .publisher-home-hero {
        min-height: 11.5rem;
    }

    .publisher-home-hero-icon {
        width: 3rem;
        height: 3rem;
    }

    .publisher-home-hero-title {
        font-size: clamp(1.56rem, 6.4vw, 1.68rem);
    }

    .publisher-home-row {
        grid-template-columns: 2.66rem minmax(0, 1fr) auto;
    }

    .publisher-home-row .publisher-chevron {
        display: inline-grid;
    }

    .publisher-home-row-action {
        display: none;
    }

    .publisher-home-territory-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.18rem;
    }

    .publisher-agenda-row {
        gap: 0.42rem;
    }

    .publisher-role-pill {
        justify-self: start;
        max-width: 100%;
        text-align: left;
    }

    .publisher-report-status-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .publisher-report-status-row .publisher-text-link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .public-shell {
        max-width: 47rem;
        padding-top: max(calc(0.75rem + var(--pub-safe-top)), 3dvh);
        padding-bottom: calc(0.85rem + var(--pub-safe-bottom));
        gap: 0.85rem;
    }

    .public-brand .publisher-logo-wordmark {
        width: clamp(7.8rem, 20vw, 9rem);
    }

}

@media (min-width: 768px) {
    .publisher-shell {
        width: min(
            calc(100vw - var(--publisher-nav-rail-width) - 4rem),
            var(--publisher-tablet-shell-width)
        );
        max-width: var(--publisher-tablet-shell-width);
        min-height: 100dvh;
        margin-left: calc(
            var(--publisher-nav-rail-width) +
            max(2rem, calc((100vw - var(--publisher-nav-rail-width) - var(--publisher-tablet-shell-width)) / 2))
        );
        margin-right: max(2rem, calc((100vw - var(--publisher-nav-rail-width) - var(--publisher-tablet-shell-width)) / 2));
        padding: calc(2rem + var(--pub-safe-top)) 0 2.5rem;
        align-content: start;
    }

    .publisher-content-with-nav,
    .publisher-scroll-region {
        padding-bottom: 0;
        scroll-padding-bottom: 0;
    }

    .publisher-app-brand {
        width: var(--publisher-app-brand-width);
        max-width: 9.75rem;
    }

    .publisher-bottom-nav {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: var(--publisher-nav-rail-width);
        height: 100vh;
        height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 3.78rem);
        align-content: start;
        gap: 0.18rem;
        padding: clamp(7rem, 18dvh, 12rem) 0.55rem 1.1rem;
        background: rgba(5, 11, 22, 0.94);
        border-top: 0;
        border-right: 1px solid rgba(91, 112, 156, 0.12);
        backdrop-filter: blur(18px);
    }

    .publisher-bottom-nav a {
        min-height: 3.55rem;
        gap: 0.2rem;
        padding: 0.34rem 0.2rem;
        color: rgba(151, 160, 183, 0.78);
        font-size: 0.66rem;
        line-height: 1.05;
        border-radius: 0.95rem;
    }

    .publisher-bottom-nav a:hover {
        color: rgba(214, 220, 238, 0.92);
        background: rgba(255, 255, 255, 0.035);
    }

    .publisher-bottom-nav a.active,
    .publisher-bottom-nav a[aria-current="page"] {
        color: var(--ph-purple);
        background: transparent;
    }

    .publisher-bottom-nav svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    .publisher-map-grid,
    .publisher-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .publisher-map-summary { grid-template-columns: 1fr auto; }

    .publisher-home-shell {
        width: min(
            calc(100vw - var(--publisher-nav-rail-width) - 4rem),
            var(--publisher-tablet-shell-width)
        );
        max-width: var(--publisher-tablet-shell-width);
        align-content: start;
    }

    .publisher-home-greeting {
        font-size: clamp(1.94rem, 4.1vw, 2.05rem);
    }

    .publisher-home-hero {
        min-height: 13.75rem;
        padding: 1.1rem 1.16rem 0.9rem;
    }

    .publisher-home-map-art {
        inset: -2.2rem -6rem 1.1rem 38%;
    }

    .publisher-home-hero-title {
        font-size: clamp(1.62rem, 3.4vw, 1.75rem);
    }

    .publisher-home-hero-subtitle {
        font-size: 0.96rem;
    }

    .publisher-home-row {
        min-height: 6.72rem;
        padding-right: 1rem;
        padding-left: 0.95rem;
    }

    .publisher-home-row-main strong {
        font-size: clamp(1.18rem, 2.5vw, 1.28rem);
    }

    .publisher-home-row-main span:not(.publisher-home-row-kicker):not(.publisher-row-meta):not(.publisher-home-check) {
        font-size: 0.9rem;
    }
}

@media (min-width: 960px) {
    .publisher-shell {
        width: min(
            calc(100vw - var(--publisher-nav-rail-width) - 6rem),
            var(--publisher-desktop-shell-width)
        );
        max-width: var(--publisher-desktop-shell-width);
        margin-left: calc(
            var(--publisher-nav-rail-width) +
            max(3rem, calc((100vw - var(--publisher-nav-rail-width) - var(--publisher-desktop-shell-width)) / 2))
        );
        margin-right: max(3rem, calc((100vw - var(--publisher-nav-rail-width) - var(--publisher-desktop-shell-width)) / 2));
        padding-top: calc(2.05rem + var(--pub-safe-top));
        padding-bottom: 3rem;
    }

    .publisher-home-shell {
        width: min(
            calc(100vw - var(--publisher-nav-rail-width) - 6rem),
            var(--publisher-desktop-shell-width)
        );
        max-width: var(--publisher-desktop-shell-width);
    }

    /* The two-column split lives one level deeper than it used to, on
       #publisher-main rather than .publisher-home-shell directly: since
       #publisher-main is the HTMX shell-navigation swap boundary (see
       templates/publisher/base.html and _bottom_nav.html), the whole
       page_header/content grid needs to be reconstructible from that one
       swapped element on its own - a CSS Grid item's grid-column/grid-row
       placement only has meaning relative to its own immediate parent, so
       .publisher-home-head/.publisher-home-primary/.publisher-home-section
       must be direct children of the grid that positions them. The outer
       .publisher-home-shell grid now just stacks two full-width rows:
       .publisher-app-header (persistent, outside the swap boundary) and
       #publisher-main (which is itself the nested two-column grid below) -
       .publisher-shell's own base `gap` already spaces those two rows. */
    .publisher-home-shell #publisher-main {
        display: grid;
        grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
        column-gap: clamp(1.75rem, 3vw, 2.25rem);
        row-gap: var(--space-lg);
        align-items: start;
    }

    .publisher-home-shell #publisher-main > .publisher-home-head {
        grid-column: 1 / -1;
    }

    .publisher-home-shell #publisher-main > .publisher-home-primary {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    .publisher-home-shell #publisher-main > .publisher-home-section:not(.publisher-home-primary) {
        grid-column: 2;
    }

    .publisher-home-shell #publisher-main > .publisher-home-section + .publisher-home-section {
        margin-top: 0;
    }

    .publisher-home-shell #publisher-main > .publisher-home-section:nth-of-type(3) {
        margin-top: 1.48rem;
    }

    .publisher-home-head {
        margin-bottom: var(--space-xl);
    }

    .publisher-home-greeting {
        font-size: clamp(2rem, 2.7vw, 2.18rem);
    }

    .publisher-home-hero {
        min-height: 16.35rem;
        padding: 1.25rem 1.24rem 0.98rem;
    }

    .publisher-home-map-art {
        inset: -2.45rem -6.4rem 0.9rem 34%;
        opacity: 0.052;
    }

    .publisher-home-hero-top {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: 0.94rem;
    }

    .publisher-home-hero-icon {
        width: 3.22rem;
        height: 3.22rem;
    }

    .publisher-home-hero-title {
        font-size: clamp(1.66rem, 2.1vw, 1.78rem);
    }

    .publisher-home-row {
        min-height: 7.65rem;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        gap: 0.78rem;
        padding: 0.88rem 1rem;
    }

    .publisher-home-row-icon {
        width: 2.9rem;
        height: 2.9rem;
    }
}

@media (min-width: 1180px) {
    .publisher-map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Map Information (publisher_map_info.html) - rebuilt from scratch with its own
   .pmi-* classes. Flat by design: no border, no background, no rounded-box
   container anywhere in this block except the two real buttons. Status/button
   styling reuses the app's shared .publisher-status-line and .publisher-action
   classes directly rather than redefining them. */
.pmi-summary {
    display: grid;
    gap: var(--space-2xs);
}

.pmi-icon {
    color: var(--pub-purple);
    margin-bottom: var(--space-3xs);
}

.pmi-icon svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.pmi-status {
    font-size: 1.05rem;
    font-weight: 600;
}

.pmi-meta {
    margin-top: 0;
}

.pmi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.pmi-list {
    display: grid;
}

.pmi-list-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    border-top: 1px solid var(--pub-line);
    padding: var(--space-sm) 0;
}

.pmi-list-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.pmi-list-row:last-child {
    padding-bottom: 0;
}