/*
  PPMNY People Portal — stylesheet.

  ---------------------------------------------------------------------------
  WHY THIS WAS REDRAWN, 16 September 2026
  ---------------------------------------------------------------------------
  The first cut was built from "PPMNY Brand Guidelines, October 2025" read
  literally, and it showed. "Kale for text and backgrounds" became a 150px slab
  of the darkest green in the palette above every page. "Clear space around the
  logo equals the width of the beet" became the masthead's padding. Carrot had
  no obvious home, so a green-to-orange gradient rule was invented to give it
  one. Headings sat at 24.8px against 16px body — a ratio of 1.55.

  plantpoweredmetrony.org uses the same palette at the opposite proportions.
  Measured off the live site on 16 September 2026:

      page ground     #F2EEE4          not a green field
      header          colour logo, small, on a pale ground
      section h2      32px / 700 / #1D5646 / line-height 1.1
      hero h2         48px / 700 / white
      body            16px / 27.2px  (1.7)
      buttons         pills, 13.6px, 700, UPPERCASE, Kale ink on #9BBF61
      rules           none anywhere

  So the colours were right and the proportions were wrong. This file keeps
  every brand colour, drops the gradient, takes the type to the site's scale,
  and moves the logo out of a green slab onto a pale bar — the way the
  organisation actually presents itself.

  ---------------------------------------------------------------------------
  PALETTE
  ---------------------------------------------------------------------------
    Lime         #6AA744   primary   logo green
    Carrot       #ED961A   primary   "for accents" — an accent, never a ground
    Kale         #1D5646   primary   headings, primary button
    Granny Smith #9BBF61   primary   "for accents and backgrounds"
    Cauliflower  #EFE8D8   neutral
    Coconut      #F5F2EA   neutral
    Black Bean   #3E333A   neutral   body text; pure #000 is banned
    Light Bean   #756D72   neutral   RETIRED here — see below
    White        #FFFFFF   neutral

  Light Bean is gone from this file. It measures 4.48:1 on Coconut and 4.19:1
  on the Carrot tint, so every time muted text moved onto a block it silently
  failed AA, and the old file carried a written rule ("muted text never sits on
  a block") to work around it. --muted #6F6862 is the same grey shifted until
  it passes on every surface in the system, which removes the rule instead of
  documenting it. Deep Kale #0B4132 is taken from the live site's own footer.

  MEASURED CONTRAST — every text/ground pair actually used here:

                    surface  surface-2  ground  granny-pale  carrot-tint
    --ink            12.07     11.37    10.70      10.29        10.08
    --muted           5.48      5.16     4.85       4.67         4.57
    --muted-strong    6.91      6.51     6.13       5.90         5.77
    --kale            8.50      8.00     7.53       7.24         7.09
    --kale-deep      11.56     10.89    10.24       9.86         9.65

    white / Kale      8.50      white / deep Kale  11.56
    carrot-ink / carrot-tint    9.02
    muted-strong / --line       5.25   <- the disabled submit button
    White / Lime      2.91  FAILS      White / Carrot  2.34  FAILS
                      Lime and Carrot are never text backgrounds.

  TYPOGRAPHY — Gotham is the brand's primary font; the guidelines name
  Montserrat as the substitute "where a web-safe or universal font is
  required", and warn the two must never appear together. Montserrat
  throughout, self-hosted, zero third-party requests.

  NO JavaScript on the volunteer pages. The "Other" field reveals through a
  CSS sibling selector.
*/

@font-face {
  font-family: 'Montserrat';
  /* Not cache-busted, unlike the PHP-emitted asset URLs: this reference lives inside the
     stylesheet, and the stylesheet's own URL is versioned by mtime — so replacing the font
     means also touching portal.css, which re-versions and re-reads this line. */
  src: url('montserrat-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --lime: #6aa744;
  --carrot: #ed961a;
  --kale: #1d5646;
  --kale-deep: #0b4132;
  --granny-smith: #9bbf61;
  --black-bean: #3e333a;
  --white: #ffffff;

  /* surfaces, warm-neutral, lightest first */
  --surface: #ffffff;      /* the card */
  --surface-2: #faf8f2;    /* a block inside the card */
  --ground: #f4f1e9;       /* the page field */

  /* tints of brand colours — a tint of a brand colour is still that colour */
  --granny-pale: #e8f0da;  /* selected rows, avatars, the step marker */
  --paper-tan:   #efe8d8;  /* the site's third off-white, used on its callout panels */
  --carrot-tint: #fbe8cd;  /* warning blocks and the provisional-rate chip */
  --carrot-ink: #5a3500;   /* 9.02:1 on the tint above */

  /* ink */
  --ink: #3e333a;
  --muted: #6f6862;        /* passes AA on every surface above */
  --muted-strong: #5f585c; /* for text sitting on --line */

  /* hairlines */
  --line: #e6e0d2;
  --line-soft: #efeade;

  /* hover + focus. The focus ring is deliberately a non-brand blue so it reads
     unmistakably as a system focus indicator rather than as decoration. */
  --kale-hover: #164436;
  --focus: #0b5cad;

  /* one radius scale, so nothing is rounded by accident */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* the card's lift. Two layers: a wide soft one for depth and a tight one for
     the edge. Tinted with Kale rather than black so it reads warm. */
  --lift: 0 1px 2px rgba(29, 86, 70, .06), 0 10px 34px -12px rgba(29, 86, 70, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The UA's [hidden] { display: none } is an ELEMENT-level rule, so any class here that sets
   display beats it and the element renders anyway. That is how the timesheet shipped with
   its "Everyone did the same?" bar visible before a single person had been added. */
[hidden] { display: none !important; }

body {
  font-family: 'Montserrat', 'Helvetica Neue', Oxygen-Sans, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--ground);
  font-size: 16px;
  line-height: 1.7;          /* the site's own measure: 27.2px on 16px */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- top bar -------------------------------------------------------
   The colour lockup, small, on the page ground — which is how the organisation
   presents itself everywhere else. The white knock-out logo and the Kale slab
   it needed are both gone. */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
@media (min-width: 720px) { .topbar { padding: 22px 32px 21px; } }

.topbar img {
  display: block;
  height: 30px;
  width: auto;
  flex: 0 0 auto;
}
@media (min-width: 720px) { .topbar img { height: 34px; } }

/* A small uppercase chip. PPMNY's own buttons are uppercase pills, so this
   carries the house voice without competing with the page heading. */
.kick {
  margin-left: auto;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kale);
  background: var(--granny-pale);
  border-radius: var(--r-pill);
  padding: 5px 13px 6px;
  white-space: nowrap;
}

/* ---------- shell --------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  flex: 1 0 auto;
  padding: 0;
}
@media (min-width: 720px) {
  .shell { padding: 40px 20px 64px; }
}

.card {
  background: var(--surface);
  padding: 30px 20px 34px;
}
@media (min-width: 720px) {
  .card {
    padding: 44px 48px 40px;
    border-radius: var(--r-lg);
    box-shadow: var(--lift);
  }
}

/* ---------- type ----------------------------------------------------------
   The site sets section headings at 32px against 16px body with 1.1 leading.
   That 2:1 ratio is the single change that does most of the work here; the old
   file ran 1.55:1 and every page read flat because of it. */
h1 {
  font-size: 1.75rem;
  line-height: 1.12;
  font-weight: 700;
  color: var(--kale);
  margin: 0 0 12px;
  letter-spacing: -.02em;
  text-wrap: balance;
}
@media (min-width: 720px) { h1 { font-size: 2rem; } }

h2 {
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--kale);
  margin: 0;
  letter-spacing: -.005em;
}

.intro {
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 52ch;
}

/* ---------- section block -------------------------------------------------
   "Shapes of color break up sections of information for easy scanning." Quieter
   than the old Coconut fill: a near-white warm surface inside a hairline, so
   the block groups without shouting.

   PORTABILITY: the surface is on the .qblock DIV, never on the <fieldset>. A
   <legend> is rendered specially by every engine (it straddles the fieldset's
   border box) and engines disagree once the fieldset also has a background —
   which is why the first cut needed `float: left` to drag the legend inside the
   padding box, and why that broke in a different Chromium build. The div does
   the styling, the fieldset stays unstyled and purely semantic. */
.qblock {
  padding: 22px 18px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
/* Two stacked blocks with no gap read as one block with a seam through it. */
.qblock + .qblock { margin-top: 18px; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;             /* fieldsets have a UA min-width that can prevent shrinking */
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--kale);
}

/* A field label inside a block — the heading for one question. `:not(.opt)`
   keeps it off the option rows, which are choices rather than headings. */
.qblock > label:not(.opt) {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--kale);
  margin: 0 0 4px;
}
/* Helper text under a label. */
.hint {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ---------- options ------------------------------------------------------- */
.opt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 15px;
  min-height: 48px;         /* comfortably over the 44px iOS minimum */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  cursor: pointer;
  line-height: 1.5;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.opt:hover { border-color: var(--granny-smith); }
.opt:focus-within {
  border-color: var(--kale);
  box-shadow: 0 0 0 3px rgba(29, 86, 70, .14);
}
/* :has() is progressive: without it the checkbox still works, you lose the tint. */
.opt:has(input:checked) {
  border-color: var(--granny-smith);
  background: var(--granny-pale);
}
/* The consent tick follows a file input rather than another option row, so it
   needs the gap the option stack gets from margin-bottom. */
.opt.consent { margin-top: 16px; }

.opt input[type="checkbox"] {
  width: 21px; height: 21px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--kale);
  cursor: pointer;
}
.opt-text { flex: 1; cursor: pointer; }

.other-wrap { display: none; flex-basis: 100%; margin-top: 14px; }
#opt-other:checked ~ .other-wrap { display: block; }
.other-wrap label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

/* ---------- form fields ---------------------------------------------------
   One rule for every text-entry control in the portal. It used to live only in
   hours.css, which the profile page and the non-scripted staff pages never
   load — so the bio box rendered as a raw monospace browser textarea and the
   timesheet's "What it was" field as a 21px Arial input beside a branded date
   picker. Anything typed into lands here. */
input[type="text"], input[type="email"], input[type="search"], input[type="date"],
input[type="number"], input[type="tel"], input[type="url"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 48px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 140px; resize: vertical; }
input[type="text"]:hover, input[type="email"]:hover, input[type="search"]:hover,
input[type="date"]:hover, textarea:hover, select:hover { border-color: #d6cdb9; }
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--kale);
}
::placeholder { color: #9d968f; opacity: 1; }

/* The file input cannot be restyled as a whole, but its button half can, and
   that is the part that reads as a browser control. Left raw, it put a 22px
   grey OS button directly under a 48px branded field. */
input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
}
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kale);
  background: var(--granny-pale);
  border: 0;
  border-radius: var(--r-pill);
  padding: 13px 20px;
  margin-right: 14px;
  min-height: 46px;
  cursor: pointer;
  transition: background-color .14s ease;
}
input[type="file"]::file-selector-button:hover { background: #dbe8c6; }
input[type="file"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* A rejected submission, shown above the form it belongs to. Carrot as the
   accent stripe, never as the text ground: pale tint, dark brown ink, 9.02:1. */
.formerror {
  background: var(--carrot-tint);
  color: var(--carrot-ink);
  border-left: 4px solid var(--carrot);
  border-radius: var(--r-sm);
  padding: 14px 17px;
  font-size: .94rem;
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ---------- buttons -------------------------------------------------------
   PPMNY's own buttons are pills, and that shape is the most recognisable thing
   the site does. The site sets them at 13.6px uppercase, which is right for a
   link in a marketing page and too small for the one control that submits a
   volunteer's answers — so the pill shape is kept and the weight is raised.
   Deep Kale rather than Kale: 11.56:1 with white, and it reads as the heavier
   of the two greens, which is what a primary action should be. */
button {
  margin-top: 28px;
  width: 100%;
  padding: 17px 22px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--white);
  background: var(--kale-deep);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 54px;
  transition: background-color .14s ease, transform .1s ease;
}
button:hover { background: var(--kale-hover); }
button:active { transform: translateY(1px); }
button:focus-visible,
.opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* A secondary action — "Change my answers", "Log another", "Back to the form".
   BOTH element types, deliberately: three pages render this as an anchor
   (navigation, not a state change), and with a button-only selector they
   rendered as raw blue underlined browser links on a live staff page. */
.actions { margin: 26px 0 0; }
a.btn-secondary, button.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  min-height: 48px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--kale);
  background: var(--granny-pale);
  border: 0;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .14s ease;
}
a.btn-secondary:hover, button.btn-secondary:hover { background: #dbe8c6; }
a.btn-secondary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- status pages --------------------------------------------------
   The heading is the thing that carries the meaning, so it leads. No centred
   column: on the receipt a centred 44ch measure started 77px right of the
   warning block, the table and the footer beneath it, which put four different
   left edges on one short page. */
.status { padding: 2px 0 0; }
.status h1 { color: var(--kale); }
.status p {
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 52ch;
}

/* Icons follow the brand: "outlined illustrations ... based on geometric shapes
   and have rounded corners ... minimal". Stroked, never filled. The tinted disc
   behind them is gone — at 76px it was the largest element on a sign-in page
   with three things on it, and a pale tan circle on white barely registered
   anyway. Small, inline, above the heading. Each is aria-hidden: the heading
   beneath says the same thing in words. */
.icon {
  width: 30px; height: 30px;
  margin: 0 0 16px;
  display: flex; align-items: center; justify-content: center;
}
.icon svg {
  width: 30px; height: 30px;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-ok   svg { stroke: var(--lime); }
.icon-warn svg { stroke: var(--carrot); }
.icon-lock svg { stroke: var(--kale); }

/* ---------- footer -------------------------------------------------------- */
.foot {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
}
/* Style guide: "Underline and bold clickable hyperlinks (url locations and emails)." */
.foot a {
  color: var(--kale);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===========================================================================
   STAFF PAGES — the parts rendered through ppmny_page()
   ---------------------------------------------------------------------------
   The staff timesheet loads hours.css on top of this file, but its sign-in,
   refusal, error and receipt pages do NOT: they render through ppmny_page(),
   which pulls only this stylesheet. Anything they use therefore has to live
   here. Getting that wrong is not subtle — the sign-in button rendered as a raw
   blue underlined browser link, and the receipt's table had no styling at all,
   both live on the host before anyone looked at them.
   =========================================================================== */

/* ---------- sign in ------------------------------------------------------- */
a.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 28px;
  min-height: 54px;
  background: var(--kale-deep);          /* 11.56:1 with white */
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background-color .14s ease, transform .1s ease;
}
a.btn-google:hover { background: var(--kale-hover); }
a.btn-google:active { transform: translateY(1px); }
a.btn-google:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The Google mark is Google's own colours by their brand terms, and it is the
   one place in this portal where a non-PPMNY palette is correct. It sits ON the
   button, so the mark carries the colour and the label stays white. */
a.btn-google .g-mark { width: 19px; height: 19px; flex: 0 0 auto; }

/* ---------- receipt ------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 8px 4px 4px;
  margin-bottom: 24px;
}
.rows { width: 100%; border-collapse: collapse; font-size: .92rem; text-align: left; }
.rows th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; padding: 6px 12px 9px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rows td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rows td.num, .rows th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows tbody tr:last-child td { border-bottom: 0; }
.muted { color: var(--muted); }
.actions.center { text-align: center; }

/* A skipped row is not a handled row — this is how the page says so.
   Written to beat `.status p`, which is the same specificity and would
   otherwise repaint this --muted on the Carrot tint and squeeze it into the
   prose measure, where the tinted block floated free of everything around it. */
.warn-note, .status .warn-note {
  background: var(--carrot-tint);
  color: var(--carrot-ink);
  border-left: 4px solid var(--carrot);
  border-radius: var(--r-sm);
  padding: 14px 17px;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: none;
}

/* ---------- who is signed in ---------------------------------------------- */
.whoami-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--muted);
  margin: 0 0 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.whoami-bar strong { color: var(--ink); font-weight: 700; }
.whoami-bar .dot {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--granny-pale); color: var(--kale);
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.whoami-bar .signout { margin-left: auto; }
/* A real button, because signing out is a state change and must be a POST.
   Styled as a link so it does not compete with the submit button at the foot. */
button.linkish {
  width: auto; margin: 0; min-height: 44px; padding: 0 4px;
  background: none; border: 0; border-radius: 0; color: var(--kale);
  font-size: .85rem; font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
button.linkish:hover { background: none; color: var(--kale-deep); }
button.linkish:active { transform: none; }

/* ===========================================================================
   THE STAFF SIDE — dashboard, projects and profile
   ---------------------------------------------------------------------------
   Four pages behind one Google sign-in: /staff/, /hours/, /projects/ and /me/.
   Only the timesheet loads hours.css, so everything the other three use lives
   here. .step, .shell-wide, .empty and .chip-prov are in this block for that
   reason — they were in hours.css and three pages that need them never load it.
   =========================================================================== */

.shell-wide { max-width: 960px; }

/* ---------- navigation ----------------------------------------------------
   Replaces the "People portal" chip on a signed-in page. Uppercase and
   letterspaced, like every small label on plantpoweredmetrony.org, so it reads
   as navigation rather than as prose. */
.brand { display: block; line-height: 0; text-decoration: none; color: inherit; }
.brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

.staffnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.navlink {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
a.navlink:hover { background: var(--surface); color: var(--kale); }
a.navlink:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The page you are on is a <span>, not a link to itself. */
.navlink.is-here { background: var(--granny-pale); color: var(--kale); }

.navdot {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  margin-left: 6px;
  background: var(--kale); color: var(--white);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}

@media (max-width: 560px) {
  /* The logo and four nav items will not share one row at phone width without the
     nav wrapping under the logo and dragging the bar to three lines. Let it wrap
     as its own row instead, full width, still tappable. */
  .topbar { flex-wrap: wrap; row-gap: 12px; }
  .staffnav { margin-left: 0; width: 100%; gap: 2px; }
  .navlink { padding: 6px 10px; font-size: .68rem; }
  .navdot { margin-left: auto; }
}

/* ---------- dashboard bays ------------------------------------------------ */
.bays {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
/* auto-fit rather than a fixed count. Three bays in a two-column grid left the third
   stranded alone on a second row, and a fixed three-column rule would leave a hole
   the day a bay is unavailable because its data file is missing. This gives three
   across when three fit and closes up when one drops out. */
@media (min-width: 700px) { .bays { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }

.bay {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.bay:hover { border-color: var(--granny-smith); box-shadow: var(--lift); transform: translateY(-1px); }
.bay a {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
  padding: 20px 20px 18px;
  text-decoration: none; color: inherit;
  border-radius: var(--r-md);
}
.bay a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bay h2 { font-size: 1.15rem; }
.bay p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
/* The figure behind a bay. It was uppercase and letterspaced — a label treatment, on
   what is usually a short sentence ("You can log any of the 13 kinds of work"), which
   made the tile shout its footnote louder than its name. */
.bay-meta {
  font-size: .84rem !important; font-weight: 700; color: var(--kale) !important;
}
.bay-go { margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 700; color: var(--kale); }
/* A bay with no data behind it is shown and marked, not hidden. Hiding it makes a
   deploy that forgot a file look like a portal that never had the feature. */
.bay.is-off { padding: 20px 20px 18px; opacity: .72; }
.bay.is-off:hover { border-color: var(--line-soft); box-shadow: none; transform: none; }
.bay.is-off h2 { color: var(--muted); }

/* ---------- sections ------------------------------------------------------ */
.step { margin-bottom: 34px; position: relative; }
.step > h2 { margin-bottom: 12px; }
.step > p { margin: 0 0 16px; max-width: 60ch; color: var(--muted); }

.notes { margin: 8px 0 0; }
.notes h2 { margin-bottom: 12px; }
.notes ul { margin: 0; padding-left: 20px; }
.notes li { margin: 0 0 10px; color: var(--muted); line-height: 1.65; }
.notes li strong { color: var(--ink); }

/* A caveat under a heading, not a label. It was uppercase and letterspaced, which is a
   treatment for two or three words — on a full sentence it reads as shouting and takes
   longer to read than the heading it qualifies. */
.stamp {
  font-size: .84rem; line-height: 1.6;
  color: var(--muted); margin: -8px 0 22px; max-width: 62ch;
}
.crumb { margin: 0 0 14px; font-size: .85rem; }
.crumb a { color: var(--kale); font-weight: 700; text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sub { margin: 34px 0 14px; }

.empty {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 30px 22px; color: var(--muted); font-size: .92rem; line-height: 1.6;
}
.empty b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }

/* Carrot as an accent DOT, never as the background of text — the fill is the pale tint and
   the ink is the dark brown that measures 9.02:1 on it. */
.chip-prov {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--carrot-tint); color: var(--carrot-ink);
  border-radius: var(--r-pill); padding: 3px 11px;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.chip-prov::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--carrot); }

/* ---------- the project tally --------------------------------------------
   A bar chart drawn in CSS rather than SVG, because every bar is already a
   link and a row of text — the bar is the emphasis, not the data. It is scaled
   against the BUSIEST option, not against the number of people who answered:
   at these counts a share-of-total bar is a row of slivers that distinguishes
   nothing. The number beside it is the value, and it is always shown. */
.tallies { list-style: none; margin: 0 0 34px; padding: 0; }
.tally-row + .tally-row { margin-top: 4px; }
.tally-row a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name n" "bar bar";
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color .14s ease;
}
.tally-row a:hover { background: var(--surface-2); }
.tally-row a:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.tally-name { grid-area: name; font-size: .95rem; line-height: 1.45; }
.tally-n {
  grid-area: n; font-size: 1.15rem; font-weight: 700; color: var(--kale);
  font-variant-numeric: tabular-nums;
}
.tally-bar {
  grid-area: bar; display: block; height: 6px; border-radius: var(--r-pill);
  background: var(--line-soft); overflow: hidden; margin-top: 4px;
}
.tally-bar i { display: block; height: 100%; width: 0; background: var(--granny-smith); border-radius: inherit; }
/* One class per 5%, because `style-src 'self'` blocks a style="" attribute and does it
   SILENTLY — an <i> with no width fills its parent, so the first cut drew every bar at
   100% and a count of 3 looked the same as a count of 20. Inline styles cannot be used
   anywhere in this portal; this is the pattern for anything data-driven. */
.tally-bar i.w0 { width: 0%; }
.tally-bar i.w5 { width: 5%; }
.tally-bar i.w10 { width: 10%; }
.tally-bar i.w15 { width: 15%; }
.tally-bar i.w20 { width: 20%; }
.tally-bar i.w25 { width: 25%; }
.tally-bar i.w30 { width: 30%; }
.tally-bar i.w35 { width: 35%; }
.tally-bar i.w40 { width: 40%; }
.tally-bar i.w45 { width: 45%; }
.tally-bar i.w50 { width: 50%; }
.tally-bar i.w55 { width: 55%; }
.tally-bar i.w60 { width: 60%; }
.tally-bar i.w65 { width: 65%; }
.tally-bar i.w70 { width: 70%; }
.tally-bar i.w75 { width: 75%; }
.tally-bar i.w80 { width: 80%; }
.tally-bar i.w85 { width: 85%; }
.tally-bar i.w90 { width: 90%; }
.tally-bar i.w95 { width: 95%; }
.tally-bar i.w100 { width: 100%; }
/* Nobody picked this one. That is the most useful row on the page, so it is dimmed
   rather than dropped — dropping it is how a gap becomes invisible. */
.tally-row.is-zero .tally-name { color: var(--muted); }
.tally-row.is-zero .tally-n { color: var(--muted); }

/* ---------- a list of people ---------------------------------------------- */
.plist { list-style: none; margin: 0 0 10px; padding: 0; }
.prow {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.plist .prow:last-child { border-bottom: 0; }
.pavatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--granny-pale); color: var(--kale);
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
}
.pavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The name is the link to the person's record — the question this page exists to answer is
   whose record to open, so the answer should be one click rather than a search. */
a.pname {
  font-weight: 700; font-size: .98rem; overflow-wrap: anywhere;
  color: var(--ink); text-decoration: none;
  text-decoration-color: var(--granny-smith);
}
a.pname:hover { color: var(--kale); text-decoration: underline; text-underline-offset: 3px; }
a.pname:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.prow:hover { background: var(--surface-2); }
.prow { border-radius: var(--r-sm); padding-left: 10px; padding-right: 10px; }
.preg { margin-left: auto; font-size: .82rem; color: var(--muted); text-align: right; }

/* ---------- free text ------------------------------------------------------
   Someone answered a question in their own words; the page shows the words and
   says who wrote them, and does not paraphrase. */
.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li { margin: 0 0 14px; }
.quotes blockquote {
  margin: 0; padding: 14px 17px;
  background: var(--surface-2); border-left: 3px solid var(--granny-smith);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .95rem; line-height: 1.6;
}
.quotes cite {
  display: block; margin-top: 6px; padding-left: 20px;
  font-size: .78rem; font-style: normal; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ---------- profile ------------------------------------------------------- */
/* Top-aligned, not centred: against a three-line intro a centred avatar floats
   halfway down the block instead of sitting beside the name it belongs to. */
.mehead { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 32px; flex-wrap: wrap; }
.meavatar {
  margin-top: 2px;
  width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  background: var(--granny-pale); color: var(--kale);
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 700;
}
.mehead h1 { margin-bottom: 6px; }
.mehead .intro { margin: 0; }

.facts { margin: 0 0 20px; display: grid; gap: 1px; background: var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.fact {
  display: grid; gap: 2px 18px; padding: 14px 17px; background: var(--surface-2);
}
@media (min-width: 560px) { .fact { grid-template-columns: 180px 1fr; align-items: baseline; } }
.fact dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.fact dd { margin: 0; font-size: .98rem; overflow-wrap: anywhere; }

/* A row for a kind of work this person is not set up for. Dimmed, never hidden —
   the timesheet can still reach it, and hiding it here would contradict that. */
.rows tr.not-mine td { color: var(--muted); }
.rows .yes { font-weight: 700; color: var(--kale); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Links in running text
   ---------------------------------------------------------------------------
   Every link in this portal was styled by its own class, which meant a link written
   into an ordinary paragraph fell through to the browser default: #0000EE, underlined,
   on a Kale-and-cream page. That is the same fault that made the sign-in screen look
   broken, and it was live on the volunteer door and anywhere else prose carried a
   mailto. Scoped to anchors with NO class of their own, so every element that already
   has a treatment — the buttons, the nav, the tallies, the tiles — is untouched. */
.card p:not([class]) > a:not([class]),
.card dd > a:not([class]),
.card .launch-help > a {
  color: var(--kale);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.card p:not([class]) > a:not([class]):hover,
.card dd > a:not([class]):hover,
.card .launch-help > a:hover { color: var(--kale-deep); }
.card p:not([class]) > a:not([class]):focus-visible,
.card dd > a:not([class]):focus-visible,
.card .launch-help > a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   The launcher — the front door at people.plantpoweredmetrony.org
   ---------------------------------------------------------------------------
   Bryan's description of what a portal is, 18 May 2026: "A portal is a system to
   access. Now you may need it as just a neon portal because you're a donor... versus
   someone who's a volunteer that may want to sign up for an opportunity. Versus maybe
   we give stakeholders a different type... And then we can phase the use types."

   So the front door is a list of USE TYPES, not a paragraph. Each one is a door that
   goes somewhere real — a tile that explains why it cannot let you in is the dead
   control this layout exists to avoid. The types that are not built yet are named in
   one line underneath, as text, so nobody clicks a promise. */
.launch { margin: 0 0 30px; }
.launch h1 { color: var(--kale); margin-bottom: 10px; }
.launch .intro { margin: 0; max-width: 56ch; }

.gates { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .gates { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.gate { display: flex; }
.gate > a {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; padding: 24px 22px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gate > a:hover { border-color: var(--granny-smith); box-shadow: var(--lift); transform: translateY(-2px); }
.gate > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.gate-mark {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--granny-pale); color: var(--kale);
  display: grid; place-items: center;
}
.gate-mark svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.gate h2 { margin: 0; font-size: 1.18rem; color: var(--kale); }
.gate p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.gate-go {
  margin-top: auto; padding-top: 14px;
  font-size: .85rem; font-weight: 700; color: var(--kale);
  /* The arrow belongs to the label. Left to wrap it dropped onto a line of its own
     under the link text, which reads as a stray glyph rather than a direction. */
  white-space: nowrap;
}

/* The one tile that leaves the portal. Carrot rather than Granny Smith on the mark,
   and the arrow points out rather than right, so it reads as a different kind of door
   before the label is read. */
.gate.is-out .gate-mark { background: var(--carrot-tint); color: var(--carrot-ink); }

/* The one question this page gets asked: "I was sent a link and I can't find it."
   It sits under the doors rather than above them, because it is the answer for the
   person whose door did not work — not the first thing anyone needs. */
/* Sits on the tan band now, so it no longer draws its own panel — a panel on a
   panel is the doubled-container look the bands exist to remove. */
.launch-help {
  margin: 0; padding: 0;
  font-size: .95rem; line-height: 1.7; color: var(--ink);
  max-width: 62ch;
}
.launch-help b { color: var(--ink); font-weight: 700; }
.launch-help a { color: var(--kale); font-weight: 700; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   A summary strip — the numbers a page opens with
   ---------------------------------------------------------------------------
   Only where the figures ARE the subject. The projects bay is a page about counts,
   so it should answer "how many, and what has nobody" before the reader scrolls.
   Nothing here is a figure this host cannot source: every number is counted from a
   file already on disk. */
.sumstrip {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 560px) { .sumstrip { grid-template-columns: repeat(3, 1fr); } }
.sumstat { background: var(--surface-2); padding: 15px 17px 14px; }
.sumstat b {
  display: block; font-size: 1.65rem; line-height: 1.1; font-weight: 700;
  color: var(--kale); font-variant-numeric: tabular-nums;
}
.sumstat span {
  display: block; margin-top: 4px;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
/* A count that means "somebody should look at this" is carrot, not Kale. It is the
   only colour change on the strip and it is carrying meaning, not decoration. */
.sumstat.is-gap b { color: var(--carrot-ink); }

/* The provisional-rate marker inside the rate cell. A second line rather than a chip:
   the chip is right on the timesheet, where it appears once beside the type you chose,
   and wrong on a thirteen-row table where it became a field of colour. */
.prov-note {
  display: block; margin-top: 2px;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--carrot-ink); white-space: nowrap;
}

/* ===========================================================================
   BANDS — the device the public site actually uses for depth
   ===========================================================================
   plantpoweredmetrony.org has exactly ONE shadow on the whole page: an ambient
   rgba(62,51,58,.2) 0 0 20px around the page wrapper. Nothing else is lifted.
   Separation comes from full-bleed blocks of flat colour — a dark green band,
   a tan panel, an off-white field — each running edge to edge with the text
   inset 50px.

   The portal did the opposite: every section was a rounded white card with a
   two-layer lift, which is a SaaS dashboard idiom, not this organisation's.
   A page marked `.banded` drops the card entirely and lets its children bleed.

   No JavaScript and no extra markup: the negative-margin trick lets a child
   escape a constrained parent, so render.php is untouched. */
.card:has(> .band) { background: none; padding: 0; }
@media (min-width: 720px) {
  .card:has(> .band) { padding: 0; border-radius: 0; box-shadow: none; }
  .shell:has(.band)  { padding-block: 0; }
}
.shell:has(.band) { padding-block: 0; }

.band {
  /* escape the shell's max-width, then put the gutter back inside */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + 20px);
  padding-block: 40px;
  position: relative;
  /* Contains the bleeding illustration. clip, not hidden: hidden makes the band a scroll
     container, and a position:sticky child (the timesheet's submit bar) would then stick to
     the band instead of the window — silently, with no error. hidden stays as the fallback
     for browsers without clip. */
  overflow: hidden;
  overflow: clip;
}
@media (min-width: 720px) {
  .band { padding-inline: calc(50vw - 50% + 48px); padding-block: 70px; }
}

.band-dark  { background: var(--kale-deep); color: #fff; }
.band-tan   { background: var(--paper-tan); }
.band-tan .foot { border-top-color: rgba(62,51,58,.14); margin-top: 26px; }
.band-plain { background: var(--ground); }

.band-dark h1,
.band-dark h2 { color: #fff; }
.band-dark p  { color: rgba(255, 255, 255, .82); }
.band-dark a  { color: var(--granny-smith); }

/* ---------- the opening ----------------------------------------------------
   The site opens its hero at 48px against 16px body — a 3:1 ratio. The portal
   opened at 28px, barely 1.75:1, and a flat scale is most of what reads as
   flat. This is the single cheapest change on the page. */
.hero h1 {
  font-size: clamp(2.25rem, 7vw, 3rem);   /* 36 -> 48px, the site's hero size */
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 14px;
  max-width: 18ch;
}
.hero .intro {
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}

/* ---------- the botanical -------------------------------------------------
   The site injects a 700x813 line-art SVG behind a 382px-tall photo panel via
   ::before content:url(), deliberately oversized so it spills past the frame
   into the surrounding whitespace. That single device is most of why the page
   reads as hand-made rather than templated.

   Here it is INLINE SVG, which is markup rather than a fetched resource, so it
   passes `default-src 'none'` with no CSP change at all. It is decorative and
   carries aria-hidden, so a screen reader never meets it. */
.sprig {
  position: absolute;
  pointer-events: none;
  color: var(--granny-smith);
  opacity: .22;
}
.band-dark .sprig { opacity: .3; }

.sprig-right {
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: auto;
}
@media (min-width: 720px) {
  .sprig-right { right: -40px; width: 420px; }
}
/* Below the text at phone width it would sit under the buttons, so it goes. */
@media (max-width: 560px) { .sprig-right { display: none; } }

/* Inner pages that take the bands (the volunteer door, for now). The crumb sits on the
   dark hero, and a .step as the last thing in a band must not add a gap under itself. */
.hero .crumb { margin-bottom: 18px; }
.band > .step:last-child,
.band > .step:last-of-type:has(+ .foot) { margin-bottom: 0; }
.band-tan .step > h2 { margin-bottom: 10px; }

/* A tan band holding nothing but the footer line (the two volunteer forms) should be a
   footer, not a third section: no rule above it and a fraction of the padding. */
.band-tan:has(> .foot:only-child) { padding-block: 28px 36px; }
.band-tan > .foot:only-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* The /link/ form's hidden field. Off-screen rather than display:none, because some form
   fillers skip fields that are display:none — which is the one thing this field must not let
   them do. aria-hidden and tabindex=-1 keep it away from people using a screen reader or Tab. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* A primary action that navigates rather than submits (the volunteer page's "Email me my
   link"). Same look as the main button, as an anchor, sized to its words rather than full
   width because it sits in a paragraph of text rather than at the foot of a form. */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; min-height: 52px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  color: var(--white); background: var(--kale-deep);
  border-radius: var(--r-pill);
  transition: background-color .14s ease;
}
a.btn:hover { background: var(--kale-hover); color: var(--white); }
a.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- The visual survey (/survey/) --------------------------------------------------------
   Every choice is a real checkbox or radio inside a label drawn as a card. The input is
   visually hidden but stays in the tab order, so the card works with a keyboard and a screen
   reader; :has() carries its checked and focused state onto the card. No script. */
.survey-q { border: 0; margin: 0 0 38px; padding: 0; min-width: 0; }
.survey-q > legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 6px;
  font-weight: 700; font-size: 1.12rem; color: var(--kale-deep); }
.survey-q > legend .step-n { flex: none; }
.survey-q > .hint { margin: 0 0 14px; }
.picks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picks-wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: var(--white); border: 1.5px solid var(--line-soft); border-radius: 15px; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease; }
.pick-short { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick-icon { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--kale); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.pick-label { font-weight: 700; color: var(--ink, #2b2a28); line-height: 1.3; }
.pick-desc { font-size: .9rem; color: var(--muted); line-height: 1.45; }
.pick:hover { border-color: var(--granny-smith); }
.pick:has(input:checked) { border-color: var(--kale); background: #eef4e4; }
.pick:has(input:checked)::after { content: "\2713"; position: absolute; top: 10px; right: 12px;
  font-weight: 700; color: var(--kale); }
.pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The numbered circle. Defined in hours.css for the timesheet, which this page does not load —
   so it is repeated here, scoped to the survey, rather than left to render as bare text. */
.survey-q .step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--granny-pale);
  color: var(--kale); display: grid; place-items: center; font-size: .78rem; font-weight: 700; }