/* Faye's flat visual theme, extended from the guided studios to the
 * student dashboard home screen (course cards included -- same markup,
 * same screen; see core/student-dashboard.js's showHome()). Loaded last
 * (after core/student-dashboard.css and core/dashboard-explore.css) so
 * its rules win the cascade at equal specificity, without !important.
 * Tokens live in core/fei-palette.css, loaded just before this file --
 * same nine shared tokens the guided studios use, one source of truth
 * for colour across the whole platform.
 *
 * Text colour rule, same as guided-theme.css, checked numerically (WCAG
 * relative-luminance formula) rather than by eye: every token here
 * except --fei-ink is a light-to-medium pastel, so only --fei-ink clears AA
 * against all eight of the others (5.75:1 to 14.17:1). Every rule below
 * keeps text --fei-ink; the named tokens are backgrounds/borders/fills only.
 *
 * Deliberately NOT touched: students' artwork, teacher photos, and real
 * course thumbnails (.start-course-list img, .track-emoji/.portal-photo
 * img, .skill-gallery img) -- colour/outline changes stop at the card
 * chrome around them. .studio-direction/.creation-direction's own photo
 * backdrop (skill-background.jpg/creation-background.jpg) and its
 * existing translucent colour wash are pre-existing, necessary for text
 * legibility over a photo, and are left exactly as they already were --
 * this file adds no new overlay on top of them. Layout and behaviour are
 * unchanged throughout; only colour, borders and shadows change.
 */
#student-shell{
 --dash-ink:var(--fei-ink); --dash-purple:var(--fei-ink); --dash-muted:var(--fei-ink);
 --dash-line:var(--fei-ink);
 background:var(--fei-paper); color:var(--fei-ink);
}
/* .dashboard-content's own background is deliberately left alone here --
 * Faye's own later commits (same day) gave it a gradient + illustrated
 * studio-artwork backdrop on purpose; this file only flattens the card
 * chrome that sits on top of it, not that backdrop itself. */

/* Sidebar */
#student-shell .dashboard-sidebar{background:var(--fei-lime);border-right:2px solid var(--fei-ink);border-color:var(--fei-ink)}
#student-shell .dashboard-avatar{background:var(--fei-leaf)}
#student-shell .dashboard-nav a{color:var(--fei-ink)}
#student-shell .dashboard-nav a[aria-current=page]{background:var(--fei-peri);color:var(--fei-ink);border:2px solid var(--fei-ink);box-shadow:none}
#student-shell .dashboard-nav a:hover:not([aria-current=page]){background:var(--fei-paper);color:var(--fei-ink)}
#student-shell .dashboard-special a{background:var(--fei-peach);border:2px solid var(--fei-ink)}
#student-shell .dashboard-special small,#student-shell .dashboard-small{color:var(--fei-ink)}

/* Headings, links, buttons -- flat fill, ink outline, ink text, never
 * white-on-colour. */
#student-shell .dashboard-link,#student-shell .dashboard-button,#student-shell #hero-name,#student-shell .hero-name{color:var(--fei-ink)}
#student-shell .dashboard-button{background:var(--fei-paper);border:2px solid var(--fei-ink);box-shadow:none}
#student-shell .dashboard-button.primary{background:var(--fei-peri);color:var(--fei-ink);border:2px solid var(--fei-ink)}
#student-shell .dashboard-tabs a[aria-current=page]{color:var(--fei-ink);border-color:var(--fei-ink)}

/* Panels: ALP shape card, goal card, badges, profile form -- flat peach,
 * ink outline, no soft glow. */
#student-shell .dashboard-panel{background:var(--fei-peach);border:2px solid var(--fei-ink);box-shadow:none}
/* Art Learning Profile radar panel (.dashboard-shape-panel) is
 * deliberately left out of the rule above -- Faye asked to keep its
 * colours (the mint-to-peach radial gradient, and the radar SVG's own
 * inline dimension colours in student-dashboard.js) exactly as they are. */
#student-shell .dashboard-badge-preview a{background:var(--fei-paper);border:2px solid var(--fei-ink)}
#student-shell .dashboard-badge-preview a:hover{background:var(--fei-lime);border-color:var(--fei-ink)}
#student-shell .dashboard-badge-symbol{background:var(--fei-sky);color:var(--fei-ink)}
#student-shell .dashboard-profile-form input[type=text],#student-shell .dashboard-profile-form textarea{border:2px solid var(--fei-ink);background:var(--fei-paper);color:var(--fei-ink)}
#student-shell .dashboard-avatar-options span{background:var(--fei-paper);border:2px solid var(--fei-ink)}
#student-shell .dashboard-avatar-options input:checked+span{border-color:var(--fei-ink);background:var(--fei-leaf)}

/* Explore hero banner */
#student-shell .explore-hero{background:var(--fei-lime);border:2px solid var(--fei-ink);border-radius:16px;box-shadow:none}
#student-shell .explore-invitation .dashboard-button{border:2px solid var(--fei-ink);background:var(--fei-paper);border-radius:999px}

/* "Pick up where you left off" course cards -- real course thumbnails
 * (img) are untouched; only the card chrome flattens. */
#student-shell .start-course-list a{background:var(--fei-paper);border:2px solid var(--fei-ink);box-shadow:none;color:var(--fei-ink)}
#student-shell .start-course-list a:hover{border-color:var(--fei-ink);box-shadow:4px 4px 0 var(--fei-ink);transform:translateY(-2px)}
#student-shell .pick-copy small,#student-shell .start-recommend-heading p{color:var(--fei-ink)}
#student-shell .pick-copy .pick-label,#student-shell .pick-copy b{color:var(--fei-ink)}
#student-shell .start-recommend-heading button{color:var(--fei-ink);border:2px solid var(--fei-ink);background:var(--fei-paper)}

/* Skills/Creation track cards -- the decorative corner triangle is a
 * flat colour shape, not a photo, so it's safe to re-skin; the nested
 * photo-collage path (.studio-direction, handled below) is separate and
 * keeps its own real course photos untouched. */
#student-shell .explore-portals .track-card{background:var(--fei-sky);color:var(--fei-ink);border:2px solid var(--fei-ink);border-radius:16px;box-shadow:none}
#student-shell .explore-portals .track-creation{background:var(--fei-peach);color:var(--fei-ink)}
#student-shell .explore-portals .track-card:before{background:var(--fei-paper);opacity:.6}
#student-shell .explore-portals .track-age-pill{background:var(--fei-paper);color:var(--fei-ink);border:1px solid var(--fei-ink)}
#student-shell .explore-portals .track-quote,#student-shell .explore-portals .track-description,#student-shell .explore-portals .track-progress{color:var(--fei-ink);opacity:1}
#student-shell .explore-portal-link{color:var(--fei-ink)}

/* The two big "Skills" / "Creation" portal doors -- same flat ink-outline
 * card chrome; their photo backdrop (::before) and its existing
 * legibility wash (::after) are intentionally left alone, see file header. */
#student-shell .studio-direction{background:var(--fei-sky);border:2px solid var(--fei-ink);border-radius:16px;box-shadow:none}
#student-shell .creation-direction{background:var(--fei-peach)}
#student-shell .studio-direction .track-card,#student-shell .studio-direction .track-card:hover{background:transparent;color:var(--fei-ink)}
#student-shell .studio-direction .track-age-pill{background:var(--fei-paper);color:var(--fei-ink);border:1px solid var(--fei-ink)}
#student-shell .studio-direction .track-quote,#student-shell .studio-direction .track-description{color:var(--fei-ink);opacity:1}
#student-shell .studio-direction .explore-portal-link{background:var(--fei-paper);border:2px solid var(--fei-ink);color:var(--fei-ink);box-shadow:none}
#student-shell .studio-continue{background:var(--fei-paper);border:2px solid var(--fei-ink);border-radius:14px;box-shadow:4px 4px 0 var(--fei-ink);backdrop-filter:none}
#student-shell .studio-continue h3,#student-shell .studio-continue h3 span,#student-shell .studio-continue p{color:var(--fei-ink);opacity:1}
#student-shell .studio-continue a{border-color:var(--fei-ink);color:var(--fei-ink)}
#student-shell .studio-continue a b{border:2px solid var(--fei-ink);background:var(--fei-peri);color:var(--fei-ink);box-shadow:none}
#student-shell .studio-continue a:hover b,#student-shell .studio-continue a:focus-visible b{background:var(--fei-leaf);box-shadow:none;transform:none}

/* Skill gallery (subtrack cards) -- real course photos untouched, flat
 * card chrome around them. */
#student-shell .skill-gallery .subtrack{background:var(--fei-paper);border:2px solid var(--fei-ink);box-shadow:none;border-radius:12px}
#student-shell .skill-gallery .subtrack-name,#student-shell .skill-gallery .subtrack-arrow{color:var(--fei-ink)}
#student-shell .skill-gallery-description,#student-shell .skill-gallery .subtrack-meta{color:var(--fei-ink)}

#student-shell a:focus-visible,#student-shell button:focus-visible{outline:3px solid var(--fei-ink);outline-offset:3px}

/* ── Live Classes ──
 * Not-yet-enrolled catalog card: flat paper, ink border, ink text
 * throughout already (gold text/button swapped for the shared peri
 * accent so it matches every other primary action on the platform). */
#student-shell .live-class-enroll-card{background:var(--fei-paper);border:2px solid var(--fei-ink);box-shadow:none}
#student-shell .live-class-enroll-kicker{color:var(--fei-ink)}
#student-shell .live-class-enroll-btn{background:var(--fei-peri);color:var(--fei-ink);border:2px solid var(--fei-ink)}
#student-shell .live-class-enroll-btn:hover{background:#a3acf0}
#student-shell .live-class-enroll-btn:disabled{background:var(--fei-paper);color:var(--fei-ink);border-color:var(--fei-ink);opacity:.45}
/* Enrolled "VIP" card: a solid flat ink fill (never a gradient) is one of
 * the two places on this platform where white/paper text on a dark fill
 * is correct, not a violation -- same reasoning as .signin-btn. Gold
 * accents become leaf (still a clear accent against the dark fill, but
 * from the shared palette instead of a one-off gold). */
#student-shell .live-class-vip-section{background:var(--fei-ink);border:2px solid var(--fei-ink);color:var(--fei-paper)}
#student-shell .live-class-vip-kicker,#student-shell .live-class-next-label{color:var(--fei-leaf)}
#student-shell .live-class-next-card{background:rgba(251,248,228,.08);border:1px solid rgba(251,248,228,.25)}
#student-shell .live-class-zoom-btn{background:var(--fei-leaf);color:var(--fei-ink);border:2px solid var(--fei-ink)}
#student-shell .live-class-materials-btn{border:1px solid rgba(251,248,228,.4);color:var(--fei-paper)}
#student-shell .live-class-submit-btn{border:1px solid var(--fei-leaf);color:var(--fei-leaf)}
#student-shell .live-class-session-row-num,#student-shell .live-class-smart-ref{color:rgba(251,248,228,.75)}

/* ── My Journey tabs: Studio, Feedback, Badges, Student Art Journey ──
 * (Overview's ALP radar panel is out of scope, see above.) */
#student-shell .studio-card{background:var(--fei-paper);border:2px solid var(--fei-ink);box-shadow:none}
#student-shell .studio-cta{color:var(--fei-ink)}
#student-shell .studio-stat-value{color:var(--fei-ink)}
#student-shell .studio-tag{color:var(--fei-ink);background:var(--fei-lav)}
#student-shell .studio-badge-progress-row{color:var(--fei-ink)}
#student-shell .studio-badge-progress .track-bar,#student-shell .studio-grid .track-bar{background:var(--fei-paper);border:1px solid var(--fei-ink)}
#student-shell .studio-badge-progress .track-fill,#student-shell .studio-grid .track-fill{background:var(--fei-peri)}
#student-shell .badge-credit{color:var(--fei-ink)}
/* Polaroid-style frames for real student artwork (Studio tab's Student
 * Art Journey card) -- the photos themselves are untouched, only the
 * mat's border/shadow flattens. */
#student-shell .spotlight-frame,#student-shell .portfolio-frame{box-shadow:none;border:2px solid var(--fei-ink)}
#student-shell .spotlight-caption,#student-shell .portfolio-title{color:var(--fei-ink)}
#student-shell .studio-portfolio-btn{background:var(--fei-peri);color:var(--fei-ink);border:2px solid var(--fei-ink)}
/* The Feedback tab's journey map + teacher-note card. */
#student-shell #student-learning-map{background:var(--fei-lime);border:2px solid var(--fei-ink)}
#student-shell .journey-heading small,#student-shell .journey-next small,#student-shell .journey-group-divider{color:var(--fei-ink)}
#student-shell .journey-stop{background:var(--fei-paper);border:2px solid var(--fei-ink)}
#student-shell .journey-stop span{background:var(--fei-leaf);color:var(--fei-ink)}
#student-shell .journey-stop.current{border-color:var(--fei-ink);background:var(--fei-sky);box-shadow:none}
#student-shell .journey-stop.current span{background:var(--fei-peri)}
#student-shell .journey-stop.complete span{background:var(--fei-leaf);color:var(--fei-ink)}
#student-shell .journey-next>div{background:var(--fei-paper)}
#student-shell .journey-next a,#student-shell .journey-next button{color:var(--fei-ink)}
#student-shell .feedback-notif-card{border:2px solid var(--fei-ink);background:var(--fei-paper)}
#student-shell .feedback-notif-kicker{color:var(--fei-ink)}
#student-shell .feedback-notif-comment{border-left:3px solid var(--fei-ink);background:var(--fei-peach)}
#student-shell .badge-unlock-banner{background:var(--fei-peach);border:2px solid var(--fei-ink);box-shadow:none}
#student-shell .badge-unlock-view-btn{background:var(--fei-ink);color:var(--fei-paper)}