/* student-top-v1.css: dresses the top half of the pupil home page (menu, greeting, Fortnight Goals, teacher notice) in the same
   wood, gold and jewel-colour theme as the bookcase. Every rule starts with body.ss-on, so it only applies when the bookcase is showing.
   To undo the whole redesign, remove the <link> to this file from student-home.html. Layout (flex/grid/zoom/sizes) is left to the page. */

body.ss-on {
    --w-wood: linear-gradient(90deg, #2a170c, #4a2a16 8%, #3b2112 50%, #4a2a16 92%, #2a170c);
    --w-gold: #e0b13a; --w-gold-hi: #ffd75e; --w-cream: #fff3d6;
}

/* ---- the menu: a walnut rail with jewel-coloured nameplates ---- */
body.ss-on .student-nav {
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255,236,180,.50), rgba(255,236,180,0) 72%),
        linear-gradient(180deg, #8a1f3d, #55102a) !important;      /* the same red as the Picked for you shelf */
    border: 3px solid var(--w-gold); border-bottom: 0;
    box-shadow: 0 8px 22px rgba(20,8,2,.45), inset 0 0 0 2px rgba(246,227,166,.25) !important;
}
body.ss-on .student-nav-btn {
    font-family: Georgia, 'Times New Roman', serif; font-weight: 800; letter-spacing: .3px; color: var(--w-cream);
    border: 2px solid var(--w-gold) !important; text-shadow: 0 1px 0 rgba(0,0,0,.45);
    box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.ss-on .student-nav-btn:hover { filter: brightness(1.15); box-shadow: 0 5px 12px rgba(0,0,0,.5), 0 0 10px rgba(255,215,94,.5) !important; }
body.ss-on .snb-library      { background: linear-gradient(180deg, #1f9a6e, #0d5a40) !important; }
body.ss-on .snb-leaderboard  { background: linear-gradient(180deg, #7a45c2, #3f1f78) !important; }
body.ss-on .snb-rewards      { background: linear-gradient(180deg, #e0a42a, #a9680a) !important; }
body.ss-on .snb-reviews      { background: linear-gradient(180deg, #d24a74, #8a1f3d) !important; }
body.ss-on .snb-progress     { background: linear-gradient(180deg, #2f86d6, #134a8a) !important; }
body.ss-on .snb-reservations { background: linear-gradient(180deg, #1aa39a, #0b625e) !important; }
body.ss-on .snb-logout       { background: linear-gradient(180deg, #8a2d2d, #4d1212) !important; }

/* ---- the greeting panel: gold like the My Books shelf, with dark burgundy lettering ---- */
body.ss-on .header {
    background:
        radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255,250,215,.85), rgba(255,250,215,0) 70%),
        repeating-linear-gradient(45deg, rgba(130,90,15,.28) 0 1px, transparent 1px 15px),
        repeating-linear-gradient(-45deg, rgba(130,90,15,.28) 0 1px, transparent 1px 15px),
        linear-gradient(180deg, #f3dc8e, #dcb650 50%, #bb8d2e) !important;
    border: 3px solid #8a6a1e; border-top: 2px solid #8a6a1e;
    box-shadow: inset 0 0 0 3px #f6e3a6, inset 0 0 0 5px #8a6a1e, 0 10px 26px rgba(20,8,2,.5) !important;
}
body.ss-on #childGreeting { color: #5a1020; font-family: Georgia, 'Times New Roman', serif; text-shadow: 0 2px 0 rgba(255,245,210,.85); }
body.ss-on .student-avatar {
    background: radial-gradient(circle at 35% 30%, #c43a66, #55102a); color: var(--w-cream); font-family: Georgia, 'Times New Roman', serif;
    border: 4px solid #f6e3a6; box-shadow: 0 0 0 3px #8a6a1e, 0 6px 14px rgba(70,40,0,.5);
}
body.ss-on .student-class {
    background: linear-gradient(180deg, #1f9a58, #0e5a31); color: var(--w-cream); font-family: Georgia, 'Times New Roman', serif; font-weight: 800;
    border: 2px solid #8a6a1e; box-shadow: 0 3px 8px rgba(70,40,0,.45), inset 0 1px 0 rgba(255,255,255,.28); text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
body.ss-on .student-info button {
    background: rgba(90,16,32,.10) !important; color: #5a1020 !important; border: 1.5px solid #8a6a1e !important;
    font-family: Georgia, 'Times New Roman', serif; font-weight: 700 !important; font-size: 13px !important;
}
body.ss-on .student-info button:hover { background: rgba(90,16,32,.22) !important; }
body.ss-on #bannerGreeting { color: #5a1020 !important; font-family: Georgia, 'Times New Roman', serif; text-shadow: 0 2px 0 rgba(255,245,210,.85); }
body.ss-on #bannerRecCount, body.ss-on #bannerReadingCount {
    color: var(--w-cream) !important; font-family: Georgia, 'Times New Roman', serif; border: 2px solid #8a6a1e;
    box-shadow: 0 2px 6px rgba(70,40,0,.5), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
body.ss-on #bannerRecCount { background: linear-gradient(180deg, #c43a66, #8a1f3d) !important; }
body.ss-on #bannerReadingCount { background: linear-gradient(180deg, #1f9a6e, #0d5a40) !important; }

/* ---- Fortnight Goals: same dark teal and gold as the My Goals strip ---- */
body.ss-on .fortnight-box {
    background: linear-gradient(180deg, #14504a, #0c332f) !important; border-radius: 16px !important;
    box-shadow: 0 0 0 2px var(--w-gold), 0 4px 14px rgba(0,0,0,.35) !important;
}
body.ss-on .fortnight-label { color: var(--w-gold-hi) !important; font-family: Georgia, 'Times New Roman', serif; }
body.ss-on .fortnight-label span { color: var(--w-cream) !important; }
body.ss-on .goal-step > span:first-child { color: var(--w-cream) !important; font-family: Georgia, 'Times New Roman', serif; }
body.ss-on .goal-step [id^="goal-star-"] { text-shadow: 0 0 12px rgba(255,215,94,.7), 0 2px 0 rgba(0,0,0,.35); }
body.ss-on .goal-arrow { font-size: 0 !important; color: transparent !important; }
body.ss-on .goal-arrow::after { content: "\1FA84"; color: var(--w-gold-hi); font-size: 1.6rem; filter: drop-shadow(0 0 6px rgba(255,215,94,.6)); }
body.ss-on #goalsCelebration { background: rgba(255,215,94,.18) !important; color: #ffe9a0 !important; border: 1px solid var(--w-gold); font-family: Georgia, 'Times New Roman', serif; }
body.ss-on .fortnight-box > a > div:first-child {
    background: radial-gradient(circle at 35% 30%, #fffbe8, #d9ecd2) !important; border: 4px solid var(--w-gold-hi) !important;
    box-shadow: 0 0 0 3px #7a4a1c, 0 5px 14px rgba(0,0,0,.55), 0 0 18px rgba(255,215,94,.3) !important;
}
body.ss-on .fortnight-box > a > span { color: var(--w-gold-hi) !important; font-family: Georgia, 'Times New Roman', serif; }

/* ---- the teacher's notice: a parchment scroll ---- */
body.ss-on #readingLevelCheckBanner {
    background: linear-gradient(180deg, #fff3d6, #f0d99c) !important; color: #3a2400 !important; font-family: Georgia, 'Times New Roman', serif;
    border: 3px solid var(--w-gold); border-radius: 16px !important; box-shadow: 0 6px 18px rgba(20,8,2,.4), inset 0 0 0 2px rgba(255,255,255,.5) !important;
}
body.ss-on #readingLevelCheckBanner a {
    background: linear-gradient(180deg, #f2b632, #c98a10) !important; color: #3a2400 !important; border: 2px solid #fff3d6; font-family: Georgia, 'Times New Roman', serif;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
}

/* tablets: let the menu wrap instead of scrolling sideways */
@media (max-width: 1100px) { body.ss-on .student-nav { flex-wrap: wrap; justify-content: center; } }

/* ---- same width as the bookcase: the top cards share the bookcase's width limit and its desktop zoom, so every edge lines up ---- */
body.ss-on .student-nav, body.ss-on .header, body.ss-on .fortnight-box, body.ss-on .preferences-section { box-sizing: border-box; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    body.ss-on .student-nav, body.ss-on .header, body.ss-on .fortnight-box, body.ss-on .preferences-section { zoom: .75; max-width: 1600px; width: calc(100% * var(--ss-zfix, 1)); }
    /* the zoom shrinks everything by a quarter, so the small lettering is made bigger to stay easy to read */
    body.ss-on .student-nav-btn { font-size: 23px; padding: 12px 28px; }
    body.ss-on .student-nav { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
    body.ss-on .student-info button { font-size: 19px !important; padding: 6px 14px !important; }
    body.ss-on #bannerGreeting { font-size: 1.75rem !important; }
    body.ss-on #bannerRecCount, body.ss-on #bannerReadingCount { font-size: 18px !important; padding: 6px 16px !important; }
    body.ss-on .fortnight-label { font-size: 34px !important; margin-bottom: 20px !important; }
    body.ss-on .fortnight-label span { font-size: 24px !important; }
    body.ss-on .goal-step > span:first-child { font-size: 24px !important; }
    body.ss-on .preferences-section h2 { font-size: 34px !important; }
    body.ss-on .fortnight-box > a > span { font-size: 15px !important; }
}

/* ---- the "How your homepage works" card ---- */
.swm-card { background: linear-gradient(180deg, #fff3d6, #f3dc8e); border: 4px solid #8a6a1e; border-radius: 20px; max-width: 560px; width: 94%; max-height: 90vh; overflow-y: auto; box-shadow: 0 0 0 3px #f6e3a6, 0 24px 60px rgba(0,0,0,.55); font-family: Georgia, 'Times New Roman', serif; color: #3a2400; }
.swm-head { padding: 20px 24px 14px; text-align: center; background: linear-gradient(90deg, #2a170c, #4a2a16 8%, #3b2112 50%, #4a2a16 92%, #2a170c); border-radius: 16px 16px 0 0; border-bottom: 3px solid #e0b13a; }
.swm-head .swm-ico { font-size: 2.4rem; }
.swm-head h2 { margin: 4px 0 4px; color: #ffd75e; font-size: 1.55rem; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.swm-head p { margin: 0; color: #fff3d6; font-size: 15px; }
.swm-body { padding: 16px 22px 4px; }
.swm-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.swm-step .swm-e { flex: 0 0 44px; font-size: 1.9rem; text-align: center; line-height: 1.1; }
.swm-step strong { display: block; color: #5a1020; font-size: 17px; margin-bottom: 2px; }
.swm-step p { margin: 0; font-size: 15px; line-height: 1.4; }
.swm-tip { margin: 6px 0 12px; padding: 10px 14px; background: rgba(90,16,32,.08); border-left: 5px solid #8a1f3d; border-radius: 10px; font-size: 14px; }
.swm-foot { padding: 4px 22px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.swm-foot label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #5a3a10; }
.swm-go { min-height: 48px; padding: 0 26px; border-radius: 14px; border: 2px solid #8a6a1e; background: linear-gradient(180deg, #f2b632, #c98a10); color: #3a2400; font-family: inherit; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.swm-go:hover { filter: brightness(1.08); }
.swm-go:focus-visible { outline: 4px solid #5a1020; outline-offset: 2px; }

/* tablets and phones: headings a little bigger too */
@media (max-width: 899px), (pointer: coarse) {
    body.ss-on .fortnight-label { font-size: 22px !important; }
    body.ss-on .fortnight-label span { font-size: 16px !important; }
}

/* menu buttons: a bit bigger on tablets and phones as well */
@media (max-width: 899px), (pointer: coarse) {
    body.ss-on .student-nav-btn { font-size: 16px; padding: 10px 16px; }
}


/* ---- greeting card: no "Hi!" / banner text; the worm moves in, bigger ---- */
body.ss-on .header > #childGreeting.ss-hi { flex: 1 1 0; min-width: 0; margin: 0 16px; text-align: center; font-size: 44px; line-height: 1.1; align-self: center; overflow-wrap: anywhere; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { body.ss-on .header > #childGreeting.ss-hi { font-size: 76px; } }
body.ss-on #bannerGreeting { display: none !important; }
body.ss-on #bannerGreeting + div, body.ss-on #bannerGreeting ~ div { display: none !important; }
body.ss-on .header > div:has(> #bannerGreeting) { display: none !important; }
body.ss-on .header > a.ss-worm { margin-left: 0; text-decoration: none; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
body.ss-on .header > a.ss-worm > div { width: 190px !important; height: 190px !important; border: 4px solid #f6e3a6 !important; box-shadow: 0 0 0 3px #8a6a1e, 0 6px 14px rgba(70,40,0,.5) !important; }
body.ss-on #studentHomeWormContainer { width: 190px !important; height: 190px !important; }
body.ss-on #studentHomeWormCanvas { width: 190px !important; height: 190px !important; }
body.ss-on .header > a.ss-worm > span { color: #5a1020 !important; font: 800 16px Georgia, 'Times New Roman', serif !important; margin-top: 8px !important; text-shadow: 0 1px 0 rgba(255,245,210,.8); }
@media (max-width: 899px), (pointer: coarse) {
    body.ss-on .header { flex-wrap: wrap; }
    body.ss-on .header > #childGreeting.ss-hi { flex: 1 1 100%; order: 3; margin: 6px 0 0; font-size: 34px; }
    body.ss-on .header > a.ss-worm { margin: 8px auto 0; }
    body.ss-on .header > a.ss-worm > div, body.ss-on #studentHomeWormContainer, body.ss-on #studentHomeWormCanvas { width: 150px !important; height: 150px !important; }
}

/* ---- iPad / tablets: the gold card sits beside Fortnight Goals (rule in student-home.html), which squeezed
   "Hi name!" into a narrow strip at the card's right edge. Keep the card to one column with the greeting big,
   centred and at the top. ---- */
@media (min-width: 760px) and (max-width: 1400px) and (pointer: coarse) {
    body.ss-on .home-top .header { flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; }
    body.ss-on .home-top .header > #childGreeting.ss-hi { order: -1; flex: 0 0 auto; align-self: stretch; margin: 0 0 4px; font-size: clamp(34px, 4.4vw, 52px); }
    body.ss-on .home-top .header > a.ss-worm { margin: 6px auto 0; }
}