/* ============================================================================
   tl-forms.css -- TotaLand's form and panel components for redesigned pages.

   The Site Activity pages (site-activity-*.css) set the look: tokens only, IBM Plex, white cards on the white
   page, one brand hue for selection and the primary action, status hues only with words beside them. Those
   rules are page-scoped (.tl-sa, .tl-cu); this file is the same language made SHARED, for forms, so the next
   redesigned page does not start from nothing. First used by the redesigned Create User page (2026-09-29), then
   Edit User and the invitation pages; their shared behaviour is js/RADPI/TlUserForm.js.

   HOW TO USE: wrap the page (or one region of it) in class="tl-ui" and build from the tl-ui-* classes below.
   Nothing outside a .tl-ui element is touched, so loading this file site-wide moves no existing page.

   WHY EVERYTHING IS SCOPED UNDER .tl-ui: legacy-theme.css and default.css style bare elements site-wide --
   input { padding: 2px; background: #f9f9f9 } with a two-tone border, fieldset { border: 1px solid #ccc },
   fieldset label { padding-left: 8px }, select { appearance: base-select; flex: 1 }, h2-h4 as grey bars,
   a:link colours -- so every rule here carries the .tl-ui root for the specificity to win without !important.

   Colour: -ink values for text and strokes, -wash/-fill values for grounds (tokens.css). Text meets WCAG AA at the
   sizes used: --tl-text 16.4:1, --tl-text-muted 6.39:1 on white; --tl-text-subtle (4.18:1) never carries words.
   Focus: 2px --tl-focus-ring on everything operable, never removed. Motion: transitions only on colour and
   border, none under prefers-reduced-motion. Sizes in px/rem as tokens.css prescribes (body is 73%, so em would
   compound). Inputs are 16px on phones so iOS does not zoom.
   ========================================================================= */

/* ---- root and resets -------------------------------------------------------------------------------------- */

.tl-ui {
    color: var(--tl-text);
    font-family: var(--tl-font);
    font-size: var(--tl-text-md);
    line-height: var(--tl-leading-normal);
}
.tl-ui *, .tl-ui *::before, .tl-ui *::after { box-sizing: border-box; }
.tl-ui [hidden] { display: none !important; }

.tl-ui h2, .tl-ui h3, .tl-ui h4 {
    margin: 0; padding: 0; border: 0; background: none; color: var(--tl-text);
    font-family: var(--tl-font); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-tight);
    text-wrap: balance;
}
.tl-ui h2 { font-size: var(--tl-text-2xl); }
.tl-ui h3 { font-size: var(--tl-text-lg); }
.tl-ui h4 { font-size: var(--tl-text-md); }
.tl-ui [tabindex="-1"]:focus { outline: none; }
.tl-ui [tabindex="-1"]:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-ui p { margin: 0; font-size: inherit; line-height: inherit; }
.tl-ui ul.tl-ui-plain, .tl-ui ol.tl-ui-plain { margin: 0; padding: 0; list-style: none; }
.tl-ui fieldset { min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
.tl-ui legend { float: none; width: auto; margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.tl-ui label { padding: 0; margin: 0; color: inherit; font-size: inherit; vertical-align: baseline; }
.tl-ui a.tl-ui-link:link, .tl-ui a.tl-ui-link:visited { color: var(--tl-brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.tl-ui a.tl-ui-link:hover { color: var(--tl-brand-ink); text-decoration-thickness: 2px; }

.tl-ui .tl-ui-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.tl-ui .tl-ui-num { font-family: var(--tl-font-mono); font-variant-numeric: tabular-nums; }

/* Small uppercase label above a group or a figure. */
.tl-ui .tl-ui-microlabel {
    display: block; margin: 0 0 var(--tl-space-2); color: var(--tl-text-muted);
    font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); letter-spacing: var(--tl-tracking-label);
    line-height: var(--tl-leading-tight); text-transform: uppercase;
}

/* ---- cards and sections ---------------------------------------------------------------------------------- */

.tl-ui .tl-ui-card {
    margin: 0 0 var(--tl-space-5); background: var(--tl-surface);
    border: 1px solid var(--tl-border); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-sm);
}
.tl-ui .tl-ui-card-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-space-2) var(--tl-space-4);
    padding: var(--tl-space-4) var(--tl-space-5); border-bottom: 1px solid var(--tl-border);
    background: var(--tl-surface-raised); border-radius: var(--tl-radius) var(--tl-radius) 0 0;
}
.tl-ui .tl-ui-card-title { font-size: var(--tl-text-lg); }
.tl-ui .tl-ui-card-sub { margin-top: var(--tl-space-1); color: var(--tl-text-muted); font-size: var(--tl-text-sm); }
.tl-ui .tl-ui-card-body { padding: var(--tl-space-5); }

/* A group of fields inside a card: a heading and a short line of what it is for, then the grid. */
.tl-ui .tl-ui-section { padding: var(--tl-space-5); }
.tl-ui .tl-ui-section + .tl-ui-section { border-top: 1px solid var(--tl-border); }
.tl-ui .tl-ui-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tl-space-2) var(--tl-space-3);
    margin: 0 0 var(--tl-space-4); }
.tl-ui .tl-ui-section-title { display: inline-flex; align-items: center; gap: var(--tl-space-3); font-size: var(--tl-text-md);
    font-weight: var(--tl-weight-semibold); }
.tl-ui .tl-ui-section-title .tl-ui-icon { color: var(--tl-brand-ink); }
.tl-ui .tl-ui-section-desc { flex: 1 1 100%; color: var(--tl-text-muted); font-size: var(--tl-text-sm); }

/* ---- field grid ------------------------------------------------------------------------------------------- */

/* One column on a phone; from 640px the grid packs fields of about 15rem side by side. -2 and -3 fix the count. */
.tl-ui .tl-ui-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tl-space-5) var(--tl-space-5); }
@media (min-width: 40rem) {
    .tl-ui .tl-ui-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
    .tl-ui .tl-ui-grid.tl-ui-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-ui .tl-ui-grid.tl-ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tl-ui .tl-ui-span-2 { grid-column: span 2; }
}
.tl-ui .tl-ui-span-all { grid-column: 1 / -1; }

/* ---- a field: label, control, hint, error ------------------------------------------------------------------ */

.tl-ui .tl-ui-field { display: grid; align-content: start; gap: var(--tl-space-2); min-width: 0; }
.tl-ui .tl-ui-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tl-space-2);
    color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-tight); }
.tl-ui .tl-ui-req { color: var(--tl-status-danger-ink); font-weight: var(--tl-weight-bold); }
.tl-ui .tl-ui-opt { color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-normal); }
.tl-ui .tl-ui-hint { color: var(--tl-text-muted); font-size: var(--tl-text-sm); line-height: var(--tl-leading-normal); }
.tl-ui .tl-ui-error { display: flex; align-items: flex-start; gap: var(--tl-space-2); color: var(--tl-status-danger-ink);
    font-size: var(--tl-text-sm); font-weight: var(--tl-weight-semibold); line-height: var(--tl-leading-normal); }
.tl-ui .tl-ui-error .tl-ui-icon { width: 14px; height: 14px; margin-top: 2px; }
.tl-ui .tl-ui-readonly { display: flex; align-items: center; min-height: 2.25rem; padding: .4rem .65rem;
    background: var(--tl-surface-sunken); border: 1px dashed var(--tl-border-strong); border-radius: var(--tl-radius);
    color: var(--tl-text); font-weight: var(--tl-weight-medium); overflow-wrap: anywhere; }

/* Text boxes and selects: one height (36px), one border, the focus ring. The legacy gradient, two-tone border,
   inset shadow and glow are all cleared. */
.tl-ui input.tl-ui-input,
.tl-ui select.tl-ui-select,
.tl-ui textarea.tl-ui-input {
    display: block; width: 100%; min-width: 0; height: 2.25rem; margin: 0; padding: .4rem .65rem;
    background: var(--tl-surface); background-image: none;
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text); font: inherit; font-size: var(--tl-text-md); line-height: 1.3; vertical-align: middle;
    transition: border-color .15s ease, background-color .15s ease;
}
.tl-ui textarea.tl-ui-input { height: auto; min-height: 5rem; resize: vertical; }
.tl-ui select.tl-ui-select { appearance: auto; flex: none; padding-right: .4rem; cursor: pointer; }
.tl-ui input.tl-ui-input::placeholder { color: var(--tl-text-muted); opacity: 1; }
.tl-ui input.tl-ui-input:hover, .tl-ui select.tl-ui-select:hover { border-color: var(--tl-slate); }
.tl-ui input.tl-ui-input:focus, .tl-ui select.tl-ui-select:focus, .tl-ui textarea.tl-ui-input:focus {
    border-color: var(--tl-brand); box-shadow: none; outline: 2px solid var(--tl-focus-ring); outline-offset: 1px;
}
.tl-ui input.tl-ui-input[readonly] { background: var(--tl-surface-sunken); color: var(--tl-text-muted); cursor: default; }
/* A disabled box (a value set once, drawn but not posted): the sunken fill and muted text, and a pointer that says no. */
.tl-ui input.tl-ui-input:disabled, .tl-ui select.tl-ui-select:disabled, .tl-ui textarea.tl-ui-input:disabled {
    background: var(--tl-surface-sunken); border-color: var(--tl-border); color: var(--tl-text-muted); cursor: not-allowed; }
.tl-ui input.tl-ui-input[aria-invalid="true"], .tl-ui select.tl-ui-select[aria-invalid="true"] {
    border-color: var(--tl-status-danger); background: var(--tl-status-danger-wash);
}
.tl-ui .tl-ui-input.tl-ui-short { max-width: 10rem; }
.tl-ui .tl-ui-input.tl-ui-center { text-align: center; }
@media (max-width: 39.99rem) {
    .tl-ui input.tl-ui-input, .tl-ui select.tl-ui-select, .tl-ui textarea.tl-ui-input { font-size: var(--tl-text-lg); }
}

/* Two controls read as one (a type and its value): side by side, then stacked on a phone. */
.tl-ui .tl-ui-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tl-space-3); }
@media (min-width: 40rem) { .tl-ui .tl-ui-pair { grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr); } }

/* ---- checkboxes and the toggle row ------------------------------------------------------------------------ */

.tl-ui .tl-ui-check { display: inline-flex; align-items: flex-start; gap: var(--tl-space-3); cursor: pointer;
    color: var(--tl-text); font-size: var(--tl-text-base); line-height: var(--tl-leading-normal); }
.tl-ui .tl-ui-check input[type="checkbox"], .tl-ui .tl-ui-check input[type="radio"] {
    flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--tl-brand); cursor: pointer; box-shadow: none;
}
.tl-ui .tl-ui-check input:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }

/* A decision that opens more of the form: the whole row is the label, with a line of what ticking it means. */
.tl-ui .tl-ui-toggle { display: flex; align-items: flex-start; gap: var(--tl-space-3); padding: var(--tl-space-4);
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease; }
.tl-ui .tl-ui-toggle:hover { border-color: var(--tl-border-strong); background: var(--tl-surface-hover); }
.tl-ui .tl-ui-toggle:has(input:checked) { border-color: var(--tl-brand); background: var(--tl-brand-wash); }
.tl-ui .tl-ui-toggle:has(input:focus-visible) { outline: 2px solid var(--tl-focus-ring); outline-offset: 1px; }
.tl-ui .tl-ui-toggle input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tl-brand); box-shadow: none; }
.tl-ui .tl-ui-toggle input:focus-visible { outline: none; }
.tl-ui .tl-ui-toggle-text { display: grid; gap: var(--tl-space-1); }
.tl-ui .tl-ui-toggle-title { font-weight: var(--tl-weight-semibold); }
.tl-ui .tl-ui-toggle-desc { color: var(--tl-text-muted); font-size: var(--tl-text-sm); }

/* ---- choice cards: real radios drawn as cards --------------------------------------------------------------- */

/* The radio stays in the tab order (visually hidden, not display:none); checked is marked three ways -- the brand
   border, the wash and the check badge -- never by colour alone. */
.tl-ui .tl-ui-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tl-space-4); }
@media (min-width: 48rem) { .tl-ui .tl-ui-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tl-ui .tl-ui-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.tl-ui .tl-ui-choice > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.tl-ui .tl-ui-choice-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tl-space-2) var(--tl-space-4);
    height: 100%; padding: var(--tl-space-5); background: var(--tl-surface);
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-sm);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tl-ui .tl-ui-choice:hover .tl-ui-choice-card { border-color: var(--tl-brand); }
.tl-ui .tl-ui-choice > input:checked + .tl-ui-choice-card {
    border-color: var(--tl-brand); background: var(--tl-brand-wash); box-shadow: inset 0 0 0 1px var(--tl-brand);
}
.tl-ui .tl-ui-choice > input:focus-visible + .tl-ui-choice-card { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-ui .tl-ui-choice-mark {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: var(--tl-radius); background: var(--tl-surface-raised); color: var(--tl-slate-ink);
}
.tl-ui .tl-ui-choice-mark .tl-ui-icon { width: 20px; height: 20px; }
.tl-ui .tl-ui-choice > input:checked + .tl-ui-choice-card .tl-ui-choice-mark { background: var(--tl-brand); color: var(--tl-on-brand); }
.tl-ui .tl-ui-choice-title { align-self: center; font-size: var(--tl-text-md); font-weight: var(--tl-weight-semibold); }
.tl-ui .tl-ui-choice-desc { grid-column: 1 / -1; color: var(--tl-text-muted); font-size: var(--tl-text-sm); }
.tl-ui .tl-ui-choice-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--tl-space-2); }
.tl-ui .tl-ui-choice-check { position: absolute; top: var(--tl-space-4); right: var(--tl-space-4); display: none;
    width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--tl-brand); color: var(--tl-on-brand); }
.tl-ui .tl-ui-choice-check .tl-ui-icon { width: 12px; height: 12px; margin: 4px; stroke-width: 2.4; vertical-align: top; }
.tl-ui .tl-ui-choice > input:checked ~ .tl-ui-choice-check { display: block; }

/* ---- tags --------------------------------------------------------------------------------------------------- */

.tl-ui .tl-ui-tag {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 1.35rem; padding: .05rem .55rem;
    border-radius: 999px; background: var(--tl-surface-raised); box-shadow: inset 0 0 0 1px var(--tl-border);
    color: var(--tl-text); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); white-space: nowrap;
}
.tl-ui .tl-ui-tag-brand { background: var(--tl-brand-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-brand) 45%, transparent); }
.tl-ui .tl-ui-tag-success { background: var(--tl-status-success-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-status-success) 70%, transparent); }

/* ---- buttons ------------------------------------------------------------------------------------------------ */

.tl-ui .tl-ui-btn,
.tl-ui a.tl-ui-btn:link,
.tl-ui a.tl-ui-btn:visited {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 2.25rem; padding: .4rem .9rem; margin: 0;
    background: var(--tl-surface); background-image: none;
    border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); box-shadow: none;
    color: var(--tl-text); font: inherit; font-size: var(--tl-text-md); font-weight: var(--tl-weight-medium);
    line-height: 1.2; text-decoration: none; text-shadow: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tl-ui .tl-ui-btn:hover, .tl-ui a.tl-ui-btn:hover { background: var(--tl-surface-hover); border-color: var(--tl-brand); color: var(--tl-brand-ink); }
.tl-ui .tl-ui-btn:active { background: var(--tl-brand-wash); }
.tl-ui .tl-ui-btn:focus-visible, .tl-ui a.tl-ui-btn:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; }
.tl-ui .tl-ui-btn[disabled], .tl-ui .tl-ui-btn[aria-disabled="true"], .tl-ui .tl-ui-btn[aria-busy="true"] { opacity: .5; cursor: not-allowed; }
.tl-ui .tl-ui-btn-sm, .tl-ui a.tl-ui-btn-sm:link { min-height: 1.85rem; padding: .25rem .6rem; font-size: var(--tl-text-sm); }
/* The one filled button per form. Hover DARKENS: white on --tl-brand-hover is only 3.65:1. */
.tl-ui .tl-ui-btn.tl-ui-btn-primary, .tl-ui a.tl-ui-btn.tl-ui-btn-primary:link {
    min-height: 2.5rem; padding: .5rem 1.15rem; background: var(--tl-brand); border-color: var(--tl-brand);
    color: var(--tl-on-brand); font-weight: var(--tl-weight-semibold);
}
.tl-ui .tl-ui-btn.tl-ui-btn-primary:hover, .tl-ui a.tl-ui-btn.tl-ui-btn-primary:hover {
    background: var(--tl-entity-project-shade); border-color: var(--tl-entity-project-shade); color: var(--tl-on-brand);
}
.tl-ui .tl-ui-btn.tl-ui-btn-ghost { background: none; border-color: transparent; color: var(--tl-brand-ink); }
.tl-ui .tl-ui-btn.tl-ui-btn-ghost:hover { background: var(--tl-surface-hover); border-color: var(--tl-border); }
.tl-ui .tl-ui-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem;
    margin: 0; padding: 0; background: none; background-image: none; border: 1px solid transparent; border-radius: var(--tl-radius);
    box-shadow: none; color: var(--tl-text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tl-ui .tl-ui-iconbtn:hover { background: var(--tl-status-danger-wash); border-color: var(--tl-border); color: var(--tl-status-danger-ink); }
.tl-ui .tl-ui-iconbtn:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 1px; }
.tl-ui .tl-ui-btn .tl-ui-spinner { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: tl-ui-spin .8s linear infinite; }
.tl-ui .tl-ui-btn[aria-busy="true"] .tl-ui-spinner { display: inline-block; }
@keyframes tl-ui-spin { to { transform: rotate(360deg); } }

/* ---- the action bar: the form's buttons, held in view at the bottom of a long form --------------------------- */

.tl-ui .tl-ui-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tl-space-3) var(--tl-space-4);
    padding: var(--tl-space-4) var(--tl-space-5); border-top: 1px solid var(--tl-border);
    background: var(--tl-surface); border-radius: 0 0 var(--tl-radius) var(--tl-radius);
}
.tl-ui .tl-ui-actions-note { margin-right: auto; color: var(--tl-text-muted); font-size: var(--tl-text-sm); }
.tl-ui .tl-ui-actions.tl-ui-sticky { position: sticky; bottom: 0; z-index: var(--tl-z-sticky);
    box-shadow: 0 -6px 16px color-mix(in srgb, var(--tl-text) 7%, transparent); }

/* ---- alerts: the error summary, and notices ------------------------------------------------------------------ */

/* Words in --tl-text on the wash; the hue is the rail and the icon (an -ink on its own wash is only ~4:1). */
.tl-ui .tl-ui-alert {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tl-space-2) var(--tl-space-3);
    margin: 0 0 var(--tl-space-5); padding: var(--tl-space-4) var(--tl-space-5);
    background: var(--tl-status-info-wash); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: inset 4px 0 0 var(--tl-status-info);
}
.tl-ui .tl-ui-alert > .tl-ui-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--tl-status-info-ink); }
.tl-ui .tl-ui-alert[data-kind="danger"] { background: var(--tl-status-danger-wash); box-shadow: inset 4px 0 0 var(--tl-status-danger); }
.tl-ui .tl-ui-alert[data-kind="danger"] > .tl-ui-icon { color: var(--tl-status-danger-ink); }
.tl-ui .tl-ui-alert[data-kind="success"] { background: var(--tl-status-success-wash); box-shadow: inset 4px 0 0 var(--tl-status-success); }
.tl-ui .tl-ui-alert[data-kind="success"] > .tl-ui-icon { color: var(--tl-status-success-ink); }
.tl-ui .tl-ui-alert-title { font-size: var(--tl-text-md); font-weight: var(--tl-weight-semibold); }
.tl-ui .tl-ui-alert-body { grid-column: 2; color: var(--tl-text); font-size: var(--tl-text-base); }
.tl-ui .tl-ui-alert-body ul { margin: var(--tl-space-2) 0 0; padding: 0 0 0 1.1rem; }
.tl-ui .tl-ui-alert-body li + li { margin-top: var(--tl-space-2); }
.tl-ui .tl-ui-alert-body a:link, .tl-ui .tl-ui-alert-body a:visited { color: var(--tl-text); text-decoration: underline; text-underline-offset: 2px;
    font-weight: var(--tl-weight-semibold); }

/* ---- steps: an ordered process (numbered because the order IS the information) ----------------------------- */

.tl-ui ol.tl-ui-steps { counter-reset: tl-ui-step; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tl-space-4); }
.tl-ui ol.tl-ui-steps > li { counter-increment: tl-ui-step; position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0 var(--tl-space-3); }
.tl-ui ol.tl-ui-steps > li::before {
    content: counter(tl-ui-step); display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: 50%; background: var(--tl-brand-wash); color: var(--tl-brand-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-brand) 40%, transparent);
    font-family: var(--tl-font-mono); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium);   /* Plex Mono ships 400 and 500 only */
}
.tl-ui ol.tl-ui-steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(.875rem - 1px); top: 1.95rem; bottom: calc(-1 * var(--tl-space-4) + 2px);
    width: 2px; background: var(--tl-border); }
.tl-ui .tl-ui-step-title { font-weight: var(--tl-weight-semibold); line-height: 1.75rem; }
.tl-ui .tl-ui-step-desc { grid-column: 2; color: var(--tl-text-muted); font-size: var(--tl-text-sm); }

/* ---- disclosure ------------------------------------------------------------------------------------------- */

.tl-ui details.tl-ui-more > summary { display: inline-flex; align-items: center; gap: var(--tl-space-2); cursor: pointer;
    color: var(--tl-brand-ink); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium); list-style: none; }
.tl-ui details.tl-ui-more > summary::-webkit-details-marker { display: none; }
.tl-ui details.tl-ui-more > summary .tl-ui-icon { width: 14px; height: 14px; transition: transform .15s ease; }
.tl-ui details.tl-ui-more[open] > summary .tl-ui-icon { transform: rotate(90deg); }
.tl-ui details.tl-ui-more > summary:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 2px; border-radius: 2px; }
.tl-ui details.tl-ui-more > p, .tl-ui details.tl-ui-more > div { margin-top: var(--tl-space-2); color: var(--tl-text-muted); font-size: var(--tl-text-sm); }

/* ---- a read-only fact strip: label above value, side by side (last sign-in, company, status) ---------------- */

.tl-ui dl.tl-ui-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--tl-space-4) var(--tl-space-5);
    margin: 0; padding: 0; }
.tl-ui dl.tl-ui-facts > div { min-width: 0; }
.tl-ui dl.tl-ui-facts dt { margin: 0 0 var(--tl-space-1); color: var(--tl-text-muted); font-size: var(--tl-text-xs);
    font-weight: var(--tl-weight-semibold); letter-spacing: var(--tl-tracking-label); text-transform: uppercase; }
.tl-ui dl.tl-ui-facts dd { margin: 0; color: var(--tl-text); font-weight: var(--tl-weight-medium); overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums; }

/* ---- a date box: the jQuery UI date picker adds its calendar image after the input (ViewHelperActivation.js) ---- */

.tl-ui .tl-ui-date { display: flex; align-items: center; gap: var(--tl-space-3); }
.tl-ui .tl-ui-date .tl-ui-input { flex: 1 1 auto; }
.tl-ui .tl-ui-date .ui-datepicker-trigger { flex: none; width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* ViewHelperActivation.js paints an INLINE purple border on every date picker (RADPI's marker for its date shortcut
   keys, which still work) -- on load and again after every HTML AJAX call -- so only !important can keep the box's own
   border, hover, focus and error colours. The one exception to "no !important" in this file besides [hidden]. */
.tl-ui .tl-ui-date input.tl-ui-input.hasDatepicker { border: 1px solid var(--tl-border-strong) !important; }
.tl-ui .tl-ui-date input.tl-ui-input.hasDatepicker:hover { border-color: var(--tl-slate) !important; }
.tl-ui .tl-ui-date input.tl-ui-input.hasDatepicker:focus { border-color: var(--tl-brand) !important; }
.tl-ui .tl-ui-date input.tl-ui-input.hasDatepicker[aria-invalid="true"] { border-color: var(--tl-status-danger) !important; }

/* ---- the searching company picker (ViewHelperSelectCombobox: a text box, an arrow image, a hidden that posts) ---- */

.tl-ui .tl-ui-combo { min-width: 0; }
.tl-ui .tl-ui-combo .dropdown-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 32rem; white-space: normal; }
.tl-ui .tl-ui-combo .dropdown-input-text { padding-right: 2.25rem; }
.tl-ui .tl-ui-combo .dropdown-trigger {
    position: absolute; top: 50%; right: .35rem; left: auto; width: 1.6rem; height: 1.6rem; margin-top: -.8rem;
    border: 0; border-radius: var(--tl-radius); background: none;
}
.tl-ui .tl-ui-combo .dropdown-trigger:hover { background: var(--tl-surface-hover); }
/* The widget's sprite arrow is replaced by a chevron drawn in the text colour. */
.tl-ui .tl-ui-combo .dropdown-wrapper::after {
    content: ""; position: absolute; top: 50%; right: .75rem; width: .7rem; height: .7rem; margin-top: -.45rem; pointer-events: none;
    border-right: 1.6px solid var(--tl-text-muted); border-bottom: 1.6px solid var(--tl-text-muted); transform: rotate(45deg);
}

/* ---- chips: chosen values that can be removed (projects to add someone to) ---------------------------------- */

.tl-ui ul.tl-ui-chips { display: flex; flex-wrap: wrap; gap: var(--tl-space-3); margin: 0; padding: 0; list-style: none; }
.tl-ui ul.tl-ui-chips:empty { display: none; }
.tl-ui .tl-ui-chip {
    display: inline-flex; align-items: center; gap: var(--tl-space-2); max-width: 100%; min-height: 1.9rem;
    padding: .1rem .15rem .1rem .7rem; border-radius: 999px; background: var(--tl-brand-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-brand) 40%, transparent);
    color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium);
}
.tl-ui .tl-ui-chip-text { min-width: 0; overflow-wrap: anywhere; }
.tl-ui .tl-ui-chip-remove {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem; margin: 0; padding: 0;
    background: none; background-image: none; border: 0; border-radius: 50%; box-shadow: none; color: var(--tl-text-muted); cursor: pointer;
}
.tl-ui .tl-ui-chip-remove .tl-ui-icon { width: 12px; height: 12px; vertical-align: 0; }
.tl-ui .tl-ui-chip-remove:hover { background: var(--tl-status-danger-wash); color: var(--tl-status-danger-ink); }
.tl-ui .tl-ui-chip-remove:focus-visible { outline: 2px solid var(--tl-focus-ring); outline-offset: 1px; }

/* ---- phone numbers --------------------------------------------------------------------------------------------
   Fixed rows (cell, home, office -- a new account): label, number, "on contact list".
   Editable rows (an existing account): type, number, "on contact list", remove. */

.tl-ui .tl-ui-phones { display: grid; gap: var(--tl-space-3); margin: var(--tl-space-5) 0 0; }
.tl-ui .tl-ui-phones > .tl-ui-hint { max-width: 48rem; margin-bottom: var(--tl-space-2); }
.tl-ui .tl-ui-phone { display: grid; grid-template-columns: 4.5rem minmax(0, 15rem) auto; align-items: center; gap: var(--tl-space-2) var(--tl-space-4); }
.tl-ui .tl-ui-phone-label { color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); }
.tl-ui .tl-ui-phone > .tl-ui-error { grid-column: 2 / -1; }
.tl-ui .tl-ui-phone.tl-ui-phone-edit { grid-template-columns: minmax(7rem, 9rem) minmax(0, 15rem) auto auto; }
.tl-ui .tl-ui-phone-edit > .tl-ui-iconbtn { justify-self: start; }
@media (max-width: 39.99rem) {
    .tl-ui .tl-ui-phone { grid-template-columns: 4rem minmax(0, 1fr); }
    .tl-ui .tl-ui-phone > .tl-ui-check { grid-column: 2; }
    .tl-ui .tl-ui-phone.tl-ui-phone-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
    .tl-ui .tl-ui-phone-edit > .tl-ui-check { grid-column: 1 / 3; }
}

/* ---- progress through a short flow (numbered because the order IS the information) ------------------------- */

.tl-ui ol.tl-ui-progress { display: flex; flex-wrap: wrap; gap: var(--tl-space-3) var(--tl-space-6); margin: 0; padding: 0; list-style: none;
    counter-reset: tl-ui-progress; }
.tl-ui ol.tl-ui-progress > li { counter-increment: tl-ui-progress; display: inline-flex; align-items: center; gap: var(--tl-space-3);
    color: var(--tl-text-muted); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); }
.tl-ui ol.tl-ui-progress > li::before {
    content: counter(tl-ui-progress); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6rem; height: 1.6rem;
    border-radius: 50%; background: var(--tl-surface); box-shadow: inset 0 0 0 1.5px var(--tl-border-strong); color: var(--tl-text-muted);
    font-family: var(--tl-font-mono); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium);
}
.tl-ui ol.tl-ui-progress > li[aria-current="step"] { color: var(--tl-text); font-weight: var(--tl-weight-semibold); }
.tl-ui ol.tl-ui-progress > li[aria-current="step"]::before { background: var(--tl-brand); box-shadow: none; color: var(--tl-on-brand); }
.tl-ui ol.tl-ui-progress > li.is-done { color: var(--tl-text); }
.tl-ui ol.tl-ui-progress > li.is-done::before { content: "\2713"; background: var(--tl-status-success-wash);
    box-shadow: inset 0 0 0 1.5px var(--tl-status-success); color: var(--tl-status-success-ink); font-family: var(--tl-font); }

/* ---- empty state ------------------------------------------------------------------------------------------ */

.tl-ui .tl-ui-empty { display: grid; justify-items: center; gap: var(--tl-space-2); padding: var(--tl-space-6) var(--tl-space-5);
    color: var(--tl-text-muted); text-align: center; }
.tl-ui .tl-ui-empty .tl-ui-icon { width: 24px; height: 24px; color: var(--tl-text-subtle); }

@media (prefers-reduced-motion: reduce) {
    .tl-ui *, .tl-ui *::before, .tl-ui *::after { transition: none !important; animation-duration: .01ms !important; }
    .tl-ui .tl-ui-btn .tl-ui-spinner { animation: none !important; border-right-color: currentColor; opacity: .6; }   /* a still ring, not a flicker */
}

/* Forced colours: box-shadow rails and rings, and background washes, are not drawn -- state becomes real outlines. */
@media (forced-colors: active) {
    .tl-ui .tl-ui-choice > input:checked + .tl-ui-choice-card { outline: 3px solid Highlight; outline-offset: -3px; }
    .tl-ui .tl-ui-toggle:has(input:checked) { outline: 2px solid Highlight; }
    .tl-ui .tl-ui-alert { border-left: 4px solid CanvasText; }
    .tl-ui .tl-ui-tag { border: 1px solid CanvasText; }
    .tl-ui .tl-ui-btn.tl-ui-btn-primary { border: 2px solid ButtonText; }
    .tl-ui .tl-ui-chip { border: 1px solid CanvasText; }
    .tl-ui ol.tl-ui-progress > li::before { border: 1px solid CanvasText; }
    .tl-ui ol.tl-ui-progress > li[aria-current="step"]::before { border: 2px solid Highlight; }
}