/* ============================================================================
 * autoscholar.theme.css — AutoScholar token delta (the whole visual bridge).
 *
 * Produced by /designCore (2026-06-27). Load AFTER UI/class.ui.css so these
 * --hp-* overrides win the cascade; all --ui-* tokens re-derive from them.
 *
 * Direction (confirmed): a DISTINCT AutoScholar product identity (deep navy +
 * Plus Jakarta Sans), applied the same across all tenants (DUT / VUT / UKZN) —
 * not an institution skin. Governed by design/design-principles.md §0 "desktop
 * instrument, not a web page": chrome recedes, data is the loudest thing,
 * layout regions stay crisp. The honest restrained exception to the generic
 * /designCore "make it rounded + big" checklist — identity is colour + type.
 *
 * Why so few knobs: stock already nails instrument density. --hp-text-scale
 * 0.82 = ~13px base, which IS the §0 target; bumping it toward 1.0 (the generic
 * default) would wreck the dense nav rail. Legibility instead comes from weight
 * + near-black fg, never from growing primary text. Keep this file small.
 * ==========================================================================*/

/* The design system ships the Jakarta stack but @imports no webfont, so load it
 * here (must precede all rules). display=swap avoids a blocking FOIT. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* ---- Identity: OCEAN (owner pick 2026-08-15, from four rendered
     * candidates — navy, viridian+coral and graphite all rejected). A vivid
     * saturated blue, brighter and livelier than the old navy: identity +
     * chrome + selection tints all read as one energetic family. */
    --hp-hue-1: 205; --hp-sat-1: 72%; --hp-l-shift-1: -4%;

    /* Info/links track the brand; danger / warn / success stay semantic. */
    --hp-hue-info: 205; --hp-sat-info: 45%;

    /* ---- Action accent: TANGERINE — the warm complement that makes the one
     * primary action per pane unmissable against the ocean chrome. Used ONLY
     * for primary actions (that exclusivity IS the hierarchy); hotter and
     * oranger than semantic warn (32/94%), well apart from danger (4/82%). */
    --as-action:       hsl(24, 86%, 50%);
    --as-action-hover: hsl(24, 86%, 44%);
    --as-action-100:   hsl(24, 86%, 93%);

    /* ---- Type: Plus Jakarta Sans (distinctive but clean) ------------------- */
    --hp-font-heading: var(--hp-font-stack-jakarta);
    --hp-font-body:    var(--hp-font-stack-jakarta);

    /* ---- Legibility WITHOUT bloating density -------------------------------
     * Keep text size (instrument ~13px base). Lift body weight 300 -> 400 so
     * primary text is clearly legible near-black rather than thin/grey. */
    --hp-weight-body: 400;

    /* ---- Shape: subtle modern softening on CONTROLS / object-cards ---------
     * Stock 0 = hard square everywhere. A small scale gives buttons, inputs and
     * object-cards a quiet radius; layout PANES are unaffected (they use
     * hairlines + radius-none, per §0 "no rounding on layout regions").
     * 0.5 ≈ 3px on radius-md controls — owner ruling 2026-08-14: "a small
     * amount of corner radius, e.g. 3px" (1 read too rounded at 6px). */
    --hp-corner-scale: 0.5;

    /* ---- Depth: minimal. Chrome recedes; soft shadow only on raised objects. */
    --hp-shadow-intensity: 0.08;

    /* ---- Pinned to the pre-19-Sep-2026 platform defaults (owner: "leave AutoScholar as it is only").
     * The shared sheet moved to serif headings / 15 px / paper ground / ink chrome / hairlines / monochrome icons;
     * every dial it moved is held here at its old value so DUT, VUT and UKZN see no change. */
    --hp-weight-heading: 600;
    --hp-text-scale: 0.82;  --hp-text-ratio: 1.18;  --hp-line-height: 1.5;
    --hp-border-scale: 0.4;
    --hp-l-bg: 100%; --hp-l-fg: 12%; --hp-l-muted: 40%; --hp-l-border: 88%; --hp-l-elev: 99%; --hp-l-sunken: 96%;
    --hp-font-mono: var(--hp-font-stack-mono);
    --hp-label-transform: none; --hp-label-tracking: 0;
    --hp-kanban-min-h: 14rem;
    --hp-chrome-bg: hsl(var(--hp-hue-1), var(--hp-sat-1), calc(45% + var(--hp-l-shift-1)));   /* = --ui-primary-600, the old header colour */
    /* derived tokens the new base introduced — held at the old rendering (two-line pattern: hp above, ui here) */
    --ui-chrome-shadow: var(--ui-shadow-md); --ui-chrome-border: 0;
    --ui-th-fg: var(--ui-fg); --ui-th-size: inherit; --ui-th-weight: var(--ui-font-semibold);
    --ui-heading-tracking: normal; --ui-numerals: normal;
}

/* ---- Inline-edit affordance (own-CV) ----------------------------------------
 * A hover pencil per editable CV section: hidden until the card is hovered, so
 * the read view stays clean but every section is one click from editing — no
 * separate "edit mode". On touch (no hover) it stays visible. */
.as-edit-pen {
    /* W3 2026-08-16: faintly visible at rest (was opacity 0 — the ONLY edit
       affordance on the CV was invisible until hovered; undiscoverable). */
    opacity: .45; cursor: pointer; border: 0; background: none;
    color: var(--ui-fg-muted); font-size: var(--ui-text-sm);
    padding: 2px 8px; border-radius: var(--ui-radius-md);
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.as-editable:hover .as-edit-pen, .as-edit-pen:focus-visible { opacity: 1; }
.as-edit-pen:hover { color: var(--ui-primary); background: var(--ui-bg-muted); }
@media (hover: none) { .as-edit-pen { opacity: 1; } }

/* Attendance calendar — FullCalendar collapses to a thin strip without a sized
 * host; give it real height so the month grid renders. */
.as-cal-host { min-height: 34rem; display: flex; flex-direction: column; }
.as-cal-host > * { flex: 1 1 auto; min-height: 0; }

/* Executive Insight — Overview drill links (§35/§35b: classes + tokens, no
 * inline styles or hardcoded hex). Design review 2026-08-23 (rule 5d,
 * affordance honesty): the boxed tile grid read as stat cards while ACTING
 * as links — now a compact link-row strip: hairline rows, title + tagline
 * inline, chevron affordance, hover = tinted row not a lifted card. */
.as-drill-grid {
    display: flex; flex-direction: column; margin-top: var(--ui-space-2);
}
.as-drill-tile {
    display: flex; align-items: baseline; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-2);
    border-top: 1px solid var(--ui-gray-200);
    cursor: pointer; position: relative;
    transition: background-color .12s ease;
}
.as-drill-tile:first-child { border-top: none; }
.as-drill-tile:hover { background: var(--ui-primary-soft, var(--ui-gray-100)); }
.as-drill-tile::after {
    content: '›'; margin-left: auto; color: var(--ui-fg-muted);
    font-size: var(--ui-text-lg); line-height: 1; align-self: center;
}
.as-drill-tile-title {
    display: flex; align-items: center; gap: var(--ui-space-2);
    font-weight: 600; color: var(--ui-primary); flex: 0 0 11rem;
}
.as-drill-tile-title .fa { color: var(--ui-primary); }
.as-drill-tile-tag { font-size: var(--ui-text-sm); color: var(--ui-fg-muted); line-height: 1.45; }
@media (max-width: 640px) {
    .as-drill-tile { flex-wrap: wrap; }
    .as-drill-tile-title { flex-basis: 100%; }
}

/* ---- Primary actions wear the complementary action accent -------------------
 * (owner 2026-08-14). The brand viridian keeps identity + navigation +
 * selection tints; the ONE solid coral per pane is the thing you click. */
.ui-btn-primary { background: var(--as-action); border-color: var(--as-action); }
.ui-btn-primary:hover { background: var(--as-action-hover); border-color: var(--as-action-hover); }

/* ── Workbench pane grammar (ONE home — moved from ASCounsellorPage's JS
   injector 2026-08-16 so Student Central + every other AutoScholar page
   composes the same surfaces; rule 6b: invariants get one home).
   design-principles §0: one bounded region, hairline panes, identical heads,
   sections not cards, ONE primary action per pane. */
.cw-owb{border:var(--ui-border-width) solid var(--ui-border);background:var(--ui-bg-elev);gap:0;border-radius:0}
.cw-pane{min-width:0;border-right:var(--ui-border-width) solid var(--ui-border);display:flex;flex-direction:column;min-height:0}
.cw-pane:last-child{border-right:0}
@media (max-width:640px){.cw-pane{border-right:0;border-bottom:var(--ui-border-width) solid var(--ui-border)}.cw-pane:last-child{border-bottom:0}}
.cw-pane-head{padding:5px 10px;border-bottom:var(--ui-border-width) solid var(--ui-border);background:var(--ui-bg-muted);font-size:var(--ui-text-xs);font-weight:var(--ui-font-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--ui-fg-muted);display:flex;gap:8px;align-items:center;min-height:26px}
.cw-pane-head .cw-pane-live{text-transform:none;letter-spacing:0;font-weight:var(--ui-font-normal)}
.cw-pane-body{padding:var(--ui-space-2) var(--ui-space-3);overflow:auto;flex:1;min-height:0}
.cw-sec{padding:var(--ui-space-2) 0;border-bottom:var(--ui-border-width) solid var(--ui-border)}
.cw-sec:last-child{border-bottom:0}
.cw-sec-title{font-weight:var(--ui-font-semibold);font-size:var(--ui-text-sm);margin-bottom:var(--ui-space-1)}
.cw-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap;margin-top:var(--ui-space-2)}
.cw-chip{display:inline-block;font-size:var(--ui-text-2xs);font-weight:var(--ui-font-semibold);letter-spacing:.03em;text-transform:uppercase;padding:1px 8px;border:var(--ui-border-width) solid var(--ui-border);border-radius:999px;color:var(--ui-fg-muted);background:var(--ui-bg-muted)}
.cw-chip-danger{color:var(--ui-danger);border-color:var(--ui-danger);background:transparent}
.cw-sec .cw-chips{display:flex;gap:6px;align-items:center;margin:2px 0 4px}
.cw-sec table{font-size:var(--ui-text-sm)}
.cw-entry-body{white-space:pre-wrap;overflow-wrap:break-word}
.cw-owb-sched{grid-template-columns:minmax(0,2.3fr) minmax(0,1.4fr)}
.cw-owb .cw-pane-body .ui-card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0}
@media (max-width:900px){.cw-owb-sched{grid-template-columns:minmax(0,1fr)}}
.cw-owb .ui-accordion{border:0;border-radius:0}
/* pane rail (accordion-only pane body, no padding doubling) */
.cw-surface .cw-choice.ui-btn{border:0;background:transparent;box-shadow:none;justify-content:flex-start;text-align:left;color:var(--ui-fg)}
.cw-surface .cw-choice.ui-btn:hover{background:var(--ui-bg-muted)}
.cw-surface .cw-choice-on.ui-btn{background:var(--ui-primary-50);box-shadow:inset 3px 0 0 var(--ui-primary);color:var(--ui-primary-800);font-weight:var(--ui-font-semibold)}