/* ===================================================================
   CSE326 Portal - shared theme
   -------------------------------------------------------------------
   Tricolour landscape, kept deliberately pale so it never competes
   with the content sitting on top of it:

     top     saffron   - dusty mountain ridges
     middle  white     - soft clouds
     bottom  green     - deep wavy leafy band

   Everything is drawn with CSS gradients and inline SVG data-URLs, so
   there are no image files to ship and nothing to download at runtime.
   =================================================================== */

:root{
  /* tricolour */
  --saffron:#FF9933;
  --saffron-d:#E07B1E;
  --saffron-pale:#FFF1E0;
  --green:#138808;
  --green-d:#0B6205;
  --green-pale:#E9F7E7;
  --navy:#0B2545;

  /* neutrals */
  --ink:#14243B;
  --ink-2:#3C4A60;
  --mut:#6B7A90;
  --line:#E3E9F0;
  --card:#FFFFFF;
  --bg:#FBFCFE;

  /* status */
  --ok:#0F8A4C;
  --ok-bg:#EAF8F0;
  --warn:#B45309;
  --warn-bg:#FFF8EB;
  --bad:#C42B2B;
  --bad-bg:#FDF0F0;
  --code:#0E1B2E;

  --r:16px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(16,32,64,.05), 0 8px 26px rgba(16,32,64,.07);
  --shadow-lg:0 2px 6px rgba(16,32,64,.06), 0 22px 50px rgba(16,32,64,.11);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"Cascadia Code",Consolas,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;
}

/* ---------------------------------------------------------------
   THE LANDSCAPE
   Three fixed layers behind everything. position:fixed keeps them
   still while content scrolls, which reads as depth rather than a
   pattern sliding past.
   --------------------------------------------------------------- */
body::before,body::after{content:"";position:fixed;left:0;right:0;
  pointer-events:none;z-index:0}

/* saffron haze + dusty mountain ridges along the top */
body::before{
  top:0;height:62vh;
  background:
    /* far ridge - palest, sits highest */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cpath d='M0 190 L120 120 L230 168 L340 96 L470 172 L600 110 L720 176 L850 118 L980 180 L1110 122 L1240 178 L1360 132 L1440 172 L1440 260 L0 260 Z' fill='%23FF9933' fill-opacity='0.10'/%3E%3C/svg%3E")
      no-repeat 0 34%/100% 210px,
    /* near ridge - warmer, overlaps the far one */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 168 L150 92 L280 150 L420 74 L560 148 L700 88 L840 154 L980 96 L1130 158 L1280 104 L1440 150 L1440 200 L0 200 Z' fill='%23E07B1E' fill-opacity='0.09'/%3E%3C/svg%3E")
      no-repeat 0 62%/100% 170px,
    linear-gradient(180deg,
      rgba(255,153,51,.20) 0%,
      rgba(255,153,51,.10) 34%,
      rgba(255,240,224,.05) 62%,
      rgba(255,255,255,0) 100%);
}

/* soft clouds drifting through the white middle */
body{
  background-image:
    radial-gradient(760px 210px at 12% 34%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(620px 180px at 82% 42%, rgba(255,255,255,.92), transparent 70%),
    radial-gradient(520px 150px at 46% 55%, rgba(255,255,255,.85), transparent 72%);
  background-attachment:fixed;
}

/* deep wavy leafy green along the bottom */
body::after{
  bottom:0;height:46vh;
  background:
    /* leaf scatter, very faint */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23138808' fill-opacity='0.05'%3E%3Cpath d='M28 92c0-16 13-29 29-29 0 16-13 29-29 29z'/%3E%3Cpath d='M104 46c0 15-12 27-27 27 0-15 12-27 27-27z'/%3E%3Cpath d='M64 128c0-12 10-22 22-22 0 12-10 22-22 22z'/%3E%3C/g%3E%3C/svg%3E")
      repeat-x 0 100%/150px 150px,
    /* back wave */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 220 46 400 190 620 122 C 840 54 1020 178 1240 116 C 1330 90 1390 104 1440 118 L1440 220 L0 220 Z' fill='%23138808' fill-opacity='0.11'/%3E%3C/svg%3E")
      no-repeat 0 100%/100% 200px,
    /* front wave - deeper, slightly offset so the two read as layers */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath d='M0 96 C 200 158 380 40 600 96 C 820 152 1000 44 1220 92 C 1320 114 1390 110 1440 100 L1440 180 L0 180 Z' fill='%230B6205' fill-opacity='0.13'/%3E%3C/svg%3E")
      no-repeat 0 100%/100% 150px,
    linear-gradient(0deg,
      rgba(19,136,8,.14) 0%,
      rgba(19,136,8,.06) 44%,
      rgba(19,136,8,0) 100%);
}

/* every real element sits above the landscape */
header,main,footer,.wrap,.shell,.topbar{position:relative;z-index:1}

/* ---------------------------------------------------------------
   TOP BAR
   --------------------------------------------------------------- */
.topbar{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(227,233,240,.9);
  height:60px;display:flex;align-items:center;gap:18px;
  padding:0 22px;position:sticky;top:0;z-index:30;
}
.topbar .logo{display:flex;align-items:center;gap:10px;font-weight:800;
  font-size:16px;letter-spacing:-.2px;color:var(--ink);text-decoration:none}
.topbar .logo .mark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--saffron) 0 38%,#fff 38% 62%,
    var(--green) 62% 100%);
  box-shadow:0 2px 7px rgba(16,32,64,.18)}
.topbar nav{display:flex;gap:4px;align-items:center;margin-left:8px}
.topbar nav a{color:var(--ink-2);text-decoration:none;font-size:14px;
  font-weight:600;padding:8px 13px;border-radius:9px}
.topbar nav a:hover{background:var(--saffron-pale);color:var(--saffron-d)}
.topbar nav a.on{background:var(--saffron-pale);color:var(--saffron-d)}
.topbar .sp{flex:1}
.topbar .who{font-size:13px;color:var(--mut);font-weight:600}
@media(max-width:820px){.topbar nav a{padding:8px 9px;font-size:13px}}

/* ---------------------------------------------------------------
   LAYOUT + CARDS
   --------------------------------------------------------------- */
.wrap{max-width:1120px;margin:0 auto;padding:30px 22px 90px}
.wrap.narrow{max-width:900px}

.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--saffron-d);margin:0 0 7px}
h1,h2,h3{letter-spacing:-.4px;margin:0}
.sec-h{font-size:24px;font-weight:800;margin:0 0 6px}
.sec-p{color:var(--mut);margin:0 0 20px;font-size:15px;line-height:1.6}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card h2{font-size:18px;margin:0 0 12px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:11px;padding:11px 19px;font-weight:700;font-size:14.5px;
  cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.2;
  transition:transform .12s ease, box-shadow .12s ease, background .15s}
.btn:active{transform:translateY(1px)}
.btn.saf{background:linear-gradient(135deg,var(--saffron),var(--saffron-d));
  color:#fff;box-shadow:0 4px 14px rgba(224,123,30,.30)}
.btn.saf:hover{box-shadow:0 6px 20px rgba(224,123,30,.40)}
.btn.grn{background:linear-gradient(135deg,#1AA30C,var(--green-d));color:#fff;
  box-shadow:0 4px 14px rgba(11,98,5,.28)}
.btn.grn:hover{box-shadow:0 6px 20px rgba(11,98,5,.38)}
.btn.ghost{background:rgba(255,255,255,.9);border:1px solid var(--line);
  color:var(--ink)}
.btn.ghost:hover{border-color:var(--saffron);color:var(--saffron-d)}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px}

/* ---------------------------------------------------------------
   PILLS + BADGES
   --------------------------------------------------------------- */
.pill{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 11px;
  border-radius:999px;letter-spacing:.02em}
.pill.saf{background:var(--saffron-pale);color:var(--saffron-d)}
.pill.grn{background:var(--green-pale);color:var(--green-d)}
.pill.gry{background:#F1F4F8;color:var(--mut)}
.pill.ai{background:linear-gradient(135deg,#EEF2FF,#F5F3FF);color:#5B21B6}

/* ---------------------------------------------------------------
   CONTENT TYPOGRAPHY (lesson bodies)
   --------------------------------------------------------------- */
.prose p{line-height:1.72;margin:0 0 12px;color:var(--ink-2)}
.prose ul,.prose ol{line-height:1.75;padding-left:23px;margin:0 0 12px;
  color:var(--ink-2)}
.prose li{margin-bottom:6px}
.prose h4{margin:18px 0 8px;font-size:15.5px;color:var(--ink)}
.prose b,.prose strong{color:var(--ink)}
code{background:#F1F5F9;padding:2px 6px;border-radius:5px;font-family:var(--mono);
  font-size:12.8px;color:#12263F}
pre.code{background:var(--code);color:#DCE7F5;padding:15px 17px;
  border-radius:12px;overflow:auto;font-family:var(--mono);font-size:13px;
  line-height:1.6;margin:0 0 13px}
.callout{background:linear-gradient(90deg,var(--saffron-pale),rgba(255,241,224,.35));
  border-left:4px solid var(--saffron);padding:12px 16px;
  border-radius:0 10px 10px 0;margin:13px 0;line-height:1.65}
table.tbl{width:100%;border-collapse:collapse;margin:11px 0 15px;font-size:14px}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:9px 11px;
  text-align:left;vertical-align:top;line-height:1.55}
table.tbl th{background:#F7F9FC;font-weight:800;color:var(--ink)}

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.foot{position:relative;z-index:1;text-align:center;color:var(--mut);
  font-size:13px;padding:26px 20px 40px;line-height:1.7}
.foot b{color:var(--green-d)}

/* ---------------------------------------------------------------
   MISC
   --------------------------------------------------------------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:11px;
  font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:99;
  box-shadow:var(--shadow-lg)}
.toast.on{opacity:1}
.empty{text-align:center;color:var(--mut);padding:56px 20px;line-height:1.75}
.spin{display:inline-block;width:15px;height:15px;border:2px solid #CBD5E1;
  border-top-color:var(--saffron);border-radius:50%;animation:sp .7s linear infinite;
  vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media print{.topbar,.noprint{display:none}
  body::before,body::after{display:none}body{background:#fff}}