/* Team area: the Alerts page, Archive, People, My Account, and Settings. Builds on site.css. */

body.team { background: var(--paper); }

/* ---------- Header (brand_header.php with surface "team") ---------- */
/* The same frame as the public sites (site.css): the strip, the logo and the title at the same
   size, the time, and the cord as the header's only bottom edge, on the paper color. The logo spans two
   rows: "Operations", the account links, and the time on the first, the menu on the second (from 1024
   pixels the whole menu fits on that row; below, it folds into one Menu control). The header scrolls
   away with the page; the Alerts page's section bar and the Settings menu stay in place below it. */
.team-head .head-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo title user clock" "logo links links links"; align-items: center; gap: 12px 28px; } /* room between the logo and the title and menu, and between the title and the menu */
.team-head .brand { grid-area: logo; margin: 0; border-radius: 50%; }
.team-head .brand-word { grid-area: title; align-self: end; }
.team-head .brand-links { grid-area: links; align-self: start; min-width: 0; }
.team-head .team-user { grid-area: user; align-self: end; }
.team-head .clock { grid-area: clock; align-self: end; margin-left: 4px; }
.team-nav { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.team-nav a { display: inline-flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 600; color: var(--ink); text-decoration: none; padding: .4em .7em; border-radius: 999px; white-space: nowrap; min-height: 44px; }
/* Between 1,024 and 1,179 pixels a little less room beside the logo, and the person's picture without their name (as on
   tablets), so the title keeps the size every site's has and clears the account links beside it. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .team-head .head-row { column-gap: 22px; }
  .team-who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 1279px) { .team-nav a { font-size: .97rem; padding-left: .5em; padding-right: .5em; gap: .3em; } .team-nav .nav-item.has-menu > a { padding-right: .2em; } .nav-more { width: 24px; } }
.team-nav a:hover { background: var(--brand-tint); }
.team-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-line); }
/* From 1,024 pixels, where the whole menu is on the logo's second row, the menu sits at the logo's foot, and the
   negative margin lets it reach into the header's bottom padding, so its foot lines up with the top of the cord's coil
   under the logo instead of leaving an empty band above the cord. A menu that wraps onto a second line grows the
   header rather than overlapping the cord. */
@media (min-width: 1024px) {
  html:not(.a11y-large) .team-head .brand-links { align-self: end; margin-bottom: -14px; }
}
/* From 1,280 pixels the menu is also set a size larger. Below that, it keeps its size so that every item still fits on
   one line. */
@media (min-width: 1280px) {
  html:not(.a11y-large) .team-head .brand-links > .team-nav { gap: 4px; }
  html:not(.a11y-large) .team-head .brand-links > .team-nav a { font-size: 1.12rem; min-height: 50px; padding: .45em .85em; }
  html:not(.a11y-large) .team-head .brand-links > .team-nav .nav-item.has-menu > a { padding-right: .4em; }
}

.team-user { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.team-who { display: inline-flex; align-items: center; gap: .55em; line-height: 1.2; font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; padding: .3em .6em; border-radius: var(--radius-sm); min-height: 44px; }
.team-who-text { display: flex; flex-direction: column; }
.team-who small { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.team-who:hover, .team-who.is-current { background: var(--brand-tint); }
/* The person's picture or initials (People::avatar), or a plain figure. */
/* A picture someone uploaded has a thin ring in the brand color, the color of the ring around the VOICE logo; initials and the plain figure keep none. */
img.pp-avatar { box-sizing: border-box; border: 2px solid var(--brand); box-shadow: none; }
img.pp-avatar[width="72"], img.pp-avatar[width="96"], img.pp-avatar[width="112"] { border-width: 3px; }
.team-pic { display: inline-flex; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; color: var(--brand-deep); }
.team-pic > img, .team-pic > svg { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; }
.team-pic > .ui-icon { vertical-align: 0; }
.team-user .inline-form { display: inline-flex; }
.inline-form { display: inline; margin: 0; }
/* The account links' smaller words (My Account and the role, and the words beside the gear and the bell) appear from
   1,360 pixels, the width at which they clear the title; between 1,280 and 1,359 pixels they overlapped it. */
@media (max-width: 1359px) {
  /* Hidden from sight only, so the link's name still says My Account. */
  .team-who small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Tablets: the person's picture without the name, and the time beside the Menu control on the second row. */
@media (max-width: 1023px) {
  .team-head .head-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo title user" "logo links clock"; gap: 12px 20px; }
  .team-head .clock { align-self: center; }
  .team-who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* The phone's Menu control: hidden on wider screens, where the menu is always shown. */
/* The header's dropdowns: shortcuts beside menu items, the Settings gear, and the bell (admin_head.php, admin.js). */
.team-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.team-nav .nav-item.has-menu > a { padding-right: .35em; }
.nav-more { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 44px; margin-left: -4px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.nav-more:hover, .nav-item.is-open .nav-more { background: var(--brand-tint); color: var(--brand-deep); }
.nav-more .ui-icon { width: 16px; height: 16px; transition: transform .15s; }
.nav-item.is-open .nav-more .ui-icon { transform: rotate(180deg); }
.nav-menu { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; min-width: 15rem; margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.nav-menu[hidden] { display: none; }
.team-nav .nav-menu a, .nav-menu a { display: flex; align-items: center; gap: .55em; min-height: 44px; padding: .45em .7em; border: 0; border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; white-space: nowrap; background: transparent; box-shadow: none; }
.nav-menu a:hover, .nav-menu a:focus { background: var(--brand-tint); color: var(--brand-deep); }
.nav-menu a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.nav-menu .ui-icon { flex: none; color: var(--ink-soft); }
.nav-count { margin-left: auto; padding: .05em .55em; border-radius: 999px; background: var(--sunk); color: var(--ink); font-size: .8rem; font-weight: 700; }
.team-drop { position: relative; }
.team-drop .nav-menu, .bell-panel { left: auto; right: 0; }
.team-gear .nav-menu { min-width: 13rem; }
.team-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.team-icon-btn:hover, .team-drop.is-open > .team-icon-btn, .team-icon-btn[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); }
.team-icon-btn[hidden] { display: none; }
.team-icon-btn .ui-icon { width: 22px; height: 22px; }
/* The words for the bell and the gear, shown beside them where there is room, so an icon is not the only sign of what it is.
   With Larger Text there is never room: everything is a quarter larger, and the page stops widening at 1,440 pixels, so
   the words would push the person's picture into the title. The icons keep their names on hover and for screen readers. */
.team-icon-word { display: none; }
@media (min-width: 1360px) {
  html:not(.a11y-large) .team-bell .team-icon-btn, html:not(.a11y-large) .team-gear .team-icon-btn { width: auto; padding: 0 .7em 0 .55em; gap: .35em; }
  html:not(.a11y-large) .team-icon-word { display: inline; font-family: var(--display); font-weight: 600; font-size: .95rem; }
  html:not(.a11y-large) .team-bell .bell-count { position: static; margin-left: 1px; box-shadow: none; }
}
.bell-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.bell-panel { position: absolute; z-index: 60; top: calc(100% + 2px); width: min(25rem, calc(100vw - 24px)); padding: 8px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 6px 6px; }
.bell-empty { margin: 8px 6px; }
.bell-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.note-list { list-style: none; margin: 0; padding: 0; }
.bell-panel .note-list { max-height: min(60vh, 26rem); overflow-y: auto; }
.note-item a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .6em; padding: .5em .6em; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.note-item a:hover, .note-item a:focus { background: var(--brand-tint); }
.note-dot { width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; }
.note-item.is-unread .note-dot { background: var(--brand); }
.note-text strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.note-item.is-unread .note-text strong { font-weight: 700; }
.note-detail, .note-when { display: block; font-size: .85rem; color: var(--ink-soft); }
.note-list-page { max-width: 46rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 6px; }
.note-list-page .note-item + .note-item { border-top: 1px solid var(--line); }
.notes-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: .6rem; }
.notes-tools p { margin: 0; }
/* The phone menu: each item, then its shortcuts as plain links. */
.team-nav-phone .pm-item { display: grid; gap: 4px; }
.team-nav-phone .pm-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; padding: 0 0 0 1.9em; list-style: none; }
.team-nav-phone .pm-actions a { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .3em .7em; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font); font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.team-nav-phone .pm-actions a:hover { background: var(--brand-tint); }
.pm-sites, .pm-signout { display: none; }

.team-menu { display: none; }
.team-menu > summary { display: flex; align-items: center; gap: .5em; min-height: 44px; padding: .35em .8em; border: 1px solid var(--line); border-radius: 999px; font-family: var(--display); font-weight: 600; cursor: pointer; list-style: none; background: var(--card); }
.team-menu > summary::-webkit-details-marker { display: none; }
.team-menu > summary::after { content: ""; margin-left: auto; width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-25%); }
.team-menu[open] > summary::after { transform: rotate(225deg) translateY(-25%); }
.team-menu-now { display: inline-flex; align-items: center; gap: .35em; color: var(--brand-deep); font-weight: 600; }
.team-menu-now::before { content: "·"; content: "·" / ""; color: var(--ink-faint); margin-right: .1em; }
/* A long section name (Switchboard, My Account) on a narrow phone ends in an ellipsis inside the Menu button, so the
   arrow always stays inside it rather than past its edge. */
.team-menu > summary > *, .team-menu > summary::after { flex: none; }
.team-menu > summary > .team-menu-now { flex: 0 1 auto; min-width: 0; }
.team-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On the narrowest phones the section's icon gives its room to the name, so Switchboard and My Account fit whole. */
@media (max-width: 400px) { .team-menu-now > svg { display: none; } .team-menu > summary { gap: .4em; padding-left: .7em; padding-right: .7em; } }
.team-menu[open] > .team-nav { margin-top: 6px; }
/* Below 1024 pixels the menu folds into one Menu control with the current section's name (admin_head.php),
   so it never wraps to two lines or runs past the edge; it opens to every section at once. */
@media (max-width: 1023px) {
  .team-head .brand-links > .team-nav { display: none; }
  .team-menu { display: block; width: max-content; max-width: 100%; }
  .team-menu[open] { width: 100%; }
  .team-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .team-nav a { justify-content: flex-start; border: 1px solid var(--line); }
  .team-nav.team-nav-phone { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .team-nav-phone .pm-main { width: 100%; }
}
/* With Larger Text the wide menu needs about 1440 pixels, so below that it folds into the same Menu control, and the
   account shows only its picture, so neither the menu nor the title ever wraps. Sign Out keeps its word, as
   everywhere else, from 720 pixels; from 640 to 719 its word would push the title into the account's icons
   and cut off the Menu control, so there it keeps only its icon, with its word for screen readers. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .a11y-large .team-head .brand-links > .team-nav { display: none; }
  .a11y-large .team-menu { display: block; width: max-content; max-width: 100%; }
  .a11y-large .team-menu[open] { width: 100%; }
  .a11y-large .team-nav.team-nav-phone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .a11y-large .team-nav-phone a { justify-content: flex-start; border: 1px solid var(--line); }
  .a11y-large .team-who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .a11y-large .team-who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .a11y-large .team-menu > summary { white-space: nowrap; }
}
@media (min-width: 640px) and (max-width: 719px) {
  .a11y-large .team-signout-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* The links to the public sites and Larger Text and High Contrast sit at the foot of the phone's Menu. */
.pm-sites .a11y-bar { justify-content: flex-start; margin-top: 8px; }
.pm-sites .cross-links { margin-top: 4px; }
@media (max-width: 639px) {
  /* Phones: the logo, the title, and the account's icons on the first row, then the Menu and the time; the
     links to the public sites, Larger Text and High Contrast, and Sign Out move into the Menu. */
  .team-head .head-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo title user user" "links links links clock"; gap: 8px 8px; }
  .team-menu > summary { white-space: nowrap; }
  /* The time stays beside the Menu button, at the top of its row, so an open Menu never leaves it floating beside an
     item in the middle. */
  .team-head .clock { align-self: start; margin-top: 12px; }
  .team-user { gap: 0; }
  .team-user > .inline-form { display: none; }
  .pm-sites, .pm-signout { display: block; margin-top: 10px; }
  .team-head .brand-word { align-self: center; }
  .team-head .team-user { align-self: center; }
  .team-who-text, .team-signout-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .team-user .btn-secondary { padding-left: .6em; padding-right: .6em; }
  .team-head .brand-links { justify-self: stretch; }
  .team-menu { width: 100%; }
  .team-drop { position: static; }
  .team-drop .nav-menu, .bell-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; min-width: 0; }
}
.team-main { padding-top: 1.2rem; padding-bottom: 2rem; }
.team-foot { padding-top: 1rem; padding-bottom: 2rem; }
/* The footer has the switch for the explanations under fields, for the person signed in (Explain). */
.team-foot-explain { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin: 0; font-size: .9rem; color: var(--ink-soft); }
/* Explanations hidden on this device: help lines, card descriptions, and explanations in facts and page
   introductions are left out; errors, callouts, and warnings (.help-keep) never are. A hidden help line
   is still read to screen readers through its field's aria-describedby. */
body.explain-hidden .help:not(.help-keep), body.explain-hidden .explanation, body.explain-hidden .hint { display: none; }
/* A message or summary that took focus when the page opened, after someone pressed Save with a mouse or a
   finger: no focus ring around it (admin.js, VA.focusQuietly()); it comes back at the first key pressed. */
[data-focus-quiet]:focus, [data-focus-quiet]:focus-visible { outline: none; }
.plain-page { padding-top: 2rem; padding-bottom: 2rem; max-width: 620px; }
.plain-brand { --logo: 104px; display: flex; align-items: center; gap: 16px; }
.plain-brand .brand-logo { width: 104px; height: 104px; width: var(--logo); height: var(--logo); }
.plain-page > .cord { margin: 4px 0 1.4rem; }
.find-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.find-row input { flex: 999 1 14rem; min-width: 0; }
.find-row .btn { flex: 1 0 auto; } /* beside the box it keeps its own width, and under the box on a phone it matches the box */
.place-matches .check { margin-bottom: .35rem; }
.plain-brand-link { width: fit-content; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.plain-brand-link:hover .brand-word { text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 640px) { .plain-brand { --logo: 72px; } .plain-brand .brand-logo { width: 72px; height: 72px; } }
.crumbs { margin: 0 0 .6rem; }
.crumbs a { display: inline-flex; align-items: center; gap: .3em; text-decoration: none; font-weight: 700; }
.page-title { margin-bottom: 1rem; }
.page-title h1 { margin-bottom: .3rem; }
.section-intro { color: var(--ink-soft); max-width: 52em; }
.sep-top { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.panel.sep-top { border-top: 1px solid var(--line); padding-top: 1.15rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.panel-head h2 { margin: 0; }
.push-right { margin-left: auto; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; font-size: .9em; }
.span-2 { grid-column: span 2; }
@media (max-width: 640px) { .span-2 { grid-column: auto; } }

/* ---------- The Alerts page ---------- */
.desk-bar { position: sticky; top: 0; z-index: 15; display: flex; gap: 6px; flex-wrap: wrap; background: var(--paper); padding: .5rem 0; margin: -0.4rem 0 .6rem; border-bottom: 1px solid var(--line); }
.desk-bar a { display: inline-flex; align-items: center; gap: .4em; font-family: var(--display); font-weight: 600; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); padding: .4em .85em; border-radius: 999px; min-height: 38px; }
.desk-bar a:hover { border-color: var(--brand-line); }
.desk-bar a[aria-current="location"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.badge { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 999px; background: var(--p-high); color: #fff; font-size: .78rem; font-weight: 700; font-family: var(--font); }
.badge-quiet { background: var(--sunk); color: var(--ink-soft); }
.desk-bar a[aria-current="location"] .badge-quiet { background: #fff; color: var(--brand-deep); }
.desk-section { padding-top: 1rem; scroll-margin-top: 70px; }
.desk-section + .desk-section { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.desk-h { font-size: 1.6rem; display: flex; align-items: center; gap: .5rem; }
.sub-h { font-size: 1.1rem; margin: 1.4rem 0 .6rem; display: flex; gap: .5rem; align-items: baseline; }
.sub-h .count { font-family: var(--font); font-size: .85rem; color: var(--ink-soft); }
/* Home (app/admin/work.php): short lists from each module, most urgent first. */
.work-actions { margin-bottom: .6rem; }
/* The relay search, with its button beside the box, also for someone whose Home loads none of the Switchboard's own
   style sheets (no relay of theirs to list). */
.work-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.work-search input[type=search] { flex: 1 1 14rem; min-width: 0; }
.work-search .hint { flex-basis: 100%; margin: 0; }
.work-actions .btn-row { margin: 0 0 .75rem; }
.work-h { font-size: 1.35rem; }
.work-h .count { font-family: var(--font); font-size: .85rem; font-weight: 600; background: var(--sunk); color: var(--ink-soft); border-radius: 999px; padding: .1em .6em; }
.work-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
@media (max-width: 560px) {
  .work-title .section-intro { font-size: .95rem; }
  .work-h { font-size: 1.15rem; margin-bottom: .5rem; }
  /* Home on a phone: closer parts, the search box and its button on one line, and each alert's
     button beside it rather than below, so the page stays close to two screens. */
  .work-section.desk-section + .work-section.desk-section { margin-top: .8rem; padding-top: .9rem; }
  .work-section .more-link { margin-top: .4rem; }
  .work-search { flex-wrap: wrap; }
  .sb-search.work-search input[type=search] { flex: 1 1 8rem; }
  /* With Larger Text the field takes the whole line, so its example words are not cut off. */
  .a11y-large .sb-search.work-search input[type=search] { flex-basis: 100%; }
  .work-section .row-item { grid-template-columns: minmax(0, 1fr) auto; padding: .5rem .7rem; gap: 8px; }
  .work-section .row-end { text-align: right; }
}
.more-link { margin-top: 1rem; }
.more-link a { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--brand-line); }
.tile-n { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-l { color: var(--ink-soft); font-size: .9rem; }
.tile-attn { border-color: color-mix(in srgb, var(--p-high) 50%, var(--card)); background: color-mix(in srgb, var(--p-high) 7%, var(--card)); }
.tile-attn .tile-n { color: var(--p-high); }
/* Alert Types: the three levels, left to right, each containing the next. */
.tax-levels { list-style: none; padding: 0; margin: 1rem 0 1.1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; counter-reset: none; }
.tax-levels li + li { margin-top: 0; }
.tax-level { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.tax-level + .tax-level::before { content: ""; position: absolute; left: -1.25rem; top: 1.6rem; width: .7rem; height: .7rem; border-top: 2px solid var(--ink-soft); border-right: 2px solid var(--ink-soft); transform: rotate(45deg); }
.tax-n { font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--brand-deep); }
.tax-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.tax-what { color: var(--ink-soft); font-size: .92rem; }
.tax-eg { font-size: .88rem; margin-top: .3rem; padding-top: .45rem; border-top: 1px dashed var(--line); }
.tax-off { font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .tax-levels { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .tax-level + .tax-level::before { left: 1.4rem; top: -.95rem; transform: rotate(135deg); }
}
.legend { display: flex; gap: .8em; flex-wrap: wrap; font-size: .82rem; color: var(--ink-soft); }
.legend .key { display: inline-flex; align-items: center; gap: .35em; }
.legend .key::before { content: ""; width: .8em; height: .8em; border-radius: 2px; background: var(--pc); }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-soft); font-size: 14px; font-family: var(--font); }
.chart .fill-emergency { fill: var(--p-emergency); }
.chart .fill-high { fill: var(--p-high); }
.chart .fill-normal { fill: var(--p-normal); }
.chart .fill-low { fill: var(--p-low); }
.chart .line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.chart .line-area { fill: var(--brand-tint); }
.chart .line-dot { fill: var(--brand); stroke: var(--card); stroke-width: 2; }

/* Choosing a type */
.chooser-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.type-search { max-width: 520px; }
/* Most Used Here, above the categories: the types this site sends most (Taxonomy::mostUsed()). */
.type-most { margin-top: .6rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); }
.type-most h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.type-most .type-grid { margin-top: .5rem; }
/* A ticked box beside a button that deletes for good (DECISIONS 21), kept together on narrow screens. */
.delete-pair { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.type-cat { margin-top: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.type-cat > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.type-cat > summary::-webkit-details-marker { display: none; }
.type-cat > summary h3 { margin: 0; font-size: 1.15rem; }
.type-cat > summary::after { content: "+"; content: "+" / ""; font-size: 1.4rem; line-height: 1; color: var(--brand-deep); }
.type-cat[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.type-cat[open] > summary { border-bottom: 1px solid var(--line); }
.type-cat-body { padding: .2rem 1rem .6rem; }
.type-cat .count { color: var(--ink-soft); font-size: .9rem; font-weight: 400; font-family: var(--font); margin-left: .4rem; }
.type-fam { margin: .9rem 0; }
.type-fam h4 { font-family: var(--font); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .45rem; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; }
.type-choice { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .7rem; text-decoration: none; color: inherit; }
.type-choice:hover { border-color: var(--brand); background: var(--brand-tint); }
.type-choice strong { display: block; color: var(--ink); }
.type-choice small { display: block; color: var(--ink-soft); line-height: 1.35; margin-top: .1rem; }
.chooser-menus { max-width: 760px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }

/* Lists of alerts */
.row-list { display: grid; gap: .5rem; }
.row-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--tc, var(--pc, var(--line-strong))); border-radius: var(--radius-sm); padding: .65rem .85rem; text-decoration: none; color: inherit; }
.row-item:hover { border-color: var(--line-strong); border-left-color: var(--tc, var(--pc, var(--line-strong))); }
.row-item:hover strong { text-decoration: underline; text-underline-offset: .15em; }
.row-quiet { border-left-color: var(--line-strong); }
.row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.row-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; margin: 0; }
.row-end { text-align: right; }
@media (max-width: 560px) { .row-item { grid-template-columns: minmax(0, 1fr); } .row-item .type-icon { display: none; } .row-end { text-align: left; } }
/* A wiki page's tile on Home's list of drafts (the wiki's own pages size it in wiki.css). */
.row-item .wiki-tile { width: 32px; height: 32px; flex: none; display: block; border-radius: 8px; }
@media (max-width: 560px) { .row-item .wiki-tile { display: none; } }

/* ---------- Writing an alert ---------- */
.compose-type { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; }
.compose-type h3 { margin: 0 0 .15rem; font-size: 1.3rem; }
.compose-type p { margin: 0; }
@media (max-width: 560px) { .compose-type { grid-template-columns: auto minmax(0, 1fr); } .compose-type .btn { grid-column: span 2; } }
.compose { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; }
@media (max-width: 1000px) { .compose { grid-template-columns: minmax(0, 1fr); } .compose-side { order: -1; } }
.compose-side .preview-sticky { position: sticky; top: 64px; }
.preview-label { font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.notif { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; background: #fff; color: #1f1f1f; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 4px 14px rgba(0, 0, 0, .06); margin-bottom: 1rem; font-family: Roboto, system-ui, sans-serif; }
.notif img { width: 40px; height: 40px; border-radius: 50%; }
.notif.ios { background: rgba(245, 245, 245, .96); border-radius: 20px; font-family: -apple-system, system-ui, sans-serif; }
.notif.ios img { border-radius: 9px; }
.notif-app { font-size: .76rem; color: #5f6368; margin-bottom: 2px; }
.notif-title { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.notif-body { font-size: .9rem; line-height: 1.35; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.has-err input, .has-err select, .has-err textarea { border-color: var(--bad); }
details.mini { margin: 0 0 1rem; }
details.mini > summary { cursor: pointer; color: var(--brand-deep); font-weight: 700; font-size: .95rem; margin-bottom: .6rem; width: max-content; max-width: 100%; }
.map-check { white-space: nowrap; }
.translations .tr-lang { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: .7rem; background: var(--card); }
.tr-lang > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .65rem .85rem; }
.tr-lang[open] > summary { border-bottom: 1px solid var(--line); }
.tr-body { padding: .85rem; }
.tr-modes { margin-bottom: .9rem; flex-wrap: wrap; border-radius: 12px; }
.tr-modes label { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .9rem; padding: .35em .85em; border-radius: 999px; cursor: pointer; margin: 0; color: var(--ink-soft); }
.tr-modes label:has(input:checked) { background: var(--brand); color: #fff; }
.tr-modes input { accent-color: #fff; margin: 0; }
.tr-actions { margin-bottom: .8rem; }
.tr-row .field { margin-bottom: .5rem; }
.send-box { border-color: var(--brand-line); }
.send-box [data-send-explain] { font-size: 1.02rem; }
.stepup-field { max-width: 300px; }
.stepup-field label { display: flex; align-items: center; gap: .35em; }
.code-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem !important; letter-spacing: .2em; max-width: 12em; }
.save-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.2rem; padding: 1rem 0; }
.save-bar .stepup-field { margin: 0; }

/* ---------- Visual editor ---------- */
.ed { border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--card); position: relative; }
.ed:focus-within { border-color: var(--brand); outline: 3px solid var(--focus); outline-offset: 1px; }
.ed-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--line); background: var(--sunk); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ed-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: var(--ink); cursor: pointer; }
.ed-btn svg { width: 18px; height: 18px; }
.ed-btn:hover { background: var(--card); }
.ed-btn[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-line); }
.ed-sep { width: 1px; background: var(--line-strong); margin: 6px 4px; }
.ed-area { min-height: 9em; max-height: 60vh; overflow-y: auto; padding: .7rem .85rem; outline: none; }
.ed-area:focus { outline: none; }
.ed-area > :last-child { margin-bottom: 0; }
.ed-area h3 { font-size: 1.15rem; margin-top: .6em; }
.ed-area.is-empty::before { content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; position: absolute; }
.ed-pop { position: absolute; z-index: 5; top: 46px; left: 8px; right: 8px; max-width: 460px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 6px 24px rgba(0, 0, 0, .15); padding: .8rem; }
.ed-pop label span { display: block; margin-bottom: .25rem; }
.ed-pop .btn-row { margin-top: .5rem; }

/* ---------- One alert ---------- */
.detail-head { display: flex; gap: 14px; align-items: center; margin-bottom: 1rem; }
.detail-head h1 { margin: .2rem 0 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.detail-grid > div > .panel + .panel { margin-top: 1rem; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.notif-sample { background: var(--sunk); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; }
.notif-sample p { margin: 0; }
.details.boxed { border-top: 1px solid var(--line); padding-top: .8rem; margin-bottom: 1rem; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { padding: .2rem 0 .5rem .9rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .6rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.timeline li + li { margin-top: 0; }
.tr-confirm { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--line); }
.tr-confirm .check { margin: 0; flex: 1 1 280px; }

/* ---------- Archive ---------- */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1rem; }
.filters .field { margin-bottom: .8rem; }
.cell-alert { display: flex; gap: 10px; align-items: flex-start; }
.archive-table td { vertical-align: middle; }
.archive-more { margin: 0 0 1rem; }
.archive-more > .filter-grid { margin-top: .6rem; }
/* On a phone each alert in the Archive is a card: the alert, then its status, who posted it, and when, so no
   column is cut off at the edge of the screen. */
@media (max-width: 640px) {
  .archive-table, .archive-table tbody, .archive-table tr, .archive-table td { display: block; width: 100%; }
  .archive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .archive-table tr { padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
  .archive-table td { border: 0; padding: .1rem .6rem; }
  .archive-table td:nth-child(n+2) { display: inline-block; width: auto; vertical-align: top; }
  .archive-table td.num:empty { display: none; }
  .archive-table td.num:not(:empty)::after { content: " delivered"; color: var(--ink-soft); }
}
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }

/* ---------- Team ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem; }
.person { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; }
.person h3 { font-size: 1.05rem; margin: 0 0 .1rem; }
.person p { margin: 0; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-deep); font-family: var(--display); font-weight: 700; font-size: 1.2rem; flex: none; border: 1px solid var(--brand-line); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.account-grid > div > .panel + .panel { margin-top: 1rem; }
.account-grid .panel + .panel { margin-top: 0; }
@media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
ul.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: .4rem 1.5rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1rem; }
ul.codes li + li { margin-top: 0; }
/* On a phone, two columns of codes would run past the card's edge, so they stand in one column. */
@media (max-width: 30rem) { ul.codes { grid-template-columns: max-content; } }
@media (max-width: 40rem) { html.a11y-large ul.codes { grid-template-columns: max-content; } }
.qr-box { width: 220px; max-width: 100%; margin: .5rem 0 1rem; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.qr-box svg { display: block; width: 100%; height: auto; }
.break-all { overflow-wrap: anywhere; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; }

/* ---------- Settings ---------- */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { display: flex; align-items: center; gap: .55em; padding: .5em .7em; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.settings-nav a:hover { background: var(--sunk); }
.settings-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .settings-nav a { white-space: nowrap; }
  .settings-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand); }
}
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; margin: .5rem 0 1rem; }
@media (max-width: 640px) { .check-grid { grid-template-columns: minmax(0, 1fr); } }
.logo-row { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.logo-preview { width: 96px; height: 96px; border-radius: 50%; background: var(--card); }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 1rem; }
.hex-input { font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: lowercase; max-width: 9em; }
.contrast { margin: .3rem 0 0; }
.contrast.ok { color: var(--ok); }
.contrast.bad { color: var(--bad); font-weight: 700; }
.link-row .field { margin-bottom: .5rem; }

.types-cat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.types-cat-head, .types-fam-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.types-cat-head h2 { margin: 0; font-size: 1.25rem; }
/* Each category's families start folded, under a line counting them, so Settings > Alerts opens short. */
.types-cat-fold { margin-top: .5rem; }
.types-cat-fold > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; list-style: none; color: var(--brand-deep); font-weight: 700; }
.types-cat-fold > summary::-webkit-details-marker { display: none; }
.types-cat-fold > summary::after { content: "+"; content: "+" / ""; font-size: 1.3rem; line-height: 1; }
.types-cat-fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.types-fam { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.types-fam-head h3 { margin: 0; font-size: 1rem; }
.types-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .4rem; margin-top: .5rem; }
.types-item { display: flex; gap: 10px; align-items: center; padding: .45rem .55rem; border-radius: var(--radius-sm); text-decoration: none; color: inherit; border: 1px solid transparent; }
.types-item:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.types-item strong { display: block; }
.types-item small { color: var(--ink-soft); }
/* A turned-off item says so in words ("Not in use", "Hidden"), so its words keep their full contrast and only a
   type's icon is dimmed (dimming the whole item made its words too faint to read). */
.is-off { opacity: 1; }
.types-item.is-off > :first-child { opacity: .5; }
.icon-editor-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.4rem; }
.seg [aria-selected="true"] .faint, .seg [aria-current="page"] .faint { color: #fff; }
@media (max-width: 760px) { .icon-editor-grid { grid-template-columns: minmax(0, 1fr); } }
.icon-preview { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.mini-notif { grid-template-columns: 44px minmax(0, 1fr); width: 100%; text-align: left; margin-top: .5rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6rem; }
.swatch { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.swatch svg { width: 100%; height: 100%; display: block; }
.swatch:hover, .swatch:focus-visible { border-color: var(--ink); }
.icon-picker { margin-top: .8rem; }
.icon-picker-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.icon-picker-head input { flex: 1 1 200px; min-width: 0; width: auto; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }
.icon-choice { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; padding: 8px; }
.icon-choice svg, .icon-choice img { width: 100%; height: 100%; object-fit: contain; }
.icon-choice:hover { border-color: var(--brand-line); }
.icon-choice[aria-selected="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.field-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; margin-bottom: .6rem; background: var(--sunk); }
.field-row-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 .8rem; }
.field-row-grid .field { margin-bottom: .5rem; }
.field-row-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.field-row-foot .check { margin: 0; }
.provider-list .provider { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; margin-bottom: .45rem; }
.provider-list .provider:has(input:checked), .check.provider:has(input:checked) { border-color: var(--brand-line); background: var(--brand-tint); }
.check.provider { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; margin-bottom: .45rem; }
.labels-table td:first-child { width: 40%; }
.roles-matrix .table th, .roles-matrix .table td { vertical-align: middle; }
.role-col { min-width: 130px; text-align: center; }
.role-name { font-family: var(--display); font-weight: 600; text-align: center; min-height: 36px; padding: .3em .4em; }
.perm-box { width: 1.5rem; height: 1.5rem; accent-color: var(--brand); }
.group-row th { background: var(--card); color: var(--brand-deep); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.faq-admin { list-style: none; padding: 0; margin: 0; }
.faq-admin li { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.faq-admin li > div:first-child { flex: 1 1 300px; }
.faq-admin p { margin: .2rem 0 0; }
.faq-admin li + li { margin-top: 0; }
.preset-row { margin: .6rem 0; }
ul.checks { list-style: none; padding: 0; margin: 0; }
ul.checks li { display: flex; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line); }
ul.checks li:first-child { border-top: 0; }
ul.checks li + li { margin-top: 0; }
.checks-passed { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.checks-passed > summary { font-weight: 700; }
.check-mark svg { width: 1.4rem; height: 1.4rem; }
.check-ok .check-mark { color: var(--ok); }
.check-warn .check-mark { color: var(--warn); }
.check-bad .check-mark { color: var(--bad); }
pre.log { white-space: pre-wrap; background: var(--sunk); padding: .6rem; border-radius: var(--radius-sm); max-height: 240px; overflow: auto; }
.row-attn td { background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.btn.done { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ---------- Sign-up flyer ---------- */
/* The flyer is a white sheet in dark mode too, so its brand color stays the light one. */
.flyer { --brand-deep: color-mix(in srgb, var(--brand) 72%, #000); color-scheme: light; background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--radius); max-width: 8.5in; margin: 1rem auto; padding: .55in .6in; font-family: var(--font); }
.flyer-head { display: flex; align-items: center; gap: 18px; }
.flyer-head img { width: 110px; height: 110px; }
.flyer-head .brand-word { font-family: var(--display); font-size: 3.4rem; color: var(--brand-deep); }
.flyer-head .brand-word-stack { font-size: 2.2rem; }
.flyer-title { font-family: var(--display); font-weight: 600; font-size: 2.6rem; margin: .35in 0 .12in; color: #111; }
.flyer-lead { font-size: 1.25rem; margin-bottom: .25in; }
.flyer-main { display: grid; grid-template-columns: 2.9in minmax(0, 1fr); gap: .35in; align-items: center; }
.flyer-qr { width: 2.9in; }
.flyer-qr svg { width: 100%; height: auto; display: block; }
.flyer-steps { font-size: 1.2rem; padding-left: 1.2em; }
.flyer-steps li + li { margin-top: .5em; }
.flyer-note { font-size: 1.05rem; }
.flyer-es { margin-top: .25in; padding-top: .2in; border-top: 2px solid #ddd; }
.flyer-es h3 { font-family: var(--display); font-size: 1.6rem; color: #111; }
.flyer-es .flyer-steps { font-size: 1.05rem; }
.flyer-foot { margin-top: .3in; padding-top: .15in; border-top: 1.5px solid #111; font-size: .95rem; }
.flyer-foot p { margin: 0 0 .3em; }
.flyer-small { font-size: .8rem; color: #444; }
@media (max-width: 700px) { .flyer { padding: 1.2rem; } .flyer-main { grid-template-columns: minmax(0, 1fr); } .flyer-qr { width: 70%; } .flyer-head .brand-word { font-size: 2.4rem; } .flyer-title { font-size: 1.9rem; } }
/* Settings > File Storage: the storage folder's tree. */
.storage-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.storage-crumbs a[aria-current="page"] { color: var(--ink); }
.storage-list { list-style: none; margin: .4rem 0 1rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.storage-list li { display: flex; align-items: center; gap: .6em; padding: .55em .8em; min-height: 44px; }
.storage-list li + li { border-top: 1px solid var(--line); }
.storage-list .ui-icon { flex: none; color: var(--ink-soft); }
.storage-list span { overflow-wrap: anywhere; }
.inline-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-row input[type=text] { flex: 1 1 14rem; }
.storage-remove { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Settings > RSS Feeds and the starting points it offers. */
.rss-feeds li { align-items: flex-start; }
.rss-feed-main { display: grid; gap: 2px; min-width: 0; }
.rss-feed-main p { margin: 0; }
.rss-url { overflow-wrap: anywhere; }
.rss-items { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rss-items li { display: grid; gap: 2px; }
.rss-start summary { display: flex; align-items: center; gap: .4em; }
/* Printouts (app/admin/printouts.php): the message line card, eight to a Letter sheet, and the overview. */
.print-cards { color-scheme: light; display: grid; grid-template-columns: repeat(2, 3.5in); grid-auto-rows: 2.2in; justify-content: center; gap: 0; margin: 1rem auto; background: #fff; color: #111; width: max-content; max-width: 100%; }
.print-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: .16in .2in; border: 1px dashed #888; font-family: var(--font); overflow: hidden; }
.print-card-head { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1rem; }
.print-card-head img { width: 34px; height: 34px; }
.print-card-number { margin: 0; font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: .01em; }
.print-card-text { margin: 0; font-size: .74rem; line-height: 1.32; }
.print-card-site { margin: auto 0 0; font-size: .74rem; }
.print-overview .flyer-title { font-size: 2rem; margin-top: .25in; }
.print-overview-body { font-size: 1rem; line-height: 1.45; }
.print-overview-body h2 { font-family: var(--display); font-size: 1.3rem; margin: .18in 0 .06in; color: #111; }
.print-overview-body p { margin: 0 0 .1in; }
@media (max-width: 760px) { .print-cards { grid-template-columns: minmax(0, 3.5in); grid-auto-rows: auto; } .print-card { min-height: 2.2in; } }
@media print {
  @page { size: letter; margin: .3in; }
  .print-cards { margin: 0 auto; }
  body.team { background: #fff; }
  .team-head, .team-foot, .settings-nav, .settings-menu-small, .unlock-note, .no-print, .desk-bar, .flash { display: none !important; }
  .settings-layout { display: block; }
  .team-main { padding: 0; max-width: none; }
  .flyer { border: 0; margin: 0; max-width: none; padding: 0; }
}
/* The grid in which notices are chosen, kind by kind (app/templates/notice_grid.php), for Alerts and the
   Switchboard alike, and its 44-pixel checkboxes, which the Switchboard's lists use too. On a phone each
   notice is a row of its own: its name and what it means across the width, then the two checkboxes with
   their labels (from the column headings), so neither is cut off at the edge. */
.sb-prefs td.num { vertical-align: middle; }
.sb-cbox-label { display: none; }
@media (max-width: 560px) {
  .sb-prefs, .sb-prefs tbody, .sb-prefs tr, .sb-prefs td { display: block; width: 100%; }
  .sb-prefs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sb-prefs tr { padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
  .sb-prefs tr:last-child { border-bottom: 0; }
  .sb-prefs td { border: 0; padding: 0; }
  .sb-prefs td.num { display: inline-block; width: auto; margin-right: 1.2rem; text-align: left; }
  .sb-prefs td.num .sb-cbox { display: inline-flex; gap: .45rem; place-items: center; justify-content: flex-start; }
  .sb-prefs .sb-cbox-label { display: inline; font-size: .92rem; }
}
.sb-cbox { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.sb-cbox input { width: 1.3rem; height: 1.3rem; accent-color: var(--brand); }
/* Internal notes (app/lib/InternalNote.php): the same look wherever the team writes one, never printed. */
.internal-note { list-style: none; padding: .75rem .9rem; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warn) 6%, var(--card)); }
.internal-note + .internal-note { margin-top: .55rem; }
.internal-note-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; margin: 0 0 .4rem; }
.internal-note-head svg { width: 1.1em; height: 1.1em; color: var(--brand-deep); }
.internal-note-body > :last-child { margin-bottom: 0; }
@media print { .internal-note, .internal-note-field { display: none !important; } }
.logo-row > div { flex: 1 1 320px; }
.input-row > input[type=color] { flex: none; width: 52px; }
.input-row > .hex-input { flex: 0 1 9em; }
.sep-gap { margin-top: .4rem; }
/* Settings > Roles: every role's column, with its full name, beside the permissions at 1280 pixels and wider.
   The permission column takes what the six role columns leave, and a role's name may wrap onto a second line. */
.roles-matrix .table { table-layout: fixed; width: 100%; }
.roles-matrix .table td:first-child, .roles-matrix .table th:first-child { width: auto; min-width: 0; }
.roles-matrix .role-col { width: 6.4rem; min-width: 0; padding-inline: .2rem; white-space: normal; overflow-wrap: break-word; }
.roles-matrix .role-name { display: block; width: 100%; min-width: 0; min-height: 0; padding: .2em .15em; font-size: .85rem; line-height: 1.2; resize: none; overflow: hidden; text-align: center; }
.roles-matrix td textarea { width: 100%; min-width: 0; }
.roles-matrix .role-head { display: block; font-family: var(--display); font-weight: 700; font-size: .9rem; line-height: 1.25; text-align: center; }
.roles-matrix .role-col .small { text-align: center; }
/* Under Role Names and Descriptions, each role's name and description sit side by side, and stack on a phone. */
.role-edit { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 0 1rem; padding-top: .9rem; margin-top: .9rem; border-top: 1px solid var(--line); }
.role-edit .field { margin-bottom: .4rem; }
@media (max-width: 640px) { .role-edit { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .roles-matrix .table { table-layout: auto; width: auto; }
  .roles-matrix .table td:first-child, .roles-matrix .table th:first-child { min-width: 240px; }
  .roles-matrix .role-col { min-width: 112px; }
}
.grid-2 > .panel, .grid-2 > .panel + .panel { margin: 0 0 1rem; }
/* Two fields side by side keep the usual space below them, so the next field's label does not touch them
   (each field's own space is removed when it is the last in its row, which on a phone is every second one). */
.grid-2 > .field:last-child, .grid-3 > .field:last-child { margin-bottom: 1.1rem; }
.settings-body > .panel + .grid-2, .settings-body > .grid-2 + .panel { margin-top: 1rem; }
.check-mark { flex: none; }

/* ---------- Role tags ---------- */
.role-tag { display: inline-block; vertical-align: .08em; font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .03em; line-height: 1.5; padding: 0 .55em; border-radius: 999px; border: 1px solid var(--rc, var(--line-strong)); color: var(--rc, var(--ink-soft)); background: color-mix(in srgb, var(--rc, var(--ink-soft)) 9%, var(--card)); white-space: nowrap; }
.role-relay-volunteer { --rc: #2c6e7f; }
.role-drafter { --rc: #5c6670; }
.role-sender { --rc: #1f5fa8; }
.role-approver { --rc: #1d6b52; }
.role-coordinator { --rc: #6b3fa0; }
.role-super-admin { --rc: #8a3b12; }
@media (prefers-color-scheme: dark) { :root:not(.force-light) .role-tag { color: color-mix(in srgb, var(--rc, var(--ink-soft)) 45%, #fff); } }
.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.role-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; background: var(--card); }
.role-card h3 { margin: 0 0 .4rem; }
.role-card .role-tag { font-size: .85rem; }
.perm-list { margin: .5rem 0 0; padding-left: 1.1em; font-size: .9rem; }
.perm-list li + li { margin-top: .35em; }

/* Settings window: one code unlocks everyday settings for a few minutes. */
.unlock-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; border-color: var(--brand-line); background: var(--brand-tint); }
.unlock-panel > p { flex: 1 1 20rem; min-width: 0; margin: 0; }
.unlock-panel .unlock-message { margin: 0; }
.unlock-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.unlock-row label { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: .9rem; margin: 0; }
.unlock-row .code-input { width: 8.5em; font-size: 1.15rem; letter-spacing: .12em; text-align: center; }
.unlock-note { display: flex; align-items: center; gap: .4em; color: var(--ok); margin: 0 0 1rem; }
.unlock-note svg { width: 1.1em; height: 1.1em; }
/* Once the count reaches zero and changes have locked, the line turns quiet, as the locked line is, with a closed lock. */
.unlock-note .unlock-shut-icon, .unlock-note.unlock-ended .unlock-open-icon { display: none; }
.unlock-note.unlock-ended .unlock-shut-icon { display: inline-block; }
.unlock-note.unlock-ended { color: var(--muted); }

/* Archive search: matched words, where they matched, and close spellings */
mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 .1em; }
.search-hit { margin-top: .25rem; color: var(--ink-soft); }
.search-notes p { margin: 0 0 .5rem; }
.suggest-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 .75rem; }
.suggest-list .count { margin-left: .35em; }

/* Keep the item with keyboard focus clear of the Alerts page's section bar, which stays at the top. */
html { scroll-padding-top: 70px; }

/* Before an automatic sign-out, and after one: a box in the middle of the screen, over the page. */
.session-shade { position: fixed; inset: 0; z-index: 50; background: rgba(15, 20, 25, .45); }
.session-box { position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); color: var(--ink); border: 2px solid var(--brand); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.session-box h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.session-box p { margin: 0 0 1rem; }
.session-time { font-variant-numeric: tabular-nums; }
/* While nobody is signed in, the page stays in place, to be saved once signed in again, but blurred past reading. */
body.signed-out > :not(.session-box):not(.session-shade) { filter: blur(14px); user-select: none; }
/* Where the browser cannot make the page inert, it is hidden outright, so neither the keyboard nor a screen reader reaches it. */
body.no-inert.signed-out > :not(.session-box):not(.session-shade) { visibility: hidden; }

/* Settings > Appearance: the favicon at full size and as it looks in a browser tab */
.logo-row > .favicon-preview { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.favicon-preview > img { width: 64px; height: 64px; image-rendering: auto; }
.favicon-tab { display: inline-flex; align-items: center; gap: .45em; max-width: 14rem; padding: .35em .8em; background: var(--sunk); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.favicon-tab span { overflow: hidden; text-overflow: ellipsis; }

/* Settings layout (platform) */
/* The Settings menu, under its five headings. On wide screens it stays in view
   (chrome's rule sets how far from the top) and scrolls on its own, so its end can
   be reached without scrolling the page; a soft shadow at the top or bottom edge
   shows when there is more of it. On narrow screens it folds into a Menu. */
.settings-nav { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 4px 8px 0;
  background:
    linear-gradient(var(--paper) 50%, transparent) center top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--paper) 50%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .12), transparent) center top / 100% 8px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .12), transparent) center bottom / 100% 8px no-repeat scroll; }
/* Each item is 26 pixels tall and each heading about 17, so the whole menu (five groups, about nineteen tabs)
   fits below the header at 1440 by 900 without its own scroll, on any tab (the operations and design audits). */
.settings-nav a { padding-top: .15em; padding-bottom: .15em; min-height: 26px; line-height: 1.25; font-size: .92rem; }
.settings-nav ul, .settings-menu-small ul { list-style: none; margin: 0 0 .15rem; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.settings-nav ul { gap: 0; margin-bottom: 0; }
.settings-nav li + li, .settings-menu-small li + li { margin-top: 0; }
.settings-nav-group { font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: .4rem .7rem 0; }
.settings-nav > .settings-nav-group:first-child { margin-top: .1rem; }

/* The gear's dropdown in the header: the Settings tabs under their group headings, in two columns on a
   wide screen so the list stays short, and one scrolling column on a phone. */
.nav-menu.gear-menu { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: .2rem .8rem; min-width: 27rem; padding: 8px 10px; }
.nav-menu.gear-menu[hidden] { display: none; }
.gear-group { list-style: none; }
.gear-group > ul { list-style: none; margin: 0 0 .3rem; padding: 0; }
.gear-head { display: block; font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: .35rem .7rem .1rem; }
.nav-menu.gear-menu a { min-height: 34px; padding-block: .25em; }
@media (max-width: 640px) {
  .nav-menu.gear-menu { grid-template-columns: minmax(0, 1fr); min-width: 0; max-height: calc(100vh - 96px); overflow-y: auto; }
}

/* The gear while Settings is open: marked as the current place, as a menu item is. */
.team-gear .team-icon-btn[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 2px var(--brand-line, var(--brand)); }

/* The code asked beside a Save button while changes are locked (unlock_inline()). */
.unlock-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 .6rem .4rem 0; vertical-align: middle; }
.unlock-inline label { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-size: .9rem; margin: 0; }
.unlock-inline .code-input { width: 8.5em; min-height: 44px; }
.unlock-inline.unlock-compact .code-input { width: 6em; min-height: 36px; }
.unlock-message { margin: 0 0 1rem; }

/* A role after a person's name, in parentheses (role_tag()). */
.role-after { color: var(--ink-soft); font-weight: 400; }

/* Settings > Alerts' alert types, and the lists that were Taxonomy's */
.tax-jump { margin: 0 0 1rem; }
.tax-part { margin-top: 1.4rem; scroll-margin-top: 1rem; }
.tax-alert-head h2 { margin-top: 0; }

/* Settings > Appearance > Operations: the menus a site can change. */
.menu-custom td, .menu-custom th { vertical-align: middle; }
.menu-custom input[type=text], .menu-custom select { width: 100%; min-width: 9rem; }
.settings-menu-small { display: none; }
@media (max-width: 900px) {
  .settings-nav { display: none; }
  .settings-menu-small { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  .settings-menu-small > summary { display: flex; align-items: center; gap: .55em; min-height: 48px; padding: .4rem .9rem; cursor: pointer; font-weight: 700; list-style: none; }
  .settings-menu-small > summary::-webkit-details-marker { display: none; }
  .settings-menu-small > summary > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
  .settings-menu-open { flex: none; font-size: .9rem; color: var(--brand-deep); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: .15em .8em; }
  .settings-menu-small[open] .settings-menu-open { background: var(--brand); color: #fff; border-color: var(--brand); }
  .settings-menu-small nav { padding: 0 .5rem .6rem; border-top: 1px solid var(--line); }
  .settings-menu-small a { display: flex; align-items: center; gap: .55em; min-height: 44px; padding: .3em .6em; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 700; }
  .settings-menu-small a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 3px 0 0 var(--brand); }
}

/* The one code box for a page (DECISIONS 80): a bar at the end of the page's content that stays at the bottom of the
   screen as the page scrolls, and the line saying how long changes stay unlocked. Where admin.js asks in a box over
   the page instead, the bar is hidden. */
.unlock-panel.unlock-asks { border-color: var(--warn, #a64b00); background: color-mix(in srgb, var(--warn, #a64b00) 9%, var(--card)); }
.unlock-panel { margin-bottom: 1rem; }
.unlock-bar { position: sticky; bottom: 0; z-index: 30; margin: 1.5rem 0 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .14); }
.unlock-by-box .unlock-bar { display: none; }
.unlock-locked-note { display: none; color: var(--muted); }
.unlock-by-box .unlock-locked-note { display: flex; flex-wrap: wrap; }
.unlock-locked-note { align-items: center; gap: .4em .5em; }
.unlock-locked-note > span { flex: 1 1 0; min-width: 12rem; }
@media (min-width: 700px) { .unlock-locked-note > span { flex: 0 1 auto; } }
.unlock-locked-note .btn { margin-left: .25rem; }
/* The box over the page: the sign-out box's look, with the page softly blurred behind it. */
body.unlock-asking > :not(.session-box):not(.session-shade) { filter: blur(5px); }
.unlock-box form { margin: 0; }
.unlock-box .code-input { display: block; width: 100%; font-size: 1.5rem; letter-spacing: .2em; text-align: center; margin: 0 0 .75rem; }
.unlock-box .err { margin: -.25rem 0 .75rem; }
.unlock-box .btn-row { margin: 0; }
form.unlock-note { flex-wrap: wrap; }
form.unlock-note .btn { margin-left: .4rem; }

/* Folding sections: <details class="fold"> that work without JavaScript, the one folding pattern of the
   team area (Appearance, Email, and the Alerts part of General; the explanation of organizations and
   workgroups; Add a Workgroup and Add an Organization below their lists; Reply by Email on a relay
   with no email address). The title may be the part's heading (<h2 class="fold-title">). */
h2.fold-title, h3.fold-title { margin: 0; }
details.fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 .8rem; box-shadow: var(--shadow); }
details.fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding: .9rem 2.6rem .9rem 1.1rem; cursor: pointer; list-style: none; position: relative; min-height: 48px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; content: "+" / ""; position: absolute; right: 1.1rem; top: .65rem; font-size: 1.5rem; line-height: 1; color: var(--brand-deep); }
details.fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
details.fold > summary:hover { background: var(--sunk); border-radius: var(--radius); }
.fold-title { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.fold-title .ui-icon { width: 1.15em; height: 1.15em; color: var(--brand-deep); }
.fold-note { flex-basis: 100%; color: var(--ink-soft); font-size: .92rem; }
.fold-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.fold-body > fieldset:first-child, .fold-body > form:first-child, .fold-body > .sub-panel:first-child { margin-top: 1rem; }
.fold-body fieldset { background: var(--paper); }
.sub-panel { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1rem; }
.sub-panel:first-child { border-top: 0; padding-top: 0; }
.sub-panel h2, .sub-panel h3 { font-size: 1.1rem; margin: 0 0 .5rem; }

/* A table that scrolls sideways keeps its hidden labels inside it, so they cannot widen the page. */
.settings-body .table-wrap { position: relative; }

/* Settings > General */
.general-modules { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; margin: 0 0 1.2rem; background: var(--card); box-shadow: var(--shadow); }
.legend-like { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin: 0 0 .5em; }

/* ---------- Section Boxes ---------- */
/* A part of a form in Operations (a fieldset with no class of its own) is drawn as a panel is: the same padding,
   shadow, and space below, with its heading inside the box at the panel heading's size rather than set into the
   border, so the boxes on a page look alike whether their heading is a legend or an h2. A floated legend is the
   way to place it inside; the element after it clears the float. Fieldsets with a class (groups of choices inside a
   form, Beacon's blocks, a relay's parties) keep their own look. */
.team fieldset:not([class]) { padding: 1.15rem 1.25rem; margin: 0 0 1.2rem; box-shadow: var(--shadow); }
.team fieldset:not([class]) > legend { float: left; width: 100%; padding: 0; margin: 0 0 .5em; font-size: 1.2rem; line-height: 1.2; }
.team fieldset:not([class]) > legend + * { clear: both; }
.team .fold-body fieldset:not([class]) { box-shadow: none; }
/* A sentence that introduces the section stands apart from the first field under it, and the box ends the same
   distance below its last field as it starts above its heading (fields keep 1.1rem under them for the next). */
.team fieldset:not([class]) > legend + p.help, .general-modules > h2 + p.help { margin: 0 0 1rem; }
.team fieldset:not([class]) > .field:last-child, .team fieldset:not([class]) > p:last-child { margin-bottom: 0; }
.team fieldset:not([class]) > .grid-2:last-child, .team fieldset:not([class]) > .grid-3:last-child { margin-bottom: -1.1rem; }
/* In Settings, a group of choices inside a section (Role and Workgroups in Invite Someone, for example) is headed as
   each field is, by its name in bold, without a second box with its name set into the border, so it reads as one of
   the section's fields. */
.settings-body :is(.panel, fieldset, .fold-body) :is(fieldset.field, fieldset.role-choice, fieldset.sign-styles, fieldset.icon-editor), .team .panel fieldset.level-choices { border: 0; padding: 0; margin-left: 0; margin-right: 0; background: none; box-shadow: none; min-width: 0; }
.settings-body :is(.panel, fieldset, .fold-body) :is(fieldset.field, fieldset.role-choice, fieldset.sign-styles, fieldset.icon-editor) > legend, .team .panel fieldset.level-choices > legend { font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.4; padding: 0; margin: 0 0 .3rem; }
.modules-table td:first-child .ui-icon { color: var(--brand-deep); }
.modules-note { margin: .45rem 0 0; color: var(--ink); }
/* A field whose answer is short (a number of minutes, an order, a choice of units): the box is narrow, while its label
   and explanation keep the column's width, so neither is squeezed into a few words a line. */
.narrow-field > input, .narrow-field > select { max-width: 14rem; }
@media (max-width: 600px) {
  /* On phones each module is a small card: its name and description, then its status, what it adds, and its switch. */
  .general-modules .table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .modules-table thead { display: none; }
  .modules-table, .modules-table tbody, .modules-table tr, .modules-table td { display: block; width: auto; }
  .modules-table tr { border-bottom: 1px solid var(--line); padding: .6rem 0; }
  .modules-table td { border: 0; padding: .15rem 0; }
  .modules-table td.nowrap { display: inline-block; margin-right: .6rem; }
}

/* Settings > System Health */
.version-line { display: flex; align-items: center; gap: .45em; font-weight: 700; margin: -.4rem 0 1rem; color: var(--ink-soft); }

/* Settings > Backups */
.data-area > h2 { display: flex; align-items: center; gap: .45em; }
.data-area > h2 .ui-icon { color: var(--brand-deep); }
.export-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.export-form .field { margin: 0; flex: 1 1 16rem; max-width: 26rem; }
.kind-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 1rem 0; }
.kind-list dt { font-weight: 700; }
.kind-list dd { margin: 0; }
@media (max-width: 600px) { .kind-list { grid-template-columns: minmax(0, 1fr); } .kind-list dd { margin-bottom: .4rem; } }
.import-items { max-height: 26rem; overflow-y: auto; background: var(--paper); }
.import-items .check { margin: .2rem 0; }

/* Settings > Roles: a section for each module, with its icon */
.roles-matrix .module-row th { background: var(--brand-tint); color: var(--brand-deep); font-size: 1.02rem; }
.module-row-title { display: inline-flex; align-items: center; gap: .45em; font-family: var(--display); }
.roles-matrix .subgroup-row th { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-top: .8rem; }

/* Questions */
.qa-set-row { display: flex; gap: .7rem; align-items: flex-start; }
.qa-sets-admin code { font-size: .85em; }
.icon-now { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.icon-now .ui-icon { width: 1.4em; height: 1.4em; }
ul.plain-list { list-style: none; padding: 0; margin: .4rem 0 .8rem; }
/* The Switchboard's Relays panel on an alert's team page (the 'alert_panels' key). */
.sb-about-list li + li { margin-top: .35rem; }
.sb-about-list .code { margin-right: .25em; }

/* Translate buttons beside fields */
.translate-tool { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-top: .35rem; }

/* The Archive's tabs and the Alerts tab's lists */
.archive-tabs .ui-icon { width: 1.05em; height: 1.05em; margin-right: .3em; vertical-align: -.15em; }
.archive-views { margin: 0 0 1rem; }

/* The line beside Send that says when an alert comes down (_compose.php). */
.takedown-note { display: flex; gap: .5em; align-items: flex-start; }
.takedown-note .ui-icon { flex: none; margin-top: .15em; }

/* The page picker (WikiLinks::picker()), beside a relay's reply and in the alert form as well as in the wiki, so its
   styles are here, where every team page has them (they were only in the wiki's, so elsewhere the list ran
   the length of the page with bullets). */
.wiki-pick { margin-top: .5rem; }
.wiki-pick-body { padding-top: .5rem; }
.wiki-pick-body input[type="search"] { width: 100%; max-width: 28rem; }
.wiki-pick-list { list-style: none; margin: .5rem 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.wiki-pick-list li { margin: .15rem 0; }
.wiki-pick-plain code { overflow-wrap: anywhere; }

/* The shared Choose an Icon button (icon-chooser.js), in Beacon's editor and the wiki's. */
.icon-open { margin-top: .4rem; }
.icon-chooser-box { margin-top: .6rem; }
.icon-chooser-box .icon-grid { max-height: 14rem; }

/* A fieldset that sits in a panel without a second box, as on Printouts. */
fieldset.field.in-panel { border: 0; padding: 0; margin-left: 0; margin-right: 0; background: none; min-width: 0; }
fieldset.field.in-panel > legend { padding: 0; font-weight: 700; margin-bottom: .35rem; }
.modules-table ul.plain-list { margin: 0; }
.modules-table ul.plain-list li + li { margin-top: .25rem; }
@media (max-width: 640px) { form.unlock-note > span { flex: 1 1 0; min-width: 0; } form.unlock-note .btn { margin-left: 0; } } /* the lock icon stays beside its sentence on a phone */
.icon-picker[hidden] { display: none; } /* closed until Choose an Icon */

/* The Permissions section that ends each module's Settings page (module_permissions_html()). */
.perm-holders { padding: .7rem 0; border-top: 1px solid var(--line); }
.perm-holders h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.perm-holders > p { margin: 0 0 .5rem; }
.perm-holder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; }
.perm-holder-list li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.perm-holder-list .small { font-weight: 400; }

/* Settings > Reports: the period's controls in a row, then each section's tiles, chart, and tables. */
.report-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.report-row .field { margin: 0; min-width: 12rem; }
.report-pick .btn-row { margin-top: .9rem; flex-wrap: wrap; }
.report-title { margin: 1.4rem 0 .2rem; }
.report-chart { margin-top: 1rem; max-width: 760px; }
.report-chart .legend { margin-bottom: .4rem; }
.report-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 1.4rem; margin-top: 1rem; }
.report-table h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
@media print {
  .report-part { break-inside: avoid; box-shadow: none; }
  .report-tables { grid-template-columns: 1fr 1fr; }
}
.report-pick [hidden] { display: none; }

/* Choosing a password: VOICE's rules under the box, each turning green with a check as it is met
   (admin.js), and red while it is not once typing has begun; and whether the second box matches the first. */
.pw-rules { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .92em; color: var(--ink-soft); }
.pw-rules li { display: flex; gap: .55rem; align-items: flex-start; }
.pw-mark { flex: none; position: relative; width: 1.05em; height: 1.05em; margin-top: .18em; border: 2px solid var(--line-strong); border-radius: 50%; }
.pw-rules.is-typing li { color: var(--bad); }
.pw-rules.is-typing li .pw-mark { border-color: var(--bad); }
.pw-rules li.is-met { color: var(--ok); }
.pw-rules li.is-met .pw-mark { background: var(--ok); border-color: var(--ok); }
.pw-rules li.is-met .pw-mark::after { content: ""; position: absolute; left: .27em; top: .06em; width: .24em; height: .5em; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pw-match { min-height: 1.45em; margin: .4rem 0 0; font-size: .92em; }
.pw-match.is-met { color: var(--ok); }
.pw-match.is-unmet { color: var(--bad); }

/* Agreeing: the agreement in the sign-in pages' frame, wide enough to read. */
.plain-page.plain-wide { max-width: min(54rem, 100%); }
.agreement-text { margin-block: 1.25rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.agreement-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.agreement-form .btn[disabled] { opacity: .5; cursor: not-allowed; }
.agree-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
/* Settings > Organizations: the Official Partner seal, set by agreeing to the Partner Agreement. */
.partner-seal { margin: 0 0 .9rem; }
.partner-seal p { margin: 0 0 .25rem; }
.partner-seal.is-on .partner-mark { font-weight: 700; }
.end-partnership { margin-top: 1.5rem; padding-top: 1rem; }
.end-partnership h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.partner-field input[disabled] + span { opacity: .55; }
/* A person's agreements, in My Account and on their page in the Directory. */
.agreement-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.agreement-list li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.agreements-due { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .6rem; }
.wiki-agreed-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .3rem 0 .5rem; }
.wiki-agreed-line:empty { display: none; }
/* A copy of an agreement on paper: the sign that names the place keeps the logo beside it. */
@media print { .plain-brand.print-only { display: flex !important; } }
.plain-brand h1.brand-word { margin: 0; }
.plain-page .panel p { text-wrap: pretty; }
.static-field > p:first-child { margin: 0 0 .3rem; }
.static-field > p:first-child strong { display: block; margin-bottom: .2rem; }
.static-field > p:first-child span { overflow-wrap: anywhere; }
[data-drive-steps][hidden], [data-mail-settings][hidden], [data-new-org-name][hidden] { display: none; }

/* Settings > Team Members: Invitations Waiting, each with when its link expires and a new link beside it. */
.invite-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.invite-list .row-item { grid-template-columns: minmax(0, 1fr) auto; }
.invite-list .row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.invite-list .row-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .6rem; }
.invite-list .inline-form { margin: 0; }
@media (max-width: 640px) { .invite-list .row-item { grid-template-columns: minmax(0, 1fr); } .invite-list .row-side { justify-content: flex-start; } }
.new-org-field { margin: .75rem 0 0; }

/* A module's part of a Settings page (the Switchboard's in Settings > Email), open under its own heading. */
.module-part { margin-top: 2.2rem; }
.module-part-title { display: flex; align-items: center; gap: .5em; margin: 0 0 .5rem; font-size: 1.4rem; }
.module-part-title .ui-icon { width: 1.1em; height: 1.1em; color: var(--brand-deep); }
.sb-script-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.sb-script-head h3 { margin: 0; }

/* Search Settings: a box above the Settings menu that narrows it to the parts that match, each with its matching
   headings and fields beneath it (settings.js). On a phone it sits above the folded menu. */
.settings-find { position: relative; margin: 0 0 .5rem; }
.settings-find[hidden] { display: none; }
.settings-find input { width: 100%; min-height: 40px; padding: .3em .9em .3em 2.2em; border: 1.5px solid #8a8272; border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: .95rem; }
.settings-find input::placeholder { color: var(--ink-soft); opacity: 1; }
.settings-find input:focus { outline: 3px solid var(--focus, #0b5cad); outline-offset: 1px; border-color: var(--brand); }
.settings-find-icon { position: absolute; left: .8em; top: 20px; transform: translateY(-50%); display: inline-flex; color: var(--ink-soft); pointer-events: none; }
.settings-find-icon svg { width: 1.05em; height: 1.05em; }
.settings-find-status { margin: .3rem .7rem 0; color: var(--ink-soft); }
.settings-find-status:empty { display: none; }
.settings-find-small { display: none; }
.settings-nav .settings-hits, .settings-menu-small .settings-hits { margin: 0 0 .35rem 1.9em; gap: 0; border-left: 2px solid var(--line); }
.settings-nav .settings-hits a, .settings-menu-small .settings-hits a { display: block; min-height: 0; padding: .25em .6em; font-weight: 500; font-size: .88rem; line-height: 1.3; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.settings-hits mark { background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; padding: 0 1px; border-radius: 2px; }
.settings-hit-under { display: block; font-size: .8rem; color: var(--ink-soft); }
.settings-hit-more a { color: var(--brand-deep) !important; font-style: italic; }
.settings-found { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 4px; transition: outline-color .6s; }
@media (max-width: 900px) {
  .settings-find-wide { display: none; }
  .settings-find-small { display: block; margin: 0; }
  .settings-find-small[hidden] { display: none; }
  .settings-find-small input { min-height: 44px; }
  .settings-find-small .settings-find-icon { top: 22px; }
}
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) .settings-find input { border-color: #9a927f; }
}
@media (max-width: 900px) {
  .settings-menu-small .settings-hits a { min-height: 40px; padding-top: .45em; padding-bottom: .45em; }
}
/* The menu scrolls on its own, which clips anything drawn past its edges, so the box keeps room inside it for its
   focus ring (3 pixels, 1 pixel out) on every side. */
.settings-nav .settings-find { margin: 5px 5px .5rem 5px; }
/* With the box above it, the whole menu still fits below the header at 1440 by 900 without its own scroll (the
   operations and design audits): the box is compact on wide screens, and each item and heading gives up a little room. */
@media (min-width: 901px) {
  .settings-nav .settings-find { margin: 4px 5px 6px 5px; }
  .settings-nav .settings-find input { min-height: 34px; padding-top: .2em; padding-bottom: .2em; font-size: .9rem; }
  .settings-nav .settings-find-icon { top: 17px; }
  .settings-nav > ul > li > a { min-height: 24px; padding-top: .1em; padding-bottom: .1em; }
  .settings-nav-group { margin-top: .3rem; }
}

/* A placeholder named in a help line, such as [message line] in Settings > General: set apart from the words around it. */
.fill-chip { display: inline-block; padding: 0 .3em; border-radius: 4px; background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; white-space: nowrap; }

/* Settings > Email > Alerts (email-alerts.php): each email's wording, shown as it reads, opens in place to be changed,
   with a button for each placeholder (admin.js), in the look of the Switchboard's Notification Emails. */
.wording-legend { margin: 0; }
.wording-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.wording { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.wording > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.wording > summary::-webkit-details-marker { display: none; }
.wording > summary:hover { background: var(--sunk); }
.wording-name { font-weight: 700; margin: 0; }
.wording-text { grid-column: 1; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.wording-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: .35em; color: var(--brand-deep); font-weight: 700; }
.wording-edit .ui-icon { width: 1em; height: 1em; }
.wording[open] > summary .wording-text, .wording[open] > summary .wording-edit { display: none; }
.wording-form { padding: 0 .9rem .9rem; }
.wording-form textarea { width: 100%; }
.wording-fills { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .45rem 0 .2rem; }
.wording-fills[hidden] { display: none; }
.wording-fills .btn { font-family: inherit; min-height: 32px; padding: .15em .6em; border-radius: 6px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid transparent; }

/* Choosing people by name (switchboard.js, data-person-picker): a box that suggests names as they are typed, with
   the people chosen shown above it as chips, each with a button that takes them off. */
.person-picker { display: grid; gap: .5rem; max-width: 34rem; }
.pp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pp-chip { margin: 0; display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .2rem .2rem .7rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-line); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.pp-remove { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pp-remove:hover, .pp-remove:focus-visible { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.pp-find { position: relative; }
.pp-find input { width: 100%; }
.pp-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 18rem; overflow-y: auto; }
.pp-list [role="option"] { margin: 0; padding: .55rem .7rem; border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.pp-list [aria-selected="true"], .pp-list [role="option"]:not([aria-disabled]):hover { background: var(--brand-tint); color: var(--brand-deep); }
.pp-list .pp-none { color: var(--ink-soft); cursor: default; }
:root.a11y-contrast .pp-chip { background: var(--card); border: 2px solid var(--ink); color: var(--ink); }
:root.a11y-contrast .pp-list [aria-selected="true"] { outline: 2px solid var(--ink); }
.pp-list .pp-detail { display: block; margin-left: auto; padding-left: 1rem; color: var(--ink-soft); font-size: .9rem; text-align: right; }