/* Donat Sciences and Maths: shared colour messages and easy-to-see buttons.
   Loaded by every page after its own styles.
   Message colours: blue = good to know, green = tip, orange = important, purple = key idea.
   Each message also has an icon and a bold title, so the meaning never depends on colour alone. */
:root{
  --ui-info-bg:#e4f1fb; --ui-info-line:#0a68a6; --ui-info-ink:#0b4a75;
  --ui-tip-bg:#e2f4ea;  --ui-tip-line:#1b7f4b;  --ui-tip-ink:#135a35;
  --ui-warn-bg:#fff0d9; --ui-warn-line:#c25e00; --ui-warn-ink:#8a4100;
  --ui-key-bg:#f1eafa;  --ui-key-line:#6b3fa0;  --ui-key-ink:#4e2b78;
  --ui-ico-ink:#ffffff;
  --ui-btn:var(--blue, var(--accent, #0a68a6));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ui-info-bg:#0f2a3d; --ui-info-line:#5cc4f0; --ui-info-ink:#9fdcf7;
    --ui-tip-bg:#0f2a1c;  --ui-tip-line:#5fd394;  --ui-tip-ink:#a5ebc3;
    --ui-warn-bg:#33210a; --ui-warn-line:#f5a54a; --ui-warn-ink:#ffcf94;
    --ui-key-bg:#261a38;  --ui-key-line:#b99bf0;  --ui-key-ink:#d9c8fa;
    --ui-ico-ink:#0b1622;
  }
}
:root[data-theme="dark"]{
  --ui-info-bg:#0f2a3d; --ui-info-line:#5cc4f0; --ui-info-ink:#9fdcf7;
  --ui-tip-bg:#0f2a1c;  --ui-tip-line:#5fd394;  --ui-tip-ink:#a5ebc3;
  --ui-warn-bg:#33210a; --ui-warn-line:#f5a54a; --ui-warn-ink:#ffcf94;
  --ui-key-bg:#261a38;  --ui-key-line:#b99bf0;  --ui-key-ink:#d9c8fa;
  --ui-ico-ink:#0b1622;
}
html.dpa-contrast{
  --ui-info-bg:#000; --ui-info-line:#7fe7ff; --ui-info-ink:#7fe7ff;
  --ui-tip-bg:#000;  --ui-tip-line:#7dff9a;  --ui-tip-ink:#7dff9a;
  --ui-warn-bg:#000; --ui-warn-line:#ffd500; --ui-warn-ink:#ffd500;
  --ui-key-bg:#000;  --ui-key-line:#ffffff;  --ui-key-ink:#ffffff;
  --ui-ico-ink:#000;
}

/* ---------- colour messages ---------- */
.msg{display:flex; gap:12px; align-items:flex-start; background:var(--ui-c-bg); border:1.5px solid var(--ui-c-line); border-left-width:6px; border-radius:12px; padding:12px 14px; color:var(--ink, var(--text)); line-height:1.5;}
.msg > div{min-width:0;}
.msg b{display:block; color:var(--ui-c-ink); font-weight:800; margin-bottom:2px;}
.msg-ico{flex:none; width:28px; height:28px; border-radius:50%; background:var(--ui-c-line); color:var(--ui-ico-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; font-family:Georgia, serif; margin-top:1px;}
.msg-info{--ui-c-bg:var(--ui-info-bg); --ui-c-line:var(--ui-info-line); --ui-c-ink:var(--ui-info-ink);}
.msg-tip {--ui-c-bg:var(--ui-tip-bg);  --ui-c-line:var(--ui-tip-line);  --ui-c-ink:var(--ui-tip-ink);}
.msg-warn{--ui-c-bg:var(--ui-warn-bg); --ui-c-line:var(--ui-warn-line); --ui-c-ink:var(--ui-warn-ink);}
.msg-key {--ui-c-bg:var(--ui-key-bg);  --ui-c-line:var(--ui-key-line);  --ui-c-ink:var(--ui-key-ink);}

/* quiz pages: the Part A / Part B advice becomes a green tip */
.part-note{background:var(--ui-tip-bg); border:1.5px solid var(--ui-tip-line); border-left-width:6px; border-radius:12px; padding:10px 12px; color:var(--text, var(--ink)) !important; font-weight:600;}

/* ---------- buttons that are easy to see ---------- */
.btn{min-height:48px; justify-content:center; cursor:pointer;}
.btn.primary, .btn-primary{box-shadow:0 2px 0 rgba(0,0,0,.18);}
.btn.ghost, .btn-ghost{border:2px solid var(--ui-btn) !important; color:var(--ui-btn) !important; background:var(--surface, #fff);}
.btn:hover{filter:brightness(1.07);}

/* top menu: every link is a clear pill */
nav.links{gap:8px !important;}
nav.links a{background:var(--blue-soft); color:var(--blue) !important; padding:7px 13px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--blue) 40%, transparent); font-weight:700 !important;}
nav.links a:hover{background:var(--blue); color:var(--surface) !important;}
@media (max-width:640px){
  header.top{position:static !important;}
  nav.links{flex-wrap:wrap !important; overflow:visible !important;}
  nav.links a{font-size:14.5px !important;}
}

/* homepage cards: the action at the bottom looks like a button */
.level .go{align-self:flex-start; background:var(--accent); color:var(--accent-ink) !important; padding:9px 16px; border-radius:10px;}
.note::after{content:"Open \2192"; margin-left:auto; flex:none; font-weight:700; font-size:14px; padding:7px 12px; border-radius:10px; background:var(--blue); color:var(--surface);}

/* back links on inner pages */
a.back{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border-radius:10px; border:2px solid var(--ui-btn); color:var(--ui-btn) !important; background:var(--surface, #fff); font-weight:700; text-decoration:none;}
a.back.ui-home{align-self:flex-start;}

/* quiz unit list: "Start" is a real button */
.unit-card .badge:not(.done){background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; font-size:13px; padding:7px 13px;}
.back-btn{border:2px solid var(--accent) !important; color:var(--accent) !important; font-weight:700;}

html.dpa-contrast .level .go, html.dpa-contrast .note::after, html.dpa-contrast .unit-card .badge:not(.done){background:#ffd500 !important; color:#000 !important;}
html.dpa-contrast nav.links a{background:#000; border-color:#7fe7ff;}

/* header: the name stays on one line; the menu moves under it when space is short */
.top .wrap{flex-wrap:wrap; row-gap:10px;}
.brand{white-space:nowrap;}
@media (min-width:641px){ nav.links a{font-size:14.5px; padding:6px 12px;} }
.join > *{min-width:0;}

/* top menu: the current page is a filled pill (underlined too, so it never depends on colour alone) */
nav.links a[aria-current="page"]{background:var(--blue); color:var(--surface) !important; border-color:var(--blue); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;}
html.dpa-contrast nav.links a[aria-current="page"]{background:#ffd500; color:#000 !important; border-color:#ffd500;}

/* homepage hub: big tiles, each one a link, coloured like the messages (icon + title as well as colour) */
.tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px;}
.tiles li{display:flex; min-width:0;}
.tile{flex:1; display:grid; grid-template-columns:52px 1fr; grid-template-areas:"ico title" "ico text" "ico go"; column-gap:14px; row-gap:3px; align-items:start;
  background:var(--ui-c-bg); border:2px solid var(--ui-c-line); border-left-width:8px; border-radius:16px; padding:16px 16px 16px 14px; text-decoration:none; color:var(--ink, #10243a);
  transition:transform .15s, box-shadow .15s;}
.tile:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,36,58,.14);}
.tile:focus-visible{outline:3px solid var(--ui-c-line); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .tile, .tile:hover{transition:none; transform:none;} }
.tile-ico{grid-area:ico; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1; background:var(--surface, #fff); border:2px solid var(--ui-c-line);}
.tile-title{grid-area:title; font-family:var(--display); font-weight:800; font-size:20px; line-height:1.15; color:var(--ui-c-ink);}
.tile-text{grid-area:text; font-size:15.5px; line-height:1.4; color:var(--ink-soft);}
.tile-go{grid-area:go; justify-self:start; margin-top:8px; font-weight:800; font-size:14.5px; padding:6px 14px; border-radius:10px; background:var(--ui-c-line); color:var(--ui-ico-ink);}
.tile-info{--ui-c-bg:var(--ui-info-bg); --ui-c-line:var(--ui-info-line); --ui-c-ink:var(--ui-info-ink);}
.tile-tip {--ui-c-bg:var(--ui-tip-bg);  --ui-c-line:var(--ui-tip-line);  --ui-c-ink:var(--ui-tip-ink);}
.tile-warn{--ui-c-bg:var(--ui-warn-bg); --ui-c-line:var(--ui-warn-line); --ui-c-ink:var(--ui-warn-ink);}
.tile-key {--ui-c-bg:var(--ui-key-bg);  --ui-c-line:var(--ui-key-line);  --ui-c-ink:var(--ui-key-ink);}
html.dpa-contrast .tile-text{color:#fff;}
@media (max-width:480px){ .tile{grid-template-columns:44px 1fr; column-gap:12px; padding:12px 12px 12px 10px;} .tile-ico{width:44px; height:44px; font-size:23px;} .tile-title{font-size:19px;} .tile-go{margin-top:6px;} }

/* "Next" row at the end of the inner pages */
section.block.next-block{padding-block:26px 34px;}
.next-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.next-label{font-family:var(--mono, monospace); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-right:4px; width:100%;}

/* pictures (icons) with meaning, like the aims cards: menu, feature cards, contact cards, buying steps */
nav.links a .ni{margin-right:5px; font-size:.95em;}
.pillar{position:relative; display:flex; flex-direction:column; gap:2px; border-left:6px solid var(--ui-c-line, var(--line));}
.pillar .pi{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; background:var(--ui-c-bg, var(--blue-soft)); margin-bottom:8px;}
.pillar b{color:var(--ui-c-ink, var(--blue)) !important;}
.pillars > .pillar:nth-child(4n+1){--ui-c-bg:var(--ui-info-bg); --ui-c-line:var(--ui-info-line); --ui-c-ink:var(--ui-info-ink);}
.pillars > .pillar:nth-child(4n+2){--ui-c-bg:var(--ui-tip-bg); --ui-c-line:var(--ui-tip-line); --ui-c-ink:var(--ui-tip-ink);}
.pillars > .pillar:nth-child(4n+3){--ui-c-bg:var(--ui-warn-bg); --ui-c-line:var(--ui-warn-line); --ui-c-ink:var(--ui-warn-ink);}
.pillars > .pillar:nth-child(4n+4){--ui-c-bg:var(--ui-key-bg); --ui-c-line:var(--ui-key-line); --ui-c-ink:var(--ui-key-ink);}
.card h3 .ci{display:inline-flex; width:38px; height:38px; border-radius:11px; align-items:center; justify-content:center; font-size:20px; background:var(--blue-soft); margin-right:10px; vertical-align:middle;}
.how li .hi{display:block; font-size:26px; line-height:1; margin-bottom:6px;}

/* second row under the subject tabs, once Physics is open: Physics · Quizzes · Books · Packs */
nav.subnav{background:var(--blue-soft); border-bottom:1px solid var(--line);}
nav.subnav .wrap{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-block:8px;}
nav.subnav a{display:inline-flex; align-items:center; gap:2px; text-decoration:none; font-weight:700; font-size:15px; color:var(--blue); background:var(--surface); border:1.5px solid color-mix(in srgb, var(--blue) 40%, transparent); border-radius:999px; padding:7px 14px; min-height:40px;}
nav.subnav a .ni{margin-right:5px;}
nav.subnav a.sn-home{background:transparent; border-color:transparent; padding-inline:4px 8px; font-family:var(--display); font-size:16px; color:var(--ink);}
nav.subnav a.sn-home::after{content:"\203A"; margin-left:8px; color:var(--ink-soft);}
nav.subnav a[aria-current="page"]:not(.sn-home){background:var(--blue); color:var(--surface); border-color:var(--blue);}
nav.subnav a:hover:not(.sn-home){border-color:var(--blue);}
html.dpa-contrast nav.subnav{background:#000;}
html.dpa-contrast nav.subnav a{background:#000; border-color:#7fe7ff;}
html.dpa-contrast nav.subnav a[aria-current="page"]:not(.sn-home){background:#ffd500; color:#000 !important;}
@media (max-width:480px){
  nav.subnav a.sn-home{display:none;}
  nav.subnav .wrap{gap:6px; flex-wrap:nowrap;}
  nav.subnav a{flex:1; justify-content:center; padding:7px 8px; font-size:15px;}
}

/* "Wari uzi ko? / Did you know?" information cards, in the style of NESA notices */
.nesa-card{position:relative; background:#1ba6dd; border-radius:24px; padding:22px 16px; overflow:hidden; margin:22px 0;}
.nesa-card::before{content:""; position:absolute; left:-30px; top:-24px; width:72%; height:120%; border:3px solid rgba(255,255,255,.55); border-radius:48px; transform:rotate(-8deg);}
.nesa-card::after{content:""; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.12);}
.nc-in{position:relative; z-index:1; background:#fff; color:#10243a; border-radius:28px; padding:22px 22px 20px; max-width:640px; box-shadow:0 8px 24px rgba(10,50,90,.18);}
.nc-head{margin:0 0 10px; line-height:.95;}
.nc-k1{display:block; font-family:var(--display, sans-serif); font-weight:800; font-size:clamp(30px,7vw,42px); color:#b97f00; text-transform:uppercase; letter-spacing:.01em;}
.nc-k2{display:block; font-family:var(--display, sans-serif); font-weight:800; font-size:clamp(26px,6vw,36px); color:#0a68a6; text-transform:uppercase;}
.nc-text{margin:0; font-size:18px; font-weight:600; line-height:1.45; color:#10243a;}
.nc-bar{height:7px; width:72%; background:#10243a; border-radius:2px; margin:16px 0 14px;}
.nc-how{margin:0 0 8px; font-weight:800; font-size:18px; color:#0a68a6;}
.nc-steps{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:6px; font-size:16.5px; color:#10243a;}
.nc-steps b, .nc-steps a{color:#0a4f80; font-weight:800;}
.nc-btn{display:inline-flex; align-items:center; margin-top:16px; min-height:46px; padding:10px 18px; border-radius:12px; background:#0a68a6; color:#fff !important; font-weight:800; text-decoration:none;}
.nc-btn:focus-visible{outline:3px solid #f2b705; outline-offset:2px;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nesa-card{background:#0f4c6e;} }
:root[data-theme="dark"] .nesa-card{background:#0f4c6e;}
html.dpa-contrast .nesa-card{background:#000; border:2px solid #ffd500;}
html.dpa-contrast .nc-in{background:#000; color:#fff; border:2px solid #fff;}
html.dpa-contrast .nc-text, html.dpa-contrast .nc-steps{color:#fff;}
html.dpa-contrast .nc-k1{color:#ffd500;} html.dpa-contrast .nc-k2, html.dpa-contrast .nc-how{color:#7fe7ff;}
html.dpa-contrast .nc-bar{background:#fff;}
html.dpa-contrast .nc-btn{background:#ffd500; color:#000 !important;}