/*
 * Nihongo4U frontpage skin — the structural half of the Japanese design mockup.
 *
 * WHY THIS FILE EXISTS, AND WHY IT IS NOT $THEME->sheets.
 *
 * The palette lives in scss/moove/_variables.scss and reaches the page through
 * theme/styles.php. That is enough for colour, but not for this: the frontpage
 * is styled by theme/moovex/style/fontpage.css, which frontpage.mustache
 * <link>s by absolute path AFTER styles.php. A $THEME->sheets entry compiles
 * into styles.php and would therefore load BEFORE fontpage.css — losing every
 * tie, and losing outright to fontpage.css's !important rules (the Korean
 * palace-wall backdrop at fontpage.css:686 is one of those). So this sheet is
 * <link>ed after fontpage.css instead, by theme_moovex's renderer walking the
 * theme chain for style/brand-frontpage.css. moovex and moove ship no such
 * file, so topik4u links nothing and is untouched.
 *
 * Some rules below carry a `body#page-site-index` prefix they do not appear to
 * need. They do: section_nav.mustache and navbar.mustache each carry an inline
 * <style> block, and a <style> in the body comes LATER in document order than
 * a <link> in the head. On equal specificity those blocks win, !important or
 * not, so competing rules here have to out-specify them rather than out-order
 * them. Rules with no such competitor are left unprefixed.
 *
 * Everything here is the mockup's, verbatim where the mockup states a value.
 * Colours go through the --token custom properties wherever one already
 * carries the right value, so this file stays a layout/structure sheet and the
 * palette keeps living in one place.
 */

/*
 * Zen Maru Gothic (Japanese) and Be Vietnam Pro (Latin), as the mockup
 * specifies. Loaded from fonts.googleapis.com, which the site already uses for
 * Roboto, and recorded in docs/third-party-remote-exceptions.md: a Google
 * Fonts stylesheet varies by user-agent, so it can carry no integrity hash.
 *
 * @import rather than a <link> keeps the whole brand skin in one file and one
 * chain lookup; the cost is one serialised round-trip before the font CSS
 * arrives, which display=swap makes invisible — text paints in the fallback
 * and re-renders.
 */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

/* ============================================================
   1. The page itself
   ============================================================ */

/*
 * The mockup gives the frontpage NO image — only this gradient. fontpage.css
 * paints `background: var(--page-bg-color)` and then a separate
 * `background-image: url("../pix/Background.png") !important`, and that URL is
 * relative to the STYLESHEET, so it resolves under /theme/moovex/ for every
 * brand: the Japanese page was serving Korea's palace wall. The `background`
 * shorthand below resets image, repeat, position, size and attachment in one
 * declaration, so the Korean asset is dropped rather than merely covered.
 *
 * Both fonts are listed on body in mockup order. Per-glyph fallback does the
 * rest: Latin and Vietnamese resolve in Be Vietnam Pro, Japanese glyphs are
 * absent from it and fall through to Zen Maru Gothic — which is exactly what
 * the mockup's `.jp` class does by hand, without needing a class on every
 * Japanese string.
 */
body#page-site-index {
    background: linear-gradient(180deg, var(--page-bg-color, #FFF8F5) 0%, #FDEFF1 55%, #FBE6EA 100%) !important;
    background-attachment: fixed !important;
    font-family: 'Be Vietnam Pro', 'Zen Maru Gothic', sans-serif;
    color: var(--color-text-default, #231F1B);
}

/* The navbar is the second selector in fontpage.css's backdrop rule and gets
   the same Korean wall. The mockup has no top bar to copy, so it takes the
   brand's own navbar surface and the line colour used everywhere else. */
body#page-site-index nav.navbar.fixed-top.navbar-light.navbar-expand {
    background: var(--navbar-bg-color, #FFFDFB) !important;
    border-bottom: 1px solid var(--panel-border-color, #F0DEDF) !important;
}

/* ============================================================
   2. Falling sakura petals
   ============================================================ */

/*
 * The mockup builds 16 absolutely-positioned <div>s in JavaScript, each with a
 * random left offset, duration, delay and drift. This is the same effect with
 * no DOM and no script: one fixed layer carrying a repeating petal tile,
 * translated by exactly one tile height so the loop is seamless.
 *
 * The tile is 560px and carries four petals, which is a density decision, not
 * a layout one: on a 1500x1000 window that tiles about five times in view, so
 * a dozen or so petals are in the air at once — the mockup's sixteen. A 220px
 * tile with three petals was tried first and put over a hundred on screen,
 * which reads as falling confetti rather than blossom. The four scales below
 * span the mockup's own 0.6–1.4 random range at its 14px base size.
 *
 * THIS PSEUDO-ELEMENT ALREADY EXISTS. `theme/moovex/scss/moove/_background.scss:23-33`
 * declares `body::before` as the base theme's backdrop layer, with `inset: 0`,
 * `background-repeat: no-repeat`, `background-attachment: fixed` and
 * `z-index: -1`. This rule is not creating a layer, it is repurposing that one
 * — so every longhand it does not restate is INHERITED FROM THE BACKDROP, not
 * from the CSS initial values:
 *
 *   - `background-repeat: repeat` looks redundant and is not. Without it the
 *     layer computes to `no-repeat` and exactly the tile's own petals paint,
 *     all of them behind the fixed navbar, so the effect is invisible while
 *     every other property inspects correctly.
 *   - `background-attachment: scroll` likewise. `fixed` positions the tile
 *     against the viewport instead of the element box, and its interaction
 *     with a transform on the same element is browser-dependent: Chrome
 *     demotes it to `scroll` (which is why this appeared to work), but a
 *     browser that honours `fixed` paints relative to the viewport and the
 *     translation never moves anything — the petals freeze into wallpaper.
 *   - `bottom: auto` because `inset: 0` set `bottom: 0`. It is inert today
 *     only because top + bottom + height is over-constrained and `bottom` is
 *     the one discarded; setting `height: auto` later would silently change
 *     the geometry.
 *
 * z-index:-1 puts the layer above the page background and behind all content,
 * which is the mockup's stacking order (.petals z-index 0, .app z-index 1).
 * The layer is taller than the viewport and starts above it so the downward
 * translation never exposes an empty band at the top.
 *
 * transform is animated rather than background-position: transform is
 * composited on the GPU, while a background-position animation repaints a
 * full-viewport layer every frame.
 */
body#page-site-index::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -560px;
    bottom: auto;
    height: calc(100vh + 1120px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cpath fill='%23F291A8' transform='translate(84,96) rotate(18) scale(1.4)' d='M12 2c4 4.6 6.4 8 6.4 11.2 0 3.2-2.4 5.6-5.2 6L12 16.4l-1.2 2.8c-2.8-.4-5.2-2.8-5.2-6C5.6 10 8 6.6 12 2z'/%3E%3Cpath fill='%23FFC4D2' transform='translate(376,208) rotate(-42) scale(1)' d='M12 2c4 4.6 6.4 8 6.4 11.2 0 3.2-2.4 5.6-5.2 6L12 16.4l-1.2 2.8c-2.8-.4-5.2-2.8-5.2-6C5.6 10 8 6.6 12 2z'/%3E%3Cpath fill='%23F291A8' transform='translate(232,344) rotate(-8) scale(0.8)' d='M12 2c4 4.6 6.4 8 6.4 11.2 0 3.2-2.4 5.6-5.2 6L12 16.4l-1.2 2.8c-2.8-.4-5.2-2.8-5.2-6C5.6 10 8 6.6 12 2z'/%3E%3Cpath fill='%23FFC4D2' transform='translate(468,456) rotate(34) scale(1.2)' d='M12 2c4 4.6 6.4 8 6.4 11.2 0 3.2-2.4 5.6-5.2 6L12 16.4l-1.2 2.8c-2.8-.4-5.2-2.8-5.2-6C5.6 10 8 6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 560px 560px;
    background-position: 0 0;
    animation: jp-petal-fall 22s linear infinite;
}

/*
 * BOTH axes must travel a whole number of tiles, or the loop snaps. An earlier
 * version drifted 48px sideways over the cycle to mimic the mockup's per-petal
 * `--dx`: seamless vertically, but every 22s the entire field jumped 48px back
 * in one frame. There is no horizontal component now — the mockup's drift is a
 * per-petal random offset, which a single shared transform cannot express, and
 * a synchronised sideways slide of every petal at once was never what it
 * described anyway.
 */
@keyframes jp-petal-fall {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 560px, 0);
    }
}

/* The mockup hides the petals outright rather than freezing them, and so does
   this — a stopped drift of petals mid-air reads as a rendering fault. */
@media (prefers-reduced-motion: reduce) {
    body#page-site-index::before {
        display: none;
    }
}

/* ============================================================
   3. Left sidebar — navigation and the buy button
   ============================================================ */

/*
 * The mockup's active nav item is an indigo GRADIENT with a lifted shadow;
 * section_nav.mustache's inline block paints a flat --navbar-bg-active-color.
 * Both the media query and the full selector are reproduced from that block so
 * this rule competes on equal terms, with `body#page-site-index` breaking the
 * tie in this sheet's favour (see the header note on document order).
 */
@media (min-width: 992px) {
    body#page-site-index button.py-3.w-100.btn.btn-outline-primary.btn-lg {
        border-radius: 16px;
        border: 1px solid var(--panel-border-color, #F0DEDF) !important;
        box-shadow: 0 2px 10px rgba(147, 16, 29, 0.05);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        /* section_nav.mustache pins `font-family: Poppins, sans-serif` on these
           buttons. Nothing in this chain loads Poppins — it is a theme_moove
           SETTING value, not a bundled face — so the five nav labels, the
           largest text in the left column, fell back to the system sans while
           the rest of the page was Be Vietnam Pro. */
        font-family: inherit;
    }

    body#page-site-index button.py-3.w-100.btn.btn-outline-primary.btn-lg:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(188, 39, 53, 0.10);
        /* Restated because section_nav.mustache's hover fills the item solid
           indigo with white underlined text. The mockup's .nav-item:hover only
           lifts and shadows — the surface stays white and the label stays ink,
           which is what the two lines above are for. */
        background: var(--navbar-bg-color, #FFFDFB) !important;
        color: var(--text-nav-color, #231F1B) !important;
        text-decoration: none !important;
    }

    body#page-site-index button.active.py-3.w-100.btn.btn-outline-primary.btn-lg,
    body#page-site-index button.active.py-3.w-100.btn.btn-outline-primary.btn-lg:hover {
        background: linear-gradient(135deg, var(--deep-accent-color, #1B2A4A) 0%, var(--action-bg-hover-color, #2E4370) 100%) !important;
        color: var(--navbar-text-active-color, #FFFFFF) !important;
        border-color: transparent !important;
        box-shadow: 0 6px 16px rgba(27, 42, 74, 0.28);
    }
}

/* .buy-btn: the gradient already comes from --bg-btn-gradient (torii → warm →
   gold, set in the palette). Only the mockup's radius, weight and glow are
   missing. */
body#page-site-index .buy_course {
    border-radius: 16px !important;
    font-weight: 800;
    font-size: 15px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 18px rgba(188, 39, 53, 0.35);
}

/* ============================================================
   4. Search bar
   ============================================================ */

body#page-site-index .search-form {
    background: var(--panel-tint-color, #FFFDFB) !important;
    border: 1px solid var(--panel-border-color, #F0DEDF) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 10px rgba(147, 16, 29, 0.05);
}

body#page-site-index .search-input::placeholder {
    color: #c79aa0 !important;
}

/* The mockup's .search-go: a 42px indigo square with a 12px radius, not a pill
   and not brand red — the search action belongs to the structural family. */
body#page-site-index button.search-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px !important;
    border: none !important;
    background: var(--action-bg-color, #1B2A4A) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ============================================================
   5. Course cards
   ============================================================ */

/*
 * The `body#page-site-index` prefix is required, not stylistic: fontpage.css
 * addresses these same cards as `article.card.px-2.py-1.mb-3` (specificity
 * 0,4,1) in three breakpoint blocks that tile the entire width range — 12px
 * radius below 992px, 25px above. A bare `.course-box` (0,1,0) loses to all
 * three whatever the document order, so the mockup's 20px would never once
 * have applied.
 */
body#page-site-index .course-box {
    background: var(--panel-tint-color, #FFFDFB);
    border: 1px solid var(--panel-border-color, #F0DEDF);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(147, 16, 29, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body#page-site-index .course-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(147, 16, 29, 0.12);
}

body#page-site-index .course-box h5.card-title {
    font-size: 19px;
    color: var(--main-color-text-title-course, #93101D);
}

body#page-site-index .course-box .course-lesson-count {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--brand-muted-color, #836C70) !important;
}

/* .thumb in the mockup — a 16px-radius square. The real card supplies a
   course image rather than the mockup's inline SVG, so only the frame is
   taken. */
body#page-site-index .course-box .card-body img.img-fluid {
    border-radius: 16px;
}

/*
 * .lock — the mockup's 38px tinted rounded square, in place of fontpage.css's
 * free-floating icon whose drop shadow lands on the glyph itself and reads as
 * a smudge on a pale card.
 *
 * The GLYPH COLOUR is deliberately left to Bootstrap, and the mockup is
 * deliberately not followed there. Every instance carries a state utility —
 * text-danger for an expired enrolment, text-warning for a suspended one,
 * text-success for open, text-muted for not-enrolled — and those are
 * !important, so a plain `color` here could never have applied anyway. More to
 * the point, they carry information: the mockup draws one locked state because
 * it is a static picture, and flattening four real states into one torii red
 * to match it would lose meaning to gain a shade.
 */
body#page-site-index .course-box .course-lock-icon {
    box-shadow: none;
    padding: 0 !important;
    width: 38px;
    height: 38px;
    line-height: 38px !important;
    /* No !important: fontpage.css's four .course-lock-icon font-size rules are
       all plain 0,1,0 declarations, so this selector already wins. The blanket
       justification above covers the 992-1440px !important block, which does
       not include this property. */
    font-size: 16px;
    text-align: center;
    border-radius: 10px;
    background: var(--surface-tint-color, #FFF6F2);
    border: 1px solid var(--panel-border-color, #F0DEDF);
}

/* ============================================================
   6. Right panel
   ============================================================ */

/*
 * .activate-box — the mockup's single boldest structural move: the activation
 * panel is an indigo gradient card with white text and a SAKURA body line,
 * inverting the surrounding white surfaces. The hook class is added by
 * frontpage.mustache; nothing in the Korean brand's CSS matches it.
 */
body#page-site-index .activation-panel {
    background: linear-gradient(160deg, var(--deep-accent-color, #1B2A4A) 0%, var(--action-bg-hover-color, #2E4370) 100%) !important;
    border: none !important;
    border-radius: 20px;
    color: #fff;
}

/* !important on font-size throughout this file is not cargo-cult: between
   992px and 1439.98px — the commonest laptop widths — fontpage.css sets these
   sizes with !important at low specificity (lines 1755-1779), which no
   selector can outrank. Without it the colour, weight and radius here applied
   while the size did not, giving a half-applied treatment at exactly the width
   most people browse at. */
body#page-site-index .activation-panel .enter-book {
    color: var(--coupon-border-color, #FFC4D2) !important;
    font-size: 13px !important;
    font-weight: 500;
}

/* The button keeps --bg-btn-gradient (torii → gold, as the mockup's
   .activate-btn asks) and gains its radius and depth. */
body#page-site-index .activation-panel .enter-code {
    border-radius: 14px !important;
    font-weight: 800;
    font-size: 14.5px !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/*
 * .box / .row-box — the panel's remaining cards.
 *
 * The background is set explicitly and is not decoration: these inherit the
 * page's cloud tint (#FFF6F2), which on the Japanese palette is barely
 * distinguishable from the body gradient behind them, so the panel read as one
 * flat pink field with no card edges at all. The mockup's .box is --white.
 */
body#page-site-index .sidebar-right .card,
body#page-site-index .sidebar-right .card-custom,
body#page-site-index .container-progess,
body#page-site-index .learned {
    background: var(--panel-tint-color, #FFFDFB) !important;
    border-radius: 20px;
    border: 1px solid var(--panel-border-color, #F0DEDF);
    box-shadow: 0 2px 10px rgba(147, 16, 29, 0.05);
}

/* The activation panel is the one card that is NOT white — restore its
   gradient, which the rule above would otherwise flatten. */
body#page-site-index .sidebar-right .card.activation-panel {
    background: linear-gradient(160deg, var(--deep-accent-color, #1B2A4A) 0%, var(--action-bg-hover-color, #2E4370) 100%) !important;
    border-color: transparent;
}

body#page-site-index .sidebar-right .title_sub {
    font-size: 14.5px !important;
    font-weight: 700;
}

body#page-site-index .sidebar-right .title_sub_icon,
body#page-site-index .sidebar-right .arrow-icon {
    color: var(--brand-accent-color, #B84E67);
}

/*
 * .r-ic — the mockup's row icons are a 44px tinted rounded square holding a
 * simple glyph, not the Korean mascot illustrations the shared template ships.
 *
 * THE SWAP IS `display:none` ON THE <img> PLUS A ::before ON ITS PARENT, and
 * that shape is deliberate. The obvious way is `content: url(...)` on the
 * <img> itself, which is one rule instead of two — but `content` on a real
 * element (as opposed to a pseudo-element) is not universally implemented, and
 * where it is ignored the Korean mascot renders untouched. That failure is
 * invisible to a Chromium browser pass, which is the only pass this repo runs,
 * so the whole point of the swap would have been lost on some visitors with
 * nothing to see it. A pseudo-element's `content` is universal.
 *
 * These are placeholders in the same sense as pix/brand_logo.png: geometry
 * from the mockup, artwork pending an illustrator (see docs/backlog.md).
 */
body#page-site-index .start-up .img_khoidong,
body#page-site-index .container-custom .icon-text img,
body#page-site-index .learned .img_circle,
body#page-site-index .learned .day img {
    display: none !important;
}

body#page-site-index .start-up .card-body .col-9::before,
body#page-site-index .container-custom .icon-text::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background-color: var(--surface-tint-color, #FFF6F2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    border: 1px solid var(--panel-border-color, #F0DEDF);
}

/* 日の丸 — the mockup's .r-ic for "Khởi động" is a plain torii-red disc. */
body#page-site-index .start-up .card-body .col-9::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='42' fill='%23BC2735'/%3E%3C/svg%3E");
}

/* The mockup uses a 🔖 bookmark for "Tiếp tục học". */
/* No margin: .icon-text is display:flex with gap:16px (fontpage.css:633), and
   a display:none flex item generates no gap, so the gap now falls between this
   pseudo-element and the text. Reinstating the hidden <img>'s 12px margin on
   top would widen the row to 28px — and fontpage.css:1775 deliberately zeroes
   that margin between 992 and 1440px, so it would also make the row 12px wider
   there than it has ever been. 16px is within 2px of the mockup's 14px. */
body#page-site-index .container-custom .icon-text::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23BC2735' d='M30 16h40a6 6 0 0 1 6 6v62L50 68 24 84V22a6 6 0 0 1 6-6z'/%3E%3C/svg%3E");
}

/* ---------- Progress donut ---------- */

/* .progress-title. !important because fontpage.css:1779 sets this size with
   !important between 992px and 1439.98px, where specificity cannot win. */
body#page-site-index .textProgess {
    text-align: center;
    font-weight: 800;
    font-size: 14px !important;
    letter-spacing: 1px;
    color: var(--title-color, #93101D) !important;
}

/*
 * The mockup stacks both percentages INSIDE the ring; the shared template draws
 * them on the arcs via chartjs-plugin-datalabels. $token-chart-label-position
 * turns those off for this brand and this reveals the .pie-center readout the
 * template renders hidden — so the numbers are never drawn twice, and the
 * arc-label colour (a hardcoded, and invalid, '#black' that would sit at
 * 1.49:1 on this brand's indigo arc) stops mattering here entirely.
 */
body#page-site-index .pie-chart {
    position: relative;
}

body#page-site-index .pie-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
}

body#page-site-index .pie-center-done {
    color: var(--title-color, #93101D);
}

body#page-site-index .pie-center-todo {
    color: var(--deep-accent-color, #1B2A4A);
}

/* .dot — the legend swatches. The mockup's are 10px; these stay at the
   template's inline 15px on purpose (an !important width here would override
   the inline value, so this is a choice, not a limitation — 10px reads as
   grubby beside 13.5px legend text at this density). Shape and colour are
   free: colour comes from the tokens the template now reads. */
body#page-site-index .note-color-process {
    border-radius: 3px;
    border-color: transparent !important;
}

/* Bootstrap's green/red pair reads as a pass/fail verdict on a figure that is
   neither, and the mockup has no such colouring — its legend numbers simply
   inherit --ink. A DEPARTURE from the mockup: --brand-muted-color rather than
   ink, because these numbers repeat what the labels beside them already say
   and the mockup's own .meta text uses the muted tone for exactly that. */
body#page-site-index .percent .text-success,
body#page-site-index .percent .text-danger,
body#page-site-index .percent .text-dark {
    color: var(--brand-muted-color, #836C70) !important;
    font-weight: 500;
}

/* ---------- Streak box ---------- */

/*
 * .streak-avatar: a pink radial disc carrying a sakura blossom. Same swap and
 * the same placeholder caveat as the row icons above — the shipped image is a
 * Korean mascot.
 *
 * KNOWN LOSS, recorded rather than hidden: local_learnpage returns FOUR
 * different badges by streak length (1-10, 10-20, 20-30, 30+) and feeds the
 * same URL to all six weekday slots. One static blossom collapses that to a
 * single state, so a 30-day learner and a 1-day learner see the same disc and
 * the tier survives only in the text line. The mockup shows one state, but the
 * mockup was not drawn against four-tier data. Tracked in docs/backlog.md
 * beside the mascot artwork it depends on.
 */
body#page-site-index .learned .card-body::before {
    content: "";
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(188, 39, 53, 0.25);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='a' cx='35%25' cy='30%25' r='78%25'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.55' stop-color='%23FFC4D2'/%3E%3Cstop offset='1' stop-color='%23F291A8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23a)'/%3E%3Cg transform='translate(50 50) scale(.62) translate(-50 -50)' fill='%23F291A8'%3E%3Cellipse cx='50' cy='27' rx='14' ry='23'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='%23E8B84B'/%3E%3C/svg%3E") center/cover no-repeat;
}

body#page-site-index .learned .learned-title {
    font-size: 16px !important;
    color: var(--title-color, #93101D) !important;
}

body#page-site-index .learned .number-date-learned {
    color: inherit;
}

body#page-site-index .learned > .card-body > p {
    font-size: 12.5px;
    color: var(--brand-muted-color, #836C70);
}

/* .day — the mockup's 32px pale disc per weekday, holding the same blossom.
   The <img> inside is hidden with the others above, so the blossom is painted
   as this element's own background rather than through the child. */
body#page-site-index .learned .day {
    width: 32px;
    height: 32px;
    border: 1px solid var(--panel-border-color, #F0DEDF);
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23F291A8'%3E%3Cellipse cx='50' cy='27' rx='14' ry='23'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='14' ry='23' transform='rotate(288 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='9' fill='%23E8B84B'/%3E%3C/svg%3E") center/18px 18px no-repeat,
        var(--surface-tint-color, #FFF6F2);
}

/* ============================================================
   7. Scrollbar
   ============================================================ */

/* Both forms on purpose. The descendant combinator reaches scrollbars of
   body's children (the sidebar, the course list); the document scrollbar
   belongs to the viewport, which is NOT a descendant of body, so it needs the
   compound selector as well. */
body#page-site-index::-webkit-scrollbar,
body#page-site-index ::-webkit-scrollbar {
    width: 8px;
}

body#page-site-index::-webkit-scrollbar-thumb,
body#page-site-index ::-webkit-scrollbar-thumb {
    background: var(--brand-primary-light-color, #F291A8);
    border-radius: 4px;
}