/* Admin-only widgets. Palette, typography, layout, tables, links and
   headings all come from /assets/main.css, the dotpublic.org stylesheet,
   exactly as the public checker does. Only rules for things that have no
   equivalent on the main site belong here. */

/* Header: the site header plus a user chip. The site's header-container
   is a two-item flex row; the chip is a third item, so allow wrapping. */
.header-container { flex-wrap: wrap; gap: 1rem 1.5rem; }
.userchip { display: flex; align-items: center; gap: 0.6rem;
            font-family: 'Inter', sans-serif; }
.userchip .who { font-size: 0.85rem; line-height: 1.2; text-align: right; }
.userchip .who b { display: block; color: var(--charcoal); font-weight: 600; }
.userchip .who span { color: var(--mid-grey); }
.userchip .avatar { width: 34px; height: 34px; border-radius: 999px;
                    background: var(--cerulean); color: #fff; display: flex;
                    align-items: center; justify-content: center;
                    font-weight: 700; font-size: 0.85rem; }
.userchip form { margin: 0; }
.userchip .signout { background: transparent; color: var(--mid-grey);
                     border: 1px solid var(--light-grey); border-radius: 6px;
                     padding: 0.3rem 0.7rem; font-family: 'Inter', sans-serif;
                     font-size: 0.85rem; font-weight: 500; cursor: pointer;
                     min-height: 0; margin: 0; }
.userchip .signout:hover { color: var(--cerulean);
                           border-color: var(--cerulean); }

/* Forms. The main site has almost no form styling, so the admin carries
   its own, following the public checker's field and button treatment. */
.page-content form { margin: 0; }
.page-content label { display: block; font-family: 'Inter', sans-serif;
                      font-weight: 600; color: var(--deep-blue);
                      margin: 1rem 0 0.35rem; }
.page-content input[type="text"], .page-content input[type="email"],
.page-content select, .page-content textarea {
  width: 100%; font: inherit; color: var(--charcoal); background: #fff;
  padding: 0.6rem 0.8rem; border: 1px solid var(--light-grey);
  border-radius: 6px; }
.page-content input[type="text"]:focus, .page-content input[type="email"]:focus,
.page-content select:focus, .page-content textarea:focus {
  outline: none; border-color: var(--cerulean);
  box-shadow: 0 0 0 3px rgba(43, 112, 211, 0.18); }
:focus-visible { outline: 3px solid var(--cerulean); outline-offset: 1px; }

/* field-sizing lets every textarea grow to fit its content, so the
   longest register text is fully visible; browsers without it keep the
   fixed minimums and scroll. */
textarea { min-height: 14rem; field-sizing: content; max-height: 44rem; }
textarea.short { min-height: 7rem; }
textarea.compact { min-height: 3.2rem; }
code, pre, textarea { font-family: ui-monospace, SFMono-Regular, Menlo,
                      Consolas, monospace; font-size: 0.95rem; }
pre { overflow-x: auto; border: 1px solid var(--light-grey);
      border-radius: 6px; padding: 1rem; background: var(--off-white); }

.page-content button {
  display: inline-block; background: var(--deep-blue); color: #fff;
  border: 1px solid var(--deep-blue); padding: 0.65rem 1.15rem;
  border-radius: 6px; margin-top: 1rem; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; }
.page-content button:hover, .page-content button:focus {
  background: var(--cerulean); border-color: var(--cerulean); }
.page-content button.secondary { background: #fff; color: var(--deep-blue); }
.page-content button.secondary:hover, .page-content button.secondary:focus {
  background: var(--dove-wing); color: var(--cerulean); }

fieldset { border: 1px solid var(--light-grey); border-radius: 6px;
           margin: 1rem 0; padding: 0.25rem 1rem 1rem; }
legend { font-family: 'Inter', sans-serif; font-weight: 700;
         color: var(--deep-blue); padding: 0 0.25rem; }
fieldset.status { display: flex; flex-wrap: wrap; gap: 0 1.5rem;
                  align-items: center; }
fieldset.measure { margin-bottom: 0; }
fieldset.status .help { flex-basis: 100%; }
fieldset.status label.radio, fieldset.status label.tick {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400;
  color: var(--charcoal); margin: 0.5rem 0; }
fieldset.status input[type="radio"],
fieldset.status input[type="checkbox"] { width: 24px; height: 24px; }
fieldset.status button { margin: 0.25rem 0; }
/* Register fields that nothing outside the admin and the Sheet sync
   reads, flagged until someone decides whether to keep them. The tag
   says it in words, so the red is not the only signal. */
.unused-field { border-left: 4px solid #8C2020; background: #FBEAEA;
                padding: 0.1rem 0.9rem 0.9rem; margin: 1rem 0;
                border-radius: 0 6px 6px 0; }
.page-content .unused-field label, .unused-field dt { color: #8C2020; }
.unused-tag { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem;
              border: 1px solid #8C2020; border-radius: 4px; background: #fff;
              color: #8C2020; font-size: 0.75rem; font-weight: 700;
              letter-spacing: 0.03em; text-transform: uppercase;
              vertical-align: middle; }
.page-content .unused-note { color: #8C2020; font-size: 0.875rem; margin: 0 0 0.5rem; }
.input-with-button { display: flex; gap: 0.5rem; align-items: stretch; }
.input-with-button input { flex: 1; min-width: 0; }
.page-content .input-with-button button { flex: none; margin: 0; }

.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
           margin: 1rem 0; }
.filters label { margin: 0 0 0.25rem; }
.filters select { width: auto; }
.filters button { margin-top: 0; }
.ref-row { display: flex; gap: 0.5rem; align-items: center;
           margin-bottom: 0.5rem; }
.ref-row input:first-child { flex: 2; }
.ref-row input { flex: 3; width: auto; }

/* Fixed explanatory text: a tinted box with a lightbulb, so a help line
   cannot be mistaken for a field. Both earlier attempts failed for the
   same reason, that they competed with the inputs on the inputs' own
   terms: an off-white panel with a grey rule read as another input, and
   unboxed italic prose read as nothing at all. A warm fill none of the
   controls use settles it on colour instead. */
.help {
  font-family: 'Inter', sans-serif; font-size: 0.875rem;
  line-height: 1.45; color: #6B4E00;
  margin: 0.25rem 0 0.85rem; padding: 0.6rem 0.8rem 0.6rem 2.4rem;
  background: #FFF8E1; border: 1px solid #F0DFA8; border-radius: 6px;
  max-width: 46rem; position: relative; }
/* Decorative: the box and its colour already carry the meaning, so the
   bulb is hidden from screen readers rather than read out on every
   field. */
.help::before {
  content: "\1F4A1"; position: absolute; left: 0.75rem; top: 0.55rem;
  font-size: 1rem; line-height: 1.45; }
/* Preformatted help is sample data to copy, not guidance to read: same
   box, no bulb, and the upright monospace face marks the difference. */
pre.help { padding: 0.6rem 0.8rem; }
pre.help::before { content: none; }
.multiline { white-space: pre-line; }
.muted { color: var(--mid-grey); }

.badge { display: inline-block; border: 1px solid var(--light-grey);
         background: var(--dove-wing); color: var(--deep-blue);
         border-radius: 999px; padding: 0.1rem 0.6rem;
         font-family: 'Inter', sans-serif; font-size: 0.8rem;
         font-weight: 600; margin: 0 0.35rem 0.35rem 0; }
.flash { background: var(--dove-wing); border: 1px solid var(--light-grey);
         border-left: 3px solid var(--cerulean); border-radius: 3px;
         padding: 0.6rem 0.85rem; margin: 1rem 0; }
.banner, .error { background: #FDE7DB; border: 1px solid #f2c4a6;
                  border-left: 3px solid var(--amber); border-radius: 3px;
                  padding: 0.6rem 0.85rem; margin: 1rem 0; }
.banner p:last-child, .error p:last-child, .flash p:last-child {
  margin-bottom: 0; }
.banner button { background: var(--amber); border-color: var(--amber); }

.columns { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1rem; }
.columns > section { flex: 1 1 24rem; min-width: 0; }
.heading-row { display: flex; flex-wrap: wrap; gap: 0 1.25rem;
               align-items: baseline; }
dl { margin: 0; }
dl div { margin: 0 0 0.75rem; }
dt { font-family: 'Inter', sans-serif; font-weight: 700;
     color: var(--deep-blue); }
dd { margin: 0; }
dd ul { margin: 0; padding-left: 1.25rem; }
details { margin: 0.25rem 0 0; }
details ul { margin: 0.25rem 0 0; }

/* Activity timeline. */
.composer { margin: 1rem 0; }
.composer button { margin-top: 0.5rem; }
ul.timeline { list-style: none; margin: 1rem 0; padding: 0; }
ul.timeline li.entry { border-top: 1px solid var(--light-grey);
                       padding: 0.75rem 0; }
ul.timeline li.entry:first-child { border-top: none; }
.entry .meta { margin: 0 0 0.25rem; color: var(--mid-grey);
               font-size: 0.9rem; }
.entry .meta b { color: var(--deep-blue); }
.entry .note { margin: 0.25rem 0 0; padding: 0.4rem 0.75rem;
               background: var(--off-white); border-radius: 0 4px 4px 0;
               border-left: 3px solid var(--cerulean); }
.mention { font-weight: 700; color: var(--cerulean); }

/* Test-type-dependent form blocks: where :has() is supported, show only
   the blocks tagged with the selected type; older browsers show
   everything, which is the pre-existing behaviour. */
@supports selector(form:has(option:checked)) {
  form:has(#kind option[value="rule"]:checked) .type-dep:not(.type-rule),
  form:has(#kind option[value="llm"]:checked) .type-dep:not(.type-llm),
  form:has(#kind option[value="manual"]:checked) .type-dep:not(.type-manual) {
    display: none;
  }
  /* Same mechanism for the register form's pass/fail vs graduated. */
  form:has(input[name="measure"][value="binary"]:checked) .measure-dep:not(.measure-binary),
  form:has(input[name="measure"][value="graduated"]:checked) .measure-dep:not(.measure-graduated) {
    display: none;
  }
}

/* The main site hides its desktop nav below 768px in favour of a
   hamburger overlay. The admin has no overlay, so keep the three links
   visible and let them wrap. */
@media (max-width: 768px) {
  .nav-desktop { display: block; }
  .nav-desktop ul { gap: 1.25rem; flex-wrap: wrap; }
}

/* Sign-in: a narrow column, and a Google button that matches the
   secondary buttons rather than inventing a blue of its own. */
.signin { max-width: 26rem; }
.signin hr { border: 0; border-top: 1px solid var(--light-grey);
             margin: 1.5rem 0; }
.page-content .cta { display: inline-block; background: var(--deep-blue);
  color: #fff; border: 1px solid var(--deep-blue); padding: 0.65rem 1.15rem;
  border-radius: 6px; text-decoration: none;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; }
.page-content .cta:hover, .page-content .cta:focus {
  background: var(--cerulean); border-color: var(--cerulean); color: #fff;
  text-decoration: none; }

/* Short fields do not need the full table-width column. */
.invite input { max-width: 32rem; }
/* Check IDs are the row handle: never let one wrap mid-code. */
.page-content td code, .page-content th code { white-space: nowrap; }

/* The checks list's action bar, above the table: the three things you
   come to this page to do, before the 188 rows rather than after them. */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem;
           align-items: center; margin: 0 0 1.25rem; }
/* The main site stylesheet gives every button a 16px top margin, which
   a plain link does not have, so "Add check" sat 8px above its
   neighbours. Measured, not guessed: all three are 41px tall with
   identical padding, and only the margin differed. */
.toolbar form { margin: 0; display: flex; }
.toolbar form.full-scan { align-items: center; gap: 0.5rem; }
.toolbar label.confirm { display: inline-flex; align-items: center;
                         gap: 0.4rem; margin: 0; font-weight: 400; }
.toolbar label.confirm input { flex: none; width: 24px; height: 24px; margin: 0; }
.toolbar button { margin: 0; }
.toolbar .button {
  display: inline-block; background: var(--deep-blue); color: #fff;
  border: 1px solid var(--deep-blue); padding: 0.65rem 1.15rem;
  border-radius: 6px; font-family: 'Inter', sans-serif; font-weight: 600;
  text-decoration: none; }
.toolbar .button:hover, .toolbar .button:focus {
  background: var(--cerulean); border-color: var(--cerulean); }
/* The note wraps to its own full-width line under the buttons. */
.toolbar-note { flex-basis: 100%; margin: 0; font-family: 'Inter', sans-serif;
                font-size: 0.875rem; font-style: italic;
                color: var(--mid-grey); max-width: 46rem; }

/* Column headers. The main site stylesheet paints thead th white on
   --deep-blue, which a 188-row table wears badly and which no link
   colour survives: default link blue on deep blue is about 1.9:1, and
   the hover colour lands on near-black. A light header with dark text
   carries the link colours the rest of the page already uses. */
.page-content thead th {
  background: var(--dove-wing); color: var(--deep-blue);
  text-transform: none; letter-spacing: normal; font-size: 0.85rem;
  border-bottom: 1px solid var(--light-grey); }
.page-content thead th.sort-col a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.3rem; }
.page-content thead th.sort-col a:hover,
.page-content thead th.sort-col a:focus {
  color: var(--cerulean); text-decoration: underline; }
/* The sorted column is marked with a rule under it rather than a fill,
   so the arrow stays the thing you read. */
.page-content thead th.sort-active {
  box-shadow: inset 0 -3px 0 var(--cerulean); }
.page-content thead th.sort-active a { font-weight: 800; }
/* Reserve the arrow's width on every sortable header so the row does
   not reflow as the sort moves from column to column. */
.sort-arrow { display: inline-block; min-width: 0.7em; font-size: 0.75em; }

/* Skip link: the admin is a 3,000px page and had no way past the header.
   Off-screen until focused, then first thing on the page. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
             padding: 0.6rem 1rem; background: #1B3A5C; color: #fff;
             text-decoration: none; }
.skip-link:focus { left: 0; }
#main:focus { outline: none; }

/* Revision diff: colour AND a word, because a removal used to be
   distinguished from a YAML list item by one space of indentation. */
table.diff { width: 100%; border-collapse: collapse; }
table.diff td, table.diff th { padding: 0.1rem 0.5rem; vertical-align: top; }
table.diff code { white-space: pre-wrap; }
.diff-marker { width: 6rem; font-size: 0.85rem; font-weight: 600; }
.diff-added { background: #E8F4E4; }
.diff-added .diff-marker { color: #2F5B14; }
.diff-removed { background: #FBEAEA; }
.diff-removed .diff-marker { color: #8C2020; }

/* The heaviest action should not be the faintest button. */
.toolbar button.destructive { background: #8C2020; border-color: #8C2020;
                              color: #fff; }
.toolbar button.destructive:hover:not(:disabled) { background: #6E1919; }

/* Folded reference material: open it when you need it. */
details.help summary { cursor: pointer; font-weight: 600; }
.hint-list { margin: 0.5rem 0 0; }
.hint-list dt { font-weight: 600; font-family: ui-monospace, monospace; }
.hint-list dd { margin: 0 0 0.4rem 1rem; }