/* ═══════════════════════════════════════════════════════════════════
   '90s — THE SHAPE OF IT. The colours live in palette.css.

   Robin, 7 Sep 2026: "square boxes, save green for the border, crappy
   looking tables... the works!"

   EVERY RULE IS SCOPED TO html[data-theme="90s"], so this file is inert
   for every other theme and can be deleted in one line if the joke
   wears off. Nothing here is loaded conditionally — it is one small
   stylesheet that simply does not match unless the theme is on.

   WHAT IS DELIBERATELY LEFT ALONE, because a joke theme that a student
   cannot read is not funny:

     · code panels keep their monospace font and their own colours.
       Syntax highlighting is doing a job that Comic Sans cannot help
       with, and 3.8's iteration questions are hard enough already.
     · nothing blinks in exam mode, and nothing blinks for a reader who
       asked for reduced motion.
     · the right/wrong colours are untouched. --c-ok and --c-no mean one
       thing each everywhere in this notebook and a theme does not get
       to make that funnier.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SQUARE. EVERYTHING. ────────────────────────────────────────
   1997 had no border-radius. It did not exist. This is the single rule
   that does the most work in the whole file. */
html[data-theme="90s"] *,
html[data-theme="90s"] *::before,
html[data-theme="90s"] *::after{
  border-radius:0 !important;
}

/* ── 2. GREEN BORDERS ──────────────────────────────────────────────
   Robin: "save green for the border". Lime on black, the way every
   table on every GeoCities page was outlined. */
/* Robin, 7 Sep 2026, on seeing the tables: "The borders you made square
   around all of the content boxes- give them the same nice fat borders as
   this table... I love them!"

   So a content box now wears exactly what a table cell wears: a fat
   OUTSET lime frame, and a thin cyan line just inside it. The inner line
   is an inset box-shadow rather than a second element, because that is
   the only way to get two borders on one box without touching any
   markup — and every one of these boxes is written by hand in a hundred
   content files. */
/* THE .tpage .tb-section PREFIX IS LOAD-BEARING. pageContent.css sets
   box-shadow:none!important on cards inside a section, and it is linked
   from every content fragment — so it arrives AFTER this file and wins
   any tie. Two !important rules of equal specificity go to the later
   one, which is why the fat border landed and the inner cyan line did
   not. Matching its depth settles it on specificity instead of luck. */
/* .tb-col IS GONE FROM THIS LIST, and that is the "ugly double lines".
   A column is a WRAPPER around a card, so framing both drew the frame
   twice — green, cyan, gap, green, cyan again. One box, one frame.

   AND THE COLOUR VARIES NOW. Robin: "Can we also vary the box borders
   throughout- do we still have the random in here?" Yes, and it never
   went away: normalizeSections hands every card a --hue BY POSITION, so
   a row of three already knows it is three colours. The border just had
   to ask for it instead of hardcoding lime. Green stays the fallback
   for anything outside a section. */
html[data-theme="90s"] .ccard,
html[data-theme="90s"] .callout,
html[data-theme="90s"] .cb-pane,
html[data-theme="90s"] .qte-card,
html[data-theme="90s"] .ct-door,
html[data-theme="90s"] .tpage .tb-section .ccard,
html[data-theme="90s"] .tpage .tb-section .callout,
html[data-theme="90s"] .tpage .tb-section .cb-pane,
html[data-theme="90s"] .tpage .tb-section .ct-door,
html[data-theme="90s"] .tpage .ccard,
html[data-theme="90s"] .tpage .callout,
html[data-theme="90s"] .tpage .ct-door{
  border:5px outset var(--hue, var(--c-green)) !important;
  box-shadow:inset 0 0 0 2px rgba(var(--hue-rgb, 0,255,255), .55) !important;
  background:#000040 !important;
  padding:.85rem .95rem !important;
}
html[data-theme="90s"] .tb-col,
html[data-theme="90s"] .tpage .tb-section .tb-col{
  border:0 !important; box-shadow:none !important;
  background:none !important; padding:0 !important;
}
/* An iframe cannot take an inset shadow on its own content, so it gets
   the frame only — the sim inside paints its own world. */
html[data-theme="90s"] iframe,
html[data-theme="90s"] .sim-embed iframe{
  box-shadow:none !important;
  background:#000;
  padding:0;
}

/* ── 3. CRAPPY TABLES ──────────────────────────────────────────────
   `outset` is the tell. It is the default 3D border every browser gave
   a table in 1996 and nobody has deliberately chosen since. Separate
   borders with spacing, so the cells sit in a grid of gaps rather than
   a modern hairline. */
html[data-theme="90s"] table{
  border:4px outset var(--c-green) !important;
  border-collapse:separate !important;
  border-spacing:2px !important;
  background:#000080;                       /* Netscape navy */
}
html[data-theme="90s"] th,
html[data-theme="90s"] td{
  border:2px inset var(--c-cyan) !important;
  padding:.4rem .6rem !important;
  background:#000040;
}
html[data-theme="90s"] th{
  background:#000080;
  color:var(--c-gold) !important;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ── 4. BEVELLED BUTTONS ───────────────────────────────────────────
   Grey, raised, and they push in when you click, because that is what
   a button was before anyone decided buttons should be flat. */
/* Robin, 7 Sep 2026: "instead of font colors- just change the value for
   all those buttons to a slightly darker grey".

   #6E6E6E, and it is more than slightly — that is worth saying rather
   than quietly doing something else. White on the original #C0C0C0 is
   1.82:1. Every "slightly darker" step still fails: #A0A0A0 is 2.61,
   #808080 is 3.95, #787878 is 4.42. The first grey where white text
   clears the 4.5 line is #757575, and #6E6E6E gives 5.10 with a little
   room for the anti-aliasing on a cheap screen.

   It still reads as a grey 1997 button, because the bevel is doing most
   of that work and `outset` derives its light and dark edges from this
   colour — so the button stays three-dimensional, just in gunmetal
   rather than silver. */
/* :not(.ccard) IS THE WHOLE FIX FOR THE DESK. The "Pick up here" cards
   are <button class="ccard dk-go"> — a CARD that happens to be a
   control, so it can be clicked and focused. Treating every button as a
   grey 1997 push-button therefore repainted them, and desk.css's own
   colours (white title, hue-coloured unit label, dark-on-hue "DO THIS
   FIRST" tag) were left sitting on the wrong ground. A card is a card. */
html[data-theme="90s"] button:not(.ccard),
html[data-theme="90s"] .action-btn:not(.ccard),
html[data-theme="90s"] .qte-tab,
html[data-theme="90s"] .prove-btn{
  border:3px outset #6E6E6E !important;
  background:#6E6E6E !important;
  font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif;
  font-weight:700;
  text-shadow:none !important;
}
html[data-theme="90s"] button:active,
html[data-theme="90s"] .action-btn:active{
  border-style:inset !important;
}
/* WHITE, AND THE DESCENDANTS STILL MATTER. The colour swapped from black
   to white when the grey darkened, but the reason for naming every
   descendant did not go away: several of these buttons carry an inner
   <span> that sets its own colour, and an inherited value loses to a set
   one every time. Without this list you get a button where the label is
   white and the icon beside it is still whatever it was. */
html[data-theme="90s"] button:not(.ccard),
html[data-theme="90s"] button:not(.ccard) *,
html[data-theme="90s"] .action-btn:not(.ccard),
html[data-theme="90s"] .action-btn:not(.ccard) *,
html[data-theme="90s"] .qte-tab,
html[data-theme="90s"] .qte-tab *,
html[data-theme="90s"] .prove-btn,
html[data-theme="90s"] .prove-btn *{
  color:#FFFFFF !important;
  text-shadow:none !important;
}
/* And a tag that carries its OWN background keeps its own text colour.
   .dk-tag is dark-on-hue by design; forcing it white put white on
   yellow, which is 1.1:1 — the single worst pairing on the page, and it
   would have been introduced by the fix for the previous one. */
html[data-theme="90s"] .dk-tag{
  color:#08090d !important;
}
/* A card that is a <button> inherits the UA's `buttontext`, which is
   BLACK — invisible on the navy these cards now sit on. Every string in
   a desk card happens to live in its own coloured span today, so nothing
   is broken on screen; this is so that the next card someone adds with
   bare text in it does not disappear. */
html[data-theme="90s"] button.ccard{
  color:#FFFFFF;
}

/* ── 5. THE FONT ───────────────────────────────────────────────────
   Comic Sans on headings and chrome. NOT on body prose and NOT on code:
   a page of Comic Sans is genuinely harder to read, and half this class
   is reading in a second language. The joke lands on the titles.

   The stack degrades honestly. A Chromebook without Comic Sans gets
   Chalkboard, then a generic cursive, then the system stack — every one
   of which still reads. */
html[data-theme="90s"] h1,
html[data-theme="90s"] h2,
html[data-theme="90s"] h3,
html[data-theme="90s"] .topic-title,
html[data-theme="90s"] .topic-sub,
html[data-theme="90s"] .topic-eyebrow,
html[data-theme="90s"] .tb-section-label,
html[data-theme="90s"] .cc-title,
html[data-theme="90s"] .nav-chapter-title{
  font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",cursive,
              system-ui,sans-serif !important;
  letter-spacing:0 !important;
}

/* ── WORDART, ON EVERY TITLE ───────────────────────────────────────
   Robin, 7 Sep 2026: "Can we do the text in comic sans, white with
   yellow 3d effect behind same style as page title."

   White fill, yellow extruded down-right, black behind the yellow so
   the whole stack still has an edge against the starfield. That last
   layer is not decoration — white on yellow is 1.1:1, so without a dark
   outline the two front layers smear into each other wherever they
   overlap.

   The offsets scale with the type. A 3px extrusion under a 0.64rem
   uppercase label is mush, so the small stuff gets 1px and the big
   headline gets 3px. */
/* Robin, 7 Sep 2026, having seen the white one: "Put the original title
   color back (yellow/red) and just that same style throughout for all
   section titles. Title text in boxes and stuff, no extrusion on those."

   So the WordArt is gold with a hot-pink extrusion and a black edge —
   the treatment the page title had originally — and it now runs on
   every heading that ANNOUNCES a part of the page. It does not run on
   text inside a box.

   That distinction is the whole reason the white version looked wrong.
   An extruded headline is a sign; a card title is a label on a thing
   you are reading. Putting the sign treatment on both made the page
   shout in nine places at once and gave the eye nowhere to rest.

   .thub is load-bearing on the first selector: .topic-title IS an h1
   inside .tpage, so the h1/h2/h3 rule below scores one element higher
   and was quietly winning — the big headline came out with the small
   headline's offsets, and it looked deliberate. */
html[data-theme="90s"] .thub .topic-title,
html[data-theme="90s"] .tpage .topic-title{
  color:var(--c-gold) !important;
  text-shadow:3px 3px 0 #FF0099, 5px 5px 0 #000, -1px -1px 0 #000;
}
html[data-theme="90s"] .tpage h1,
html[data-theme="90s"] .tpage h2,
html[data-theme="90s"] .tpage h3,
html[data-theme="90s"] .sv-skilltitle{
  color:var(--c-gold) !important;
  text-shadow:2px 2px 0 #FF0099, 3px 3px 0 #000;
}

/* BOXES STAY FLAT, and their titles keep the site's own hue rotation —
   which is me choosing, since Robin said to. It is the better answer
   than any single colour: a row of three cards is three colours by
   position, so the cards stay distinguishable from each other now that
   every heading above them is the same gold. Nothing here sets a
   colour; the rules are here to REMOVE the shadow the headings get. */
html[data-theme="90s"] .cc-title,
html[data-theme="90s"] .cc-label,
html[data-theme="90s"] .tpage .tb-section .ccard .cc-title,
html[data-theme="90s"] .tpage .tb-section .cc-title,
html[data-theme="90s"] .ccard h1,
html[data-theme="90s"] .ccard h2,
html[data-theme="90s"] .ccard h3,
html[data-theme="90s"] .callout h1,
html[data-theme="90s"] .callout h2,
html[data-theme="90s"] .callout h3,
html[data-theme="90s"] .callout-head{
  text-shadow:none !important;
}

/* ── 6. LINKS, EXACTLY AS NETSCAPE LEFT THEM ───────────────────────
   Underlined, and the visited colour is the one detail nobody expects
   to still work. */
html[data-theme="90s"] .vpage a,
html[data-theme="90s"] .tb-section a{
  color:var(--c-blue-new) !important;
  text-decoration:underline !important;
}
html[data-theme="90s"] .vpage a:visited,
html[data-theme="90s"] .tb-section a:visited{
  color:var(--c-purple) !important;
}

/* ── 7. ONE THING BLINKS, AND ONLY ONE ─────────────────────────────
   The section label. <blink> is dead in every browser and this is the
   closest legal equivalent — but it fades rather than snapping to
   invisible, because a hard blink at 1Hz is a genuine problem for some
   readers and the effect reads the same.

   OFF in exam mode and OFF for prefers-reduced-motion, both below. */
@keyframes nineties-blink{ 0%,45%{opacity:1} 55%,100%{opacity:.35} }
html[data-theme="90s"] .tb-section-label{
  animation:nineties-blink 1.4s steps(1,end) infinite;
  color:var(--c-gold) !important;
}
html[data-theme="90s"].exam-mode .tb-section-label,
html[data-theme="90s"] body.exam-mode .tb-section-label{
  animation:none;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="90s"] .tb-section-label{ animation:none; }
}

/* ── 8. THE STARFIELD SITS BEHIND EVERYTHING ───────────────────────
   Same slot and the same rules as the matrix rain, so the two can
   never both be mounted. */
html[data-theme="90s"] .starfield{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* ── 9. HANDS OFF ──────────────────────────────────────────────────
   Code keeps its own font and its own colours. Right and wrong keep
   theirs. Both of these undo the rules above on purpose. */
html[data-theme="90s"] pre,
html[data-theme="90s"] code,
html[data-theme="90s"] .cb-pane,
html[data-theme="90s"] .ps-code,
html[data-theme="90s"] .cb-pane *{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace !important;
}
html[data-theme="90s"] .good,
html[data-theme="90s"] .bad,
html[data-theme="90s"] .correct,
html[data-theme="90s"] .incorrect{
  font-family:inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PART TWO — Robin, same evening: "feel free to make it as 90's as you
   can. Rework menu, logo- play!"
   ═══════════════════════════════════════════════════════════════════ */

/* ── 10. THE WORDMARK, IN HARD RAINBOW BANDS ───────────────────────
   The logo is already a MASK over a background, which is why noir and
   matrix can recolour it without re-exporting artwork — so this is just
   another background. The difference is `0%, 16.6%` hard stops instead
   of a smooth blend: 1997 WordArt had BANDS, one flat colour per
   letter, because a smooth gradient was not something you could make.
   The drift animation stays, so the bands crawl across the letters the
   way an animated GIF would have. */
html[data-theme="90s"] .brand-logo{
  background:linear-gradient(90deg,
    #FF0000 0 16.6%,  #FF9900 16.6% 33.3%, #FFFF00 33.3% 50%,
    #00FF00 50% 66.6%, #00CCFF 66.6% 83.3%, #CC00FF 83.3% 100%);
  /* 100% and NO drift. AP's disco logo animates background-position
     across a 160%-wide gradient, so at any moment you see part of the
     run — lovely for a smooth rainbow, useless for bands, because only
     three of the six would ever be on the word at once. WordArt did not
     move. It sat there, in all six colours, being enormous. */
  background-size:100% 100%;
  animation:none;
}

/* ── 11. UNDER CONSTRUCTION ────────────────────────────────────────
   No page was ever finished. The stripes crawl and the text does not:
   a scrolling <marquee> plus a blinking label plus a starfield is three
   moving things at once, and one of them had to be the quiet one. */
@keyframes nineties-stripes{ to{ background-position:40px 0; } }
html[data-theme="90s"] .brand::after{
  content:"\26A0\A0 UNDER CONSTRUCTION \A0\26A0";
  display:block;
  /* .brand is a flex COLUMN with align-items:flex-start, so a block
     pseudo-element shrinks to its text and reads as a label pinned to
     the logo rather than as a banner across the nav. align-self:stretch
     is what makes it span. */
  align-self:stretch;
  margin:.75rem 0 .2rem;
  padding:.34rem .3rem;
  font:700 .66rem/1.25 "Comic Sans MS","Comic Sans",cursive,sans-serif;
  letter-spacing:.03em;
  text-align:center;
  color:#000;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.30) 0 10px, rgba(0,0,0,0) 10px 20px),
    #FFFF00;
  border:2px outset #FFFF00;
  animation:nineties-stripes 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="90s"] .brand::after{ animation:none; }
}

/* ── 12. THE MENU, AS A LIST OF BRACKET LINKS ──────────────────────
   [ NEWS ] [ MEMBERS ] [ LINKS ] — the brackets are the whole visual
   language of a 1997 navigation bar, and they cost two pseudo-elements
   because the nav text already sits in its own span. Nothing in the
   markup changes; the nav still works exactly as it did. */
html[data-theme="90s"] .nav-item{
  font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif;
  color:var(--c-blue-new) !important;
  text-decoration:underline;
  padding-top:.22rem; padding-bottom:.22rem;
}
html[data-theme="90s"] .nav-item .nav-item-text::before{ content:"[ "; color:var(--c-green); }
html[data-theme="90s"] .nav-item .nav-item-text::after { content:" ]"; color:var(--c-green); }
html[data-theme="90s"] .nav-item:hover{
  background:#000080 !important;
  color:var(--c-gold) !important;
}
html[data-theme="90s"] .nav-item.active{
  background:#000080 !important;
  color:var(--c-gold) !important;
  border-left:4px solid var(--c-green);
}

/* Chapter headings get the other 1997 idiom: an arrow, and a rule made
   of equals signs. */
html[data-theme="90s"] .nav-chapter-title{
  color:var(--c-gold) !important;
  font-weight:700 !important;
  border-top:2px groove var(--c-green);
  padding-top:.4rem;
  margin-top:.8rem;
}
html[data-theme="90s"] .nav-chapter-title .nav-chapter-title-text::before{
  content:"\00BB ";
  color:var(--c-green);
}

/* The sidebar itself: navy, ruled off in green, like a table cell —
   because in 1997 it would have BEEN a table cell. */
html[data-theme="90s"] .sidebar{
  background:#000030 !important;
  border-right:4px ridge var(--c-green) !important;
}

/* ── 13. THE VISITOR COUNTER ───────────────────────────────────────
   Injected by stars.js at the foot of the nav. Styled to look like the
   odometer GIF every counter service handed out: lime digits, black
   cells, one green box around the lot. */
html[data-theme="90s"] .nineties-counter{
  /* It lives at the top of the main column now, not the foot of the
     nav, so it is sized for a page banner rather than for a sidebar. */
  margin:.9rem auto 1.1rem;
  text-align:center;
  font:700 .72rem/1.35 "Comic Sans MS","Comic Sans",cursive,sans-serif;
  color:#C0C0C0;
  position:relative; z-index:1;
}
/* BLOCK-LEVEL FLEX, not inline-flex. Inline kept the odometer on the
   same line as "You are visitor number", which wrapped in the narrow
   sidebar and stopped wrapping the moment it moved to the full-width
   main column. width:fit-content plus auto margins gives a centred box
   on its own line at any width. */
html[data-theme="90s"] .nineties-counter .digits{
  display:flex; width:fit-content; gap:3px;
  margin:.35rem auto .25rem;
  border:3px outset var(--c-green); padding:3px; background:#000;
}
html[data-theme="90s"] .nineties-counter .digits span{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.15rem; font-weight:700;
  color:var(--c-green); background:#001800;
  padding:2px 6px; border:1px inset #006600;
}

/* ═══════════════════════════════════════════════════════════════════
   PART THREE — Robin, 7 Sep 2026: "i love the flashing on the titles...
   can we trash the blinking cursor for this theme, make fonts
   throughout super 90's, and than have them flash"
   ═══════════════════════════════════════════════════════════════════ */

/* ── 14. NO TERMINAL CURSOR ────────────────────────────────────────
   pageContent.css ends a numbered skill title on a blinking "_" — a
   terminal caret, which is the wrong decade by about fifteen years and
   was competing with the flashing anyway. Gone for this theme only;
   every other theme keeps it. */
html[data-theme="90s"] .tpage .tb-section-header > .tb-section-label[data-sv-numbered] .sv-skilltitle::after{
  content:none !important;
  animation:none !important;
}

/* ── 15. COMIC SANS, NOW ACTUALLY THROUGHOUT ───────────────────────
   The first cut kept body prose in Outfit on the grounds that a page of
   Comic Sans is harder to read and half this class reads in a second
   language. Robin has now asked twice, the second time as "super 90's",
   so it goes everywhere — it is an opt-in theme with three sober
   alternatives one click away, and it is his room.

   CODE IS STILL EXEMPT, and that is not me relitigating: pseudocode in
   a proportional font stops lining up, and the alignment is load-
   bearing in a trace question. Rule 9 above re-asserts monospace after
   this, which is why this selector is `body` and not `*`. */
html[data-theme="90s"] body,
html[data-theme="90s"] .tpage,
html[data-theme="90s"] .tpage p,
html[data-theme="90s"] .tpage li,
html[data-theme="90s"] .tpage div,
html[data-theme="90s"] .tpage span,
html[data-theme="90s"] .cc-body,
html[data-theme="90s"] .skill-intro,
html[data-theme="90s"] .callout,
html[data-theme="90s"] .qte-modal,
html[data-theme="90s"] input,
html[data-theme="90s"] select,
html[data-theme="90s"] textarea{
  font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",cursive,
              system-ui,sans-serif !important;
}

/* ── 16. AND THEN THEY FLASH ───────────────────────────────────────
   Robin: "i love the flashing on the titles... and than have them
   flash". So the pulse spreads from the section label to every title on
   the page.

   THREE THINGS KEEP THIS ON THE RIGHT SIDE OF SAFE, and none of them is
   negotiable:

     · it FADES to .4, it does not switch off. A hard on/off at ~1Hz is
       the pattern that actually hurts people, and at a glance the two
       look the same.
     · the periods are 1.4s, 1.9s, 2.3s and 2.7s — deliberately not
       multiples of each other, so the page never has a moment where
       everything dips at once. That is the difference between "alive"
       and "strobing".
     · off entirely under prefers-reduced-motion, and off in exam mode.

   Body text does NOT flash, ever. A paragraph you have to read while it
   changes brightness is a different thing from a title that winks. */
/* ONE THING BLINKS: THE SKILL BUTTON. Robin, on seeing every title
   pulse at once: "Then just have the skill button blink, not the title."

   He is right, and for a better reason than taste. Once the titles are
   extruded WordArt they are already the loudest thing on the page;
   flashing them as well meant the eye had nowhere quiet to land. One
   blinking chip in a page of still headlines reads as a 1997 page. Six
   blinking headlines reads as a fault.

   The animation stays defined here — .tb-section-label above uses it,
   and it is the only thing that does. */
@keyframes nineties-flash{ 0%,55%{opacity:1} 78%,100%{opacity:.4} }

/* One switch turns every one of them off, so there is no chance of a
   new title being added later and quietly missing the guard. */
html[data-theme="90s"] body.exam-mode .tb-section-label{
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="90s"] .tb-section-label{ animation:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PART FOUR — Robin's list, 8 Sep 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ── 17. THE ARIA MARK, FLAT. "Aria logo- no gradient pls." The orb's
   letter is a mask over a four-stop gradient that drifts across it.
   1997 could do neither. One flat colour, holding still. */
html[data-theme="90s"] .aria-mark,
html[data-theme="90s"] .aria-bubble-icon .aria-mark{
  background:var(--c-gold) !important;
  background-image:none !important;
  background-size:100% 100% !important;
  animation:none !important;
}



/* ── 18. TWO KINDS OF SECTION LABEL, AND ONLY ONE BLINKS ───────────
   "no text flash but make rainbow line thicker and more 90's and have
   that flash" + "make only skill pills flash - not text".

   .tb-section-label WITHOUT data-sv-numbered is a TITLE. WITH it, it is
   a PILL. They were being treated as one thing, which is why the wrong
   one was blinking. The attribute is the whole distinction. */
html[data-theme="90s"] .tb-section-label:not([data-sv-numbered]),
html[data-theme="90s"] .tpage .tb-section-header > .tb-section-label:not([data-sv-numbered]){
  color:var(--c-gold) !important;
  font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",cursive,sans-serif !important;
  text-shadow:2px 2px 0 #FF0099, 3px 3px 0 #000;
  animation:none !important;
}
/* THE ANIMATION GOES ON THE PILL, NOT ON THE LABEL. This is why the
   title kept flashing after I said only the pill would:

     <span class="tb-section-label" data-sv-numbered="1">
       <span class="sv-skillnum">Skill 1</span>       <- the pill
       <span class="sv-skilltitle">Input, Process...  <- the title
     </span>

   Both live INSIDE the label, so animating the label animated the
   title too — an element's opacity takes its children with it, and no
   rule on the child can opt out of its parent fading. The only fix is
   to animate the child that should actually blink. */
html[data-theme="90s"] .sv-skillnum{
  animation:nineties-blink 1.4s steps(1,end) infinite;
}
html[data-theme="90s"] .tb-section-label[data-sv-numbered],
html[data-theme="90s"] .sv-skilltitle{
  animation:none !important;
}
/* the skill's own title inside the pill: pageContent forces #fff and a
   weight on it at a deeper selector, so this has to match that depth */
html[data-theme="90s"] .tpage .tb-section-header > .tb-section-label[data-sv-numbered] .sv-skilltitle{
  color:var(--c-gold) !important;
  font-family:"Comic Sans MS","Comic Sans","Chalkboard SE",cursive,sans-serif !important;
  text-shadow:2px 2px 0 #FF0099, 3px 3px 0 #000;
}

/* THE RULE LINE. 1px of smooth rainbow is a 2015 detail. Six pixels of
   hard-stopped colour with a bevel is the <hr> a 1997 page used — and
   it is the thing that flashes now, instead of the words. The selector
   matches pageContent's own depth, which sets the 1px height. */
html[data-theme="90s"] .tb-section-line,
html[data-theme="90s"] .tpage .tb-section-header > .tb-section-line,
html[data-theme="90s"] .tpage .tb-section .tb-section-header .tb-section-line{
  height:7px !important;
  min-height:7px !important;
  border-top:2px solid rgba(255,255,255,.4) !important;
  border-bottom:2px solid rgba(0,0,0,.65) !important;
  background:linear-gradient(90deg,
    #FF0000 0 14.2%, #FF9900 14.2% 28.4%, #FFFF00 28.4% 42.6%,
    #00FF00 42.6% 56.8%, #00FFFF 56.8% 71%, #0066FF 71% 85.2%,
    #CC00FF 85.2% 100%) !important;
  /* NO ANIMATION. Robin, 8 Sep 2026: "stop the flashing rainbow line-
     just a flash too far." He is right — with the pill already blinking
     beside it, two things pulsing in the same header is one more than
     the eye can ignore. The line keeps the 7px and the hard stops,
     which is what made it read as 1997; it just holds still. */
  display:block !important;
}
html[data-theme="90s"] body.exam-mode .sv-skillnum{
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="90s"] .sv-skillnum{ animation:none !important; }
}

/* ── 19. THE BANNER MOVED to the top of the main column, full width.
   It was a ::after on .brand in the sidebar, where it was only as wide
   as its own text. stars.js mounts the real element; this styles it. */
html[data-theme="90s"] .brand::after{ content:none !important; }
html[data-theme="90s"] .nineties-banner{
  display:block; width:100%;
  margin:0 0 .9rem; padding:.5rem .6rem;
  font:700 .95rem/1.25 "Comic Sans MS","Comic Sans",cursive,sans-serif;
  letter-spacing:.04em; text-align:center; color:#000;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.30) 0 12px, rgba(0,0,0,0) 12px 24px),
    #FFFF00;
  border:4px outset #FFFF00;
  animation:nineties-stripes 1.6s linear infinite;
  position:relative; z-index:1;
}
@media (prefers-reduced-motion: reduce){
  html[data-theme="90s"] .nineties-banner{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   16. THE MENU AS A 1997 CATEGORY LIST (9 Sep 2026)

   Robin sent the eBay homepage sidebar: a solid gold "categories" bar
   with plain blue underlined links under it on white. "Categories
   header is the look of the topic (still color that for each) but
   actual links in topic are the real og- classics blue default
   link/font. You'll need to change over the bg in menu."

   So the menu goes WHITE, which is the change that makes the rest work.
   Default-blue underlined Times on navy is a muddy mess; on white it is
   the most recognisable thing on the entire early web. Everything below
   follows from that one decision.

   The unit bars keep their own colours because they already have them:
   app-engine sets --unit-c per unit and the badges and headings have
   been wearing it all along. Reusing it means a new unit gets a bar in
   the right colour without anybody editing this file.

   These rules come after section 12 on purpose — same specificity, so
   the later ones win, and the bracket-link version above stays readable
   as the thing this replaced.
   ═══════════════════════════════════════════════════════════════════ */

/* BLACK. Robin, third pass: "Back to black we go on sidebar."

   White was an eBay carbon copy; silver fixed that and was still a
   light panel bolted onto a black page. Black is the page, so the menu
   stops being a separate object on it. The logo no longer needs its own
   plate either — the whole column is the plate now. */
html[data-theme="90s"] .sidebar{
  background:#000000 !important;
  border-right:3px ridge #808080 !important;
}

/* ── the category bar ───────────────────────────────────────────────
   Black on the unit's own colour. Every palette slot clears 5:1 against
   black, so the text holds on all seven without picking colours twice. */
html[data-theme="90s"] .nav-chapter-title{
  background:var(--unit-c, var(--c-gold)) !important;
  color:#000000 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:900 !important;
  font-size:.82rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  border:2px outset var(--unit-c, var(--c-gold)) !important;
  border-radius:0 !important;
  padding:.2rem .5rem !important;
  margin:.85rem 0 .3rem !important;
  text-shadow:none !important;
}
html[data-theme="90s"] .nav-chapter-title:hover{
  background:var(--unit-c, var(--c-gold)) !important;
  filter:brightness(1.12);
}
html[data-theme="90s"] .nav-chapter-title .nav-chapter-title-text::before{ content:none; }
html[data-theme="90s"] .nav-chapter-title .nav-collapse-icon{ color:#000 !important; opacity:.75; }

/* ── the links ──────────────────────────────────────────────────────
   #0000EE is the actual Mosaic/Netscape default, not a blue chosen to
   look like it. Times, underlined, no hover colour change — the whole
   point is that it looks like nobody styled it at all. */
html[data-theme="90s"] .nav-item{
  font-family:"Times New Roman",Times,serif !important;
  font-size:.95rem !important;
  font-weight:700 !important;
  /* On black, #0000EE measures 2.23:1 — the right blue and an unreadable
     one. This is the site's own --c-blue at 6.35:1, which still reads as
     a link and is a colour the rest of the theme already uses. */
  color:#5588FF !important;
  text-decoration:underline !important;
  background:transparent !important;
  border-left:0 !important;
  padding:.12rem .5rem !important;
  text-shadow:none !important;
}
/* the [ ] brackets belong to the version this replaced */
html[data-theme="90s"] .nav-item .nav-item-text::before,
html[data-theme="90s"] .nav-item .nav-item-text::after{ content:none !important; }
/* THE TEXT LIVES IN THE SPAN, and app-extra.css paints that span white
   for the dark sidebar (".sidebar .nav-item .nav-item-text{color:#fff}").
   Colouring only .nav-item left every link as a blue underline with
   nothing above it — white on white. Caught by looking at the
   screenshot; the computed colour on .nav-item was the right blue. */
html[data-theme="90s"] .sidebar .nav-item .nav-item-text{
  color:#5588FF !important;
  font-family:"Times New Roman",Times,serif !important;
  letter-spacing:normal !important;
}
/* ── HOVER AND ACTIVE ARE THE TEXT, NOT A BLOCK ────────────────────
   Robin: "no block, use the good old 'visited' purple on the text
   itself as hover/active." The highlight bar was a modern menu idiom;
   a 1997 link changed colour and nothing else.

   #551A8B is the real visited purple and measures 1.91:1 on black, so
   it is lightened to #B084F0 (7.40:1). Same colour, still obviously
   THAT purple, and actually visible. */
html[data-theme="90s"] .sidebar .nav-item:hover .nav-item-text,
html[data-theme="90s"] .sidebar .nav-item.active .nav-item-text{
  color:#B084F0 !important;
}
html[data-theme="90s"] .nav-item:hover,
html[data-theme="90s"] .nav-item.active{
  background:transparent !important;   /* no block */
  color:#B084F0 !important;
  border-left:0 !important;
}

/* ── the little numbers ─────────────────────────────────────────────
   eBay put a plain grey count after each category. The badge box was
   built for a dark ground and turns to mud on white, so it loses the
   box and becomes what it always was: a number. */
html[data-theme="90s"] .sidebar .nav-item .nav-num,
html[data-theme="90s"] .sidebar .nav-item .nav-num *{
  background:transparent !important;
  border:0 !important;
  color:#8899AA !important;
  font-family:"Times New Roman",Times,serif !important;
  font-size:.72rem !important;
  font-weight:400 !important;
  min-width:1.6rem;
}
html[data-theme="90s"] .sidebar .nav-unit-exam .nav-num{
  color:#B00000 !important;
  font-weight:700 !important;
}

/* Anything else that lands in the menu has to survive the white too. */
html[data-theme="90s"] .nav-foot-btn,
html[data-theme="90s"] .admin-section-wrap .nav-item{
  background:#6E6E6E !important;
  color:#FFFFFF !important;
  border:3px outset #6E6E6E !important;
  font-family:"Times New Roman",Times,serif !important;
  text-decoration:underline !important;
}
html[data-theme="90s"] .nav-chapter-locked .nav-chapter-title{ opacity:.5; }
html[data-theme="90s"] .sidebar-scroll::-webkit-scrollbar-thumb{ background:#808080; }

/* ═══════════════════════════════════════════════════════════════════
   17. THE FAT FONT (9 Sep 2026)

   Robin sent the PORKY'S logo: "Find me a font similar to this for 90's
   log in, and use for aria logo."

   NO WEBFONT. This site links none, deliberately — a font that arrives
   over the network is a font that does not arrive on school wifi, and
   the sign-in sheet is the one screen that must work on a bad morning.
   So it is a stack of faces that are actually installed on the machines
   in that room. Cooper Black ships with Office and is the closest thing
   to that logo anybody has; Arial Rounded MT Bold covers the Macs;
   Bauhaus 93 is the Windows fallback that is fat if not round. Comic
   Sans catches everything else, which is no loss in this theme.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="90s"]{
  /* "font is just meso meso." Reordered fattest-first: Bauhaus 93 is
     the closest thing on a Windows machine to that PORKY'S lettering,
     Cooper Black next, then the Mac's Arial Rounded MT Bold. Arial
     Black is the guaranteed-everywhere fallback and is at least heavy.
     Whichever one lands, -webkit-text-stroke below thickens it, which
     is the only way to make a face fatter without shipping one. */
  --f-fat:"Bauhaus 93","Cooper Black","Arial Rounded MT Bold",
          "Arial Black","Comic Sans MS",cursive,sans-serif;
}

html[data-theme="90s"] .name-modal.sgn h3,
html[data-theme="90s"] .name-modal.sgn .sgn-l,
html[data-theme="90s"] .name-modal.sgn .action-btn{
  font-family:var(--f-fat) !important;
  letter-spacing:.02em;
}
html[data-theme="90s"] .name-modal.sgn h3{
  font-size:1.6rem;
  color:var(--c-gold) !important;
  text-shadow:2px 2px 0 #FF0099, 3px 3px 0 #000;
}

/* ── the wordmark ───────────────────────────────────────────────────
   "No changing colors- single color per letter." The mask-image logo
   cannot do that: it is one shape wearing one background, which is why
   the theme had it wearing a six-band gradient instead. So in this
   theme only, stars.js swaps the mask for four letters and each one
   takes a flat colour of its own. Reverting is automatic — leave the
   theme and the mask comes back untouched. */
html[data-theme="90s"] .brand-logo.n90-word{
  -webkit-mask-image:none !important;
  mask-image:none !important;
  background:none !important;
  background-image:none !important;
  animation:none !important;
  /* aspect-ratio and the calc() width shape the MASK; left in place they
     hold the box at 1047:352 and stretch four letters across it */
  aspect-ratio:auto !important;
  width:auto !important;
  height:auto !important;
  display:block;
  padding:.1rem 0 .25rem;
}
html[data-theme="90s"] .brand-logo.n90-word .n90-l{
  /* Every value stated, none inherited: the sidebar sets its own span
     size and 24px of side padding, which is what once rendered the
     wordmark as a - r - i - a. */
  font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif !important;
  font-size:3.4rem !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  line-height:1 !important;
  display:inline !important;
  text-transform:lowercase !important;
  padding:0 !important;
  margin:0 !important;
  /* a hard offset, not a glow — WordArt did not blur */
  text-shadow:3px 3px 0 #000;
}

/* the small mark, same face, one flat colour */
html[data-theme="90s"] .aria-mark.n90-mark{
  -webkit-mask:none !important;
  mask:none !important;
  background:none !important;
  background-image:none !important;
  color:var(--c-gold) !important;
  font-family:"Comic Sans MS","Comic Sans",cursive,sans-serif !important;
  font-weight:700 !important;
  /* size is set inline by stars.js from the measured box — see sizeMarks() */
  line-height:1 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1;
  text-transform:lowercase !important;
  text-shadow:2px 2px 0 #000;
}

/* ── 18. THE GIFS (9 Sep 2026) ──────────────────────────────────────
   Drawn by tools/make-90s-gifs.py, not downloaded — every real dancing
   hamster on the web belongs to somebody and this is a school site.
   Each one carries a ring of white background pixels, which is the
   thing Robin actually asked for: "like everyone without photoshop
   constantly in 1990's". Against this theme's black page it reads
   instantly as a GIF somebody cut out by hand and got wrong. */
html[data-theme="90s"] .n90-gif{
  /* the frames are already 3x, so never resample them */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  vertical-align:middle;
  flex:none;
}
html[data-theme="90s"] .nineties-counter .n90-globe{
  height:2.2rem; width:auto; margin-right:.5rem;
}

/* ── loose on the starfield ─────────────────────────────────────────
   "Just sort of sprinkled on the space bg- have the hamster doing the
   hamster dance and the rocket flying through space."

   Fixed to the viewport, inside .orb-container with the starfield
   canvas, so they belong to the sky and not to the page: they do not
   scroll, they sit behind everything, and pointer-events:none means a
   sprite drifting over the menu cannot eat a click. */
html[data-theme="90s"] .n90-sprites{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
html[data-theme="90s"] .n90-sprites .n90-gif{ position:absolute; }

/* the dance: the GIF's own bob, plus a shuffle left and right */
/* WHERE THE SKY IS ACTUALLY VISIBLE, which took two goes to find. The
   sprites sit BEHIND the page, so they only show through the gaps:
   at left:6vw the hamster was behind the opaque sidebar, and at 62vw it
   was behind a content card. Both times perfectly animated and entirely
   invisible.

   The reliable gap is the margin between the nav and the text column.
   --nav-w is the sidebar's own width variable, so this tracks it
   instead of guessing a viewport percentage that only works at one
   window size. */
html[data-theme="90s"] .n90-hamster{
  left:calc(var(--nav-w, 250px) + 1.4rem); bottom:12vh; height:3.4rem;
  animation:n90-dance 1.1s steps(2,end) infinite alternate;
}
@keyframes n90-dance{
  from{ transform:translateX(-9px) rotate(-6deg); }
  to  { transform:translateX(9px)  rotate(6deg); }
}

/* the flight: bottom-left to top-right, once a minute, nose-up */
html[data-theme="90s"] .n90-rocket{
  height:3rem;
  animation:n90-fly 58s linear infinite;
}
@keyframes n90-fly{
  0%   { left:-8vw;  top:88vh; transform:rotate(34deg); opacity:0; }
  6%   { opacity:1; }
  92%  { opacity:1; }
  100% { left:104vw; top:-12vh; transform:rotate(34deg); opacity:0; }
}

@media (max-width:820px){
  /* one sprite is a joke, two on a phone is clutter over the content */
  html[data-theme="90s"] .n90-hamster{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  /* An animated GIF cannot be paused from CSS, so the honest thing is
     to take them off the page rather than leave them jittering. */
  html[data-theme="90s"] .n90-sprites{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   ANSWER STATES — the fix for "it doesn't mark what I picked"
   (14 Sep 2026, Robin, on the Prove-it exams)

   It was not only the selection. Measured in the browser: selected,
   correct, wrong and selected-multi ALL computed to the same grey —
   rgb(110,110,110) ground, 3px outset, white text — byte for byte
   identical to an untouched option. So on a subtopic quiz, which marks
   as you go, the red and the green were dead too. The whole feedback
   loop was invisible in this theme and only in this theme.

   Why: .option-btn is a <button>, so section 3's
   `button:not(.ccard)` rule paints it grey with !important and forces
   every descendant white. The state rules live in style.css and in
   app-engine's injected block and carry NO !important, so all four of
   them lost on background, border AND colour.

   These have to name the descendants for the same reason section 3
   does — .opt-letter and .opt-text set their own colour, and an
   inherited value loses to a set one.

   The palette is 1997 on purpose: navy selection is the Windows
   highlight every one of these kids' parents used, lime is GeoCities
   correct, and the border flips outset -> inset when chosen, which is
   how a 1997 control said "pressed". ══════════════════════════════ */

/* SELECTED, not yet marked — the exam and Prove-it state */
html[data-theme="90s"] .option-btn.selected-exam,
html[data-theme="90s"] .option-btn.selected-exam *{
  color:#FFFFFF !important;
}
html[data-theme="90s"] .option-btn.selected-exam{
  background:#000080 !important;
  border:3px inset #3333AA !important;
}

/* SELECTED, multi-answer ("select two") */
html[data-theme="90s"] .option-btn.selected-multi,
html[data-theme="90s"] .option-btn.selected-multi *{
  color:#000000 !important;
}
html[data-theme="90s"] .option-btn.selected-multi{
  background:#00FFFF !important;
  border:3px inset #009999 !important;
}

/* MARKED RIGHT */
html[data-theme="90s"] .option-btn.correct,
html[data-theme="90s"] .option-btn.correct *{
  color:#000000 !important;
}
html[data-theme="90s"] .option-btn.correct{
  background:#00FF00 !important;
  border:3px outset #00FF00 !important;
  font-weight:900 !important;
}

/* MARKED WRONG */
html[data-theme="90s"] .option-btn.wrong,
html[data-theme="90s"] .option-btn.wrong *{
  color:#FFFFFF !important;
}
html[data-theme="90s"] .option-btn.wrong{
  background:#CC0000 !important;
  border:3px outset #CC0000 !important;
}

/* ── ROUNDED BOXES THAT SURVIVED SECTION 1 ────────────────────────
   Section 1 squares everything with `*{border-radius:0!important}`,
   which is one attribute + one element — the lowest specificity a
   rule can have. Anything with a real selector and its own
   !important therefore beats it. The destination buttons are the
   live case: pageContent's TAB SHELL block sets their radius from
   --ts-btn-radius at three classes deep, so six rounded pills sat on
   every topic page in a theme whose whole premise is corners. */
html[data-theme="90s"] .qte-open,
html[data-theme="90s"] .tpage :is(.n12-panel,.n12-main) .qte-open,
html[data-theme="90s"] .examcta{
  border-radius:0 !important;
}