/* ═══════════════════════════════════════════════════════════════════════
   YOUR DESK — the small amount of CSS the desk needs on top of the site.

   It is deliberately small. The desk is an ordinary .tpage, so the hero,
   the section titles and their rules, the three-hue rotation, the .ccard
   grounds and the green pill all come from pageContent.css already. What
   is here is only the handful of things a lesson page has no equivalent
   of: a stat, a progress bar, the "do this first" tag.

   Everything below reads the section's own hues (--hue-a / --hue-b /
   --hue-c) rather than naming a colour, which is why the desk changes
   palette with the rest of the site and never drifts from it.
   ═══════════════════════════════════════════════════════════════════════ */

/* who is signed in — under the hero line, quiet, and the ID is the way to
   sign in as somebody else */
.tpage.dk-page .dk-who{
  margin:1rem 0 0;text-align:center;
  font:800 .68rem Outfit,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.34)}
.tpage.dk-page .dk-id{
  padding:.24rem .6rem;margin-left:.35rem;min-height:0;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.05);cursor:pointer;
  font:400 .68rem 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.1em;
  color:rgba(255,255,255,.72);transition:opacity .16s}
/* hover is a simple dim — no outline, no colour change (owner, 24 Aug 2026) */
.tpage.dk-page .dk-id:hover{opacity:.55}
.tpage.dk-page .dk-out{font-family:Outfit,system-ui,sans-serif;letter-spacing:.08em}

.tpage.dk-page .dk-lead{max-width:60ch;margin:0 0 1.25rem;font-size:1.04rem}
.tpage.dk-page .dk-quiet{
  max-width:60ch;margin:1.1rem 0 0;font-size:.96rem;color:rgba(255,255,255,.5)}
.tpage.dk-page .dk-foot{
  font:700 .74rem Outfit,system-ui,sans-serif;letter-spacing:.06em;
  color:rgba(255,255,255,.36)}

/* ── a card you can click ────────────────────────────────────────────
   .ccard already gives the ground, the edge and the position-cycled
   colour. This only makes it behave like a control. */
.tpage.dk-page .dk-cards{gap:.85rem}
.tpage.dk-page .dk-go{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  width:100%;min-height:0;text-align:left;text-decoration:none;cursor:pointer;
  font-family:inherit;letter-spacing:normal;text-transform:none;
  transition:border-color .16s,background .16s,transform .16s}
.tpage.dk-page .dk-go .dk-t{
  font:600 1.06rem/1.3 Outfit,system-ui,sans-serif;color:#fff}
.tpage.dk-page .dk-go .dk-n{
  font:800 .64rem Outfit,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hue)}
.tpage.dk-page .dk-go .dk-v{
  margin-top:.15rem;font-size:.88rem;color:rgba(255,255,255,.56)}
.tpage.dk-page .dk-go:hover{
  border-color:rgba(var(--hue-rgb),.6);
  background:rgba(var(--hue-rgb),.1);transform:translateY(-1px)}
.tpage.dk-page .dk-go:focus-visible{outline:2px solid var(--hue);outline-offset:2px}
.tpage.dk-page .dk-go.is-dead{cursor:default;opacity:.45}
@media(prefers-reduced-motion:reduce){
  .tpage.dk-page .dk-go{transition:border-color .16s,background .16s}
  .tpage.dk-page .dk-go:hover{transform:none}}

/* ONE card carries the mark, and only one. The weakest topic a student
   can actually reach is the single most useful thing on this screen; a
   tag on all five would be a tag on none. */
.tpage.dk-page .dk-go .dk-tag{
  align-self:flex-start;margin-top:.15rem;padding:.24rem .6rem;
  border-radius:999px;background:var(--hue);color:#08090d;
  font:800 .6rem Outfit,system-ui,sans-serif;letter-spacing:.13em;
  text-transform:uppercase}
.tpage.dk-page .dk-first{
  border-color:rgba(var(--hue-rgb),.62);
  background:rgba(var(--hue-rgb),.09)}

/* a due date that has run out, and one that is about to */
.tpage.dk-page .dk-task.is-due .dk-v{color:var(--c-gold);font-weight:700}
.tpage.dk-page .dk-task.is-late .dk-v{color:var(--c-pink);font-weight:700}

/* the empty assignments board: the shape, not an apology */
.tpage.dk-page .dk-ghost{margin-bottom:.2rem}
.tpage.dk-page .dk-ghost .ccard{
  min-height:4.6rem;border-style:dashed;border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.015)}

/* ── the numbers ─────────────────────────────────────────────────────
   Six small cards on one row, each one number and its name. They cycle
   the section's three hues by position like every other card row on the
   site, so the row reads as a set rather than six identical boxes. */
.tpage.dk-page .dk-stats{gap:.7rem}
.tpage.dk-page .dk-stat{
  display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.05rem}
.tpage.dk-page .dk-num{
  font:600 clamp(1.6rem,3.4vw,2.1rem)/1 Outfit,system-ui,sans-serif;
  color:#fff;font-variant-numeric:tabular-nums}
.tpage.dk-page .dk-lbl{
  font:800 .62rem Outfit,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
/* coins keep gold wherever the rotation lands — it is the one number on
   the row that means a thing you collected rather than a thing you did */
.tpage.dk-page .dk-coin .dk-num{color:var(--c-gold)}
.tpage.dk-page .dk-coin{border-color:rgba(var(--c-gold-rgb),.34)}

/* ── the overall bar ─────────────────────────────────────────────────
   One number big enough to read from the back of the room, and a bar
   under it so the number has a size as well as a value. */
.tpage.dk-page .dk-bar{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:.2rem .9rem;margin-top:1.5rem}
.tpage.dk-page .dk-bar-n{
  grid-row:1;font:600 clamp(2.1rem,5vw,3rem)/1 Outfit,system-ui,sans-serif;
  color:var(--hue);font-variant-numeric:tabular-nums}
.tpage.dk-page .dk-bar-l{
  grid-row:1;font-size:.95rem;color:rgba(255,255,255,.55)}
.tpage.dk-page .dk-bar-t{
  grid-column:1/-1;height:8px;margin-top:.7rem;border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden}
.tpage.dk-page .dk-bar-t i{
  display:block;height:100%;width:var(--v,0%);border-radius:999px;
  background:linear-gradient(90deg,var(--hue-a),var(--hue-b) 62%,var(--hue-c))}

@media(max-width:640px){
  .tpage.dk-page .dk-bar{grid-template-columns:1fr}
  .tpage.dk-page .dk-bar-l{grid-row:2}
}

/* the way in, centred, and nothing around it */
.tpage.dk-page .dk-cta{margin:3rem 0 3.4rem;text-align:center}

/* A note is a sentence Robin typed, so it is set as prose. .dk-n above
   is an uppercase micro-label — right for "UNIT 3", wrong for "Lunch,
   room 212." or "Let's start by taking your first exam", both of which
   came out shouting. Not scoped to #dk-assigned: the same class is
   wanted on the home.json cards, which is where his own voice lands. */
.tpage.dk-page .dk-go .dk-msg{
  display:block;margin:.15rem 0 .1rem;
  font:400 .88rem/1.45 Outfit,system-ui,sans-serif;
  letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.66)}

/* ── AN ASSIGNED LINK OPENS IN A SHEET ──────────────────────────────
   Robin, 10 Sep 2026: "Open in modal still if you can." A quiz he has
   pushed should feel like the exams on this site do rather than like a
   tab that left the notebook behind.

   It borrows .qte-modal wholesale, so it is the same sheet the question
   types use and it follows that styling for free. Only the body differs:
   a modal that holds a whole page needs to be tall, and its own padding
   would show as a frame round somebody else's design. */
.tpage.dk-page .dk-modal{ width:min(1040px, 96vw); }
/* pageContent.css stamps every .qte-modal-t with a PRACTICE eyebrow,
   which is wrong on a thing the teacher has set */
.tpage.dk-page .dk-modal .qte-modal-t::before{ content:'ASSIGNED'; }
.dk-modal .dk-modal-body{
  padding:0 !important;
  height:min(84vh, 900px);
  max-height:none !important;
  overflow:hidden !important;
}
.dk-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  /* the quiz page paints its own dark ground; this stops a white flash
     while it loads */
  background:var(--c-ground);
}