/* ==========================================================================
   Analytics Server — Custom Styles
   Layered on top of Pico CSS for sidebar layout, chart frames, and composites.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CSS Variables — Light Theme (default)
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
    --sidebar-width: 264px;
    --nav-height: 60px;

    /* Design tokens (corgi.insure-adapted layout; Indigo-brand indigo accent) */
    --accent: #4f46e5;              /* indigo */
    --accent-hover: #4338ca;
    --accent-subtle: #eef2ff;       /* light indigo tint for active/hover states */

    /* Title colors. The logo purple is reserved for the sidebar (menu) project
       title; page titles use slate. Project title = a stronger slate than the
       quadrant labels; article titles share the quadrant-label slate. */
    --title-purple: #3a0eae;        /* dominant Indigo-logo purple (menu title only) */
    --title-slate: #334155;         /* project title — a step darker than --text-secondary */

    /* Landing quadrant backgrounds — grayscale ramp (TL→TR→BL→BR, darkening)
       with a faint purple undertone that grows a little as it darkens. */
    --quad-current-bg: var(--nav-bg);   /* top-left: unchanged (nav white) */
    --quad-develop-bg: #f1eff4;         /* top-right: slightly darker */
    --quad-past-bg: #e4dfe9;            /* bottom-left: darker still */
    --quad-team-bg: #d7d0dd;            /* bottom-right: darkest */

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --content-max: 1160px;
    /* Shared content-column width — markdown and the chart iframe use this so they
       line up edge-to-edge. ~80ch reads a little wide but was chosen deliberately. */
    --content-measure: 80ch;

    /* Nav */
    --nav-bg: #ffffff;
    --nav-text: #475569;
    --nav-hover: #0f172a;
    --brand-divider: rgba(15, 23, 42, 0.12);

    /* Body / Content — unified with the project-navigation (sidebar) menu color,
       so content isn't a white box on a grey shell. */
    --body-bg: #f6f8fa;
    --content-bg: #f6f8fa;

    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Borders */
    --border-color: #e6e9ee;

    /* Sidebar */
    --sidebar-bg: #f6f8fa;
    --sidebar-link-color: #475569;
    --sidebar-link-hover-bg: #eef1f4;
    --sidebar-active-bg: var(--accent-subtle);
    --sidebar-active-accent: var(--accent);

    /* Cards */
    --card-bg: #ffffff;
    --card-border: #e6e9ee;
    --card-shadow: rgba(15, 23, 42, 0.06);

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d5dbe1;
    --input-focus-shadow: rgba(79, 70, 229, 0.15);

    /* Errors */
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --error-text: #b91c1c;

    /* Primary button → accent */
    --btn-primary-bg: var(--accent);
    --btn-primary-hover-bg: var(--accent-hover);

    /* Table */
    --table-header-bg: #f6f8fa;

    /* Override Pico defaults */
    --pico-background-color: #f6f8fa;
    --pico-color: #0f172a;
    --pico-border-radius: var(--radius-sm);
    --pico-font-family: var(--font-sans);
    --pico-primary: var(--accent);
    --pico-primary-hover: var(--accent-hover);
    --pico-primary-background: var(--accent);
    --pico-primary-hover-background: var(--accent-hover);
    --pico-primary-focus: var(--input-focus-shadow);
}

/* ---------------------------------------------------------------------------
   CSS Variables — Dark Theme
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* Calm slate-dark counterpart; a brighter indigo reads well on dark. */
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-subtle: #23264d;

    /* Title colors on dark. Purple (menu title) lightened for contrast; the
       project-title slate is a step brighter than --text-secondary. */
    --title-purple: #a78bfa;        /* menu project title */
    --title-slate: #cbd5e1;         /* project title — stronger than --text-secondary */

    /* Landing quadrant backgrounds — grayscale ramp (TL→TR→BL→BR, darkening)
       with a faint purple undertone that grows a little as it darkens. */
    --quad-current-bg: var(--nav-bg);   /* top-left: unchanged (nav) */
    --quad-develop-bg: #100e16;         /* top-right: slightly darker */
    --quad-past-bg: #0c0a12;            /* bottom-left: darker still */
    --quad-team-bg: #08060d;            /* bottom-right: darkest */

    --nav-bg: #12151b;
    --nav-text: #9aa4b2;
    --nav-hover: #ffffff;
    --brand-divider: rgba(154, 164, 178, 0.28);

    --body-bg: #0e1116;
    --content-bg: #12151b;

    --text-primary: #e6e9ee;
    --text-secondary: #9aa4b2;
    --text-muted: #6b7686;

    --border-color: #242a34;

    --sidebar-bg: #12151b;
    --sidebar-link-color: #9aa4b2;
    --sidebar-link-hover-bg: #1b2029;
    --sidebar-active-bg: var(--accent-subtle);
    --sidebar-active-accent: var(--accent);

    --card-bg: #151922;
    --card-border: #242a34;
    --card-shadow: rgba(0, 0, 0, 0.4);

    --input-bg: #151922;
    --input-border: #2c333f;
    --input-focus-shadow: rgba(129, 140, 248, 0.25);

    --error-bg: #3a1a1a;
    --error-border: #8b3a3a;
    --error-text: #fca5a5;

    --btn-primary-bg: var(--accent);
    --btn-primary-hover-bg: var(--accent-hover);

    --table-header-bg: #12151b;

    --pico-background-color: #0e1116;
    --pico-color: #e6e9ee;
    --pico-primary: var(--accent);
    --pico-primary-hover: var(--accent-hover);
    --pico-primary-background: var(--accent);
    --pico-primary-hover-background: var(--accent-hover);
}

/* Reset Pico's body container behavior */
body {
    margin: 0;
    padding: 0;
    background: var(--body-bg);
}

/* Prevent Pico from adding container padding to our nav */
body > nav.top-nav {
    --pico-block-spacing-vertical: 0;
    --pico-block-spacing-horizontal: 0;
    margin: 0;
    padding: 0 1.5rem;
}

/* ---------------------------------------------------------------------------
   Top Navigation
   --------------------------------------------------------------------------- */
.top-nav {
    background: var(--nav-bg);
    color: var(--nav-hover);
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}

.top-nav a {
    color: var(--nav-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.top-nav a:hover {
    color: var(--nav-hover);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

/* Indigo logo (self-hosted SVG; light/dark variants swap via the rules below). */
.brand img {
    height: 26px;
    width: auto;
}

.brand-divider {
    width: 1px;
    height: 22px;
    background: var(--brand-divider);
}

.brand-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-right .user-info {
    color: var(--nav-text);
    font-size: 0.85rem;
}

/* Hamburger toggle (mobile only) */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--nav-text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

/* Logo swap — show correct variant per theme */
[data-theme="dark"] .logo-light { display: none; }
[data-theme="light"] .logo-dark,
:root .logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    line-height: 1;
    color: var(--nav-text);
}

.theme-toggle:hover {
    color: var(--nav-hover);
}

[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark,
:root .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* ---------------------------------------------------------------------------
   Page Layout (sidebar + main)
   --------------------------------------------------------------------------- */
.page-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-height));
}

/* ---------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    padding: 1rem 0;
    font-size: 0.85rem;
}

.sidebar-project-name {
    padding: 0.25rem 1.25rem 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.sidebar-category {
    padding: 0.6rem 1.25rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    cursor: default;
}

/* Clickable category link inside sidebar header */
.sidebar-category-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
}

.sidebar-category-link:hover {
    color: var(--sidebar-active-accent);
    text-decoration: none;
}

.sidebar-category-link.active,
.sidebar-category.active .sidebar-category-link {
    color: var(--sidebar-active-accent);
}

/* Category collapse/expand chevron */
.category-chevron {
    display: inline-block;
    font-size: 0.6rem;
    margin-right: 0.2rem;
    transition: transform 0.15s;
    cursor: pointer;
    padding: 0.2rem;
}

.sidebar-group.expanded > .sidebar-category .category-chevron {
    transform: rotate(90deg);
}

/* Collapsible group items */
.sidebar-group-items {
    display: none;
}

.sidebar-group.expanded > .sidebar-group-items {
    display: block;
}

/* In reorder mode, always expand all groups */
.reorder-mode .sidebar-group-items {
    display: block;
}

.reorder-mode .category-chevron {
    transform: rotate(90deg);
}

.sidebar-link {
    display: block;
    padding: 0.3rem 1.25rem 0.3rem 1.5rem;
    color: var(--sidebar-link-color);
    text-decoration: none;
    border-left: 3px solid transparent;
    line-height: 1.4;
    font-size: 0.78rem;
    transition: background 0.1s, border-color 0.1s;
}

.sidebar-link:hover {
    background: var(--sidebar-link-hover-bg);
    text-decoration: none;
    color: var(--text-primary);
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-accent);
    color: var(--text-primary);
    font-weight: 600;
}

/* Reorder toggle button */
.sidebar-reorder-toggle {
    float: right;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
}

.sidebar-reorder-toggle:hover,
.sidebar-reorder-toggle.active {
    color: var(--sidebar-active-accent);
    border-color: var(--sidebar-active-accent);
}

/* Drag handles — hidden until reorder mode */
.drag-handle {
    display: none;
    cursor: grab;
    color: var(--text-secondary);
    margin-right: 0.35rem;
    font-size: 0.75rem;
    user-select: none;
}

.drag-handle:active { cursor: grabbing; }

.reorder-mode .drag-handle { display: inline; }

.reorder-mode .sidebar-link,
.reorder-mode .sidebar-category-link,
.reorder-mode .sidebar-category {
    cursor: default;
}

.reorder-mode .sidebar-link[data-item-id],
.reorder-mode .sidebar-group {
    cursor: grab;
}

/* Make handles the only draggable part */
.sidebar-link[data-item-id],
.sidebar-group {
    /* draggable set in reorder mode via JS handle detection */
}

.reorder-mode .sidebar-link[data-item-id] {
    -webkit-user-select: none;
    user-select: none;
}

.reorder-mode .sidebar-group {
    -webkit-user-select: none;
    user-select: none;
}

/* Visual feedback while dragging */
.sidebar-link.dragging,
.sidebar-group.dragging {
    opacity: 0.4;
}

.sidebar-footer {
    padding: 0.75rem 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.sidebar-footer a {
    color: var(--sidebar-active-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.sidebar-footer a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Main Content Area
   --------------------------------------------------------------------------- */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem;
    max-width: 100%;
    background: var(--content-bg);
}

/* No-sidebar layout (project list, login) */
.main-content.full-width {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Full-bleed landing: quadrants span the whole page width, no centered column. */
.main-content--landing {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: var(--content-bg);
}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */
.breadcrumb {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Project List Cards
   --------------------------------------------------------------------------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Landing — Type Quadrants (2x2 grid → single column on narrow screens)
   The 1px grid gap over a border-colored container background reads as thin
   dividers between the four colored panels.
   --------------------------------------------------------------------------- */
.landing-quadrants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "current develop"
        "past team";
    gap: 1px;
    background: var(--border-color);
    overflow: hidden;
    min-height: calc(100vh - var(--nav-height));
}

.quadrant {
    margin: 0;
    padding: 1.75rem;
    min-width: 0;
}

.quadrant--current { grid-area: current; background: var(--quad-current-bg); }
.quadrant--develop { grid-area: develop; background: var(--quad-develop-bg); }
.quadrant--past    { grid-area: past;    background: var(--quad-past-bg); }
.quadrant--team    { grid-area: team;    background: var(--quad-team-bg); }

.quadrant-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.quadrant-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-secondary);  /* slate, not the near-black primary */
}

.quadrant-cards {
    display: grid;
    /* Balanced grid: --cols = ceil(sqrt(item count)), set per quadrant in the
       view (4→2×2, 5→3+2, 9→3×3). Grid fills the top row first. */
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}

.quadrant-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 860px) {
    .landing-quadrants {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "current"
            "develop"
            "past"
            "team";
        min-height: 0;
    }

    /* Empty quadrants collapse to a thin sliver in the stacked layout. */
    .quadrant--empty {
        height: 5px;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }

    .quadrant--empty > * {
        display: none;
    }
}

.project-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.25rem;
    transition: box-shadow 0.15s;
}

.project-card:hover {
    box-shadow: 0 2px 8px var(--card-shadow);
}

.project-card h2,
.project-card h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.project-card h2 a,
.project-card h3 a {
    color: var(--title-slate);  /* match the project title on the detail page */
    text-decoration: none;
}

.project-card h2 a:hover,
.project-card h3 a:hover {
    text-decoration: underline;
}

.project-card .meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.project-card .description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

/* ---------------------------------------------------------------------------
   Project Detail — Category Groups
   --------------------------------------------------------------------------- */
.category-group {
    margin-bottom: 1.5rem;
}

.category-group h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}

.category-link {
    color: var(--text-secondary);
    text-decoration: none;
}

.category-link:hover {
    color: var(--sidebar-active-accent);
    text-decoration: underline;
}

.chart-count {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
    margin-left: 0.35rem;
}

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

.page-list li {
    padding: 0.4rem 0;
}

.page-list li a {
    color: var(--text-primary);
    text-decoration: none;
}

.page-list li a:hover {
    color: var(--sidebar-active-accent);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Chart View
   --------------------------------------------------------------------------- */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.chart-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-secondary);  /* article titles: same slate as the quadrant labels */
}

/* On the project page each item title is a link — render it like the title
   (not a blue/underlined link), with a subtle accent on hover since it navigates. */
.chart-title a {
    color: inherit;
    text-decoration: none;
}

.chart-title a:hover {
    color: var(--accent);
}

/* Inline (click-to-edit) title */
.chart-title-edit {
    display: inline-flex;
    margin: 0;
}

.chart-title.editable-title {
    cursor: text;
}

.chart-title.editable-title:hover,
.chart-title.editable-title:focus-visible {
    text-decoration: underline dotted var(--text-muted);
    text-underline-offset: 5px;
    outline: none;
}

/* `input.` qualifier beats Pico's `input:not([type=checkbox],[type=radio])
   { width: 100% }` (0,1,1), so the inline title field keeps its own width. */
input.chart-title-input {
    width: min(34rem, 60vw);
    margin: 0;
    padding: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
}

.chart-title-input:focus {
    outline: none;
}

/* Inline (click-to-edit) project title — same UX as the item title, h1 scale. */
.project-title-edit {
    display: inline-flex;
    margin: 0;
}

.project-title {
    margin: 0;
    color: var(--title-slate);  /* stronger slate than the quadrant labels */
}

.project-title.editable-title {
    cursor: text;
}

.project-title.editable-title:hover,
.project-title.editable-title:focus-visible {
    text-decoration: underline dotted var(--text-muted);
    text-underline-offset: 6px;
    outline: none;
}

input.project-title-input {
    width: min(34rem, 70vw);
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent);
    border-radius: 0;
}

.project-title-input:focus {
    outline: none;
}

/* Breadcrumb row: breadcrumb on the left, project-type toggle immediately to
   its right (above the title). */
.breadcrumb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
}

.breadcrumb-row .breadcrumb {
    margin: 0;
}

.breadcrumb-row .project-type-panel {
    margin: 0;
}

/* Project-type (quadrant) toggle — white buttons, blue highlight when active.
   Standalone (e.g. the upload page) it keeps a little top spacing; inside
   `.project-admin-row` the override above resets it. */
.project-type-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin: 0.75rem 0 0;
}

/* `button.` qualifier beats Pico's `button[type=submit]{width:100%}` (0,1,1). */
button.project-type-btn {
    margin: 0;
    padding: 0.3rem 0.9rem;
    width: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.project-type-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.project-type-btn.is-active {
    color: var(--accent);
    background: var(--accent-subtle);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

.project-type-status {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s;
}

.project-type-status.is-visible {
    opacity: 1;
}

.project-type-status.is-error {
    color: var(--error-text);
}

.chart-nav {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.chart-nav a {
    color: var(--sidebar-active-accent);
    text-decoration: none;
}

.chart-nav a:hover {
    text-decoration: underline;
}

.chart-nav .disabled {
    color: var(--input-border);
    pointer-events: none;
}

/* Chart column — wraps the iframe so the Replace button can overlay its corner
   and the Full-width toggle can expand the column. */
.chart-wrap {
    position: relative;
    width: 100%;
    max-width: var(--content-measure);
    margin-inline: auto;
    /* A thin divider between the markdown above and the chart below (like the
       header/page border), plus room for the overlay buttons above the iframe. */
    margin-top: 1.5rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--border-color);
}

/* "Full width" toggle — expand the chart past the shared content column. */
.chart-wrap.full-bleed {
    max-width: none;
}

.chart-frame {
    display: block;
    width: 100%;
    height: 800px;
    border: none;
    background: var(--content-bg);
}

/* View / download actions overlaid at the chart's top-left corner (anchored to
   .chart-wrap, so they move left with the chart when it goes full width). */
.chart-actions {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chart-actions .download-btn {
    box-shadow: var(--shadow-sm);
}

/* Replace-HTML control overlaid at the chart's top-right corner. */
.chart-replace {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    margin: 0;
}

.chart-replace-btn {
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------------
   Download Toolbar
   --------------------------------------------------------------------------- */
.download-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto; /* override Pico's full-width form buttons */
    padding: 0.25rem 0.6rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.1s, border-color 0.1s;
}

/* Item management actions row (publish/move/delete/rename) */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-toolbar form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Global reset for Pico's full-width form buttons.
   Pico sets `button[type=submit], input:not([type=checkbox],[type=radio]),…
   { width: 100% }`. We size buttons to their content by default (matching the
   app's compact, inline button style) so no individual button/class has to
   re-fight this. Full width is opt-in: give a button `.btn-block`, or a scoped
   rule like `.login-card button` (which stays 100% by design).
   Loaded after Pico, so it wins the specificity tie on source order. */
button[type="submit"],
button[type="button"],
button[type="reset"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
    width: auto;
}

.btn-block {
    width: 100%;
}

/* Form action row — submit + cancel sit side by side, content-sized. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.download-btn:hover {
    color: var(--sidebar-active-accent);
    border-color: var(--sidebar-active-accent);
    text-decoration: none;
}

.download-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.download-btn svg {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Composite View
   --------------------------------------------------------------------------- */
.composite-block {
    margin-bottom: 2rem;
}

.composite-text {
    /* Cap the reading line-length (the "measure") for comfortable prose. `ch`
       is font-relative (~1 character wide), so ~72ch ≈ 65–75 chars per line —
       fills narrow containers, but doesn't sprawl on wide screens. Centered as
       a block so the column lines up with the centered chart below it. */
    max-width: var(--content-measure);
    margin-inline: auto;
    line-height: 1.7;
    /* Undo Pico's default <article> "card" (white bg + shadow + radius) so the
       markdown sits seamlessly on the unified background. */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.composite-text h1,
.composite-text h2,
.composite-text h3 {
    margin-top: 1.5rem;
}

.composite-text table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.composite-text th,
.composite-text td {
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.composite-text th {
    background: var(--table-header-bg);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Login Card
   --------------------------------------------------------------------------- */
.login-card {
    max-width: 400px;
    margin: 3rem auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 2rem;
}

.login-card h1 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.login-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.login-card input:focus {
    outline: none;
    border-color: var(--sidebar-active-accent);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

.login-card button {
    width: 100%;
    padding: 0.7rem;
    background: var(--btn-primary-bg);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.login-card button:hover {
    background: var(--btn-primary-hover-bg);
}

.login-errors {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--error-text);
}

/* ---------------------------------------------------------------------------
   Editable Text Blocks (inline Markdown editing)
   --------------------------------------------------------------------------- */
.editable-text-block {
    position: relative;
    /* Match the markdown column so the absolutely-positioned edit button lands at
       the top-right corner of the markdown area (not the full-width container). */
    max-width: var(--content-measure);
    margin-inline: auto;
}

.edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--accent);
    opacity: 1; /* always visible */
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.edit-btn:hover,
.edit-btn:focus-visible {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.text-block-placeholder {
    color: var(--text-secondary);
    font-style: italic;
    cursor: pointer;
    padding: 0.75rem 0;
}

.text-block-placeholder:hover {
    color: var(--text-muted);
}

.edit-textarea {
    width: 100%;
    min-height: 150px;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    resize: vertical;
    background: var(--input-bg);
    color: var(--text-primary);
}

.edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.edit-actions button {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.edit-actions .save-btn {
    background: var(--btn-primary-bg);
    color: #fff;
    border: none;
}

.edit-actions .cancel-btn {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--input-border);
}

/* ---------------------------------------------------------------------------
   Empty States
   --------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 0;
    font-size: 1.1rem;
}

/* ---------------------------------------------------------------------------
   Mobile Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar-toggle {
        display: block;
    }

    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width));
        top: var(--nav-height);
        z-index: 90;
        transition: left 0.2s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar.open {
        left: 0;
    }

    .main-content {
        padding: 1rem;
    }

    .chart-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* View-as-role preview banner */
.view-as-banner {
    background: #fff3cd;
    color: #664d03;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #e0c860;
    text-align: center;
}
.view-as-banner button {
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    font-size: 0.85rem;
}
[data-theme="dark"] .view-as-banner {
    background: #4a3f1a;
    color: #ffe08a;
    border-color: #6a5a2a;
}
.view-as-form select {
    font-size: 0.85rem;
    /* Leave room on the right for Pico's dropdown arrow (background image). */
    padding: 0.2rem 1.75rem 0.2rem 0.55rem;
    margin: 0;
}

/* Sidebar project name as a link back to all projects */
.sidebar-project-link {
    color: var(--title-purple);  /* match the project title */
    text-decoration: none;
}
.sidebar-project-link:hover {
    color: var(--title-purple);
}

/* ---------------------------------------------------------------------------
   Polish layer — adapted from corgi.insure: system sans, softer rounded
   surfaces, gentle shadows, accent focus. Cascades last to refine the above.
   --------------------------------------------------------------------------- */
html,
body {
    font-family: var(--font-sans);
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Soft, rounded content cards with a subtle hover lift */
.project-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.project-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* Rounded controls */
.download-btn,
button,
input[type="submit"] {
    border-radius: var(--radius-sm);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-radius: var(--radius-sm);
}

/* Accent-tinted keyboard focus ring (a11y) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .project-card {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Viewership panel (auto-saving role checkboxes; no Save button)
   --------------------------------------------------------------------------- */
.viewership-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin: 1rem 0;
    padding: 0.55rem 0.8rem;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.viewership-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.viewership-panel label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
}

.viewership-panel input[type="checkbox"] {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
}

.viewership-status {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s;
}

.viewership-status.is-visible {
    opacity: 1;
}

.viewership-status.is-error {
    color: var(--error-text);
}