/* Shared form geometry. Existing containers continue to own widths and layout. */
:root {
  --control-height: 40px;
  --control-radius: 8px;
  --control-padding: 12px;
  --control-label-gap: 6px;
  --control-font-size: 14px;
  --control-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --control-surface: #fff;
  --control-border: #c8cdd1;
  --control-border-hover: #9aa6af;
  --control-focus: #244866;
  --control-disabled-surface: #f1f3f4;
  --control-disabled-ink: #66717b;
  --control-wash: var(--blue-wash, #e8eef4);
  --control-note: #8a5a12;
  --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2361717b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Component files own contextual width/layout. One primitive owns visual
   geometry in the shell, scoped Request workspace and standalone Desk.
   Native choices, sliders and pickers retain their interactions. */
:is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"])),
.control-disclosure > summary,
button.control-disclosure[aria-expanded] {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 8px var(--control-padding);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background-color: var(--control-surface);
  background-image: none;
  color: var(--ink, var(--navy, #17212a));
  font-family: var(--control-font-family);
  font-size: var(--control-font-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  box-shadow: none;
  transition: none;

  &:is(textarea) {
    height: auto;
    min-height: 100px;
    resize: vertical;
  }

  &:is(select):not([multiple]):not([size]),
  &:is(select[size="1"]):not([multiple]),
  &:is(summary, button.control-disclosure, input[list]) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 38px;
    background-image: var(--control-chevron);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 12px center;
    cursor: pointer;

    &:dir(rtl) { background-position: left 12px center; }
  }

  /* A listbox exposes multiple rows; a dropdown chevron/40px would hide choices. */
  &:is(select[multiple], select[size]:not([size="1"])) {
    height: auto;
    min-height: 100px;
  }

  &:focus {
    border-color: var(--control-border-hover);
    box-shadow: none;
  }

  &:focus-visible {
    outline: 2px solid var(--control-focus);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 1;
    background-color: var(--control-disabled-surface);
    color: var(--control-disabled-ink);
    cursor: not-allowed;
  }

  &::placeholder { color: #66717b; opacity: 1; }

  @media (hover: hover) {
    &:hover:not(:disabled) { border-color: var(--control-border-hover); }
  }

  @media (forced-colors: active) {
    color: CanvasText;
    background-color: Canvas;
    border-color: ButtonText;
    background-image: none;
    forced-color-adjust: auto;

    &:is(select):not([multiple]):not([size]),
    &:is(select[size="1"]):not([multiple]),
    &:is(input[list]) {
      appearance: auto;
      -webkit-appearance: auto;
      padding-inline-end: var(--control-padding);
      background-image: none;
    }
    &:is(summary, button.control-disclosure) {
      appearance: auto;
      background-image: none;
      padding-inline-end: var(--control-padding);
    }
    &:focus-visible { outline-color: Highlight; }
    &:disabled { color: GrayText; border-color: GrayText; background-color: Canvas; }
  }
}

/* Browser autofill must not paint a field its own colour (Chrome and Safari fill it pale yellow or blue, and the
   user agent forces its own background, which no rule can override): an inset shadow in the field's own surface covers it,
   and the text keeps the field's ink. Autofill itself is untouched. The two selectors stay in separate rules
   so that a browser that does not know one still reads the other. */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--control-surface) inset;
  -webkit-text-fill-color: var(--ink, #17212a);
  caret-color: var(--ink, #17212a);
}
input:autofill,
textarea:autofill,
select:autofill {
  box-shadow: 0 0 0 1000px var(--control-surface) inset;
  -webkit-text-fill-color: var(--ink, #17212a);
  caret-color: var(--ink, #17212a);
}

/* Apply the same gap to existing stacked and inline label groups without
   changing their display mode, order, checkbox alignment or compact widths. */
:is(body, #requests-workspace-root) label:has(> :is(input, select, textarea)):not(:has(> :is(input[type="checkbox"], input[type="radio"], input[type="range"]))) {
  gap: var(--control-label-gap);
  font-size: 12px;
  font-weight: 520;
  letter-spacing: normal;
}

:is(body, #requests-workspace-root) :is(.field, .modal-row) > :is(label, .modal-label, span[id$="-label"]) {
  margin-top: 0;
  font-size: 12px;
  font-weight: 520;
  margin-bottom: var(--control-label-gap);
}

@media (pointer: coarse), (max-width: 760px) {
  :root {
    --control-height: 44px;
    --control-font-size: 16px;
  }
}


/* Semantic details stay keyboard operable. Compact filters alone suppress the
   OS marker; history/editor disclosures retain their document markers. */
.control-disclosure > summary { list-style: none; cursor: pointer; }
.control-disclosure > summary::-webkit-details-marker { display: none; }
.control-disclosure > summary::after { content: none; }
.control-disclosure[data-active] > summary,
button.control-disclosure.active { border-color: var(--control-focus); }
@media (forced-colors: active) {
  .control-disclosure > summary { list-style: disclosure-closed inside; }
  .control-disclosure > summary:not(:where(.directory-refinement > summary, .review-refinement > summary, .people-extra-filters > summary)) { display: list-item; }
  .control-disclosure[open] > summary { list-style-type: disclosure-open; }
  .control-disclosure > summary::-webkit-details-marker { display: inline; }
}
/* One disclosure pattern (owner, 24 Oct: open or closed must be obvious at a glance). Every text disclosure (folded
   histories, editors, Request sections, Presentation versions) ends its row with a quiet "Show" or "Hide" and the
   platform chevron, at the right: down when closed, turned up when open. Both are drawn here, so no summary needs extra
   markup; the word's alternative text is empty (`content: "Show" / ""`), so it is not read out: the summary's own
   expanded state is. Menus, button-like summaries (Record the club's answer, Propose for...), compact filters and
   pickers that are part of a form control (.control-disclosure) and the inline ID reveal keep their own affordance
   (docs/simplification/COLLAPSIBLE_SECTIONS.md). The summary stays the native control: keyboard, focus ring and
   screen-reader state are unchanged. A summary showing "Still loading…" (data-still-working) lends it its ::after. */
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary::-webkit-details-marker { display: none; }
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary::before {
  content: "Show";
  content: "Show" / "";
  color: var(--muted, #626d75);
  font-size: var(--disclosure-word, 13px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section)[open] > summary::before { content: "Hide"; content: "Hide" / ""; }
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary:not([data-still-working])::after {
  content: "";
  width: var(--disclosure-chevron, 14px);
  height: var(--disclosure-chevron, 14px);
  background-color: var(--muted, #626d75);
  -webkit-mask: var(--control-chevron) center / var(--disclosure-chevron, 14px) var(--disclosure-chevron, 14px) no-repeat;
  mask: var(--control-chevron) center / var(--disclosure-chevron, 14px) var(--disclosure-chevron, 14px) no-repeat;
  transition: transform .16s ease;
}
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section)[open] > summary:not([data-still-working])::after { transform: rotate(180deg); }
:is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 2px; }
@media (hover: hover) {
  :is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary:hover::before { color: var(--ink, #171e25); }
  :is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary:not([data-still-working]):hover::after { background-color: var(--ink, #171e25); }
}
@media (prefers-reduced-motion: reduce) {
  :is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary::after { transition: none; }
}
@media (forced-colors: active) {
  :is(details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)), details.disclosure-section) > summary:not([data-still-working])::after { forced-color-adjust: none; background-color: CanvasText; }
}
@media (forced-colors: active) and (max-width: 760px) {
  :is(.directory-refinement, .review-refinement, .people-extra-filters).control-disclosure > summary { display: list-item; }
}
/* Placement in the older disclosures: the word and chevron sit at the row's right edge, vertically centred, out of the
   summary's own layout (a title and date, a report's meta, a plain line all keep theirs); the summary keeps their room
   on its right so its text never runs under them. Request rows that set their own padding restate it (requests.css). */
details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)) > summary {
  position: relative;
  padding-right: var(--disclosure-room, 62px);
}
details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)) > summary::before {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
}
details:not(:is(.control-disclosure, .request-menu, .task-more, .staff-access-editor, .presentation-answer-panel, .propose-for, .identity-id, .disclosure-section, .request-menu details)) > summary:not([data-still-working])::after {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -7px;
}
/* Folded sections (continuity.js elementoDisclosure): a history that grows folds behind its own heading. The row is the
   heading, its count and, while closed, the newest entry on a quiet second line; Show or Hide and the chevron stay on
   the heading's line, a little larger. The Presentation versions' look (a hairline above, a bold 15 px row). */
.disclosure-section { min-width: 0; border-top: 1px solid var(--line, #deded8); }
.disclosure-section > summary {
  --disclosure-word: 14px;
  --disclosure-chevron: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 11px 0;
  border-radius: 6px;
  color: var(--ink, #171e25);
}
.disclosure-section > summary::before { order: 1; flex: none; }
.disclosure-section > summary::after { order: 2; flex: none; margin-left: -6px; }
/* The heading takes what the row leaves (basis 0), so Show/Hide and the chevron always stay on its line; a long title
   wraps inside it. */
.disclosure-heading { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.disclosure-section .disclosure-title { margin: 0; color: inherit; font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; text-transform: none; overflow-wrap: anywhere; }
.disclosure-count { flex: none; color: var(--muted, #626d75); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
/* The latest entry wraps rather than being cut: the platform never truncates text (responsive walk). */
.disclosure-latest { order: 3; flex: 1 0 100%; min-width: 0; color: var(--muted, #626d75); font-size: 12.5px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.disclosure-section[open] > summary .disclosure-latest { display: none; }
@media (hover: hover) {
  .disclosure-section > summary:hover .disclosure-title { color: var(--blue-deep, #214968); }
}
.disclosure-body { min-width: 0; padding: 2px 0 14px; }
.disclosure-body > .list-more { margin-top: 6px; }

/* Datalist is still the browser suggestion surface. Hide only its competing
   closed-state WebKit indicator; its native pointer target remains operable. */
input[list]::-webkit-calendar-picker-indicator { opacity: 0; }
@media (forced-colors: active) {
  input[list]::-webkit-calendar-picker-indicator { opacity: 1; }
}

/* Catalogue discovery uses the same control geometry and chevron as selects. */
.player-picker { min-width: 0; width: 100%; }
input[role="combobox"] {
  width: 100%;
  padding-inline-end: 38px;
  background-image: var(--control-chevron);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 12px center;
}
.player-picker-results {
  width: 100%; min-width: 0; box-sizing: border-box;
  margin-top: 8px; padding: 6px;
  border: 1px solid var(--control-border); border-radius: 12px;
  background: var(--control-surface); color: var(--ink, #17212a);
}
.player-picker-results[hidden] { display: none; }
.player-picker-results [role="listbox"] { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
/* The row (Player search v2, "Apple-like"): the name, the facts line, the club when known, at most one note; the whole
   row is the action, with one quiet trailing + for a person who can be added. The same lines in the search palette. */
.player-picker-option, .player-picker-more {
  display: block; width: 100%; box-sizing: border-box;
  min-height: var(--control-height); padding: 9px 12px;
  border: 0; border-radius: 8px; background: transparent; color: inherit;
  font: inherit; font-size: 14px; line-height: 1.4; text-align: left;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.player-picker-row { display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: 8px; }
.player-picker-row .player-picker-option { flex: 1 1 auto; min-width: 0; }
.player-picker-name, .player-picker-option strong { display: block; color: var(--ink, #17212a); font-size: 14px; font-weight: 600; }
.player-picker-context, .player-picker-note { display: block; margin-top: 2px; }
/* The facts line keeps its two spaces around each bullet, and still wraps on a phone. */
.player-picker-context { white-space: pre-wrap; }
.player-picker-context, .player-picker-status { font-size: 12.5px; color: #596773; }
.player-picker-club { color: #6b7680; }
.player-picker-context.is-empty { color: #7b858d; }
/* A note is quiet unless it is a warning: only "may already be on the platform" asks for care (amber). */
.player-picker-note { font-size: 12.5px; color: #6b7680; }
.player-picker-note.is-warning { color: var(--control-note); }
/* A line of facts is its parts side by side, each carrying the separator before it. The separator hangs in the margin, so
   where a part starts a wrapped line the line's own edge clips it: no line starts or ends on "•" or "·" (lineNode). */
.player-picker-facts { --sep-w: 1.7em; }
.player-picker-club { --sep-w: 1.3em; }
.player-picker-facts, .player-picker-club { overflow: hidden; }
.player-picker-parts { display: block; margin-inline-start: calc(-1 * var(--sep-w)); }
.player-picker-part { display: inline-block; max-width: 100%; box-sizing: border-box; vertical-align: top; white-space: normal; }
.player-picker-part:first-child { padding-inline-start: var(--sep-w); }
.player-picker-sep { display: inline-block; width: var(--sep-w); text-align: center; white-space: pre; }
/* Hover and the highlighted row share one quiet wash; the + sits inside it. */
.player-picker-row:has(> .player-picker-option[aria-selected="true"]), .player-picker-row:hover { background: var(--control-wash); }
.player-picker-option[aria-selected="true"], .player-picker-option:hover { background: var(--control-wash); }
.player-picker-row .player-picker-option[aria-selected="true"], .player-picker-row .player-picker-option:hover { background: transparent; }
.player-picker-option[aria-disabled="true"] { cursor: default; }
.player-picker-option:focus-visible, .player-picker-more:focus-visible { outline: 2px solid var(--control-focus); outline-offset: -2px; }
/* The add button: a + and the word "Add", one quiet pill (its accessible name says whom it adds). */
.player-picker-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 32px; height: 32px;
  margin-inline-end: 6px; padding: 0 10px 0 6px; border: 0; border-radius: 999px; background: transparent;
  color: var(--control-focus); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
}
.player-picker-add:hover { background: rgb(36 72 102 / 10%); }
.player-picker-add:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 0; }
.player-picker-add:disabled { color: #9aa6af; cursor: default; background: transparent; }
.player-picker-more { color: var(--control-focus); font-size: 13px; font-weight: 500; text-align: center; }
.player-picker-more[hidden] { display: none; }
/* While the next page loads, the row is a quiet spinner. */
.player-picker-more[data-loading] { display: flex; align-items: center; justify-content: center; gap: 8px; color: #596773; cursor: default; opacity: 1; }
.player-picker-more[data-loading]::before {
  content: ""; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid #c8cdd1; border-top-color: var(--control-focus); animation: player-picker-spin .8s linear infinite;
}
@keyframes player-picker-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player-picker-more[data-loading]::before { animation-duration: 2.4s; } }
.player-picker-status { margin: 8px 12px; }
.player-picker-status[role="alert"] { color: var(--danger, #92483f); }
.player-picker-confirm { margin: 6px 4px; padding: 12px; border-radius: 10px; background: #fbf7ee; border: 1px solid #efe3c8; }
.player-picker-confirm[hidden] { display: none; }
.player-picker-confirm p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.player-picker-confirm button + button { margin-inline-start: 8px; }
/* Empty: the query said back (the status line), then one helpful line. Error: the message, then Try again. */
.player-picker-results[data-state="empty"] .player-picker-status { margin: 14px 12px 2px; color: var(--ink, #17212a); font-size: 14px; font-weight: 500; }
.player-picker-empty { margin: 0 12px 14px; color: #596773; font-size: 13px; line-height: 1.45; }
.player-picker-empty[hidden], .player-picker-retry[hidden] { display: none; }
.player-picker-empty-link { color: var(--control-focus); font-weight: 500; text-decoration: none; }
.player-picker-empty-link:hover { text-decoration: underline; }
.player-picker-empty-link:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 2px; }
.player-picker-results[data-state="error"] .player-picker-status { margin: 14px 12px 8px; font-size: 13.5px; }
.player-picker-retry { margin: 0 12px 12px; }
@media (pointer: coarse), (max-width: 760px) {
  .player-picker-option, .player-picker-more { min-height: 44px; font-size: 16px; }
  .player-picker-more { font-size: 14px; }
  .player-picker-name, .player-picker-option strong { font-size: 16px; }
  .player-picker-context, .player-picker-note { font-size: 13.5px; }
  .player-picker-add { min-width: 44px; height: 44px; margin-inline-end: 2px; font-size: 14px; }
  .player-picker-retry { min-height: 44px; }
  .player-picker-profile { min-height: 44px; display: inline-flex; align-items: center; }
  .player-picker-results [role="listbox"] { max-height: 45vh; max-height: 45dvh; }
}
@media (forced-colors: active) {
  input[role="combobox"] { background-image: none; }
  .player-picker-option[aria-selected="true"] { outline: 2px solid Highlight; }
  .player-picker-add { border: 1px solid ButtonText; }
}
/* Existing Request results container must not clip the shared status/load-more. */
.player-results.player-picker-results { max-height: none; overflow: visible; }
#pending-player-search { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  #portfolio-discovery, #pending-player-search { grid-template-columns: minmax(0, 1fr); }
}

/* Native checkboxes and radios keep their semantics but use the product colour. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--blue-deep, #234b73); }

/* A search hint alone ("Enter at least two characters…") reads as a line under
   the field, not as a second empty box; results and confirmations keep the panel. */
.player-picker-results:not(:has([role="option"], .player-picker-confirm:not([hidden]))) { padding: 0; border-color: transparent; background: transparent; }
.player-picker-results:not(:has([role="option"], .player-picker-confirm:not([hidden]))) .player-picker-status { margin: 0 2px; }
.player-picker-results:not(.is-popover):not(:has([role="option"])) .player-picker-empty { margin: 2px 2px 0; }
.player-picker-results:not(.is-popover):not(:has([role="option"])) .player-picker-retry { margin: 8px 2px 0; }

/* Dates and times (owner, 9 Oct): day first and 24-hour, always. A native
   date or date-time field follows the device locale (month first on a US
   phone), so every date and date-time field is one day-first text control
   (dates.js): DD/MM/YYYY or DD/MM/YYYY HH:MM on the numeric keyboard, the
   separators inserted as the digits are typed, the format hint for screen
   readers, and a plain message under the field when the value is not a real
   date. It keeps the shared control geometry; there is no calendar mark,
   because there is no calendar to open. */
input.day-first-input {
  font-variant-numeric: tabular-nums;
  text-align: start;
}
input.day-first-input::placeholder { color: var(--control-disabled-ink); opacity: .75; }
input.day-first-input[aria-invalid="true"] { border-color: var(--danger, #92483f); }
input.day-first-input[aria-invalid="true"]:focus-visible { outline-color: var(--danger, #92483f); }
/* A field the server refused (422), named in the form's message. */
[data-server-invalid][aria-invalid="true"] { border-color: var(--danger, #92483f); }
[data-server-invalid][aria-invalid="true"]:focus-visible { outline-color: var(--danger, #92483f); }
.day-first-format {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.day-first-error {
  display: block;
  margin-top: 6px;
  color: var(--danger, #92483f);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
}
.day-first-error[hidden] { display: none; }

/* Held outreach card: a Request whose transfer window closed while it waited. */
.outreach-window-note { font-weight: 600; }
.outreach-window-choice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.outreach-window-choice select { max-width: 100%; }
.outreach-window-choice select[aria-invalid="true"] { border-color: var(--danger, #92483f); }
.outreach-window-choice select[aria-invalid="true"]:focus-visible { outline-color: var(--danger, #92483f); }
.outreach-request-terms { margin: 2px 0 0; overflow-wrap: anywhere; }
.outreach-notes { margin: 4px 0 10px; }
/* A club change's card: "Club's notes", "The club's words" and the Note field each stay clear of the
   summary's 4 px focus ring (overlap guard, 20 Oct). */
[data-outreach-followup] > details { margin: 10px 0; }
/* Clear of the summary's 4 px focus ring once open (overlap guard). */
.outreach-notes[open] > summary { margin-bottom: 6px; }
.outreach-note-text { margin: 0 0 4px; white-space: pre-line; overflow-wrap: anywhere; }
/* Rows of an earlier text stay, dimmed and inert, until the new answer lands (TAC). */
.player-picker-results [role="listbox"][data-stale] { opacity: .5; transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { .player-picker-results [role="listbox"][data-stale] { transition: none; } }

/* Players page search (directory mode of the Player picker): a live dropdown under the field. The rows group the
   Players on the platform before the rest of the register; the list scrolls inside the dropdown, which never grows
   past the room above the keyboard (--picker-room is set from the visual viewport). */
.player-picker.is-directory { position: relative; }
.player-picker.is-directory input[role="combobox"] { background-image: none; padding-inline-end: var(--control-padding, 12px); }
.player-picker-results.is-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: min(max(100%, min(540px, calc(100vw - 48px))), var(--picker-inline-room, 100vw)); max-height: var(--picker-room, 60vh); max-height: var(--picker-room, 60dvh);
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 14px 36px rgb(23 33 42 / 16%), 0 2px 6px rgb(23 33 42 / 8%);
}
.player-picker-results.is-popover[hidden] { display: none; }
.player-picker-results.is-popover [role="listbox"] { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.player-picker-results.is-popover [role="listbox"][hidden] { display: none; }
.player-picker-group-label { padding: 10px 12px 4px; color: #596773; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.player-picker-group + .player-picker-group { margin-top: 6px; }
.player-picker-results.is-popover [role="listbox"] > .player-picker-more { margin-top: 2px; }
.player-picker-results.is-popover [role="listbox"] > .player-picker-more[aria-selected="true"] { background: var(--control-wash); }
/* A count the list already shows is for assistive technology only; searching, empty and error lines stay visible. */
.player-picker-results.is-popover .player-picker-status { flex: 0 0 auto; margin: 6px 12px; }
.player-picker-results.is-popover .player-picker-status:empty { display: none; }
.player-picker-status.is-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.player-picker-results.is-popover .player-picker-status.is-quiet { margin: -1px; }
.player-picker-results.is-popover .player-picker-retry { align-self: flex-start; }
.player-picker-catalogue { flex: 0 0 auto; margin: 4px 0 0; padding: 8px 12px; border-top: 1px solid #e8ebed; color: #596773; font-size: 12.5px; }
.player-picker-catalogue[hidden] { display: none; }
/* With no row above it (the register unavailable and nothing on the platform), the note has no line to divide from. */
.player-picker-results:not(:has(.player-picker-option)) .player-picker-catalogue { margin-top: 0; border-top: 0; }
.player-picker-catalogue .text-button { margin-inline-start: 2px; font-size: 12.5px; }

/* Club picker (app/static/club-picker.js): the list under a club field, on the Player picker's rows. Clubs on the platform
   first; the clubs of the football register that are not on the platform yet below them, each with its own add; and,
   where nothing matches anywhere, the way on. An inline block, not a popover: the field sits inside cards and dialogs. */
.club-picker-results { margin-top: 6px; }
.club-picker-results [role="listbox"] { max-height: 320px; }
.club-picker-row { flex-wrap: wrap; }
.club-picker-row .player-picker-option { flex: 1 1 12em; }
.club-picker-text { display: block; min-width: 0; }
.club-picker-line { margin-top: 1px; }
.club-picker-group + .club-picker-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e8ebed; }
.club-picker-group-label { padding: 6px 12px 2px; color: #596773; font-size: 12.5px; font-weight: 500; }
.club-picker-add { margin-inline-start: 12px; }
.club-picker-row[aria-busy="true"] .player-picker-option { opacity: .6; }
/* A register team that cannot be added here: its reason is the line to read, and it is not a choice. */
.club-picker-held .player-picker-option[aria-disabled="true"] { cursor: default; }
.club-picker-held .player-picker-option[aria-disabled="true"] .player-picker-name { color: #3d4a55; }
.club-picker-note, .club-picker-error { margin: 0; padding: 6px 12px; font-size: 13px; line-height: 1.45; color: #596773; }
.club-picker-note[hidden], .club-picker-error[hidden] { display: none; }
.club-picker-error { color: var(--danger, #92483f); }
.club-picker-results:not(:has([role="option"], .club-picker-new)) { padding: 0; border-color: transparent; background: transparent; }
.club-picker-results:not(:has([role="option"], .club-picker-new)) .club-picker-note, .club-picker-results:not(:has([role="option"], .club-picker-new)) .club-picker-error { padding-inline: 2px; }
.club-picker-new-row .player-picker-name { color: var(--control-focus); font-weight: 500; }
.club-picker-new { display: grid; gap: 6px; padding: 10px 12px 6px; }
.club-picker-new-title { margin: 0 0 2px; color: var(--ink, #17212a); font-size: 14px; font-weight: 600; }
.club-picker-new label { margin: 4px 0 0; color: #3d4a55; font-size: 13px; font-weight: 500; }
.club-picker-new input, .club-picker-new select { width: 100%; box-sizing: border-box; }
.club-picker-new .field-hint { margin: 2px 0 0; }
.club-picker-new-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (pointer: coarse), (max-width: 760px) {
  .club-picker-row .player-picker-option { flex-basis: 10em; }
  .club-picker-add { margin-inline-start: 12px; }
  .club-picker-new-actions .compact-button, .club-picker-retry { min-height: 44px; }
  .club-picker-group-label { font-size: 13px; }
  .club-picker-note, .club-picker-error { font-size: 13.5px; }
}
/* The add sheet replaces the list: who the person is, where they come from, any note, then the two choices. */
.player-picker-confirm.is-action { margin: 0; padding: 14px 12px 12px; overflow-y: auto; overscroll-behavior: contain; background: transparent; border: 0; border-radius: 8px; }
/* (Scoped to the sheet: `.player-picker-confirm p` would otherwise set the title to the body size.) */
.player-picker-confirm.is-action p { margin: 0; }
.player-picker-confirm.is-action .player-picker-confirm-title { margin-bottom: 2px; color: var(--ink, #17212a); font-weight: 600; font-size: 16px; line-height: 1.35; }
.player-picker-confirm.is-action .player-picker-context { margin-top: 2px; font-size: 13px; }
.player-picker-confirm.is-action .player-picker-source { margin-top: 10px; color: #596773; font-size: 13px; line-height: 1.5; }
.player-picker-confirm.is-action .player-picker-profile-line { margin-top: 2px; font-size: 13px; line-height: 1.5; }
.player-picker-profile { color: var(--control-focus); font-weight: 500; text-decoration: none; white-space: nowrap; }
.player-picker-profile:hover { text-decoration: underline; }
.player-picker-profile:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 2px; border-radius: 2px; }
.player-picker-confirm.is-action .player-picker-lead { margin-top: 10px; color: #3d4a55; font-size: 13px; line-height: 1.5; }
.player-picker-confirm.is-action .player-picker-note { margin-top: 12px; font-size: 13px; line-height: 1.45; }
.player-picker-confirm.is-action .player-picker-note.is-warning { padding: 8px 10px; border-radius: 8px; background: #fbf5e8; }
.player-picker-existing { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.6; }
.player-picker-existing a { color: var(--control-focus); font-weight: 500; text-decoration: none; }
.player-picker-existing a:hover { text-decoration: underline; }
.player-picker-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.player-picker-confirm-actions button + button { margin-inline-start: 0; }
@media (max-width: 760px) {
  .player-picker-results.is-popover { max-height: var(--picker-room, 45dvh); }
  .player-picker-group-label { padding-inline: 12px; }
  .player-picker-confirm.is-action .player-picker-confirm-title { font-size: 17px; }
  .player-picker-confirm.is-action .player-picker-context, .player-picker-confirm.is-action .player-picker-source, .player-picker-confirm.is-action .player-picker-profile-line { font-size: 14px; }
  /* Both choices share the line when they fit; a long primary ("Add as a separate Player") takes its own full line
     above Cancel rather than wrapping inside a half-width button. */
  .player-picker-confirm-actions button { flex: 1 1 auto; }
}
/* Touch targets (a tablet as well as a phone): 44px for every control of the sheet and the dropdown's notes. */
@media (pointer: coarse), (max-width: 760px) {
  .player-picker-confirm-actions button { min-height: 44px; }
  /* The link keeps its 44px target; its box reaches up into the line above so the two read as one block. */
  .player-picker-confirm.is-action .player-picker-profile-line { margin-top: -8px; }
  .player-picker-existing a, .player-picker-catalogue .text-button, .player-picker-empty-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .player-picker-results.is-popover:not([hidden]) { animation: player-picker-in .12s ease-out; }
  @keyframes player-picker-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) {
  .player-picker-results.is-popover { border: 1px solid CanvasText; }
}
/* The dropdown is a panel even while it holds only a line ("Searching players…"), unlike the inline hint box above. */
.player-picker-results.is-popover:not(:has([role="option"], .player-picker-confirm:not([hidden]))) { padding: 4px; border-color: var(--control-border); background: var(--control-surface); }
.player-picker-results.is-popover:not(:has([role="option"], .player-picker-confirm:not([hidden]))) .player-picker-status { margin: 6px 12px; }
.player-picker-results.is-popover:not(:has([role="option"], .player-picker-confirm:not([hidden]))) .player-picker-status.is-quiet { margin: -1px; }
/* Held outreach card: "Do not apply this change" sits between the club's words and the release form; kept clear
   of both by more than its 4 px focus ring (overlap guard, 20 Oct). */
.relationship-note > [data-outreach-change-keep] { margin: 8px 0; }

/* A Wyscout team name's suggested club: the guess and why, with the one press that accepts it. */
.wyscout-suggestion { margin: 12px 0 4px; padding: 12px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--control-wash); }
.wyscout-suggestion-club { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; overflow-wrap: anywhere; }
.wyscout-suggestion-label { color: #596773; font-size: 12.5px; font-weight: 500; }
.wyscout-suggestion-club strong { color: var(--ink, #17212a); font-size: 15px; font-weight: 600; }
.wyscout-suggestion-club a { font-size: 13px; }
.wyscout-suggestion .field-hint { margin: 4px 0 0; }
.wyscout-suggestion .form-actions { margin-top: 10px; }
.wyscout-suggestion .form-error { margin-top: 8px; }
.wyscout-candidates { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.wyscout-candidates li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.wyscout-candidate-name { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
@media (max-width: 760px) {
  .wyscout-candidates li .compact-button { width: 100%; min-height: 44px; }
  .wyscout-suggestion .form-actions .primary-button, .wyscout-suggestion .form-actions .secondary-button { width: 100%; min-height: 44px; }
  .wyscout-suggestion-club a { display: inline-flex; align-items: center; min-height: 44px; }
}