/* ══════════════════════════════════════════════════════════════════════
   FTC — Direction B "Highlighter" · revision 3
   Shared stylesheet for the full-site mockup.

   WHAT CHANGED AND WHY
   Revision 2 read as generated, and the reasons were specific: every
   block was a white rounded card with the same border and shadow, the
   feature rows alternated left/right at a dead 50/50, a soft blob sat
   behind every hero, one radius was used on everything, and the page
   carried no concrete institutional detail.

   The register this revision aims for is the printed material a school
   nonprofit actually produces — a prospectus, a fact sheet, a yearbook
   page, an honour board. Those things are *ruled and gridded*, not
   carded and floating, and they are dense with specifics.

   So the geometry is deliberately mixed rather than uniform:
     · SQUARE and ruled   — anything that is data or record: the impact
                            figures, the awards ladder, the honour roll,
                            the FAQ, the team grid.
     · ROUNDED            — anything that is a person or an action:
                            photographs, buttons, the highlighter.
   One radius everywhere is what a generator does. Two vocabularies used
   for two different kinds of content is what a designer does.

   Shadows are down to one use. Feature rows sit on an asymmetric
   12-column grid that deliberately does not fill the measure. The
   splash appears in the hero only, cropped hard by the section edge so
   it reads as a shape rather than a floating blob.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand, straight out of style.css ────────────────────────────── */
  --ftc-blue:      #211F5E;   /* --primaryblue */
  --ftc-blue-lift: #2F3F93;   /* --lightblue */
  --ftc-blue-wash: #EDEEF5;
  --ftc-blue-deep: #16143F;

  /* ── The splash. images/bgs/main.svg is this colour at 24%. ─────── */
  --aqua:      #8AE0E5;
  --aqua-wash: #EAF9FA;
  --aqua-deep: #1F8A92;

  /* ── Carried over from the homepage's own buttons ───────────────── */
  --mint:  #34D399;
  --amber: #FFD43B;

  /* ── Paper ──────────────────────────────────────────────────────── */
  --paper:    #FCFCFA;
  --paper-2:  #FFFFFF;
  /* Graph paper: a fine 8px grid with a heavier line every fifth. This is
     the paper maths homework is actually done on, and the two-rhythm
     structure is what stops the texture reading as generic decoration. */
  --grid-fine:  #EDEEE7;
  --grid-major: #DFE0D8;
  --rule:     #DCDDD6;   /* the workhorse hairline */
  --rule-firm:#B9BBB2;   /* a heavier rule, for closing a block */
  --graphite: #1B1E25;
  --pencil:   #6B7280;

  /* ── The marks someone makes on the page ────────────────────────── */
  --marker:   #FFE45C;
  --marker-d: #F0C400;
  --redpen:   #DC3B34;
  --checked:  #1F8A5B;

  /* ── Type ───────────────────────────────────────────────────────── */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --hand:    'Caveat', cursive;

  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem;
  --t-lg: 1.2rem; --t-xl: 1.44rem; --t-2xl: 1.728rem; --t-3xl: 2.2rem;
  --t-hero: clamp(2.3rem, 4.2vw, 3.5rem);
  --t-num:    2rem;
  --t-num-lg: 3.2rem;

  /* ── Space ──────────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px;

  /* ── Radius — two vocabularies, used on purpose ─────────────────── */
  --r-photo:  10px;  /* photographs and people */
  --r-action:  5px;  /* buttons and inputs */
  /* Records, tables and data blocks take no radius at all. */

  /* The only shadow in the system. It exists for one thing: lifting a
     sign-in panel off the page. Everything else uses a rule. */
  --lift: 0 1px 2px rgba(27,30,37,.06), 0 16px 40px rgba(27,30,37,.09);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ── Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--graphite); font-family: var(--body);
  font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased;
  background: var(--paper);
  overflow-x: hidden;
}

/* ── Page texture ─────────────────────────────────────────────────────
   Six options, one class each, so a page can be switched by changing a
   single attribute on <body>. Graph paper is the default: a fine 8px
   grid with a heavier line every fifth, which is the paper maths
   homework is actually done on. The two-rhythm structure is what stops
   it reading as generic decoration. */
body, .tx-graph {
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}
.tx-grid {
  background-image: linear-gradient(#F1F1EC 1px, transparent 1px),
                    linear-gradient(90deg, #F1F1EC 1px, transparent 1px);
  background-size: 34px 34px;
}
.tx-ruled {
  background-image: linear-gradient(#E8E9E2 1px, transparent 1px);
  background-size: 100% 30px;
}
.tx-dots {
  background-image: radial-gradient(#D8D9D2 1.1px, transparent 1.1px);
  background-size: 26px 26px;
}
.tx-aqua {
  background-image: linear-gradient(#E3F2F3 1px, transparent 1px),
                    linear-gradient(90deg, #E3F2F3 1px, transparent 1px);
  background-size: 34px 34px;
}
.tx-margin { background-image: none; position: relative; }
.tx-margin::before { content: ''; position: fixed; top: 0; bottom: 0; left: 56px; width: 1px;
                     background: rgba(220,59,52,.26); pointer-events: none; z-index: 0; }

/* ── The signed-in console ────────────────────────────────────────────
   MyFTC. A dense, ruled application surface: the sidebar is the one
   place the brand blue is allowed to run full height, and everything
   inside is records — sessions, hours, requests — so it is ruled rather
   than carded, exactly like the fact sheet and the honour roll. */
.console { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.side { background: var(--ftc-blue); color: #fff; padding: var(--s-5) 0;
        display: flex; flex-direction: column; }
.side .mark { font-family: var(--display); font-weight: 800; font-size: var(--t-lg);
              color: #fff; padding: 0 var(--s-5) var(--s-5); letter-spacing: -.02em; }
.side h6 { font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
           color: rgba(255,255,255,.45); padding: var(--s-4) var(--s-5) var(--s-2); margin: 0; }
.side a { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5);
          color: rgba(255,255,255,.82); text-decoration: none; font-size: var(--t-sm);
          font-weight: 500; border-left: 3px solid transparent; }
.side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a[aria-current] { background: rgba(255,255,255,.09); color: #fff; font-weight: 600;
                        border-left-color: var(--marker); }
.side .spacer { margin-top: auto; }
.console > #dashbody { padding: var(--s-6) var(--s-7) var(--s-9); min-width: 0; }
/* Screens that render without a sidebar — the application forms — reuse the
   console surface but take the whole width. */
.console.single { grid-template-columns: 1fr; }
.console.single > #dashbody, .console.single > div { max-width: 760px; margin: 0 auto;
                                                     padding: var(--s-8) var(--s-5); width: 100%; }
.chead { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
         padding-bottom: var(--s-4); border-bottom: 2px solid var(--ftc-blue);
         margin-bottom: var(--s-6); }
.chead h1 { font-size: var(--t-2xl); }
.chead .who { margin-left: auto; font-size: var(--t-sm); color: var(--pencil); }

/* Stat tiles — ruled, square, number-led */
.tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
         border: 1px solid var(--rule); background: var(--paper-2); }
.tile { padding: var(--s-5); border-right: 1px solid var(--rule); }
.tile:last-child { border-right: 0; }
.tile .n { font-family: var(--display); font-weight: 800; font-size: var(--t-num-lg);
           line-height: 1; letter-spacing: -.04em; color: var(--ftc-blue);
           font-variant-numeric: tabular-nums; display: block; }
.tile .k { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
           text-transform: uppercase; color: var(--pencil); display: block; margin-top: 8px; }
.tile .rank { display: inline-block; margin-top: var(--s-3); }

/* Rank progress — the same stepped measure as the marketing ladder */
.progress { margin-top: var(--s-6); border: 1px solid var(--rule); background: var(--paper-2);
            padding: var(--s-5); }
.progress .bar { height: 10px; background: var(--ftc-blue-wash); margin: var(--s-4) 0 var(--s-2); }
.progress .bar i { display: block; height: 100%; background: var(--marker);
                   border-right: 2px solid var(--marker-d); }
.progress .ends { display: flex; justify-content: space-between; font-size: var(--t-xs);
                  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
                  color: var(--pencil); }

/* Records — sessions, requests, confirmations */
.record { border-top: 2px solid var(--ftc-blue); margin-top: var(--s-6); }
.record .rhead, .record .r { display: grid; gap: var(--s-5); padding: var(--s-3) 0;
                             align-items: center; border-bottom: 1px solid var(--rule); }
.record .rhead { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--pencil); }
.record.sessions .rhead, .record.sessions .r { grid-template-columns: 1fr 8rem 5rem 9rem; }
.record.reqs .rhead, .record.reqs .r { grid-template-columns: 1fr 10rem 8rem 7rem; }
.record .r strong { font-family: var(--display); font-weight: 700; display: block; }
.record .r small { color: var(--pencil); }
.record .num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
               text-align: right; }
.record .foot { display: grid; grid-template-columns: 1fr 8rem 5rem 9rem; gap: var(--s-5);
                padding: var(--s-4) 0; border-top: 2px solid var(--ftc-blue);
                font-family: var(--display); font-weight: 800; }
.state { font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
         text-transform: uppercase; }
.state.ok { color: var(--checked); }
.state.wait { color: var(--pencil); }
.state.due { color: var(--redpen); }

/* Admin toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
           border: 1px solid var(--rule); background: var(--paper-2);
           padding: var(--s-3) var(--s-4); }
.toolbar .seg { display: flex; border: 1px solid var(--rule-firm); }
.toolbar .seg a { padding: 7px 14px; font-size: var(--t-sm); font-weight: 600;
                  text-decoration: none; color: var(--graphite);
                  border-right: 1px solid var(--rule-firm); }
.toolbar .seg a:last-child { border-right: 0; }
.toolbar .seg a[aria-current] { background: var(--ftc-blue); color: #fff; }
.toolbar .grow { margin-left: auto; display: flex; gap: var(--s-2); }

@media (max-width: 900px) {
  .console { grid-template-columns: 1fr; }
  .side { flex-direction: row; overflow-x: auto; padding: 0; }
  .side .mark, .side h6, .side .spacer { display: none; }
  .side a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .side a[aria-current] { border-left: 0; border-bottom-color: var(--marker); }
  .console > #dashbody { padding: var(--s-5) var(--s-5) var(--s-8); }
  .record.sessions .rhead, .record.sessions .r,
  .record.reqs .rhead, .record.reqs .r, .record .foot { grid-template-columns: 1fr 6rem; }
  .record .rhead span:nth-child(2), .record .r .hide { display: none; }
}
h1,h2,h3,h4,h5 { font-family: var(--display); font-weight: 700; line-height: 1.12;
                 letter-spacing: -.022em; margin: 0; color: var(--ftc-blue); }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ftc-blue-lift); }
:focus-visible { outline: 3px solid var(--marker-d); outline-offset: 2px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--s-6); position: relative; z-index: 1; }
.eyebrow { font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
           letter-spacing: .16em; text-transform: uppercase; color: var(--aqua-deep); margin: 0; }

/* ── THE SIGNATURE: a highlighter sweep ───────────────────────────────
   Two angled background layers rather than a positioned pseudo-element,
   so `box-decoration-break: clone` repeats the mark on every line
   fragment and a phrase that wraps still gets a proper sweep. This is
   the one flourish in the system; everything else stays quiet.        */
.hl {
  background-image:
    linear-gradient(102deg, transparent 0 .6%, var(--marker) 1.6% 97.5%, transparent 99%),
    linear-gradient(98deg,  transparent 0 3%,  var(--marker) 4.5% 94%,  transparent 96%);
  background-size: 100% 62%, 100% 30%;
  background-position: 0 82%, 0 22%;
  background-repeat: no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .14em;
}
.band-blue .hl { color: var(--graphite); }

/* ── Buttons — rounded, small, solid. No gradients, no glow. ──────── */
.btn { display: inline-block; font-family: var(--body); font-weight: 600; font-size: var(--t-sm);
       cursor: pointer; border-radius: var(--r-action); padding: 10px 20px;
       border: 1.5px solid transparent; text-decoration: none; transition: .12s var(--ease); }
.btn-primary { background: var(--ftc-blue); color: #fff; border-color: var(--ftc-blue); }
.btn-primary:hover { background: var(--ftc-blue-lift); border-color: var(--ftc-blue-lift); }
.btn-secondary { background: transparent; color: var(--ftc-blue); border-color: var(--rule-firm); }
.btn-secondary:hover { border-color: var(--ftc-blue); background: var(--ftc-blue-wash); }
.btn-board { background: var(--amber); color: #183154; border-color: #E0B900; }
.btn-board:hover { background: #F5C400; }
.btn-partner { background: var(--mint); color: #0E4635; border-color: #14A177; }
.btn-partner:hover { background: #17BE85; }
.btn-onblue { background: #fff; color: var(--ftc-blue); border-color: #fff; }
.btn-onblue:hover { background: var(--marker); border-color: var(--marker); }
.btn-lg { font-size: var(--t-base); padding: 13px 26px; }

/* ── Header — a solid masthead with a printed rule under it ───────── */
header { position: sticky; top: 0; z-index: 50; background: var(--paper-2);
         border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(33,31,94,.06); }
header .wrap { display: flex; align-items: center; gap: var(--s-6); height: 74px; }
#nav-logo { height: 40px; width: auto; }
nav { margin-left: auto; }
.navlist { display: flex; align-items: center; gap: var(--s-6); list-style: none;
           margin: 0 0 0 auto; padding: 0; }
.navlist a:not(.btn) { text-decoration: none; color: var(--graphite); font-size: var(--t-sm);
                       font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; }
.navlist a:not(.btn):hover { border-bottom-color: var(--rule-firm); }
.navlist a[aria-current] { color: var(--ftc-blue); font-weight: 600;
                           border-bottom-color: var(--marker-d); }
.navlist a.btn { text-decoration: none; }
#hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px;
             color: var(--ftc-blue); margin-left: auto; }
#hamburger svg { display: block; }

/* ── Hero ─────────────────────────────────────────────────────────────
   12 columns, and the content deliberately does not fill them. Copy
   takes 1–5, the photograph 7–13, so there is an empty column between
   them and the row is not the 50/50 split every template ships with.  */
.hero { padding: var(--s-9) 0 var(--s-8); position: relative;
        border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--s-6);
              align-items: center; }
.hero .copy { grid-column: 1 / 7; }
.hero figure { grid-column: 8 / 13; margin: 0; }
.hero.single .copy { grid-column: 1 / 10; }
.hero h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.032em;
           margin: var(--s-3) 0 var(--s-4); }
.hero p.lede { font-size: var(--t-lg); color: var(--pencil); max-width: 42ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero img { border-radius: var(--r-photo); }

/* The splash — hero only, and cropped hard by the section edge, so it
   reads as a shape the layout cut rather than a blob floating behind. */
.splash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.splash::before { content: ''; position: absolute; background: no-repeat center/contain;
                  background-image: url('../images/bgs/main.svg');
                  top: -34%; right: -14%; width: 62vw; height: 150%; }

/* ── Section scaffolding — rules, not cards ───────────────────────── */
.chapter { padding: var(--s-8) 0 var(--s-5); }
.chapter h3 { font-size: var(--t-2xl); display: inline-block;
              border-bottom: 3px solid var(--marker); padding-bottom: 4px; }
.band-aqua { background: var(--aqua-wash); border-block: 1px solid #D3ECEE;
             padding: var(--s-8) 0; }
.band-blue { background: var(--ftc-blue); color: #fff; padding: var(--s-8) 0; }
.band-blue h2, .band-blue h3, .band-blue h4, .band-blue h5 { color: #fff; }
.band-blue p { color: rgba(255,255,255,.82); }
.band-blue .eyebrow { color: var(--aqua); }
.band-blue .chapter h3 { border-bottom-color: var(--aqua); }

/* ── Editorial rows ───────────────────────────────────────────────────
   Same 12-column grid as the hero, with the two arrangements offset
   differently so the page does not metronome between two mirror images. */
.row { padding: var(--s-7) 0; }
.row .wrap { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--s-6);
             align-items: center; }
.row .shot { margin: 0; grid-column: 1 / 7; }
.row .copy { grid-column: 8 / 13; }
.row.flip .copy { grid-column: 1 / 6; }
.row.flip .shot { grid-column: 7 / 13; }
.row img { border-radius: var(--r-photo); }
.row h2 { font-size: var(--t-xl); margin: var(--s-3) 0 var(--s-4); }
.row p { color: var(--pencil); }
.row .btn { margin-top: var(--s-5); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-8); }

/* ── OUR IMPACT — a fact sheet, not a card ────────────────────────────
   Same four figures the live site ships, in the same order, including
   the two partner logos with their empty captions. Square, divided by
   hairlines, sitting on a tinted strip. A fact sheet is what an
   institution prints; a floating rounded card is what a template does. */
.factsheet { border-block: 1px solid var(--rule-firm); background: var(--paper-2); }
#statbanner { display: grid; grid-template-columns: 1fr 1fr; max-width: 1140px;
              margin: 0 auto; padding: 0 var(--s-6); }
.fs-group { padding: var(--s-5) 0; }
.fs-group + .fs-group { border-left: 1px solid var(--rule); padding-left: var(--s-7); }
.fs-group:first-child { padding-right: var(--s-7); }
.fs-label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em;
            text-transform: uppercase; color: var(--pencil); margin-bottom: var(--s-4); }
.fs-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
#statbanner figure { display: flex; align-items: center; justify-content: center;
                     gap: var(--s-4); margin: 0; min-height: 76px; }
/* The two partner logos are set at different scales in the source files — the
   City of San Mateo seal is a circular emblem and needs more room than a
   wordmark to read at all. Sized individually and centred in its own cell. */
.fs-logos figure img { height: 44px; width: auto; }
.fs-logos figure:last-child img { height: 72px; }
.fs-stats figure { justify-content: flex-start; }
#statbanner figure img { width: auto; }
.fs-stats figure img { height: 46px; }
#statbanner figcaption h3 { font-family: var(--display); font-weight: 800;
                            font-size: var(--t-num); letter-spacing: -.03em; line-height: 1;
                            font-variant-numeric: tabular-nums; }
#statbanner figcaption p { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
                           text-transform: uppercase; color: var(--pencil); margin-top: 6px; }
#statbanner figcaption:empty, #statbanner figcaption h3:empty { display: none; }

/* ── Subjects — a ruled index, not a cloud of pills ───────────────── */
.subjects { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
            margin-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.22); }
.subjects span { font-family: var(--display); font-weight: 600; font-size: var(--t-base);
                 color: #fff; padding: 13px var(--s-4) 13px 0;
                 border-bottom: 1px solid rgba(255,255,255,.22); }

/* ── The awards ladder — a stepped table ──────────────────────────────
   Six equal <h4>s in a wrapping grid on the live site, so the point
   thresholds are the same weight as the word beside them. Ruled rows
   with the number in its own column; the bar shows the interval.      */
.ladder { margin-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.24); }
.ladder .step { display: grid; grid-template-columns: 5.5rem 1fr 42%; gap: var(--s-5);
                align-items: center; padding: 14px 0;
                border-bottom: 1px solid rgba(255,255,255,.24); }
.ladder .pts { font-family: var(--display); font-weight: 800; font-size: var(--t-num);
               font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em;
               color: var(--marker); }
.ladder .rank { font-family: var(--display); font-weight: 600; font-size: var(--t-lg);
                color: #fff; }
.ladder .meter { height: 7px; background: rgba(255,255,255,.16); }
.ladder .meter i { display: block; height: 100%; background: var(--aqua); }

/* ── Team — a yearbook page ───────────────────────────────────────────
   Tight grid, hairline gutters, square photographs, names set below in
   a ruled caption. A school organisation's team page should look like
   the school's own yearbook, not like a startup's About section.      */
.yearbook { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
            gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
            margin-top: var(--s-6); }
.member { background: var(--paper-2);
          border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.member .shot { aspect-ratio: 4/5; overflow: hidden; background: var(--ftc-blue-wash); }
.member .shot img { width: 100%; height: 100%; object-fit: cover; }
.member .who { padding: var(--s-3) var(--s-4) var(--s-4);
               border-top: 1px solid var(--rule); }
.member .who h4 { font-size: var(--t-base); }
.member .who p { font-size: var(--t-xs); color: var(--pencil); letter-spacing: .06em;
                 text-transform: uppercase; margin-top: 3px; }

/* ── Honour roll — a ruled record ─────────────────────────────────── */
.roll { margin-top: var(--s-6); border-top: 2px solid var(--ftc-blue); }
.roll .tier { display: grid; grid-template-columns: 15rem 1fr; gap: var(--s-6);
              padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.roll .tier h5 { font-size: var(--t-base); }
.roll .tier .hrs { font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
                   color: var(--aqua-deep); font-variant-numeric: tabular-nums; }
.roll .tier p { color: var(--pencil); font-size: var(--t-sm); line-height: 1.9; }

/* ── FAQ — a ruled definition list, not three cards ───────────────── */
.faq { columns: 2; column-gap: var(--s-8); border-top: 2px solid var(--ftc-blue);
       padding-top: var(--s-5); margin-top: var(--s-5); }
.faq .qa { break-inside: avoid; padding-bottom: var(--s-5); margin-bottom: var(--s-5);
           border-bottom: 1px solid var(--rule); }
.faq h5 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.faq p { color: var(--pencil); font-size: var(--t-sm); }

/* ── Forum question rows ──────────────────────────────────────────── */
.thread { border-top: 2px solid var(--ftc-blue); margin-top: var(--s-5); }
.thread .q { display: grid; grid-template-columns: 1fr 9rem; gap: var(--s-5);
             padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.thread h4 { font-size: var(--t-base); margin-bottom: 4px; }
.thread p { color: var(--pencil); font-size: var(--t-sm); }
.thread .meta { text-align: right; font-size: var(--t-xs); font-weight: 600;
                letter-spacing: .06em; text-transform: uppercase; color: var(--pencil); }
.thread .meta .tag { display: block; color: var(--aqua-deep); margin-bottom: 6px; }
.thread .meta .done { color: var(--checked); }

/* ── Prose ────────────────────────────────────────────────────────── */
.prose h2 { font-size: var(--t-lg); margin-bottom: var(--s-3);
            padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule); }
.prose p { color: var(--pencil); }
.prose > div { margin-bottom: var(--s-7); }

/* ── Blog — square-cropped photograph, ruled caption ──────────────── */
.postlist { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
            gap: var(--s-7); margin-top: var(--s-5); }
.post { display: block; text-decoration: none; color: inherit; }
.post img { aspect-ratio: 3/2; object-fit: cover; width: 100%; border-radius: var(--r-photo); }
.post .cardtext { padding-top: var(--s-4); margin-top: var(--s-4);
                  border-top: 2px solid var(--ftc-blue); }
.post h2 { font-size: var(--t-lg); margin: var(--s-2) 0; }
.post:hover h2 { color: var(--ftc-blue-lift); }
.post .date { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
              text-transform: uppercase; color: var(--pencil); }
.post small { display: block; margin-top: var(--s-3); color: var(--pencil); font-size: var(--t-sm); }

/* ── Forms — the one place a shadow is allowed ────────────────────── */
.formbox { background: var(--paper-2); border: 1px solid var(--rule); border-top: 4px solid var(--ftc-blue);
           box-shadow: var(--lift); padding: var(--s-7) var(--s-8); max-width: 680px; margin: 0 auto; }
.formbox h2 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.formbox .sub { color: var(--pencil); font-size: var(--t-sm); margin-bottom: var(--s-6);
                padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
.field { margin-bottom: var(--s-4); }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: var(--t-xs); color: var(--pencil); margin-bottom: 6px; line-height: 1.5; }
.field input { width: 100%; font: inherit; padding: 11px 13px; background: var(--paper-2);
               border: 1.5px solid var(--rule-firm); border-radius: var(--r-action);
               color: var(--graphite); }
.field input:focus { outline: none; border-color: var(--ftc-blue);
                     box-shadow: 0 0 0 3px rgba(33,31,94,.12); }
.choice { display: flex; gap: var(--s-3); }
.choice .btn { flex: 1; text-align: center; }
.formbox .submit { width: 100%; text-align: center; margin-top: var(--s-3); }
.formlink { display: block; text-align: center; margin-top: var(--s-5); padding-top: var(--s-5);
            border-top: 1px solid var(--rule); font-size: var(--t-sm); }

/* ── Footer — the fat, specific footer an established org has ─────── */
footer { background: var(--ftc-blue); color: #fff; margin-top: var(--s-9); }
footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7);
              padding: var(--s-8) 0 var(--s-7); }
footer h5 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
            color: var(--aqua); margin-bottom: var(--s-4); }
footer img.logo { height: 44px; width: auto; margin-bottom: var(--s-4); }
footer p { color: rgba(255,255,255,.72); font-size: var(--t-sm); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a { color: rgba(255,255,255,.85); text-decoration: none; font-size: var(--t-sm); }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer .legal { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
                border-top: 1px solid rgba(255,255,255,.18); padding: var(--s-5) 0 var(--s-7);
                font-size: var(--t-xs); color: rgba(255,255,255,.6); }
footer .socials { margin-left: auto; display: flex; gap: var(--s-4); align-items: center; }
footer .socials img { height: 22px; width: auto; opacity: .8; }
footer .socials a:hover img { opacity: 1; }

/* ── Mockup ribbon ────────────────────────────────────────────────── */
.ribbon { background: var(--graphite); color: #fff; text-align: center;
          font-size: var(--t-xs); padding: 7px var(--s-5); margin: 0; }
.ribbon a { color: var(--marker); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  #statbanner { grid-template-columns: 1fr; }
  .fs-group:first-child { padding-right: 0; padding-bottom: var(--s-5);
                          border-bottom: 1px solid var(--rule); }
  .fs-group + .fs-group { border-left: 0; padding-left: 0; }
  .ladder .step { grid-template-columns: 5rem 1fr; }
  .ladder .meter { display: none; }
}
@media (max-width: 900px) {
  .hero .copy, .hero figure, .hero.single .copy,
  .row .copy, .row .shot, .row.flip .copy, .row.flip .shot { grid-column: 1 / -1; }
  .row.flip .copy { order: -1; }
  .pair, .formgrid { grid-template-columns: 1fr; }
  .faq { columns: 1; }
  .roll .tier { grid-template-columns: 1fr; gap: var(--s-2); }
  .thread .q { grid-template-columns: 1fr; }
  .thread .meta { text-align: left; }
  .navlist { display: none; }
  #hamburger { display: block; }
  footer .top { grid-template-columns: 1fr 1fr; }
  .formbox { padding: var(--s-6) var(--s-5); }
  :root { --t-num-lg: 2.6rem; --s-9: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }

/* ══════════════════════════════════════════════════════════════════════
   PRODUCTION ADDITIONS
   Everything above this line is the design system as signed off in
   design/. Below are the pieces the live site needs that the mockup did
   not have to model: the mobile navigation, long-form article pages, the
   homework-help forum, the loading overlay, and modals.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Mobile navigation ────────────────────────────────────────────────
   The old site copy-pasted a 25-line hamburger script into five separate
   HTML files, each with a slightly different link list, and only ran it
   at page load — so resizing the window left you with no navigation at
   all. This is a checkbox toggle: no JavaScript, works on resize, and
   the link list lives in one place because the markup is identical on
   every page. */
#navtoggle { position: absolute; opacity: 0; pointer-events: none; }
.navpanel { display: contents; }
@media (max-width: 900px) {
  .navpanel { display: block; position: fixed; inset: 74px 0 auto; background: var(--paper-2);
              border-bottom: 1px solid var(--rule); padding: var(--s-4) var(--s-6) var(--s-6);
              transform: translateY(-120%); transition: transform .22s var(--ease);
              box-shadow: var(--lift); max-height: calc(100vh - 74px); overflow-y: auto; }
  #navtoggle:checked ~ .navpanel { transform: translateY(0); }
  .navpanel .navlist { display: grid; gap: var(--s-2); }
  .navpanel .navlist a:not(.btn) { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .navpanel .navlist a.btn { text-align: center; margin-top: var(--s-2); }
  #hamburger { display: block; }
}

/* ── Article pages ────────────────────────────────────────────────── */
.article { max-width: 72ch; margin: 0 auto; }
.article .kicker { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: baseline;
                   padding-bottom: var(--s-4); border-bottom: 2px solid var(--ftc-blue);
                   margin-bottom: var(--s-6); }
.article h1 { font-size: var(--t-3xl); margin-bottom: var(--s-4); }
.article > p { color: var(--pencil); margin-bottom: var(--s-5); }
.article h2 { font-size: var(--t-xl); margin: var(--s-7) 0 var(--s-3); }
.article img, .article iframe { width: 100%; border-radius: var(--r-photo); margin: var(--s-6) 0; }
.article iframe { aspect-ratio: 16/9; height: auto; border: 0; }

/* ── Homework help forum ──────────────────────────────────────────────
   The list is rendered by homeworkhelp.js, so these class names have to
   match what that file emits. */
#hwh-container { border-top: 2px solid var(--ftc-blue); margin-top: var(--s-5); }
.hwh-preview { display: grid; grid-template-columns: 1fr 12rem; gap: var(--s-5);
               padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); cursor: pointer;
               align-items: start; }
.hwh-preview:hover h3 { color: var(--ftc-blue-lift); }
.hwh-title { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; }
.hwh-title h3 { font-size: var(--t-lg); }
.hwh-preview p { color: var(--pencil); font-size: var(--t-sm); margin-top: var(--s-2); }
.hwh-preview img { max-width: 220px; border-radius: var(--r-photo); margin-top: var(--s-3); }
.hwh-preview img:not([src]) { display: none; }
.hwh-preview-bar { display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
                   font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--pencil); }
.hwh-preview-bar div { display: flex; align-items: center; gap: 5px; }
.hwh-post { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.hwh-post h3, .hwh-post h4 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.hwh-post small { color: var(--pencil); font-size: var(--t-sm); }
.hwh-post p { color: var(--graphite); margin-top: var(--s-3); }
.hwh-post img { max-width: 100%; border-radius: var(--r-photo); margin-top: var(--s-4); }
.hwh-post img:not([src]) { display: none; }
.hwh-post textarea { width: 100%; min-height: 140px; font: inherit; padding: 11px 13px;
                     border: 1.5px solid var(--rule-firm); border-radius: var(--r-action);
                     margin-bottom: var(--s-3); }
.hwh-post input[type=file] { display: block; margin-bottom: var(--s-4); font-size: var(--t-sm); }
@media (max-width: 760px) { .hwh-preview { grid-template-columns: 1fr; }
                            .hwh-preview-bar { flex-direction: row; align-items: center; } }

/* ── Modals ───────────────────────────────────────────────────────────
   util.js create_modal emits #modal1_container > #modal1. */
#modal1_container, #answermodal_container { position: fixed; inset: 0; z-index: 200;
  background: rgba(27,30,37,.55); display: flex; align-items: center; justify-content: center;
  padding: var(--s-5); overflow-y: auto; }
#modal1, #answermodal { background: var(--paper-2); border: 1px solid var(--rule);
  border-top: 4px solid var(--ftc-blue); max-width: 640px; width: 100%; padding: var(--s-6);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--lift); }
#modal1 h3, #answermodal h3 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
#modal1 small, #answermodal small { color: var(--pencil); }
#modal1 h4 { font-size: var(--t-base); margin-top: var(--s-5); margin-bottom: 4px; }
#modal1 input[type=text], #modal1 textarea { width: 100%; font: inherit; padding: 11px 13px;
  border: 1.5px solid var(--rule-firm); border-radius: var(--r-action); margin-top: 6px; }
#modal1 textarea { min-height: 160px; }
#modal1 input[type=file] { margin: var(--s-3) 0; display: block; font-size: var(--t-sm); }
#modal1 button:not(.btn), #answermodal button:not(.btn) { font: inherit; font-weight: 600; font-size: var(--t-sm);
  cursor: pointer; border-radius: var(--r-action); padding: 10px 20px;
  border: 1.5px solid var(--ftc-blue); background: var(--ftc-blue); color: #fff;
  margin-top: var(--s-4); }
#modal1 button:not(.btn):hover, #answermodal button:not(.btn):hover { background: var(--ftc-blue-lift); }

/* ── The loading overlay ──────────────────────────────────────────────
   util.js render_loader. IDs are namespaced under loader_* so they no
   longer collide with the award progress bar. */
#loader_background { position: fixed; inset: 0; z-index: 300; display: flex;
  flex-flow: column nowrap; align-items: center; justify-content: center; gap: var(--s-3);
  background: rgba(22,20,63,.86); transition: opacity .5s; }
#loader_progress_percent { color: #fff; font-family: var(--display); font-weight: 800;
  font-size: var(--t-2xl); font-variant-numeric: tabular-nums; }
#loader_progressbackground { width: min(400px, 80vw); height: 10px;
  background: rgba(255,255,255,.2); }
#loader_progressbar { width: 0; height: 10px; background: var(--marker); transition: .1s; }
#loader_background small { color: rgba(255,255,255,.72); }

/* ── Utility ──────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--ftc-blue);
            color: #fff; padding: 12px 20px; }
.skiplink:focus { left: 0; }
.center { text-align: center; }
.muted { color: var(--pencil); }

/* ── The transcript, promoted ─────────────────────────────────────────
   The volunteer transcript is the most differentiated thing the product
   makes and it used to be a button buried in the Sessions tab. It sits
   at the top of Overview now, with both actions a tutor actually wants:
   look at it, and save a copy. */
.transcript { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5);
              align-items: center; border: 1px solid var(--rule); border-left: 4px solid var(--marker-d);
              background: var(--paper-2); padding: var(--s-5); margin-bottom: var(--s-6); }
.transcript h3 { font-size: var(--t-lg); }
.transcript p { color: var(--pencil); font-size: var(--t-sm); margin-top: 6px; max-width: 56ch; }
.transcript .acts { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 760px) { .transcript { grid-template-columns: 1fr; } }

/* ── Disclosure groups ────────────────────────────────────────────────
   The admin console's job is to show what still needs a decision. Work
   that is finished is collapsed rather than listed: it is still one
   click away, but it does not compete with the queue. Built on <details>
   so it works with no JavaScript and is keyboard-operable for free. */
.disclosure { border: 1px solid var(--rule); background: var(--paper-2);
              margin-bottom: var(--s-4); }
.disclosure > summary { display: flex; align-items: center; gap: var(--s-3);
                        padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
                        font-family: var(--display); font-weight: 700; color: var(--ftc-blue); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: '▸'; font-family: var(--body); color: var(--pencil);
                                transition: transform .15s var(--ease); }
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary .count { margin-left: auto; font-family: var(--body);
                               font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
                               text-transform: uppercase; color: var(--pencil); }
.disclosure > summary .count.due { color: var(--redpen); }
.disclosure > summary:hover { background: var(--ftc-blue-wash); }
.disclosure > summary:focus-visible { outline: 3px solid var(--marker-d); outline-offset: -3px; }
.disclosure .body { padding: 0 var(--s-5) var(--s-5); border-top: 1px solid var(--rule); }
.disclosure .body > .record { margin-top: 0; border-top: 0; }

/* A queue that has nothing in it says so, rather than rendering blank. */
.queue-empty { padding: var(--s-6) 0; color: var(--pencil); font-size: var(--t-sm); }
.queue-empty strong { display: block; font-family: var(--display); color: var(--graphite);
                      font-size: var(--t-base); margin-bottom: 4px; }

/* Filters and selects in the console */
.selectrow { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
select, .console select { font: inherit; font-size: var(--t-sm); padding: 9px 32px 9px 12px;
  border: 1.5px solid var(--rule-firm); border-radius: var(--r-action); background: var(--paper-2);
  color: var(--graphite); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
select:focus { outline: none; border-color: var(--ftc-blue);
               box-shadow: 0 0 0 3px rgba(33,31,94,.12); }
input[type=search], input[type=date], input[type=time], input[type=number], textarea {
  font: inherit; font-size: var(--t-sm); padding: 9px 12px; border: 1.5px solid var(--rule-firm);
  border-radius: var(--r-action); background: var(--paper-2); color: var(--graphite); }
input[type=search]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=number]:focus, textarea:focus { outline: none; border-color: var(--ftc-blue);
  box-shadow: 0 0 0 3px rgba(33,31,94,.12); }

/* A tab that is deliberately inert until the feature behind it is built. */
.side a.pending { opacity: .55; }
.side a.pending::after { content: 'Soon'; margin-left: auto; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--marker);
  border: 1px solid rgba(255,228,92,.4); padding: 1px 5px; }

.article ul, .article ol { color: var(--pencil); margin: 0 0 var(--s-5); padding-left: 1.3em; }
.article li { margin-bottom: var(--s-2); }
.article > br { display: none; }

/* ── The Students screen ──────────────────────────────────────────────
   _populateSessions builds an explicit CSS grid, placing every cell with
   inline grid-column / grid-row. The columns it assumes were declared in
   the old style.css; without them every cell landed in column one and
   the table read as a single stack. Declared here, and the buttons the
   renderer emits are given the system's own button styling so the
   markup does not have to change. */
#sessions_grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,1fr) auto;
                 border-top: 2px solid var(--ftc-blue); margin-top: var(--s-5); }
#sessions_grid > div { padding: var(--s-3) var(--s-4) var(--s-3) 0;
                       border-bottom: 1px solid var(--rule); display: flex; align-items: center; }
#sessions_grid > div h4 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em;
                          text-transform: uppercase; color: var(--pencil); }
#sessions_grid .sessionsrow p { font-size: var(--t-sm); overflow-wrap: anywhere; }
#sessions_grid button { font: inherit; font-weight: 600; font-size: var(--t-sm); cursor: pointer;
                        border-radius: var(--r-action); padding: 7px 14px;
                        border: 1.5px solid var(--ftc-blue); background: var(--ftc-blue);
                        color: #fff; }
#sessions_grid button:hover { background: var(--ftc-blue-lift); border-color: var(--ftc-blue-lift); }
#sessions_grid .delete-session { background: transparent; color: var(--redpen);
                                 border-color: var(--rule-firm); }
#sessions_grid .delete-session:hover { background: var(--redpen); border-color: var(--redpen);
                                       color: #fff; }
/* The renderer emits a Material Icons ligature for the delete glyph. That font
   is no longer loaded, so the ligature would print as the literal word
   "delete"; hide the span and label the button instead. */
#sessions_grid .delete-session .material-icons { display: none; }
#sessions_grid .delete-session::after { content: 'Remove'; }
@media (max-width: 760px) {
  #sessions_grid { grid-template-columns: 1fr; border-top: 0; }
  #sessions_grid > div { grid-column: 1 / -1 !important; border-bottom: 0; padding: 2px 0; }
  #sessions_grid > div:nth-child(-n+4) { display: none; }
  #sessions_grid .sessionsrow:nth-child(4n+1) { border-top: 1px solid var(--rule);
                                                padding-top: var(--s-4); font-weight: 600; }
  #sessions_grid .sessionsrow:nth-child(4n) { padding-bottom: var(--s-4); }
}

/* The session-confirmation dialog. _getModalHTML emits #modal > .modal-content
   with its own inline styling for the box; it needs the overlay around it. */
/* The renderer toggles this with `style.display = "block" | "none"`, so the
   default has to be none and the shown state has to work as `block` — hence
   the centring is done with margin rather than flex, which an inline
   `display:block` would otherwise cancel. */
#modal { display: none; position: fixed; inset: 0; z-index: 200;
         background: rgba(27,30,37,.55); padding: var(--s-6) var(--s-5); overflow-y: auto; }
#modal .modal-content { width: min(640px, 100%) !important; margin: 0 auto !important;
                        border-radius: 0 !important; border: 1px solid var(--rule) !important;
                        border-top: 4px solid var(--ftc-blue) !important;
                        box-shadow: var(--lift); padding: var(--s-6) !important; }
#modal .modal-header { align-items: center; }
#modal h3 { font-size: var(--t-xl); }
#modal .exitbutton { cursor: pointer; font-family: var(--body); font-size: var(--t-sm);
                     font-weight: 600; color: var(--pencil); }
#modal .exitbutton:hover { color: var(--graphite); }
#modal label { display: block; font-size: var(--t-sm); font-weight: 600;
               margin: var(--s-4) 0 6px; }
#modal button { font: inherit; font-weight: 600; font-size: var(--t-sm); cursor: pointer;
                border-radius: var(--r-action); padding: 10px 20px; margin-top: var(--s-4);
                border: 1.5px solid var(--ftc-blue); background: var(--ftc-blue); color: #fff; }
#modal button:hover { background: var(--ftc-blue-lift); }
#modal .textred { color: var(--redpen); font-size: var(--t-sm); }
#modal .textgreen { color: var(--checked); font-size: var(--t-sm); }

/* The entry finder inside the admin Records disclosure. */
.card_holder { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
               gap: var(--s-4); margin-top: var(--s-4); }
.users_div_element { border: 1px solid var(--rule); background: var(--paper-2);
                     padding: var(--s-4); }
.users_div_element h3 { font-size: var(--t-base); }
.users_div_element p { font-size: var(--t-xs); color: var(--pencil); overflow-wrap: anywhere; }
.user_stats { display: flex; gap: var(--s-4); margin-top: var(--s-3); }
.user_stat h4 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
                text-transform: uppercase; color: var(--pencil); }
.user_stat p { font-family: var(--display); font-weight: 700; font-size: var(--t-base);
               color: var(--ftc-blue); }
.users_div_element button, #user_card_holder_container button { font: inherit; font-weight: 600;
  font-size: var(--t-sm); cursor: pointer; border-radius: var(--r-action); padding: 8px 16px;
  margin-top: var(--s-3); border: 1.5px solid var(--rule-firm); background: transparent;
  color: var(--ftc-blue); }
.users_div_element button:hover, #user_card_holder_container button:hover {
  background: var(--ftc-blue); border-color: var(--ftc-blue); color: #fff; }
.buttoncontainer { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
                   margin: var(--s-4) 0; }