/* One stylesheet for the whole institutional web tier. Every page links this
   instead of carrying its own <style> block. */

:root {
  --blue: #5E8AA0;
  --ink: #222;
  --panel: #F4F6F7;
  --line: #eee;
  --ok-bg: #eaf5ea; --ok: #2a7a2a;
  --err-bg: #fbeaea; --err: #b00;
  --amber: #FFB300; --amber-text: #b26a00; /* same accent as the game's Expert Mode */
}

/* ---- Public landing page (index.php) ------------------------------------
   ALL scoped under body.landing, because this stylesheet is shared with the
   dashboard/console pages and they must not inherit any of it. The landing
   page opts out of the shared centered-body rule entirely: the header and
   footer bands run the full viewport width, and .landing-wrap /
   .header-inner / .footer-inner hold the centered reading column. */

:root {
  --paper: #e3d7bd;          /* kraft "construction paper" ground */
  --paper-ink: #4a4034;      /* warm dark text for secondary copy on paper */
  --paper-line: rgba(92, 72, 42, .3);   /* dividing rules, tuned to the paper */
  --paper-card: #fbf8f1;     /* a lighter sheet laid on the paper */
  --paper-edge: rgba(120, 95, 55, .22);
}

body.landing {
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  /* Paper fibre speckle: greyscale fractal noise, inlined as a data URI so
     the page stays self-contained (no extra request, nothing to deploy). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.16'/%3E%3C/svg%3E");
}

/* Header band — the game's own header blue */
.site-header { background: var(--blue); color: #fff; text-align: center; }
.header-inner { max-width: 640px; margin: 0 auto; padding: 12px 16px 34px; }
.header-nav { text-align: right; margin-bottom: 12px; }
.header-nav a {
  color: #e6f1f6; font-size: .85em; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 1px;
}
.header-nav a:hover { color: #fff; border-bottom-color: #fff; }
.site-header h1 { color: #fff; font-size: 2.1em; margin: 0 0 6px; }
.site-header .tagline { color: #e2eef3; margin: 0; font-size: 1.05em; }

/* Tape-measure blade: an amber strip with ticks descending from its top
   edge, exactly like a real blade. Used as the page's signature divider —
   under the header and again above the footer. */
.tape-rule {
  height: 17px;
  background-color: var(--amber);
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.7) 0 2px, transparent 2px 48px),
    repeating-linear-gradient(to right, rgba(0,0,0,.42) 0 1px, transparent 1px 8px);
  background-size: 100% 13px, 100% 7px;
  background-position: top left, top left;
  background-repeat: repeat-x;
  border-bottom: 1px solid rgba(0,0,0,.22);
}

body.landing .landing-wrap { max-width: 640px; margin: 0 auto; padding: 30px 16px 10px; }

/* Cards read as sheets laid on the paper, so they get a real edge + shadow
   rather than the flat grey panel the logged-in pages use. */
body.landing .card {
  background: var(--paper-card);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 1px 3px rgba(80,60,30,.16);
}
body.landing .card:hover { border-color: rgba(94,138,160,.65); }

body.landing .main-cta {
  background: var(--amber); color: var(--amber-text);
  border-color: rgba(0,0,0,.18);
  padding: 26px 22px; margin: 0 0 14px;
}
body.landing .main-cta b { color: var(--amber-text); font-size: 1.45em; }

.landing-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.landing-duo .card { margin: 0; padding: 22px 18px; }
.landing-duo .card b { font-size: 1.12em; }

/* Section rules — the dividing lines between blocks of copy */
body.landing .section { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--paper-line); }
body.landing .section h2 { border-bottom: 0; padding: 0; margin: 0 0 10px; font-size: 1.25em; }
body.landing p { line-height: 1.55; }
body.landing .hint { color: var(--paper-ink); opacity: .8; }

.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; }
.price {
  background: var(--paper-card); border: 1px solid var(--paper-edge);
  border-radius: 8px; padding: 14px 12px; text-align: center;
}
.price b { display: block; font-size: 1.7em; color: var(--blue); line-height: 1.15; }
.price span { font-size: .82em; color: var(--paper-ink); }

/* Footer band — slightly lifted off the paper so it reads as its own zone */
body.landing .site-footer { margin-top: 42px; background: rgba(255,255,255,.3); }
.footer-inner {
  max-width: 640px; margin: 0 auto; padding: 24px 16px 30px;
  text-align: center; font-size: .86em; color: var(--paper-ink);
}
.footer-inner p { margin: 0 0 8px; }
.footer-brand { font-weight: bold; color: var(--blue); font-size: 1.1em; letter-spacing: .4px; }
.footer-inner a { color: var(--paper-ink); text-decoration: underline; }
.footer-inner a:hover { color: var(--blue); }
.footer-legal { margin: 14px 0 0; font-size: .92em; opacity: .75; }

@media (max-width: 520px) {
  .landing-duo, .price-row { grid-template-columns: 1fr; }
  .site-header h1 { font-size: 1.8em; }
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  max-width: 900px;
  margin: 24px auto;
  padding: 0 16px;
  color: var(--ink);
}
body.narrow { max-width: 440px; margin-top: 60px; }

h1 { color: var(--blue); font-size: 1.4em; }
h2 { color: var(--blue); border-bottom: 1px solid #ddd; padding-bottom: 4px; margin-top: 32px; }

a { color: var(--blue); }
a.logout { color: var(--err); }

/* Top-of-page nav row (Log out / Support / Back links) — a real flex bar
   above the h1, not a float, so a wrapping title never crowds into it. */
.page-nav { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 10px; }

/* Flash messages */
.notice { background: var(--ok-bg); color: var(--ok); padding: 8px 12px; border-radius: 4px; margin: 12px 0; }
.err    { background: var(--err-bg); color: var(--err); padding: 8px 12px; border-radius: 4px; margin: 12px 0; }
.hint   { font-size: .85em; color: #666; margin: -6px 0 14px; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .92em; }
th { background: var(--panel); }
tr.inactive { color: #999; }

code { background: var(--panel); padding: 2px 5px; border-radius: 3px; }

/* Buttons */
button, .btn {
  background: var(--blue); color: #fff; border: 0;
  padding: 9px 15px; border-radius: 4px; cursor: pointer; font-size: 1em;
}
button.link { background: none; color: var(--blue); text-decoration: underline; padding: 0; font-size: .9em; }
button.link.danger { color: var(--err); }
form.inline { display: inline; }

/* Forms */
label { display: block; font-size: .9em; color: #555; margin-top: 8px; }
input, select { padding: 7px; width: 100%; margin: 6px 0 4px; }
form.stack button { margin-top: 14px; }

/* Stat tiles (grandmaster overview) */
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.stat { background: var(--panel); border-radius: 8px; padding: 12px 18px; min-width: 100px; }
.stat b { display: block; font-size: 1.6em; color: var(--blue); }

/* Status / tier pills */
.pill { padding: 2px 8px; border-radius: 10px; font-size: .82em; white-space: nowrap; }
.pill.trial     { background: #fff3cd; color: #856404; }
.pill.paid      { background: #d4edda; color: #2a7a2a; }
.pill.comp      { background: #d1ecf1; color: #0c5460; }
.pill.active    { background: #d4edda; color: #2a7a2a; }
.pill.suspended { background: #f8d7da; color: #842029; }
.unclaimed { color: #999; }

/* Grandmaster support-mode banner */
.banner {
  background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 4px;
  margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.banner a { color: #fff; font-weight: bold; }

/* Install notice */
.install { background: #fff3cd; color: #856404; padding: 10px 14px; border-radius: 4px; margin: 12px 0; }
.install a { color: #856404; font-weight: bold; }

/* Join / landing cards */
.card { display: block; background: var(--panel); border-radius: 8px; padding: 18px; margin: 14px 0; text-decoration: none; color: var(--ink); }
.card b { display: block; color: var(--blue); font-size: 1.1em; margin-bottom: 4px; }

/* Join code tabs */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; background: var(--panel); color: var(--ink); font-size: .9em; }
.tabs button.on { background: var(--blue); color: #fff; }

/* The school's student sign-in link, wherever a teacher needs it */
.linkbox { background: var(--panel); border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
.linkbox b { display: block; color: var(--blue); margin-bottom: 6px; }
.linkbox code { display: inline-block; background: #fff; padding: 6px 10px; word-break: break-all; margin-right: 8px; }
.linkbox .hint { margin: 8px 0 0; }

/* Printable sign-in slips (handout.php). Sized so a slip survives being cut
   out and stuffed in a pocket: the code is the biggest thing on it. */
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.slip {
  border: 1px dashed #999; border-radius: 6px; padding: 14px 16px;
  break-inside: avoid; page-break-inside: avoid;
}
.slip-wide { margin-bottom: 18px; border-style: solid; border-color: var(--blue); }
.slip-class { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: #777; }
.slip-name { font-size: 1.25em; font-weight: bold; color: var(--ink); margin: 2px 0 8px; }
.slip-link { font-size: .74em; color: #555; word-break: break-all; margin-bottom: 10px; }
.slip-label { font-size: .7em; text-transform: uppercase; letter-spacing: .08em; color: #777; }
.slip-code {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.15em; font-weight: bold;
  letter-spacing: .03em; color: var(--ink); margin: 2px 0 8px; word-break: break-all;
}
.slip-foot { font-size: .72em; color: #777; line-height: 1.35; }

@media print {
  .noprint, .logout, .page-nav, .banner { display: none !important; }
  body { max-width: none; margin: 0; padding: 0; }
  .slips { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .slip { border-color: #666; }
  a { text-decoration: none; color: #000; }
}

/* Console lanes. The console spans two products with different customers, so
   each lane gets its own colour — institutional in the game's header blue,
   app in the game's amber accent — and every tool page wears its lane band so
   there's never a question about which world you're editing. */
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
@media (max-width: 760px) { .lanes { grid-template-columns: 1fr; } }
.lanecard { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; border-top-width: 4px; }
.lanecard-inst { border-top-color: var(--blue); }
.lanecard-app  { border-top-color: var(--amber); }
.lanecard-head { font-size: 1.25em; font-weight: bold; margin-bottom: 4px; }
.lanecard-inst .lanecard-head { color: var(--blue); }
.lanecard-app  .lanecard-head { color: var(--amber-text); }
.lanecard-sub { font-size: .88em; color: #666; margin: 0 0 12px; }
.lanecard-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: .85em; color: #555; }
.lanecard-stats b { color: var(--ink); font-size: 1.25em; margin-right: 3px; }
.lanecard-links { list-style: none; padding: 0; margin: 0; }
.lanecard-links li { margin-bottom: 8px; font-size: .88em; color: #666; line-height: 1.45; }

.lane { padding: 7px 13px; border-radius: 4px; margin: 0 0 16px; font-size: .85em; }
.lane-inst { background: #eaf1f5; color: #2f5568; }
.lane-app  { background: #fff6e0; color: var(--amber-text); }

/* Comment triage: star toggle + a destructive bulk action that should look
   destructive rather than hiding behind the normal button colour. */
button.starbtn { font-size: 1.15em; text-decoration: none; color: var(--amber-text); line-height: 1; }
button.starbtn:hover { color: var(--amber); }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: #900; }

/* Player list: one row per player. Dense on purpose — this is scanned, not
   read, and the previous card-per-player layout made 60 players unusable. */
.playertable td, .playertable th { font-size: .85em; padding: 5px 8px; vertical-align: middle; }
.playertable .nowrap { white-space: nowrap; }
.namecell { width: 128px; font-size: 1em; padding: 3px 5px; margin: 0; }
.modecell { width: auto; font-size: .95em; padding: 2px 4px; margin: 0 4px 0 0; }
.devid { font-family: ui-monospace, Consolas, monospace; font-size: .78em; color: #999;
         max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.scorecell { max-width: 320px; }
.chips { display: inline; color: #555; }
.chips b { color: var(--ink); }
.chips-class { color: var(--blue); display: block; font-size: .95em; }

/* Player support card: everything about one player in one bounded block, so
   a destructive action is always visibly attached to a specific person. */
.playercard { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.playercard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.playercard-name { font-size: 1.1em; font-weight: bold; color: var(--blue); }
.playercard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.playercard-actions input, .playercard-actions select { display: inline-block; width: auto; margin: 0 4px 0 0; }

/* An armed destructive button — one more click and it fires. */
button.armed { background: var(--err) !important; color: #fff !important; text-decoration: none !important; padding: 3px 8px !important; border-radius: 3px; }

/* Support ticket thread */
.thread { margin: 16px 0; }
.msg { border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; max-width: 80%; }
.msg.from-admin { background: var(--panel); }
.msg.from-grandmaster { background: #e6f0f5; margin-left: auto; }
.msg.internal { background: #fff3cd; border: 1px dashed #d9b64a; }
.msg-meta { font-size: .78em; color: #666; margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; }
textarea { padding: 7px; width: 100%; margin: 6px 0 4px; font-family: inherit; font-size: 1em; }