/* Professor Kiosk shared design system.
   Loaded by every page; each page adds its own accent and page-specific rules. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --coral: #ff7a66;
  --yellow: #ffd23f;
  --teal: #3dd1b5;
  --purple: #a78bfa;
  --pink: #ff8fc7;
  --sky: #7cc4ff;
  --navy: #1d1b4f;       /* fixed dark: text on colored surfaces, footer, primary buttons */
  --cream: #fff4dc;

  --bg: #fff4dc;
  --dots: rgba(29, 27, 79, 0.10);
  --surface: #fffbf0;     /* cards and panels */
  --surface2: #fff0c8;    /* soft fills inside cards */
  --ink: #1d1b4f;         /* body text and outlines */
  --ink2: #4a4880;        /* secondary text */
  --line: #1d1b4f;        /* outlines */
  --shadow-c: #1d1b4f;
  --link: #1d1b4f;
  --tint-coral: #ffd9d2;
  --tint-teal: #c8f3ea;
  --tint-purple: #e3dbff;
  --tint-yellow: #fff0b0;

  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --hard: 3px 3px 0 var(--shadow-c);
  --hard-sm: 2px 2px 0 var(--shadow-c);
}

html[data-theme="dark"] {
  --bg: #14153a;
  --dots: rgba(255, 255, 255, 0.07);
  --surface: #1f2150;
  --surface2: #2a2c66;
  --ink: #f3f0ff;
  --ink2: #b9b6e6;
  --line: #8f93e8;
  --shadow-c: #07081f;
  --link: #ffd23f;
  --tint-coral: #4a2335;
  --tint-teal: #17413f;
  --tint-purple: #35306b;
  --tint-yellow: #4a4220;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.k-main { flex: 1; }

[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.k-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- Buttons and pills ---- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 700 14px/1 var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: var(--hard-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .1s, box-shadow .1s;
}
.k-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-c); }
.k-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--shadow-c); }
.k-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--hard-sm); }
.k-btn[aria-pressed="true"], .k-btn.on { background: var(--navy); color: var(--yellow); border-color: var(--navy); }
.k-btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
html[data-theme="dark"] .k-btn.primary { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.k-btn.coral { background: var(--tint-coral); }
.k-btn.purple { background: var(--tint-purple); }
.k-btn.yellow { background: var(--yellow); color: var(--navy); }

.k-tag {
  display: inline-block;
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--yellow);
  color: var(--navy);
}
.k-tag.navy { background: var(--navy); color: #fff; }

/* ---- Top bar (tool pages) ---- */
.k-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; max-width: 1040px; margin: 0 auto; width: 100%; }
.k-top .right { display: flex; gap: 10px; align-items: center; }
.k-top .k-btn { padding: 7px 14px; font-size: 13px; }
.k-top { flex-wrap: wrap; }
@media (max-width: 480px) { .k-top { padding: 12px 14px; } .k-top .k-btn { padding: 7px 11px; font-size: 12px; } .k-top .right { gap: 6px; } }
.k-top .night { background: var(--navy); color: #fff; border-color: var(--navy); }
html[data-theme="dark"] .k-top .night { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* ---- Colored hero band (tool pages) ---- */
.k-hero {
  background: var(--hero, var(--coral));
  color: var(--navy);
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
}
.k-hero .k-wrap { padding-top: 34px; padding-bottom: 38px; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.k-hero h1 { margin: 12px 0 8px; font-size: clamp(32px, 6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.k-hero p { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.45; }
.k-hero .art { flex: none; }
@media (max-width: 640px) { .k-hero .art { display: none; } }

/* ---- Cards ---- */
.k-panel {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--accent, var(--shadow-c));
}

/* ---- Footer ---- */
.k-foot { margin-top: 56px; background: var(--navy); color: #fff; border-top: 0; position: relative; }
html[data-theme="dark"] .k-foot { background: #0b0c26; }
.k-foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
  background: linear-gradient(90deg, var(--coral) 0 16.66%, var(--yellow) 0 33.33%, var(--teal) 0 50%, var(--sky) 0 66.66%, var(--purple) 0 83.33%, var(--pink) 0);
}
.k-foot .k-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.k-foot strong { font-size: 16px; line-height: 1.3; }
.k-foot .links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
.k-foot a { text-decoration: underline; text-underline-offset: 3px; }
.k-foot .links { align-items: center; }
.k-foot a.by { color: var(--yellow); display: inline-flex; align-items: center; gap: 8px; }
.k-foot .footer-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--yellow); }
.k-foot a.kofi {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--yellow); color: var(--navy); border: 2px solid var(--yellow);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 800;
  box-shadow: 3px 3px 0 var(--coral); transition: transform .1s;
}
.k-foot a.kofi:hover { transform: translate(-1px, -1px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}