/* School detail page styles — extracted from the inline <style> block
   in /school/index.html (the template). Generated /school/<slug>/index.html
   pages share this same external stylesheet.

   This is a superset of the per-school inline styles, including the v2 hero
   layout (hero-score-pill, hero-meta-list, school-tabs) used by the template
   route /school/?id=N. Generated pages use the older layout (still styled
   here for safety). */

        .breadcrumbs { margin-bottom: 0.75rem; font-size: 0.875rem; opacity: 0.85; }
        .breadcrumbs a { color: white; text-decoration: none; opacity: 0.8; }
        .breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
        .breadcrumbs .separator { margin: 0 0.5rem; opacity: 0.5; }
        /* Quiet share-row — small icon buttons, brand palette, no clashing colours */
        .share-row { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--gray-100); }
        .share-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.25rem; }
        .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--gray-200); background: var(--paper); color: var(--gray-600); cursor: pointer; text-decoration: none; transition: all 0.15s; }
        .share-btn:hover { border-color: var(--brand-teal); color: var(--brand-teal-deep); transform: translateY(-1px); }
        .share-btn.copied { border-color: var(--brand-teal); color: var(--brand-teal-deep); }
        [data-theme="dark"] .share-row { border-top-color: var(--border); }
        [data-theme="dark"] .share-label { color: var(--text-secondary); }
        [data-theme="dark"] .share-btn { background: var(--bg-elevated); border-color: var(--border); color: var(--text-body); }
        [data-theme="dark"] .share-btn:hover { color: var(--brand-teal); }
        .similar-schools-section { max-width: 1200px; margin: 0 auto 2rem; padding: 0 1.5rem; }
        .similar-schools-section h3 { font-size: 1.25rem; margin-bottom: 1rem; }
        .similar-schools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .similar-school-card { display: block; background: var(--paper); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-md); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--sand-200); }
        .similar-school-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand-teal); }
        .similar-school-name { font-weight: 600; font-size: 1rem; color: var(--gray-900); margin-bottom: 0.25rem; }
        .similar-school-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
        @media (max-width: 768px) { .similar-schools-grid { grid-template-columns: 1fr; } }

        /* "Parents also viewed" surface — sand-100 band (spec section 4) */
        .parents-also-viewed-band {
            background: var(--sand-100);
            padding: 2.5rem 0 3rem;
            margin-top: 2rem;
            border-top: 1px solid var(--sand-200);
        }
        .parents-also-viewed-band .similar-schools-section { margin: 0 auto; }
        .parents-also-viewed-band h3 {
            font-family: var(--font-display, Fraunces, Georgia, serif);
            font-weight: 500;
            font-size: 1.5rem;
            color: var(--brand-ink);
            margin-bottom: 1.25rem;
        }
        [data-theme="dark"] .parents-also-viewed-band { background: var(--bg-section, #0E1C31); border-top-color: var(--border, #1F3352); }

        /* Sticky section-nav tabs — spec section 4 "School detail page" */
        .school-tabs-wrap {
            position: sticky;
            top: 0;
            z-index: 40;
            background: var(--paper, #fff);
            border-bottom: 1px solid var(--sand-200);
            backdrop-filter: blur(8px);
            background: color-mix(in srgb, var(--paper, #fff) 92%, transparent);
        }
        .school-tabs {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
            display: flex;
            gap: 0.25rem;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .school-tabs::-webkit-scrollbar { display: none; }
        .school-tab {
            flex: 0 0 auto;
            padding: 0.875rem 1rem 0.75rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--sand-700);
            text-decoration: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: color 0.15s, border-color 0.15s;
            white-space: nowrap;
        }
        .school-tab:hover { color: var(--brand-ink); }
        .school-tab.active {
            color: var(--brand-teal-deep);
            border-bottom-color: var(--brand-teal-deep);
            font-weight: 600;
        }
        [data-theme="dark"] .school-tabs-wrap {
            background: color-mix(in srgb, var(--bg-elevated, #11213A) 92%, transparent);
            border-bottom-color: var(--border, #1F3352);
        }
        [data-theme="dark"] .school-tab { color: var(--text-body, #D4C7B3); }
        [data-theme="dark"] .school-tab:hover { color: var(--text, #F3ECE2); }
        [data-theme="dark"] .school-tab.active { color: var(--brand-teal); border-bottom-color: var(--brand-teal); }

        /* Section anchors — scroll offset so sticky tab bar doesn't cover headings */
        .section-anchor {
            display: block;
            position: relative;
            top: -60px;
            visibility: hidden;
            height: 0;
        }
        @media (max-width: 768px) {
            .school-tab { padding: 0.75rem 0.75rem 0.625rem; font-size: 0.875rem; }
        }
        /* Contribute Form */
        .contribute-card {
            background: var(--paper);
            border-radius: var(--radius-lg);
            padding: 2rem;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--gray-100);
        }
        .contribute-header {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }
        .contribute-header h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
        .contribute-header p { color: var(--gray-500); font-size: 0.875rem; }
        .contribute-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .contribute-field.full-width { grid-column: 1 / -1; }
        .contribute-field label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--gray-700);
            margin-bottom: 0.375rem;
        }
        .contribute-field input,
        .contribute-field select,
        .contribute-field textarea {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-family: inherit;
        }
        .contribute-field textarea { resize: vertical; }
        .char-count { font-size: 0.75rem; color: var(--gray-400); float: right; margin-top: 0.25rem; }
        .star-rating { display: flex; gap: 4px; }
        .star-rating .star {
            font-size: 1.5rem;
            color: var(--gray-300);
            cursor: pointer;
            transition: color 0.15s;
        }
        .star-rating .star.active { color: var(--brand-sun); }
        .star-rating .star:hover { color: var(--brand-sun); }
        .btn-contribute {
            margin-top: 1.25rem;
            background: var(--teal-600);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-contribute:hover { background: var(--teal-700); }
        .contribute-note { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.75rem; }
        @media (max-width: 768px) {
            .contribute-fields { grid-template-columns: 1fr; }
            .contribute-card { padding: 1.25rem; }
        }
        /* Amenities Grid */
        .amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
        .amenity-category { background: var(--gray-50); border-radius: var(--radius-md); padding: 1rem; }
        .amenity-category h4 { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
        .amenity-category .amenity-count { font-size: 1.5rem; font-weight: 700; color: var(--teal-600); }
        .amenity-category .amenity-label { font-size: 0.75rem; color: var(--gray-500); }
        /* Category Ratings */
        .category-rating-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); }
        .category-rating-row:last-child { border-bottom: none; }
        .category-rating-name { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
        .category-rating-value { font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); }
        .category-rating-value.outstanding { background: var(--rating-outstanding); color: var(--rating-outstanding-fg); }
        .category-rating-value.very-good   { background: var(--rating-verygood);    color: var(--rating-verygood-fg); }
        .category-rating-value.good        { background: var(--rating-good);        color: var(--rating-good-fg); }
        .category-rating-value.acceptable  { background: var(--rating-acceptable);  color: var(--rating-acceptable-fg); }
        .category-rating-value.weak        { background: var(--rating-weak);        color: var(--rating-weak-fg); }
        /* Quick Facts */
        .quick-fact-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-full); font-size: 0.8125rem; color: var(--gray-700); }
        .quick-fact-badge svg { width: 14px; height: 14px; color: var(--teal-500); flex-shrink: 0; }
        .heritage-badge { background: color-mix(in srgb, var(--brand-sun) 14%, var(--white)); border-color: color-mix(in srgb, var(--brand-sun) 35%, var(--white)); color: #7A5400; }
        .rating-journey-badge { background: var(--brand-teal-tint); border-color: color-mix(in srgb, var(--brand-teal) 30%, var(--white)); color: var(--brand-teal-deep); }
        @media (max-width: 768px) { .amenities-grid { grid-template-columns: 1fr 1fr; } }
        /* ————— SCHOOL HERO (palette-aligned, clearer hierarchy) ————— */
        .school-hero {
            position: relative;
            isolation: isolate;
            background: var(--brand-ink);
            color: #fff;
            padding: 1.75rem 1.5rem 2.5rem;
            overflow: hidden;
        }
        .school-hero::before {
            content: '';
            position: absolute;
            top: -40%; right: -15%;
            width: 720px; height: 620px;
            background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-teal) 55%, transparent) 0%, transparent 60%);
            filter: blur(20px);
            opacity: 0.8;
            z-index: -1;
            pointer-events: none;
        }
        .school-hero::after {
            content: '';
            position: absolute;
            bottom: -60%; left: -10%;
            width: 520px; height: 440px;
            background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-sun) 22%, transparent) 0%, transparent 65%);
            filter: blur(24px);
            opacity: 0.6;
            z-index: -1;
            pointer-events: none;
        }
        .school-hero-inner { max-width: 1200px; margin: 0 auto; }
        .school-hero .breadcrumbs { font-size: 0.8125rem; margin-bottom: 0.75rem; padding: 0; color: rgba(255, 255, 255, 0.65); background-color: transparent !important; }
        .school-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color 0.15s; }
        .school-hero .breadcrumbs a:hover { color: #fff; }
        .school-hero .breadcrumbs .separator { opacity: 0.4; margin: 0 0.4rem; font-size: 0.75rem; }
        .school-hero .breadcrumbs span:last-child { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
        .hero-head {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem 2rem;
            align-items: end;
        }
        .hero-title h1 {
            font-size: clamp(1.65rem, 3vw + 0.5rem, 2.25rem);
            margin: 0 0 0.35rem;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: -0.015em;
            color: #fff;
            text-wrap: balance;
        }
        .hero-title .arabic-name {
            font-size: 1.0625rem;
            opacity: 0.7;
            margin: 0;
            direction: rtl;
            font-weight: 400;
        }
        .hero-score-pill {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 118px;
            padding: 0.75rem 1.25rem;
            background: color-mix(in srgb, #fff 8%, transparent);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 14px;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        .hero-score-pill .score-big {
            font-size: 2.125rem;
            font-weight: 700;
            line-height: 1;
            color: var(--brand-teal);
            font-feature-settings: "tnum";
            letter-spacing: -0.02em;
        }
        .hero-score-pill .score-meta {
            font-size: 0.625rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.8;
            margin-top: 0.375rem;
            text-align: center;
            line-height: 1.15;
        }
        .hero-score-pill .score-methodology-link {
            margin-top: 0.4rem;
            font-size: 0.625rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
            text-decoration: underline;
            text-decoration-color: rgba(255, 255, 255, 0.35);
            text-underline-offset: 2px;
            line-height: 1.2;
            text-align: center;
            transition: color 0.15s ease;
        }
        .hero-score-pill .score-methodology-link:hover {
            color: #fff;
            text-decoration-color: #fff;
        }
        /* Score breakdown popover — replaces the static "How is this calculated?" link.
           Uses native <details>/<summary> so it works without JS and is keyboard accessible. */
        .score-breakdown-details { position: relative; margin-top: 0.4rem; }
        .score-breakdown-details > summary {
            list-style: none;
            cursor: pointer;
            font-size: 0.625rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
            text-decoration: underline;
            text-decoration-color: rgba(255, 255, 255, 0.35);
            text-underline-offset: 2px;
            line-height: 1.2;
            text-align: center;
            transition: color 0.15s ease;
        }
        .score-breakdown-details > summary::-webkit-details-marker { display: none; }
        .score-breakdown-details > summary:hover { color: #fff; text-decoration-color: #fff; }
        .score-breakdown-details[open] > summary { color: #fff; }
        .score-breakdown-popover {
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            min-width: 240px;
            padding: 0.875rem 1rem;
            background: #fff;
            color: var(--gray-900, #111827);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.1);
            font-size: 0.8125rem;
            line-height: 1.45;
            z-index: 30;
            text-align: left;
        }
        .score-breakdown-popover::before {
            content: ""; position: absolute; top: -6px; right: 22px;
            width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
            box-shadow: -2px -2px 4px rgba(0,0,0,0.06);
        }
        .score-breakdown-title { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }
        .score-breakdown-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
        .score-breakdown-list li { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
        .score-breakdown-list li:last-child { border-bottom: 0; }
        .score-breakdown-list .sb-label { color: var(--gray-600, #4b5563); }
        .score-breakdown-list .sb-value { font-weight: 600; color: var(--gray-900); font-variant-numeric: tabular-nums; }
        .score-breakdown-link { display: inline-block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--brand-teal-deep, #045f5f); text-decoration: none; font-weight: 600; }
        .score-breakdown-link:hover { text-decoration: underline; }
        [data-theme="dark"] .score-breakdown-popover { background: #1f2937; color: #f9fafb; }
        [data-theme="dark"] .score-breakdown-popover::before { background: #1f2937; box-shadow: -2px -2px 4px rgba(0,0,0,0.3); }
        [data-theme="dark"] .score-breakdown-title { color: #f9fafb; }
        [data-theme="dark"] .score-breakdown-list li { border-bottom-color: #374151; }
        [data-theme="dark"] .score-breakdown-list .sb-label { color: #d1d5db; }
        [data-theme="dark"] .score-breakdown-list .sb-value { color: #f9fafb; }
        @media (max-width: 600px) {
            .score-breakdown-popover { right: -1rem; min-width: 220px; font-size: 0.75rem; }
        }
        /* Pro-only data block marker. Add class="pro-only" or data-pro-only to any
           card to surface a small "Pro" pill in the corner. Free users still see
           the data (existing copy makes that decision) — this is purely a visual
           cue so Pro upgraders understand what they're paying for. */
        .info-card.pro-only { position: relative; }
        .info-card.pro-only::before {
            content: "PRO";
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            padding: 0.1875rem 0.5rem;
            background: linear-gradient(135deg, var(--brand-teal, #067a7a), var(--brand-teal-deep, #045f5f));
            color: #fff;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            border-radius: 999px;
            line-height: 1;
            z-index: 5;
            pointer-events: none;
        }
        .hero-sub {
            margin-top: 1.25rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.625rem 1rem;
        }
        .hero-meta-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0;
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.82);
        }
        .hero-meta-list li {
            display: inline-flex;
            align-items: center;
        }
        .hero-meta-list li + li::before {
            content: '·';
            opacity: 0.45;
            margin: 0 0.7rem;
            font-weight: 700;
        }
        .hero-meta-list .google-star {
            color: var(--brand-sun);
            margin-right: 0.3rem;
        }
        .hero-meta-list .meta-dim {
            opacity: 0.65;
            margin-left: 0.25rem;
        }
        /* Legacy aliases (hero-score & hero-meta referenced elsewhere in JS) */
        .hero-meta { display: none; }
        .hero-score { display: none; }
        @media (max-width: 768px) {
            .school-hero { padding: 1.25rem 1rem 1.75rem; }
            .hero-head { grid-template-columns: 1fr; gap: 1rem; }
            .hero-score-pill {
                align-self: flex-start;
                flex-direction: row;
                min-width: 0;
                padding: 0.625rem 0.9rem;
                gap: 0.6rem;
            }
            .hero-score-pill .score-big { font-size: 1.625rem; }
            .hero-score-pill .score-meta { text-align: left; font-size: 0.625rem; margin-top: 0; }
            .hero-score-pill .score-methodology-link { display: none; }
            .hero-meta-list { font-size: 0.875rem; }
            .hero-meta-list li + li::before { margin: 0 0.5rem; }
        }
        .school-content { max-width: 1200px; margin: -2rem auto 0; padding: 0 1.5rem 3rem; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
        .info-card { background: var(--paper); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
        .info-card h3 { font-size: 1.125rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .rating-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.375rem 0.875rem; border-radius: var(--radius-full); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.01em; white-space: nowrap; }
        /* Hero-context KHDA badge — bigger, bolder, with the KHDA wordmark prefix so it's
           unmistakably the official rating, not an editorial label. */
        .hero-sub .rating-badge { padding: 0.5rem 1rem; font-size: 0.9375rem; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
        .hero-sub .rating-badge::before { content: "KHDA"; font-size: 0.625rem; letter-spacing: 0.08em; font-weight: 700; opacity: 0.72; padding-right: 0.4rem; border-right: 1px solid currentColor; margin-right: 0.1rem; }
        .hero-sub .rating-badge.rating-no-report::before { display: none; }
        .hero-sub .rating-badge.rating-not-rated::before { display: none; }
        .rating-outstanding { background: var(--rating-outstanding); color: var(--rating-outstanding-fg); }
        .rating-very-good   { background: var(--rating-verygood);    color: var(--rating-verygood-fg); }
        .rating-good        { background: var(--rating-good);        color: var(--rating-good-fg); }
        .rating-acceptable  { background: var(--rating-acceptable);  color: var(--rating-acceptable-fg); }
        .rating-weak        { background: var(--rating-weak);        color: var(--rating-weak-fg); }
        .focus-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
        .focus-rating-box { padding: 1rem; background: var(--gray-50); border-radius: var(--radius-md); text-align: center; }
        .focus-rating-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; margin-bottom: 0.5rem; }
        .focus-rating-value { font-weight: 600; font-size: 0.875rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); display: inline-block; }
        .focus-outstanding { background: var(--rating-outstanding); color: var(--rating-outstanding-fg); }
        .focus-very-good   { background: var(--rating-verygood);    color: var(--rating-verygood-fg); }
        .focus-good        { background: var(--rating-good);        color: var(--rating-good-fg); }
        .focus-acceptable  { background: var(--rating-acceptable);  color: var(--rating-acceptable-fg); }
        .focus-weak        { background: var(--rating-weak);        color: var(--rating-weak-fg); }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .stat-box { text-align: center; padding: 1rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--teal-600); }
        .stat-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; }
        .fee-table { width: 100%; border-collapse: collapse; }
        .fee-table th, .fee-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--gray-100); }
        .fee-table th { background: var(--gray-50); font-weight: 600; font-size: 0.875rem; }
        .fee-amount { font-weight: 600; color: var(--teal-600); }
        .rating-history { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
        .rating-history-item { padding: 0.25rem 0.625rem; background: var(--gray-100); color: var(--gray-700); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; }
        /* Per-rating background colour (the rating itself, not the trajectory) */
        .rating-history-item.rating-history-outstanding { background: color-mix(in srgb, var(--brand-sun, #F5B400) 22%, transparent); color: #6B5400; }
        .rating-history-item.rating-history-very-good   { background: color-mix(in srgb, var(--brand-teal) 22%, transparent); color: var(--brand-teal-deep); }
        .rating-history-item.rating-history-good        { background: color-mix(in srgb, var(--brand-teal) 12%, transparent); color: var(--brand-teal-deep); }
        .rating-history-item.rating-history-acceptable  { background: color-mix(in srgb, var(--brand-coral, #E87B58) 18%, transparent); color: #7A2A0F; }
        .rating-history-item.rating-history-weak        { background: color-mix(in srgb, #B12A00 22%, transparent); color: #7A1B00; }
        /* Subtle improvement / decline indicator on top of the per-rating colour */
        .rating-history-item.improved::before { content: '↑ '; opacity: 0.7; font-weight: 600; }
        .rating-history-item.declined::before { content: '↓ '; opacity: 0.7; font-weight: 600; }
        [data-theme="dark"] .rating-history-item { background: var(--bg); color: var(--text-body); }
        [data-theme="dark"] .rating-history-item.rating-history-outstanding { background: color-mix(in srgb, var(--brand-sun, #F5B400) 25%, var(--bg-elevated)); color: var(--brand-sun, #F5B400); }
        [data-theme="dark"] .rating-history-item.rating-history-very-good   { background: color-mix(in srgb, var(--brand-teal) 25%, var(--bg-elevated)); color: var(--brand-teal); }
        [data-theme="dark"] .rating-history-item.rating-history-good        { background: color-mix(in srgb, var(--brand-teal) 18%, var(--bg-elevated)); color: var(--brand-teal); }
        [data-theme="dark"] .rating-history-item.rating-history-acceptable  { background: color-mix(in srgb, var(--brand-coral, #E87B58) 22%, var(--bg-elevated)); color: var(--brand-coral, #E87B58); }
        [data-theme="dark"] .rating-history-item.rating-history-weak        { background: color-mix(in srgb, #B12A00 28%, var(--bg-elevated)); color: #FF9AA2; }
        /* Prominent rating-history card */
        .rating-history-card-prominent { border-left: 4px solid var(--brand-teal); }
        .rating-history-headline { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
        .rating-history-subtitle { font-size: 0.875rem; color: var(--gray-600); margin: 0.25rem 0 0; max-width: 480px; }
        .rating-history-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; min-width: 180px; }
        .rh-trend-pill { padding: 0.25rem 0.75rem; border-radius: var(--radius-full, 999px); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
        .rh-trend-pill.trend-up { background: color-mix(in srgb, var(--brand-teal) 15%, transparent); color: var(--brand-teal-deep); }
        .rh-trend-pill.trend-down { background: color-mix(in srgb, var(--brand-coral, #E87B58) 18%, transparent); color: #7A2A0F; }
        .rh-trend-pill.trend-flat { background: var(--gray-100); color: var(--gray-700); }
        .rh-journey { font-size: 1rem; color: var(--gray-800); }
        .rh-journey strong { color: var(--brand-ink); font-weight: 700; }
        .rh-arrow { color: var(--gray-400); margin: 0 0.25rem; }
        .rh-span { font-size: 0.75rem; color: var(--gray-500); }
        [data-theme="dark"] .rating-history-card-prominent { border-left-color: var(--brand-teal); }
        [data-theme="dark"] .rating-history-subtitle { color: var(--text-secondary); }
        [data-theme="dark"] .rh-trend-pill.trend-flat { background: var(--bg); color: var(--text-secondary); }
        [data-theme="dark"] .rh-trend-pill.trend-up { color: var(--brand-teal); }
        [data-theme="dark"] .rh-trend-pill.trend-down { color: var(--brand-coral, #E87B58); }
        [data-theme="dark"] .rh-journey { color: var(--text-body); }
        [data-theme="dark"] .rh-journey strong { color: var(--text); }
        [data-theme="dark"] .rh-arrow { color: var(--text-secondary); }
        [data-theme="dark"] .rh-span { color: var(--text-secondary); }
        @media (max-width: 600px) { .rating-history-headline { flex-direction: column; } .rating-history-summary { align-items: flex-start; } }
        .enrollment-chart { height: 200px; position: relative; margin-top: 1rem; }
        .chart-bar { position: absolute; bottom: 25px; background: linear-gradient(to top, var(--teal-500), var(--teal-400)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
        .chart-label { position: absolute; bottom: 5px; font-size: 0.625rem; color: var(--gray-500); transform: translateX(-50%); }
        .chart-value { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 0.625rem; font-weight: 600; color: var(--teal-700); }
        .contact-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); }
        .contact-item:last-child { border-bottom: none; }
        .contact-item a { color: var(--teal-600); text-decoration: none; }
        .contact-item a:hover { text-decoration: underline; }
        .action-buttons { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
        .action-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.15s; white-space: nowrap; box-sizing: border-box; }
        .action-btn-primary { background: var(--brand-teal-deep); color: white; border: 1px solid var(--brand-teal-deep); flex: 1 1 100%; padding: 0.875rem; }
        .action-btn-primary:hover { background: var(--brand-teal); border-color: var(--brand-teal); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25); }
        .action-btn-primary svg { opacity: 0.9; }
        .action-btn-secondary { background: var(--paper); color: var(--gray-800); border: 1px solid var(--gray-200); }
        .action-btn-secondary:hover { border-color: var(--brand-teal); color: var(--brand-teal-deep); transform: translateY(-1px); }
        .action-btn-secondary svg { color: var(--gray-500); transition: color 0.15s; }
        .action-btn-secondary:hover svg { color: var(--brand-teal); }
        [data-theme="dark"] .action-btn-secondary { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
        [data-theme="dark"] .action-btn-secondary:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
        [data-theme="dark"] .action-btn-secondary svg { color: var(--text-secondary); }
        [data-theme="dark"] .action-btn-secondary:hover svg { color: var(--brand-teal); }
        #school-map { height: 250px; border-radius: var(--radius-md); }
        .exam-result-block { padding: 1rem; background: var(--gray-50); border-radius: var(--radius-md); margin-bottom: 1rem; }
        .exam-result-block:last-child { margin-bottom: 0; }
        .exam-result-block h4 { font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--teal-700); }
        .exam-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
        .exam-stat { text-align: center; padding: 0.5rem 1rem; background: var(--paper); border-radius: var(--radius-sm); min-width: 70px; }
        .exam-stat-value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--teal-600); }
        .exam-stat-label { display: block; font-size: 0.7rem; color: var(--gray-500); }
        .exam-note { font-size: 0.8rem; color: var(--gray-500); margin-top: 0.75rem; }
        .exam-note.value-add { color: var(--brand-teal-deep); font-weight: 500; }
        .exam-note.uni-destinations { color: var(--brand-ink); }
        .exam-note.global-avg { font-style: italic; color: var(--gray-400); font-size: 0.75rem; }
        .vs-global { display: inline-flex; font-size: 0.65rem; padding: 0.125rem 0.4rem; border-radius: var(--radius-full); margin-left: 0.25rem; vertical-align: middle; }
        .vs-global.above { background: var(--brand-teal-tint); color: var(--brand-teal-deep); }
        .vs-global.below { background: var(--rating-weak-tint); color: var(--rating-weak); }
        .university-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
        .uni-badge { display: inline-flex; padding: 0.25rem 0.75rem; background: var(--sand-100); color: var(--brand-ink); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; }
        @media (max-width: 768px) { .school-content { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }
        
        /* NEW: Insights styling */
        .insights-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
        .insight-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--gray-50); border-radius: var(--radius-full); font-size: 0.875rem; }
        .insight-badge.achievement  { background: var(--brand-teal-tint); color: var(--brand-teal-deep); }
        .insight-badge.demand       { background: var(--rating-weak-tint); color: var(--rating-weak); }
        .insight-badge.availability { background: var(--brand-teal-tint); color: var(--brand-teal-deep); }
        .insight-badge.inclusion    { background: var(--sand-100); color: var(--brand-ink); }
        .insight-badge.leadership   { background: color-mix(in srgb, var(--brand-sun) 14%, var(--white)); color: #7A5400; }
        .insight-badge.history      { background: var(--sand-100); color: var(--sand-700); }
        
        /* NEW: Phase ratings table */
        .phase-ratings-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
        .phase-ratings-table th, .phase-ratings-table td { padding: 0.5rem; text-align: center; border-bottom: 1px solid var(--gray-100); }
        .phase-ratings-table th { background: var(--gray-50); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
        .phase-ratings-table td:first-child { text-align: left; font-weight: 500; }
        .phase-rating { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 500; }
        .phase-rating.outstanding { background: var(--rating-outstanding); color: var(--rating-outstanding-fg); }
        .phase-rating.very-good   { background: var(--rating-verygood);    color: var(--rating-verygood-fg); }
        .phase-rating.good        { background: var(--rating-good);        color: var(--rating-good-fg); }
        .phase-rating.acceptable  { background: var(--rating-acceptable);  color: var(--rating-acceptable-fg); }
        .phase-rating.weak        { background: var(--rating-weak);        color: var(--rating-weak-fg); }
        .phase-rating.na { background: var(--gray-100); color: var(--gray-500); font-size: 0.65rem; }
        
        /* No KHDA Report status */
        .rating-badge.rating-no-report { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.25); font-style: italic; }

        /* KHDA inspection report deep link (hero) */
        .khda-report-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.375rem 0.75rem;
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: rgba(255, 255, 255, 0.95);
            font-size: 0.8125rem;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .khda-report-link:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
        .khda-report-link .khda-report-icon { font-size: 0.9375rem; }
        .khda-report-link .khda-report-arrow { font-size: 0.75rem; opacity: 0.8; }
        .no-report-notice { background: var(--sand-50); border: 1px dashed var(--sand-300); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; }
        .no-report-notice p { color: var(--sand-700); font-size: 0.875rem; margin: 0; }
        .no-report-notice strong { color: var(--brand-ink); }
        
        /* NEW: Highlights and recommendations lists */
        .khda-list { list-style: none; padding: 0; margin: 0; }
        .khda-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--gray-100); display: flex; align-items: flex-start; gap: 0.75rem; }
        .khda-list li:last-child { border-bottom: none; }
        .highlights-list li::before { content: '✓'; color: var(--brand-teal-deep); font-weight: bold; }
        .recommendations-list li::before { content: '→'; color: var(--brand-coral); font-weight: bold; }
        
        /* NEW: Demographics grid */
        .demographics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .demo-item { padding: 0.75rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .demo-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; margin-bottom: 0.25rem; }
        .demo-value { font-size: 1rem; font-weight: 600; color: var(--gray-800); }
        
        /* Difficulty classes */
        .difficulty-high { color: var(--rating-weak); }
        .difficulty-medium { color: #A63918; }
        .difficulty-low { color: var(--brand-teal-deep); }

        /* Fee Comparison Chart — horizontal bars */
        .fee-cmp-sub { font-size: 0.875rem; color: var(--gray-600); margin: 0 0 0.875rem 0; }
        .fee-cmp-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .fee-cmp-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr) auto; gap: 0.875rem; align-items: center; padding: 0.375rem 0; }
        .fee-cmp-name { font-size: 0.875rem; color: var(--gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fee-cmp-track { background: var(--gray-100); border-radius: var(--radius-full, 999px); height: 12px; overflow: hidden; }
        .fee-cmp-bar { height: 100%; background: var(--gray-300); border-radius: var(--radius-full, 999px); transition: width 0.3s; }
        .fee-cmp-row-this .fee-cmp-name { color: var(--brand-ink); font-weight: 700; }
        .fee-cmp-row-this .fee-cmp-bar { background: linear-gradient(to right, var(--brand-teal), var(--brand-teal-deep)); }
        .fee-cmp-value { font-size: 0.875rem; color: var(--gray-700); font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
        .fee-cmp-row-this .fee-cmp-value { color: var(--brand-ink); font-weight: 700; }
        .fee-cmp-meta { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.875rem; line-height: 1.5; }
        [data-theme="dark"] .fee-cmp-sub, [data-theme="dark"] .fee-cmp-meta { color: var(--text-secondary); }
        [data-theme="dark"] .fee-cmp-name, [data-theme="dark"] .fee-cmp-value { color: var(--text-body); }
        [data-theme="dark"] .fee-cmp-track { background: var(--bg); }
        [data-theme="dark"] .fee-cmp-bar { background: var(--border); }
        [data-theme="dark"] .fee-cmp-row-this .fee-cmp-name,
        [data-theme="dark"] .fee-cmp-row-this .fee-cmp-value { color: var(--text); }
        @media (max-width: 640px) {
            .fee-cmp-row { grid-template-columns: 1fr auto; gap: 0.5rem; }
            .fee-cmp-track { grid-column: 1 / -1; }
        }

        /* Admissions Timeline */
        .timeline { position: relative; padding-left: 2rem; }
        .timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
        .timeline-item { position: relative; padding-bottom: 1.5rem; }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-dot { position: absolute; left: -1.625rem; top: 0.25rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--teal-500); background: var(--paper); }
        .timeline-dot.active { background: var(--teal-500); }
        .timeline-date { font-size: 0.75rem; font-weight: 600; color: var(--teal-600); text-transform: uppercase; }
        .timeline-title { font-size: 0.9375rem; font-weight: 600; color: var(--gray-900); margin: 0.125rem 0; }
        .timeline-desc { font-size: 0.8125rem; color: var(--gray-500); }
        .timeline-item-next { }
        .timeline-item-next .timeline-title { color: var(--brand-teal-deep); }
        .timeline-dot.next { background: var(--brand-teal); border-color: var(--brand-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-teal) 25%, transparent); }
        .timeline-callout { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; margin: 0 0 1.25rem 0; background: color-mix(in srgb, var(--brand-teal) 8%, var(--paper)); border-left: 3px solid var(--brand-teal); border-radius: var(--radius-sm, 6px); }
        .timeline-callout-soon { background: color-mix(in srgb, var(--brand-sun, #F5B400) 15%, var(--paper)); border-left-color: var(--brand-sun, #F5B400); }
        .timeline-callout-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-teal-deep); }
        .timeline-callout-soon .timeline-callout-label { color: #8B6A00; }
        .timeline-callout-title { font-size: 0.9375rem; font-weight: 700; color: var(--gray-900); }
        .timeline-callout-meta { font-size: 0.8125rem; color: var(--gray-600); }
        .timeline-note { font-size: 0.8125rem; color: var(--gray-500); margin-top: 1rem; line-height: 1.5; }
        .timeline-note a { color: var(--brand-teal-deep); text-decoration: underline; }
        [data-theme="dark"] .timeline-callout { background: color-mix(in srgb, var(--brand-teal) 15%, var(--bg-elevated)); }
        [data-theme="dark"] .timeline-callout-soon { background: color-mix(in srgb, var(--brand-sun, #F5B400) 18%, var(--bg-elevated)); }
        [data-theme="dark"] .timeline-callout-label { color: var(--brand-teal); }
        [data-theme="dark"] .timeline-callout-soon .timeline-callout-label { color: var(--brand-sun, #F5B400); }
        [data-theme="dark"] .timeline-callout-title { color: var(--text); }
        [data-theme="dark"] .timeline-callout-meta { color: var(--text-secondary); }
        [data-theme="dark"] .timeline-note { color: var(--text-secondary); }
        [data-theme="dark"] .timeline-note a { color: var(--brand-teal); }
        [data-theme="dark"] .timeline-item-next .timeline-title { color: var(--brand-teal); }

        /* Nearby Nurseries */
        .nursery-pipeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .nursery-pipeline-card { background: var(--paper); border-radius: var(--radius-md); padding: 1rem; border: 1px solid var(--gray-200); transition: all 0.2s; }
        .nursery-pipeline-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); }
        .nursery-pipeline-card h4 { font-size: 0.9375rem; color: var(--gray-900); margin-bottom: 0.25rem; }
        .nursery-pipeline-card .nursery-meta { font-size: 0.8125rem; color: var(--gray-500); }
        .nursery-pipeline-card .nursery-dist { font-size: 0.75rem; color: var(--teal-600); font-weight: 500; margin-top: 0.5rem; }
        @media (max-width: 768px) { .nursery-pipeline-grid { grid-template-columns: 1fr; } }

        /* Reviews */
        .reviews-container { display: flex; flex-direction: column; gap: 1rem; }
        .review-card { background: var(--paper); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.25rem; }
        .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
        .review-author { font-weight: 600; font-size: 0.9375rem; color: var(--gray-900); }
        .review-date { font-size: 0.75rem; color: var(--gray-400); }
        .review-stars { color: var(--brand-sun); font-size: 0.875rem; letter-spacing: 2px; margin-bottom: 0.5rem; }
        .review-text { font-size: 0.875rem; color: var(--gray-600); line-height: 1.5; }
        .review-cta { text-align: center; padding: 1.5rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .review-cta p { font-size: 0.875rem; color: var(--gray-500); margin-bottom: 0.75rem; }
        .btn-review { padding: 0.625rem 1.5rem; border: 2px solid var(--teal-500); border-radius: var(--radius-md); background: var(--paper); color: var(--teal-600); font-weight: 600; cursor: pointer; font-size: 0.875rem; }
        .btn-review:hover { background: var(--teal-50); }
        .btn-review:disabled { opacity: 0.55; cursor: not-allowed; }
        .review-locked { text-align: center; padding: 2rem; }
        .reviews-empty { padding: 1.25rem; background: var(--gray-50); border-radius: var(--radius-md); color: var(--gray-600); font-size: 0.9375rem; text-align: center; }
        .review-pending { border-left: 3px solid var(--brand-sun, #F5B400); background: color-mix(in srgb, var(--brand-sun, #F5B400) 6%, var(--paper)); }
        .review-pending-pill { display: inline-block; margin-left: 0.5rem; padding: 0.125rem 0.5rem; background: var(--brand-sun, #F5B400); color: #4a3600; border-radius: var(--radius-full, 999px); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; }
        .review-form { margin-top: 1.5rem; padding: 1.5rem; background: var(--gray-50); border-radius: var(--radius-md); border: 1px solid var(--gray-200); }
        .review-form h4 { margin: 0 0 0.25rem 0; font-size: 1rem; font-weight: 700; color: var(--gray-900); }
        .review-form-hint { font-size: 0.8125rem; color: var(--gray-600); margin-bottom: 1rem; }
        .review-form-hint a { color: var(--brand-teal-deep); text-decoration: underline; }
        .review-form-row { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.875rem; }
        .review-form-row label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-800); }
        .review-form-row select, .review-form-row textarea { width: 100%; padding: 0.625rem; border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: 0.875rem; background: var(--paper); color: var(--gray-900); font-family: inherit; }
        .review-form-row textarea { resize: vertical; min-height: 90px; }
        .review-star-select { display: inline-flex; gap: 0.25rem; }
        .review-star { background: transparent; border: none; color: var(--gray-300); font-size: 1.5rem; cursor: pointer; padding: 0 0.125rem; line-height: 1; transition: color 0.1s; }
        .review-star.on { color: var(--brand-sun, #F5B400); }
        .review-star:hover { transform: scale(1.1); }
        .review-charcount { font-size: 0.6875rem; color: var(--gray-500); text-align: right; }
        .review-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.25rem; }
        .review-form-status { font-size: 0.8125rem; color: var(--gray-600); }
        .review-form-status-ok { color: var(--brand-teal-deep); font-weight: 600; }
        .review-form-status-err { color: #B12A00; font-weight: 600; }
        [data-theme="dark"] .reviews-empty { background: var(--bg); color: var(--text-body); }
        [data-theme="dark"] .review-pending { background: color-mix(in srgb, var(--brand-sun, #F5B400) 12%, var(--bg-elevated)); }
        [data-theme="dark"] .review-form { background: var(--bg); border-color: var(--border); }
        [data-theme="dark"] .review-form h4 { color: var(--text); }
        [data-theme="dark"] .review-form-hint { color: var(--text-secondary); }
        [data-theme="dark"] .review-form-hint a { color: var(--brand-teal); }
        [data-theme="dark"] .review-form-row label { color: var(--text-body); }
        [data-theme="dark"] .review-form-row select,
        [data-theme="dark"] .review-form-row textarea { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
        [data-theme="dark"] .review-charcount { color: var(--text-secondary); }
        [data-theme="dark"] .review-form-status { color: var(--text-secondary); }
        [data-theme="dark"] .review-form-status-ok { color: var(--brand-teal); }
        .review-locked p { color: var(--gray-500); font-size: 0.875rem; margin-bottom: 0.75rem; }

        /* School Photo Placeholder */
        .school-photo-banner { max-width: 1200px; margin: -1rem auto 1.5rem; padding: 0 1.5rem; }
        .school-photo-placeholder { height: 200px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--teal-50), var(--teal-100), var(--gray-100)); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
        .school-photo-placeholder .photo-overlay { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--gray-400); }
        .school-photo-placeholder .photo-overlay svg { opacity: 0.3; }
        .school-photo-placeholder .photo-overlay span { font-size: 0.8125rem; }

        /* Dark mode for new sections */
        /* (old vertical-bar fee chart classes removed — replaced by .fee-cmp-* horizontal layout) */
        [data-theme="dark"] .timeline::before { background: var(--border); }
        [data-theme="dark"] .timeline-dot { background: var(--bg-elevated); border-color: var(--brand-teal); }
        [data-theme="dark"] .timeline-dot.active { background: var(--brand-teal); }
        [data-theme="dark"] .timeline-title { color: var(--text); }
        [data-theme="dark"] .timeline-desc { color: #8b8fa0; }
        [data-theme="dark"] .nursery-pipeline-card { background: var(--bg-elevated); border-color: var(--border); }
        [data-theme="dark"] .nursery-pipeline-card h4 { color: var(--text); }
        [data-theme="dark"] .review-card { background: var(--bg-elevated); border-color: var(--border); }
        [data-theme="dark"] .review-author { color: var(--text); }
        [data-theme="dark"] .review-cta { background: var(--bg); }
        [data-theme="dark"] .school-photo-placeholder { background: linear-gradient(135deg, #0a2a30, var(--bg), var(--bg-elevated)); }
        .difficulty-open { color: var(--gray-600); }

        /* Demand Section */
        .demand-level { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9375rem; margin-bottom: 1rem; }
        .demand-high   { background: var(--rating-weak-tint);      color: var(--rating-weak); }
        .demand-medium { background: var(--rating-acceptable-tint); color: var(--rating-acceptable-fg); }
        .demand-low    { background: var(--brand-teal-tint);        color: var(--brand-teal-deep); }
        .demand-factors { list-style: none; padding: 0; margin: 0.75rem 0 0; }
        .demand-factors li { padding: 0.5rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.875rem; color: var(--gray-600); display: flex; align-items: flex-start; gap: 0.5rem; }
        .demand-factors li:last-child { border-bottom: none; }
        .demand-advice { margin-top: 1rem; padding: 0.75rem; background: var(--teal-50); border-radius: var(--radius-md); font-size: 0.8125rem; color: var(--teal-700); }

        /* Category Ratings */
        .cat-ratings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
        .cat-rating-item { padding: 0.75rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .cat-rating-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; margin-bottom: 0.25rem; }
        .cat-rating-value { font-weight: 600; font-size: 0.875rem; }

        /* Quick Facts */
        .quick-facts-list { list-style: none; padding: 0; margin: 0; }
        .quick-facts-list li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.8125rem; }
        .quick-facts-list li:last-child { border-bottom: none; }
        .quick-facts-list .qf-label { color: var(--gray-500); }
        .quick-facts-list .qf-value { color: var(--gray-800); font-weight: 500; }
        /* Location & Transport card */
        .lt-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .lt-row { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.625rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.875rem; }
        .lt-row:last-child { border-bottom: none; }
        .lt-label { color: var(--gray-500); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
        .lt-value { color: var(--gray-900); font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
        .lt-value strong { font-weight: 600; }
        .lt-arabic { font-size: 0.875rem; color: var(--gray-500); font-weight: 400; }
        .lt-meta { width: 100%; font-size: 0.75rem; color: var(--gray-500); font-weight: 400; margin-top: 0.125rem; }
        .lt-source { font-size: 0.6875rem; color: var(--gray-400); margin-top: 0.75rem; line-height: 1.4; }
        .metro-badge { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: var(--radius-full, 999px); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: white; }
        .metro-red    { background: #C8102E; }
        .metro-green  { background: #00843D; }
        .metro-purple { background: #6E2585; }
        .metro-blue   { background: #003DA5; }
        .metro-expo   { background: #5A2D81; }
        [data-theme="dark"] .lt-row { border-bottom-color: var(--border); }
        [data-theme="dark"] .lt-label { color: var(--text-secondary); }
        [data-theme="dark"] .lt-value { color: var(--text); }
        [data-theme="dark"] .lt-arabic, [data-theme="dark"] .lt-meta { color: var(--text-secondary); }
        [data-theme="dark"] .lt-source { color: var(--text-secondary); opacity: 0.8; }

        /* Google reviews card */
        .gr-headline { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.875rem; padding: 0.875rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .gr-rating { font-size: 2rem; font-weight: 700; color: var(--brand-ink); line-height: 1; font-variant-numeric: tabular-nums; }
        .gr-meta { display: flex; flex-direction: column; gap: 0.125rem; }
        .gr-stars { color: var(--brand-sun, #F5B400); font-size: 0.9375rem; letter-spacing: 1px; line-height: 1.2; }
        .gr-count { font-size: 0.8125rem; color: var(--gray-600); }
        .gr-empty { font-size: 0.875rem; color: var(--gray-500); margin-bottom: 0.875rem; padding: 0.875rem; background: var(--gray-50); border-radius: var(--radius-md); }
        .gr-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1rem; background: var(--paper); border: 1px solid var(--gray-300); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--gray-800); text-decoration: none; transition: all 0.15s; }
        .gr-link:hover { background: var(--gray-50); border-color: var(--brand-teal); color: var(--brand-teal-deep); }
        .gr-arrow { font-size: 0.75rem; opacity: 0.6; }
        .gr-source { font-size: 0.6875rem; color: var(--gray-400); margin-top: 0.75rem; line-height: 1.5; }
        [data-theme="dark"] .gr-headline { background: var(--bg); }
        [data-theme="dark"] .gr-rating { color: var(--text); }
        [data-theme="dark"] .gr-count { color: var(--text-secondary); }
        [data-theme="dark"] .gr-empty { background: var(--bg); color: var(--text-secondary); }
        [data-theme="dark"] .gr-link { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
        [data-theme="dark"] .gr-link:hover { background: var(--bg); }
        [data-theme="dark"] .gr-source { color: var(--text-secondary); opacity: 0.8; }

        /* Fee Calculator */
        .fee-calc-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
        .fee-calc-row label { font-size: 0.875rem; color: var(--gray-600); min-width: 100px; }
        .fee-calc-row select, .fee-calc-row input { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-size: 0.875rem; flex: 1; }
        .fee-total { margin-top: 1rem; padding: 1rem; background: var(--teal-50); border-radius: var(--radius-md); text-align: center; }
        .fee-total-value { font-size: 1.5rem; font-weight: 700; color: var(--teal-700); }
        .fee-total-label { font-size: 0.8125rem; color: var(--teal-600); }

        /* Fee history */
        .fh-headline { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
        .fh-summary { display: flex; flex-direction: column; gap: 0.125rem; }
        .fh-pct { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
        .fh-pct.fh-up { color: var(--brand-coral, #E87B58); }
        .fh-pct.fh-down { color: var(--brand-teal-deep); }
        .fh-summary-label { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
        .fh-yoy { font-size: 0.8125rem; color: var(--gray-600); text-align: right; padding-top: 0.25rem; }
        .fh-yoy .fh-up { color: var(--brand-coral, #E87B58); font-weight: 600; }
        .fh-yoy .fh-down { color: var(--brand-teal-deep); font-weight: 600; }
        .fh-sparkline { width: 100%; height: 60px; display: block; margin-bottom: 0.75rem; overflow: visible; }
        .fh-line { fill: none; stroke: var(--brand-teal-deep); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
        .fh-dot  { fill: var(--brand-teal-deep); }
        .fh-table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; margin-bottom: 0.5rem; }
        .fh-table th { text-align: left; color: var(--gray-500); font-weight: 500; padding: 0.375rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
        .fh-table td { padding: 0.375rem 0; color: var(--gray-800); border-bottom: 1px solid var(--gray-100); font-variant-numeric: tabular-nums; }
        .fh-table tbody tr:last-child td { border-bottom: none; font-weight: 600; }
        .fh-source { font-size: 0.6875rem; color: var(--gray-400); margin-top: 0.5rem; line-height: 1.5; }
        .fh-source a { color: var(--brand-teal-deep); text-decoration: underline; }
        [data-theme="dark"] .fh-line, [data-theme="dark"] .fh-dot { stroke: var(--brand-teal); fill: var(--brand-teal); }
        [data-theme="dark"] .fh-summary-label { color: var(--text-secondary); }
        [data-theme="dark"] .fh-yoy { color: var(--text-secondary); }
        [data-theme="dark"] .fh-table th { color: var(--text-secondary); border-bottom-color: var(--border); }
        [data-theme="dark"] .fh-table td { color: var(--text); border-bottom-color: var(--border); }
        [data-theme="dark"] .fh-source { color: var(--text-secondary); }
        [data-theme="dark"] .fh-source a { color: var(--brand-teal); }
        [data-theme="dark"] .fh-pct.fh-down { color: var(--brand-teal); }

        /* Q&A */
        .qa-empty { text-align: center; padding: 1.5rem; color: var(--gray-500); font-size: 0.875rem; }
        .qa-intro { font-size: 0.875rem; color: var(--gray-600); margin: 0 0 1rem; }
        .qa-faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .qa-faq { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 0; background: var(--paper); overflow: hidden; }
        .qa-faq summary { padding: 0.875rem 1rem; cursor: pointer; font-weight: 600; color: var(--gray-900); font-size: 0.9375rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
        .qa-faq summary::after { content: '+'; font-size: 1.25rem; color: var(--gray-500); font-weight: 400; transition: transform 0.15s; }
        .qa-faq[open] summary::after { content: '−'; }
        .qa-faq summary::-webkit-details-marker { display: none; }
        .qa-faq summary:hover { background: var(--gray-50); }
        .qa-faq-answer { padding: 0 1rem 1rem; font-size: 0.875rem; color: var(--gray-700); line-height: 1.55; border-top: 1px solid var(--gray-100); }
        .qa-faq-answer ul.qa-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
        .qa-faq-answer ul.qa-list li { margin-bottom: 0.375rem; }
        .qa-faq-answer p { margin: 0.5rem 0 0; }
        .qa-faq-answer strong { color: var(--gray-900); }
        .qa-form-wrap { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-200); }
        .qa-form { margin-top: 0.5rem; }
        .qa-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-size: 0.875rem; resize: vertical; min-height: 60px; font-family: inherit; box-sizing: border-box; }
        .qa-form button { margin-top: 0.5rem; padding: 0.5rem 1rem; background: var(--teal-600); color: white; border: none; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
        [data-theme="dark"] .qa-faq { background: var(--bg-elevated); border-color: var(--border); }
        [data-theme="dark"] .qa-faq summary { color: var(--text); }
        [data-theme="dark"] .qa-faq summary:hover { background: var(--bg); }
        [data-theme="dark"] .qa-faq-answer { color: var(--text-body); border-top-color: var(--border); }
        [data-theme="dark"] .qa-faq-answer strong { color: var(--text); }
        [data-theme="dark"] .qa-form-wrap { border-top-color: var(--border); }
        [data-theme="dark"] .qa-intro { color: var(--text-secondary); }

        /* Dark mode for new sections */
        [data-theme="dark"] .demand-high { background: #2d0a0a; }
        [data-theme="dark"] .demand-medium { background: #271a04; }
        [data-theme="dark"] .demand-low { background: #052e16; }
        [data-theme="dark"] .demand-advice { background: #062029; color: var(--brand-teal); }
        [data-theme="dark"] .cat-rating-item { background: var(--bg); }
        [data-theme="dark"] .cat-rating-label { color: #8b8fa0; }
        [data-theme="dark"] .cat-rating-value { color: var(--text); }
        [data-theme="dark"] .quick-facts-list .qf-value { color: var(--text); }
        [data-theme="dark"] .quick-facts-list li { border-bottom-color: var(--border); }
        [data-theme="dark"] .fee-total { background: #062029; }
        [data-theme="dark"] .fee-total-value { color: var(--brand-teal); }
        [data-theme="dark"] .fee-calc-row select, [data-theme="dark"] .fee-calc-row input { background: var(--bg); border-color: var(--border); color: var(--text); }
        [data-theme="dark"] .qa-form textarea { background: var(--bg); border-color: var(--border); color: var(--text); }
        [data-theme="dark"] #school-alert-email { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
        [data-theme="dark"] .demand-factors li { border-bottom-color: var(--border); color: var(--text-secondary); }

        /* Mobile responsive overrides - must come after base styles */
        @media (max-width: 768px) {
            .cat-ratings-grid { grid-template-columns: 1fr !important; }
            .demographics-grid { grid-template-columns: 1fr !important; }
            .fee-calc-row { flex-direction: column; gap: 0.375rem; }
            .fee-calc-row label { min-width: auto; }
            .school-photo-placeholder { height: 180px; }
            .action-buttons { flex-direction: column; }
            .action-buttons .action-btn { width: 100%; }
            .similar-schools-grid { grid-template-columns: 1fr !important; }
            .nursery-pipeline-grid { grid-template-columns: 1fr !important; }
            .hero-meta { gap: 0.75rem; }
            .school-hero h1 { font-size: 1.5rem; }
        }