/* ==========================================================================
   SKYLEARN — built from the Skylearn design system, in its parent/teacher
   register.

   Skylearn is a K-8 edtech system, and most of its component vocabulary
   (confetti, star badges, streak counters, 96px answer tiles, 56px kid tap
   targets) has no counterpart in an agency operations portal — shipping it
   literally would make client reporting look unserious.

   The spec resolves this itself: it defines a parent/teacher mode with
   "tighter typography and mono data displays" for adults assessing progress.
   That is the register built here. What carries across is the whole
   foundation — the sky/sun/leaf/coral palette with its strict meanings,
   Atkinson Hyperlegible for body, generous radii, soft friendly elevation,
   spring motion, and the accessibility rules that are the system's actual
   point.

   Two rules from the spec are enforced below and are worth stating:
   * Sun-yellow is for achievement ONLY, never a primary action.
   * Errors use gentle coral, never a punitive red.
   ========================================================================== */

html[data-skin="skylearn"] {
    /* Pure white page, faintly cool surfaces — generous and open, the
       "children's room in a good public library" rather than a workbook. */
    --pv-bg:          #ffffff;
    --pv-surface:     #f8fafc;
    --pv-surface-2:   #f1f5f9;

    /* Deep navy near-black, softer on the eyes than true black. */
    --pv-text:        #0f172a;
    --pv-text-muted:  #475569;
    --pv-border:      #e2e8f0;

    --pv-accent:      #3b82f6;                 /* sky — CTAs, nav, active */
    --pv-accent-600:  #1d4ed8;                 /* sky deep — pressed */
    --pv-accent-soft: #dbeafe;                 /* sky soft — active tint */
    --pv-brand-ink:   #0f172a;

    --pv-sidebar-bg:     #ffffff;
    --pv-sidebar-raise:  #f8fafc;
    --pv-sidebar-fg:     #475569;
    --pv-sidebar-active: #dbeafe;
    --pv-beacon:         #22c55e;

    /* Leaf = progress and correct. Coral = "not quite", never punitive red.
       Sun = achievement only. Berry = secondary / go-further. */
    --pv-success:      #16a34a;  --pv-success-soft: #dcfce7;
    --pv-warning:      #d97706;  --pv-warning-soft: #fef3c7;
    --pv-danger:       #dc2626;  --pv-danger-soft:  #fee2e2;
    --pv-info:         #7e22ce;  --pv-info-soft:    #f3e8ff;
    --pv-sun:          #fbbf24;
    --pv-sun-bright:   #fcd34d;
    --pv-leaf:         #22c55e;
    --pv-coral:        #f87171;
    --pv-berry:        #a855f7;

    /* Generous, friendly radii — soft corners are part of the voice. */
    --pv-r-sm: 8px;                            /* inputs, chips */
    --pv-r-md: 12px;
    --pv-r-lg: 20px;                           /* cards */
    --pv-r-xl: 28px;                           /* modals, large panels */

    /* Soft elevation: cards rest on an outline and lift on hover. */
    --pv-shadow-xs: none;
    --pv-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
    --pv-shadow-md: 0 8px 24px rgba(15,23,42,.06);
    --pv-shadow-lg: 0 24px 48px rgba(15,23,42,.12);
    --pv-ring:      0 0 0 4px #dbeafe;          /* the 4px sky-soft focus ring */

    --pv-grad-brand: linear-gradient(180deg,#60a5fa,#3b82f6);

    --pv-font-display: 'Nunito', 'Atkinson Hyperlegible', system-ui, sans-serif;
    --pv-font-sans:    'Atkinson Hyperlegible', 'Nunito Sans', system-ui, sans-serif;
    --pv-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

html[data-skin="skylearn"][data-theme="dark"] {
    --pv-bg:          #0b1220;
    --pv-surface:     #111c2f;
    --pv-surface-2:   #16233a;
    --pv-text:        #e8eefb;
    --pv-text-muted:  #93a4c0;
    --pv-border:      rgba(232,238,251,.12);
    --pv-accent:      #60a5fa;
    --pv-accent-600:  #3b82f6;
    --pv-accent-soft: rgba(96,165,250,.18);
    --pv-brand-ink:   #e8eefb;
    --pv-sidebar-bg:     #0b1220;
    --pv-sidebar-raise:  #16233a;
    --pv-sidebar-fg:     #93a4c0;
    --pv-sidebar-active: rgba(96,165,250,.18);
    --pv-success-soft: rgba(34,197,94,.18);
    --pv-warning-soft: rgba(251,191,36,.18);
    --pv-danger-soft:  rgba(248,113,113,.18);
    --pv-info-soft:    rgba(168,85,247,.18);
    --pv-shadow-md: 0 8px 24px rgba(0,0,0,.4);
    --pv-shadow-lg: 0 24px 48px rgba(0,0,0,.55);
    --pv-ring:      0 0 0 4px rgba(96,165,250,.3);
}

/* ==========================================================================
   TYPE — Atkinson Hyperlegible for body, at adult density.

   Atkinson was drawn for low-vision and dyslexia accessibility: open
   apertures, distinct b/d/p/q, weighted bottoms. It is the one non-negotiable
   in the source system, and it costs nothing in a professional context.
   Kid-mode's 18-20px instruction copy is not used here — the spec's own
   parent/teacher mode calls for tighter type — but the 16px floor is kept,
   and body tracking stays slightly loose (.01em) to reduce crowding.
   ========================================================================== */

html[data-skin="skylearn"] body,
html[data-skin="skylearn"] .pv-content {
    font-family: var(--pv-font-sans);
    font-size: 1rem;                        /* 16px floor, never below */
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

html[data-skin="skylearn"] .pv-page-title,
html[data-skin="skylearn"] .pv-content h1 {
    font-family: var(--pv-font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}
html[data-skin="skylearn"] .pv-content h2,
html[data-skin="skylearn"] .pv-content h3,
html[data-skin="skylearn"] .pv-card-title {
    font-family: var(--pv-font-display);
    font-weight: 700;
    letter-spacing: -.005em;
}
html[data-skin="skylearn"] .pv-card-title { font-size: 1.1rem; }
html[data-skin="skylearn"] .pv-brand { font-family: var(--pv-font-display); font-weight: 700; }
html[data-skin="skylearn"] .pv-page-title::after { background: var(--pv-accent); height: 3px; border-radius: 999px; }

/* Numbers are data: mono and tabular so columns align and values don't jump. */
html[data-skin="skylearn"] .pv-kpi-value {
    font-family: var(--pv-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -.01em;
}
html[data-skin="skylearn"] .pv-table td,
html[data-skin="skylearn"] .pv-kpi-foot .pv-trend {
    font-variant-numeric: tabular-nums lining-nums;
}
html[data-skin="skylearn"] .pv-label,
html[data-skin="skylearn"] .pv-table thead th {
    font-size: .82rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--pv-text-muted);
}

/* ==========================================================================
   SURFACES — rest on an outline, lift on hover
   ========================================================================== */

html[data-skin="skylearn"] .pv-card,
html[data-skin="skylearn"] .pv-kpi,
html[data-skin="skylearn"] .pv-chart-card {
    background: var(--pv-bg);
    border: 1px solid var(--pv-border);
    border-left: 1px solid var(--pv-border) !important;
    border-radius: var(--pv-r-lg);
    box-shadow: none;
    transition: box-shadow 240ms cubic-bezier(.34,1.56,.64,1),
                transform 240ms cubic-bezier(.34,1.56,.64,1);
}
/* The accent stripe is an absolutely-positioned ::before, not a border. */
html[data-skin="skylearn"] .pv-kpi::before,
html[data-skin="skylearn"] .pv-kpi::after { display: none !important; content: none !important; }

html[data-skin="skylearn"] .pv-card:hover,
html[data-skin="skylearn"] .pv-kpi:hover {
    box-shadow: var(--pv-shadow-md);
    transform: translateY(-2px);
}
html[data-skin="skylearn"] .pv-card-pad { padding: 24px; }
html[data-skin="skylearn"] .pv-content  { padding: 32px; max-width: 1280px; }

/* ==========================================================================
   CONTROLS — tactile, generous targets, spring press
   ========================================================================== */

html[data-skin="skylearn"] .pv-btn {
    border-radius: 16px;
    font-family: var(--pv-font-sans);
    font-weight: 700;
    font-size: .95rem;
    padding: .7rem 1.25rem;
    min-height: 44px;                        /* adult target; kid mode uses 56 */
    letter-spacing: .01em;
    border: 1px solid transparent;
    transition: background-color 160ms ease, transform 120ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 160ms ease;
}
html[data-skin="skylearn"] .pv-btn-sm { min-height: 38px; padding: .45rem .9rem; font-size: .875rem; }

/* Sky fill, with a deeper bottom edge so it reads pressable. */
html[data-skin="skylearn"] .pv-btn-primary {
    background: var(--pv-accent);
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(29,78,216,.55);
}
html[data-skin="skylearn"] .pv-btn-primary:hover { background: var(--pv-accent-600); }
html[data-skin="skylearn"] .pv-btn:active { transform: scale(.97); }

html[data-skin="skylearn"] .pv-btn-subtle {
    background: var(--pv-bg);
    color: var(--pv-text);
    border-color: var(--pv-border);
    box-shadow: none;
}
html[data-skin="skylearn"] .pv-btn-subtle:hover { background: var(--pv-accent-soft); border-color: var(--pv-accent); color: var(--pv-accent-600); }

/* Coral, not a punitive red — destructive still reads gentle. */
html[data-skin="skylearn"] .pv-btn-danger {
    background: var(--pv-coral);
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(185,28,28,.4);
}
html[data-skin="skylearn"] .pv-btn-danger:hover { background: #ef4444; }

html[data-skin="skylearn"] .pv-input,
html[data-skin="skylearn"] select.pv-input,
html[data-skin="skylearn"] textarea.pv-input {
    background: var(--pv-bg);
    border: 1px solid var(--pv-border);
    border-radius: 12px;
    font-family: var(--pv-font-sans);
    font-size: 1rem;
    padding: .65rem .8rem;
    min-height: 44px;
    box-shadow: none;
}
html[data-skin="skylearn"] .pv-input:focus {
    border-color: var(--pv-accent);
    box-shadow: var(--pv-ring);              /* the 4px sky-soft ring */
    outline: none;
}
html[data-skin="skylearn"] select.pv-input {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5L7 9L10.5 5.5' stroke='%23475569' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.2rem !important;
    cursor: pointer;
}

/* ==========================================================================
   NAVIGATION — sky-soft active pill, generous rows
   ========================================================================== */

html[data-skin="skylearn"] .pv-sidebar { border-right: 1px solid var(--pv-border); }
html[data-skin="skylearn"] .pv-nav-link {
    border-radius: 12px;
    padding: .6rem .8rem;
    margin: 2px .6rem;
    min-height: 44px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pv-sidebar-fg);
    box-shadow: none !important;
    transition: background-color 160ms ease, color 160ms ease;
}
html[data-skin="skylearn"] .pv-nav-link:hover { background: var(--pv-surface); color: var(--pv-text); }
html[data-skin="skylearn"] .pv-nav-link.active {
    background: var(--pv-accent-soft) !important;
    color: var(--pv-accent-600) !important;
    font-weight: 700;
}
html[data-skin="skylearn"] .pv-nav-link i {
    background: none !important;
    border-radius: 0;
    width: 20px; height: auto;
    font-size: .95rem;
    color: inherit !important;
    opacity: .8;
    margin-right: .6rem;
}
html[data-skin="skylearn"] .pv-nav-link.active i { opacity: 1; }
html[data-skin="skylearn"] .pv-nav-label,
html[data-skin="skylearn"] .pv-nav-section {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pv-text-muted);
}

/* ==========================================================================
   CHROME, TABS, TABLES, PILLS, ALERTS
   ========================================================================== */

html[data-skin="skylearn"] .pv-topbar {
    background: var(--pv-bg);
    border-bottom: 1px solid var(--pv-border);
    box-shadow: none;
    backdrop-filter: none;
}
html[data-skin="skylearn"] .pv-topbar::after { display: none; }

html[data-skin="skylearn"] .pv-tabs { border-bottom: 1px solid var(--pv-border); gap: 1.5rem; }
html[data-skin="skylearn"] .pv-tab {
    background: none !important;
    border-radius: 0;
    padding: .7rem 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pv-text-muted);
}
html[data-skin="skylearn"] .pv-tab.active {
    color: var(--pv-accent-600);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--pv-accent);
}

html[data-skin="skylearn"] .pv-table th,
html[data-skin="skylearn"] .pv-table td {
    border: none;
    border-bottom: 1px solid var(--pv-border);
    padding: .8rem .5rem;
    font-size: .95rem;
    background: transparent !important;
}
html[data-skin="skylearn"] .pv-table tbody tr:hover td { background: var(--pv-surface) !important; }
html[data-skin="skylearn"] .pv-table tbody tr:last-child td { border-bottom: none; }

/* Pills: soft tint + strong ink, generous radius. Never colour alone — the
   source system pairs every state with an icon, and the views already ship
   one inside each badge. */
html[data-skin="skylearn"] .pv-badge {
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem;
    padding: .2rem .65rem;
    letter-spacing: .01em;
}
html[data-skin="skylearn"] .pv-badge-success { background: var(--pv-success-soft); color: var(--pv-success); }
html[data-skin="skylearn"] .pv-badge-warning { background: var(--pv-warning-soft); color: var(--pv-warning); }
html[data-skin="skylearn"] .pv-badge-danger  { background: var(--pv-danger-soft);  color: #b91c1c; }
html[data-skin="skylearn"] .pv-badge-info    { background: var(--pv-info-soft);    color: var(--pv-info); }

/* Alerts read as friendly guidance, not alarms. */
html[data-skin="skylearn"] .pv-alert {
    border: none;
    border-radius: 16px;
    font-size: .95rem;
    padding: 1rem 1.15rem;
    box-shadow: none;
}
html[data-skin="skylearn"] .pv-alert-warning { background: var(--pv-warning-soft); color: #92400e; }
html[data-skin="skylearn"] .pv-alert-danger  { background: var(--pv-danger-soft);  color: #b91c1c; }
html[data-skin="skylearn"] .pv-alert-success { background: var(--pv-success-soft); color: #166534; }

/* Progress: 8px, fully rounded, leaf on sky-soft — straight from the spec. */
html[data-skin="skylearn"] .pv-progress,
html[data-skin="skylearn"] progress {
    height: 8px; border-radius: 999px; background: var(--pv-accent-soft); overflow: hidden;
}
html[data-skin="skylearn"] .pv-progress > *,
html[data-skin="skylearn"] .pv-progress-fill {
    background: var(--pv-leaf) !important;
    border-radius: 999px;
    transition: width 480ms ease-out;
}

/* Trend: leaf up, coral down. Achievement sun is reserved and never used for
   a primary action, per the system's own rule. */
html[data-skin="skylearn"] .pv-kpi-foot .pv-trend {
    background: none !important; padding: 0 !important; font-weight: 700; font-size: .82rem;
}
html[data-skin="skylearn"] .pv-trend-up   { color: var(--pv-success) !important; }
html[data-skin="skylearn"] .pv-trend-down { color: #dc2626 !important; }
html[data-skin="skylearn"] .pv-stat-icon {
    background: var(--pv-accent-soft) !important;
    color: var(--pv-accent-600) !important;
    border-radius: 999px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    font-size: .85rem;
}
html[data-skin="skylearn"] .pv-kpi-label {
    font-size: .85rem; font-weight: 700; text-transform: none;
    letter-spacing: .01em; color: var(--pv-text-muted);
}

/* Segmented range control — inline styles in the view, so !important. */
html[data-skin="skylearn"] [style*="border-radius:10px"] {
    background: var(--pv-surface-2) !important;
    border-radius: 999px !important;
    padding: 3px !important;
}
html[data-skin="skylearn"] [style*="border-radius:10px"] button {
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    color: var(--pv-text-muted) !important;
    padding: .4rem .95rem !important;
    box-shadow: none !important;
    background: transparent !important;
}
html[data-skin="skylearn"] [style*="border-radius:10px"] button[style*="background:#fff"],
html[data-skin="skylearn"] [style*="border-radius:10px"] button[style*="background: rgb(255, 255, 255)"] {
    background: var(--pv-accent) !important;
    color: #fff !important;
}

/* The KPI stat icon was a filled 32px sky-soft circle. That only works if the
   glyph inside always renders — and when it does not, the result is an empty
   blue blob rather than a missing icon nobody notices. A chip that depends on
   its contents to look intentional is a bad chip; the glyph carries itself. */
html[data-skin="skylearn"] .pv-stat-icon {
    background: none !important;
    color: var(--pv-accent) !important;
    width: auto; height: auto;
    display: inline;
    font-size: 1rem;
    opacity: .75;
}