/* The shell every page on tools.theclubupproject.com wears: the bar across the
   top, the header slab under it, and the footer. What sits between them is
   each tool's own stylesheet, and nothing here reaches into it.

   The look is the Ground Crew direction (docs/drafts/restyle on the research
   branch): a sister of theclubupproject.com rather than a copy. From the Site it
   keeps the yellow tag the wordmark sits on, Montserrat for headings and Open
   Sans for reading, Merienda for the odd warm line, and the navy banner with a
   diagonal edge that heads every one of its pages. What is the tools' own is
   the sewn patches (stamped in by scripts/shell.mjs) and the timing-light lamps.

   The theme is the identity, not the content. The patches, the tag and the slab
   carry the ground-crew idea; every heading, label, status and button is in
   plain words. Green and amber appear only as timing-light lamps, and lamps
   only ever mean status, always beside the words. No sparkles: the four-point
   star is now the stock symbol for an AI feature.

   Every token is prefixed --tc- so it can never collide with a tool's own
   --brand, --ink or --accent, which mean different things on different pages. */

:root {
  --tc-navy: #1c208b;
  --tc-navy-deep: #151a6e;
  --tc-yellow: #fcc200;
  --tc-yellow-dark: #e5b000;
  --tc-black: #1c1c1c;
  --tc-white: #ffffff;
  --tc-mist: #c9cbe6;        /* body text on navy: 8.1:1 */
  --tc-grey: #b9b9c2;        /* body text on black: 9:1 */
  --tc-line-dark: #3a3a40;
  --tc-hair: #c9cbe6;        /* the Site's lavender hairline, for panels */
  --tc-tint: #f6f4ec;        /* the odd quiet surface */
  --tc-lamp-off: #3a3a40;
  --tc-go: #1e8e3e;
  --tc-amber: #f0a500;
  --tc-radius: 4px;          /* one radius for fields, buttons, panels and tags */
  --tc-wrap: 1180px;
  --tc-display: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --tc-text: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --tc-hand: Merienda, "Comic Sans MS", cursive;
  --tc-typed: "Courier Prime", "Courier New", monospace;
  --tc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* The setup form, the same on every tool: one field height, one border,
     one label. Tools use these tokens rather than restating the values.
     Fields are 16px: anything smaller and an iPhone zooms in on tap. */
  --tc-field-h: 48px;
  --tc-field-line: #8a8a96;  /* on white: 3.5:1, over the 3:1 a field outline needs */
  --tc-field-line-hover: #5c5c68;
  --tc-field-font: 400 16px/1.3 var(--tc-text);
  --tc-label-font: 600 14.5px/1.3 var(--tc-display);
  --tc-label-ink: #2e2e36;
  --tc-hint-ink: #5a5a64;    /* on white: 6.9:1 */
  --tc-placeholder: #7a7a86;
}

.tc-wrap {
  max-width: var(--tc-wrap);
  margin: 0 auto;
  padding: 0 16px;
}

/* Visible to a screen reader, not on the page. */
.tc-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.tc-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tc-yellow); color: var(--tc-black);
  font: 700 14px/1 var(--tc-display); padding: 12px 16px; text-decoration: none;
}
.tc-skip:focus { top: 12px; }

/* ---------- form controls ---------- */

/* Every text box and select on every tool. Wrapped in :where() so these sit at
   zero specificity: a tool's own variant — a borderless box inside a table
   row, a narrow number field — wins without having to fight for it. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  box-sizing: border-box;
  min-height: var(--tc-field-h);
  padding: 0 12px;
  font: var(--tc-field-font);
  color: var(--tc-black);
  background-color: var(--tc-white);
  border: 1px solid var(--tc-field-line);
  border-radius: var(--tc-radius);
}
:where(textarea) { padding: 10px 12px; }
/* One chevron for every browser, instead of three different native ones. */
:where(select) {
  appearance: none;
  padding-right: 36px;
  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 d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231c208b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}
:where(input:not([type="checkbox"], [type="radio"]), select, textarea):hover:not(:disabled) {
  border-color: var(--tc-field-line-hover);
}
:where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible {
  outline: 2px solid var(--tc-navy);
  outline-offset: 1px;
  border-color: var(--tc-navy);
}
:where(input, select, textarea):disabled {
  color: var(--tc-placeholder);
  background-color: #f0f0f4;
  cursor: not-allowed;
}
:where(input, textarea)::placeholder { color: var(--tc-placeholder); opacity: 1; }
:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--tc-navy);
}

.tc-label {
  display: block;
  margin-bottom: 6px;
  font: var(--tc-label-font);
  color: var(--tc-label-ink);
}
.tc-hint {
  display: block;
  margin: 6px 0 0;
  font: 400 14px/1.45 var(--tc-text);
  color: var(--tc-hint-ink);
}

/* A search box with its matches under it: the combobox on /contest-scripts
   and /structure-chart. */
.combo { position: relative; }
.combo input { width: 100%; }
.combo ul {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--tc-white);
  border: 1px solid var(--tc-field-line);
  border-radius: var(--tc-radius);
  max-height: 320px;
  overflow: auto;
  box-shadow: 0 4px 14px rgb(28 28 28 / .14);
  font: 400 15.5px/1.35 var(--tc-text);
}
.combo li { padding: 9px 12px; cursor: pointer; }
.combo li:hover { background: #f1f1f6; }
/* The match the arrow keys are on. A left bar as well as a fill, so it is not
   colour alone that says which one Enter would take. */
.combo li.is-active { background: #f1f1f6; box-shadow: inset 3px 0 0 var(--tc-navy); }
.combo li small { display: block; color: var(--tc-hint-ink); font-size: 13.5px; margin: 1px 0 0; }
.combo li.none { color: var(--tc-hint-ink); cursor: default; }
.combo li.none:hover { background: none; }
.combo mark { background: none; color: var(--tc-navy); font-weight: 700; }

/* ---------- wordmark ---------- */

/* The Site's logo is a yellow tag with the name set on it in black capitals.
   Drawn here rather than borrowed, so it is sharp at any size and needs no
   image from Google's servers. */
.tc-mark {
  display: inline-block;
  background: var(--tc-yellow);
  color: var(--tc-black);
  font: 800 13px/1 var(--tc-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 6px 8px 5px;
  white-space: nowrap;
}

/* ---------- top bar ---------- */

.tc-bar {
  background: var(--tc-black);
  color: var(--tc-white);
  font-family: var(--tc-display);
  line-height: 1.2;
}
.tc-bar__inner {
  display: flex;
  align-items: center;
  gap: 8px 22px;
  min-height: 64px;
  flex-wrap: wrap;
}

.tc-home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tc-white);
  text-decoration: none;
  padding: 10px 0;
}
.tc-home__tools {
  font-size: 15px;
  font-weight: 700;
  padding-left: 10px;
  border-left: 1px solid var(--tc-line-dark);
}

/* Between the tools, not the Site: the Site's own pages are one button away,
   and a second copy of its navigation here would only drift out of date. */
.tc-nav { flex: 1 1 auto; }
.tc-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tc-nav a {
  display: block;
  position: relative;
  color: #c8c8cf;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 22px 9px;
  white-space: nowrap;
}
.tc-nav a:hover { color: var(--tc-white); }
.tc-nav a[aria-current="page"] { color: var(--tc-white); }
.tc-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px; bottom: 0;
  height: 3px;
  background: var(--tc-yellow);
}
/* A tool still in testing says so in the nav too, in words: aloud on a wide
   screen, where five tools and the way back must share one row, and on the page
   once the tools have a row of their own. The tool's own page always says it. */
.tc-nav__testing {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.tc-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  border: 2px solid var(--tc-yellow);
  border-radius: var(--tc-radius);
  color: var(--tc-yellow);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tc-return:hover { background: var(--tc-yellow); color: var(--tc-black); }
.tc-return svg { flex: none; }
/* Five tools leave no room on the row for the long label at any width the page
   reaches, so the button always shows the short one. */
.tc-return__long { display: none; }

.tc-bar a:focus-visible,
.tc-foot a:focus-visible {
  outline: 3px solid var(--tc-yellow);
  outline-offset: 2px;
}

/* Narrower, the tools drop to a row of their own and wrap, so none is ever
   hidden off the edge of the screen. */
@media (max-width: 1100px) {
  .tc-bar__inner { padding-top: 6px; }
  .tc-nav { order: 3; flex-basis: 100%; margin: 0 -9px; }
  .tc-nav ul { flex-wrap: wrap; }
  .tc-nav a { padding: 10px 9px 13px; }
  .tc-nav__testing {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    font: 600 12px/1 var(--tc-text); color: #e9c46a;
  }
}
@media (max-width: 540px) {
  .tc-bar__inner { column-gap: 12px; }
  .tc-home__tools { display: none; }
  .tc-return { padding: 7px 10px; }
  .tc-nav a { font-size: 14px; padding: 8px 8px 11px; }
}

/* ---------- the header slab ---------- */

/* Club Up's banner: a navy slab with a diagonal right edge, the title in two
   lines of ExtraBold capitals, first yellow, then white. Beside it, the tool's
   sewn patch on a halftone (drawn by site.js). This is the one place on a tool
   page the theme lives; from the line under it down, everything is the form. */
.tc-hero {
  position: relative;
  overflow: hidden;
  background: var(--tc-white);
}
.tc-ht {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tc-hero__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
/* The slab runs off the left edge of the screen, as the Site's banners do. Drawn
   on the row, because the slab's own diagonal clip would cut a pseudo-element off. */
.tc-hero__row::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(100% - 16px);
  width: 100vw;
  background: var(--tc-navy);
}
.tc-slab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 112px 36px 0;
  background: var(--tc-navy);
  color: var(--tc-white);
  /* The clip overshoots the box by a couple of pixels top and bottom, so its
     antialiased edge never lands on the box's own edge as a faint line. */
  clip-path: polygon(0 -2px, 100% -2px, calc(100% - 88px) calc(100% + 2px), 0 calc(100% + 2px));
}
.tc-slab h1 {
  margin: 0;
  font: 800 clamp(32px, 4vw, 46px)/1.02 var(--tc-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--tc-white);
}
.tc-slab h1 span { display: block; color: var(--tc-yellow); }
.tc-hand {
  margin: 14px 0 0;
  font: 700 clamp(19px, 2vw, 22px)/1.35 var(--tc-hand);
  color: var(--tc-white);
}
.tc-lede {
  margin: 12px 0 0;
  max-width: 60ch;
  font: 400 16.5px/1.55 var(--tc-text);
  color: var(--tc-mist);
  text-wrap: pretty;
}
.tc-hero .tc-patch {
  position: relative;
  z-index: 2;
  align-self: center;
  display: block;
  width: clamp(130px, 15vw, 176px);
  height: auto;
  margin: 18px 6px 18px 30px;
}

/* The home page's slab is the big one. */
.tc-hero--home .tc-slab { padding-top: 44px; padding-bottom: 46px; }
.tc-hero--home .tc-slab h1 { font-size: clamp(36px, 4.8vw, 56px); }
.tc-hero--home .tc-patch { width: clamp(180px, 22vw, 268px); margin-left: 36px; }

/* For a page whose own controls follow straight on. */
.tc-hero--compact .tc-slab { padding-top: 26px; padding-bottom: 28px; }
.tc-hero--compact .tc-patch { width: clamp(110px, 12vw, 140px); margin-top: 12px; margin-bottom: 12px; }

/* On a phone the slab goes edge to edge and cuts across its foot instead; the
   patch sits beside the title, and the halftone is left out, where it would be
   only a ragged strip of dots. */
@media (max-width: 760px) {
  .tc-hero__row { grid-template-columns: 1fr; }
  .tc-hero__row::before { display: none; }
  .tc-ht { display: none; }
  .tc-slab {
    margin: 0 -16px;
    padding: 26px 16px 46px;
    clip-path: polygon(0 -2px, 100% -2px, 100% calc(100% - 22px), 0 calc(100% + 2px));
  }
  .tc-hero--home .tc-slab { padding-top: 30px; padding-bottom: 52px; }
  .tc-slab h1 { padding-right: 92px; }
  .tc-hero .tc-patch,
  .tc-hero--home .tc-patch,
  .tc-hero--compact .tc-patch {
    position: absolute;
    right: 0;
    top: 18px;
    width: 78px;
    margin: 0;
  }
  .tc-hero--home .tc-patch { width: 92px; top: 22px; }
}

/* ---------- the main button ---------- */

/* One per page: yellow, black text, named for the job it does. */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--tc-radius);
  background: var(--tc-yellow);
  color: var(--tc-black);
  font: 700 17px/1.2 var(--tc-display);
  text-decoration: none;
  cursor: pointer;
}
.tc-btn:hover { background: var(--tc-yellow-dark); }
.tc-btn:focus-visible { outline: 3px solid var(--tc-navy); outline-offset: 2px; }

/* ---------- timing-light lamps ---------- */

/* Status, and only status: a three-lamp timing light, one lit, always beside
   the words. Green is ready or done; amber is in testing or still working. */
.tc-lamp {
  display: inline-flex;
  gap: 3px;
  padding: 3px 4px;
  background: var(--tc-black);
  border-radius: 99px;
  vertical-align: -3px;
  margin-right: 7px;
}
.tc-lamp i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc-lamp-off); }
.tc-lamp[data-s="ready"] i:nth-child(1),
.tc-lamp[data-s="done"] i:nth-child(1) { background: var(--tc-go); }
.tc-lamp[data-s="testing"] i:nth-child(2),
.tc-lamp[data-s="busy"] i:nth-child(2) { background: var(--tc-amber); }

/* ---------- in testing ---------- */

/* A tool that works but has not yet been through a real contest day: a line
   under its header slab, with the amber lamp drawn in front of the words. */
.tc-testing {
  background: #fff3cf;
  border-bottom: 1px solid #e9cf7e;
  color: var(--tc-black);
  font: 400 15.5px/1.5 var(--tc-text);
}
.tc-testing .tc-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.tc-testing .tc-wrap::before {
  content: "";
  flex: none;
  align-self: center;
  width: 40px;
  height: 15px;
  margin-right: 4px;
  border-radius: 99px;
  background:
    radial-gradient(circle at 8px 50%, var(--tc-lamp-off) 4.5px, transparent 5px),
    radial-gradient(circle at 20px 50%, var(--tc-amber) 4.5px, transparent 5px),
    radial-gradient(circle at 32px 50%, var(--tc-lamp-off) 4.5px, transparent 5px),
    var(--tc-black);
}
.tc-testing b { font: 700 15.5px/1.5 var(--tc-display); }
.tc-testing b::after { content: "."; }

/* ---------- footer ---------- */

.tc-foot {
  background: var(--tc-black);
  color: var(--tc-grey);
  font: 400 14.5px/1.6 var(--tc-text);
  border-top: 4px solid var(--tc-yellow);
}
.tc-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 48px;
  padding-top: 40px;
  padding-bottom: 36px;
}
.tc-foot h2 {
  margin: 0 0 12px;
  font: 700 15px/1.2 var(--tc-display);
  color: var(--tc-white);
}
.tc-foot p { margin: 12px 0 0; max-width: 46ch; }
.tc-foot .tc-foot__made { color: var(--tc-white); }
.tc-foot ul { margin: 0; padding: 0; list-style: none; }
.tc-foot li + li { margin-top: 6px; }
.tc-foot a { color: var(--tc-white); text-decoration: none; }
.tc-foot a:hover { color: var(--tc-yellow); text-decoration: underline; }
.tc-foot__base {
  padding-bottom: 24px;
  font-size: 13px;
}
/* The rule sits on the line, not the wrapper, so it stops where the text does. */
.tc-foot__base p { margin: 0; max-width: none; padding-top: 16px; border-top: 1px solid var(--tc-line-dark); }

@media (max-width: 820px) {
  .tc-foot__inner { grid-template-columns: 1fr 1fr; }
  .tc-foot__about { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .tc-foot__inner { grid-template-columns: 1fr; }
}

/* ---------- when it is not the whole page ---------- */

/* Framed inside a Google Sites page, the Site is already around the tool,
   so the shell would be a second copy of it. The class is set by a line in
   each page's <head>, before first paint. */
.tc-embedded .tc-bar,
.tc-embedded .tc-hero,
.tc-embedded .tc-foot { display: none; }

@media print {
  .tc-bar, .tc-hero, .tc-foot, .tc-skip, .tc-testing { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-return { transition: none !important; }
}