/*
 * Shared primitives for every product screen: fonts, reset, type, focus ring, and the controls of
 * DESIGN.md 6.1–6.5 (buttons, fields, selects, checkboxes, radios, switches, status chips), plus the
 * banners and cards. Loaded by both _Layout.cshtml and
 * _AuthLayout.cshtml, so it must never assume the application shell exists.
 *
 * Every value here comes from DESIGN.md 4.0.0 via design-tokens.css. There is no CSS framework
 * underneath (D21).
 */

/* Inter (DESIGN.md 3.1), self-hosted with its OFL licence beside it: one variable file per style, with
   the weight and optical-size axes. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/InterVariable.woff2) format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/InterVariable-Italic.woff2) format("woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Views and scripts hide things with the `hidden` attribute, but the user-agent rule behind it
   is only `display: none` on the element's default — any class here that sets `display` wins
   over it and the element stays on screen. .btn, .workspace-banner and .data-table-loading are
   all toggled that way, so the attribute is made authoritative once, here. This is the second
   !important in this file and it earns it: the alternative is repeating :not([hidden]) on every
   rule that sets display. */
[hidden] {
    display: none !important;
}

html,
body {
    min-width: 320px;
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bc-background);
    color: var(--bc-label);
    font-family: var(--bc-font-family);
    font-size: var(--bc-type-body-size);
    font-weight: var(--bc-type-body-weight);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--bc-tint);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1,
h2,
h3,
p {
    margin: 0;
}

/* Emphasis inside running text is semibold (DESIGN.md 3.1). */
strong,
b {
    font-weight: 600;
}

/* Figures that line up in columns or change in place: tables, counters and dates (DESIGN.md 3.1). */
table,
time,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

code {
    font-family: var(--bc-font-family-mono);
}

:focus-visible {
    outline: var(--bc-focus-ring);
    outline-offset: var(--bc-focus-offset);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    /* 44px tall: a target a thumb can find on a phone too. */
    padding: 12px 24px;
    border-radius: var(--bc-radius-capsule);
    background: var(--bc-tint-fill);
    color: var(--bc-on-tint);
    font-size: var(--bc-type-body-size);
    font-weight: 600;
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--bc-duration-fade) var(--bc-ease-out);
}

.skip-link:focus {
    color: var(--bc-on-tint);
    text-decoration: none;
    transform: translateY(0);
}

/* ------------------------------------------------------------ logo (DESIGN.md 2.1, 4.1)

   Each logo is two images: the dark-text copy for the light theme and the white-text original for
   the dark one. They follow the same rules as the palette in design-tokens.css — light by default, dark under
   html[data-theme="dark"], and the OS under html[data-theme="system"] — which a <picture> media query could not. The img type
   selector outranks the size classes' display in app.css and admin-auth.css. */

img.logo-for-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] img.logo-for-light {
        display: none;
    }

    :root[data-theme="system"] img.logo-for-dark {
        display: block;
    }
}

:root[data-theme="dark"] img.logo-for-light {
    display: none;
}

:root[data-theme="dark"] img.logo-for-dark {
    display: block;
}

/* theme.js sets this class for the instant it flips the theme (DESIGN.md 2.2), so that the whole page
   changes at once rather than the elements with a color transition trailing the rest. The !important
   is what lets one rule outrank every component's own transition. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
    transition: none !important;
}

/* ---------------------------------------------------------------- buttons (DESIGN.md 6.1)

   One capsule, six variants, each a set of four custom properties: the fill at rest, on hover and on
   press, and the label. A button without a variant is plain. Hover is a deeper fill, never a layer over
   the label; pressing shrinks the capsule a little on the snappy spring (the press morph). A prominent,
   destructive or handoff fill deepens by mixing in the label colour of the theme, so it darkens in light
   and lightens in dark without a second set of values. */

.btn {
    --btn-fill: transparent;
    --btn-fill-hover: var(--bc-fill);
    --btn-fill-pressed: var(--bc-fill-hover);
    --btn-label: var(--bc-tint);
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--bc-control-height);
    padding: 0 var(--bc-space-4);
    border: 0;
    border-radius: var(--bc-radius-capsule);
    background: var(--btn-fill);
    color: var(--btn-label);
    font-family: var(--bc-font-family);
    font-size: var(--bc-type-body-size);
    font-weight: 500;
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out),
                color var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy);
}

.btn:hover,
.btn:focus {
    color: var(--btn-label);
    text-decoration: none;
}

@media (hover: hover) {
    .btn:hover {
        background: var(--btn-fill-hover);
    }
}

.btn:active {
    background: var(--btn-fill-pressed);
    transform: scale(0.96);
}

.btn .icon {
    font-size: 18px;
}

/* 12px on the side that carries an icon, so the glyph sits as far from the curve as the text does. */
.btn:has(> .icon:first-child) {
    padding-left: var(--bc-space-3);
}

.btn:has(> .icon:last-child) {
    padding-right: var(--bc-space-3);
}

/* Prominent: the one filled accent action of a sheet, a tab row or a settings form. */
.btn-prominent {
    --btn-fill: var(--bc-tint-fill);
    --btn-fill-hover: color-mix(in srgb, var(--bc-tint-fill) 86%, var(--bc-label));
    --btn-fill-pressed: color-mix(in srgb, var(--bc-tint-fill) 76%, var(--bc-label));
    --btn-label: var(--bc-on-tint);
    font-weight: 600;
}

/* Tinted: a secondary action that still reads as the accent. */
.btn-tinted {
    --btn-fill: var(--bc-tint-soft);
    --btn-fill-hover: color-mix(in srgb, var(--bc-tint) 20%, transparent);
    --btn-fill-pressed: color-mix(in srgb, var(--bc-tint) 26%, transparent);
    --btn-label: var(--bc-tint);
}

/* Gray: a neutral action beside a stronger one, such as Vazgeç or a filter's Temizle. */
.btn-gray {
    --btn-fill: var(--bc-fill);
    --btn-fill-hover: var(--bc-fill-hover);
    --btn-fill-pressed: color-mix(in srgb, var(--bc-fill-hover), var(--bc-label) 8%);
    --btn-label: var(--bc-label);
}

/* Plain: text only, in the accent; a fill appears under the pointer. */
.btn-plain {
    padding: 0 var(--bc-space-3);
}

.btn-plain:has(> .icon:first-child) {
    padding-left: var(--bc-space-2);
}

.btn-plain:has(> .icon:last-child) {
    padding-right: var(--bc-space-2);
}

/* Destructive: removes, revokes or archives something; always confirmed (DESIGN.md 6.6). */
.btn-destructive {
    --btn-fill: var(--bc-destructive-fill);
    --btn-fill-hover: color-mix(in srgb, var(--bc-destructive-fill) 86%, var(--bc-label));
    --btn-fill-pressed: color-mix(in srgb, var(--bc-destructive-fill) 76%, var(--bc-label));
    --btn-label: var(--bc-on-tint);
    font-weight: 600;
}

/* Handoff: the Yapılandır configurator link alone keeps the brand orange (DESIGN.md 8). */
.btn-handoff {
    --btn-fill: var(--bc-handoff-fill);
    --btn-fill-hover: color-mix(in srgb, var(--bc-handoff-fill) 88%, var(--bc-label));
    --btn-fill-pressed: color-mix(in srgb, var(--bc-handoff-fill) 78%, var(--bc-label));
    --btn-label: var(--bc-on-handoff);
    font-weight: 600;
}

/* Icon button: a round target as tall as a button, the glyph in the secondary label. Must carry an
   aria-label. */
.btn-icon,
.btn-icon:has(> .icon:first-child),
.btn-icon:has(> .icon:last-child) {
    width: var(--bc-control-height);
    min-width: var(--bc-control-height);
    height: var(--bc-control-height);
    min-height: var(--bc-control-height);
    padding: 0;
}

.btn-icon {
    --btn-label: var(--bc-label-secondary);
}

.btn-icon .icon {
    font-size: 20px;
}

/* Small: inside table rows, banners and filter bars. Its hit area still reaches the minimum target. */
.btn-sm {
    min-height: 28px;
    padding: 0 var(--bc-space-3);
    font-size: var(--bc-type-callout-size);
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
}

.btn-sm:has(> .icon:first-child) {
    padding-left: 10px;
}

.btn-sm:has(> .icon:last-child) {
    padding-right: 10px;
}

.btn-sm .icon {
    font-size: 16px;
}

/* Disabled: a filled variant keeps a quiet fill, every label goes tertiary, and nothing reacts. */
.btn:disabled,
.btn[aria-disabled="true"] {
    --btn-fill: var(--bc-fill);
    --btn-fill-hover: var(--bc-fill);
    --btn-fill-pressed: var(--bc-fill);
    --btn-label: var(--bc-label-tertiary);
    cursor: not-allowed;
    transform: none;
}

.btn:is(.btn-plain, .btn-icon, :not([class*="btn-"])):is(:disabled, [aria-disabled="true"]) {
    --btn-fill: transparent;
    --btn-fill-hover: transparent;
    --btn-fill-pressed: transparent;
}

/* --------------------------------------------------------------- fields (DESIGN.md 6.2)

   Markup stays .portal-field > label + input/select/textarea + span.field-validation-error + small. The
   field is a grid: the label on the first row, the control on the second, the error under it, and the
   hint with the character counter beside it last. The trailing glyph (a select's chevrons) and the
   password toggle sit in the control's row, over its trailing end, so they stay centred on it whatever
   the label wraps to. The data-table filter is the same field with its label hidden; its search bar has a
   leading magnifier, the one leading glyph a field carries.

   Glyphs are generated content on the field, never on the control, and carry empty alternative text. */

.portal-field,
.data-table-filter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: var(--bc-space-4);
}

.portal-field > *,
.data-table-filter > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.portal-field > label,
.data-table-filter > label {
    grid-row: 1;
    margin: 0 0 6px;
    padding: 0 2px;
    color: var(--bc-label);
    font-size: var(--bc-type-callout-size);
    font-weight: 500;
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
}

/* Required: a visual marker only, and only in a form that also has an optional text field. Where
   every field is required the marker says nothing, so it is left out; a select always has a value
   and never makes a form mixed. The control's required attribute is what is announced. */
form:has(.portal-field > :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="search"]), textarea):not(:required))
    .portal-field:has(> :required) > label::after {
    content: "*" / "";
    margin-left: 2px;
    color: var(--bc-label-secondary);
}

.portal-field > :is(input, select, textarea),
.data-table-filter > :is(input, select) {
    grid-row: 2;
    display: block;
    width: 100%;
    min-height: var(--bc-field-height);
    margin: 0;
    padding: calc((var(--bc-field-height) - var(--bc-type-body-line)) / 2) var(--bc-space-3);
    border: 0;
    border-radius: var(--bc-radius-field);
    background: var(--bc-fill);
    /* The boundary must reach 3:1 against what is around the field (DESIGN.md 9), which the fill alone does not. */
    box-shadow: inset 0 0 0 1px var(--bc-separator-strong);
    color: var(--bc-label);
    font-family: var(--bc-font-family);
    font-size: var(--bc-type-body-size);
    font-weight: var(--bc-type-body-weight);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out),
                box-shadow var(--bc-duration-fade) var(--bc-ease-out);
}

@media (hover: hover) {
    .portal-field > :is(input, select, textarea):hover,
    .data-table-filter > :is(input, select):hover {
        background: var(--bc-fill-hover);
    }
}

/* Focus: the field's own boundary becomes the 2px accent ring; a bordered control takes no second ring. */
.portal-field > :is(input, select, textarea):focus,
.data-table-filter > :is(input, select):focus {
    box-shadow: inset 0 0 0 2px var(--bc-tint);
    outline: none;
}

/* A placeholder never stands in for a hint (the hint is the small under the field); the table search
   alone uses one, to say what it searches, so it is a readable secondary label. */
.portal-field > :is(input, textarea)::placeholder,
.data-table-filter > input::placeholder {
    color: var(--bc-label-secondary);
    opacity: 1;
}

/* Autofill keeps the field's shape; browsers force their own background, so the fill is a shadow. */
.portal-field > input:autofill {
    box-shadow: inset 0 0 0 1px var(--bc-separator-strong), inset 0 0 0 100vmax var(--bc-tint-soft);
    -webkit-text-fill-color: var(--bc-label);
    caret-color: var(--bc-label);
}

.portal-field > input:autofill:focus {
    box-shadow: inset 0 0 0 2px var(--bc-tint), inset 0 0 0 100vmax var(--bc-tint-soft);
}

/* Error: the server marks the control aria-invalid (FieldValidationTagHelpers) as well as with
   MVC's class; a control a script refuses carries only aria-invalid. The boundary turns destructive; the
   message under the field carries the glyph. */
.portal-field > :is(.input-validation-error, [aria-invalid="true"]) {
    box-shadow: inset 0 0 0 1px var(--bc-destructive), inset 0 0 0 100vmax var(--bc-destructive-soft);
}

.portal-field > :is(.input-validation-error, [aria-invalid="true"]):focus {
    box-shadow: inset 0 0 0 2px var(--bc-destructive), inset 0 0 0 100vmax var(--bc-destructive-soft);
}

/* Disabled: a shown value the viewer may not change. The text stays readable; the boundary goes quiet. */
.portal-field > :is(input, select, textarea):disabled,
.data-table-filter > :is(input, select):disabled {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--bc-separator);
    color: var(--bc-label-secondary);
    -webkit-text-fill-color: var(--bc-label-secondary);
    cursor: not-allowed;
}

.portal-field:has(> :disabled) > label {
    color: var(--bc-label-secondary);
}

/* The textarea grows with its text, so it needs no resize grip. Where it cannot grow, the grip stays. */
.portal-field > textarea {
    field-sizing: content;
    min-height: calc(var(--bc-field-height) + 2 * var(--bc-type-body-line));
    resize: none;
}

@supports not (field-sizing: content) {
    .portal-field > textarea {
        resize: vertical;
    }
}

/* A file field: the browser's own button is drawn as a small gray capsule, the chosen file's name beside it. */
.portal-field > input[type="file"] {
    padding-block: 4px;
    padding-left: 4px;
    cursor: pointer;
}

.portal-field > input[type="file"]::file-selector-button {
    min-height: 28px;
    margin: 0 var(--bc-space-3) 0 0;
    padding: 0 var(--bc-space-3);
    border: 0;
    border-radius: var(--bc-radius-capsule);
    background: var(--bc-fill-hover);
    color: var(--bc-label);
    font: inherit;
    font-size: var(--bc-type-callout-size);
    font-weight: 500;
    cursor: pointer;
}

/* Glyphs in the control's row. An undefined glyph variable makes the content declaration invalid, so no
   box is generated. */
.portal-field:has(> select),
.data-table-filter:has(> select),
.field-select {
    --field-trailing-icon: "unfold_more";
}

.portal-field::before,
.portal-field::after,
.data-table-filter::before,
.data-table-filter::after,
.field-select::after {
    position: relative;
    z-index: 1;
    grid-row: 2;
    width: 18px;
    height: 18px;
    overflow: hidden;
    color: var(--bc-label-secondary);
    font-family: var(--bc-icon-font-family);
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga" 1;
    font-variation-settings: "FILL" 0, "GRAD" 0;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
}

.portal-field::before,
.data-table-filter::before {
    content: var(--field-leading-icon) / "";
    grid-column: 1;
    justify-self: start;
    margin-left: 10px;
}

.portal-field::after,
.data-table-filter::after {
    content: var(--field-trailing-icon) / "";
    grid-column: 2;
    justify-self: end;
    margin-right: 10px;
}

.portal-field:has(> :disabled)::after,
.data-table-filter:has(> :disabled)::after,
.field-select:has(> :disabled)::after {
    color: var(--bc-label-tertiary);
}

/* Room for the glyphs. */
.portal-field > select,
.data-table-filter > select,
.portal-field:has(> .field-trailing-action) > input {
    padding-right: 36px;
}

.data-table-filter:has(> input) > input {
    padding-left: 34px;
}

/* The password visibility toggle fields.js adds: a small round button inside the field's trailing end. It is
   also a .btn-icon, so the selector matches that rule's specificity and, coming later, wins: otherwise the
   button is a full control tall and its fill and ring spill past the field. */
.portal-field > .btn-icon.field-trailing-action {
    position: relative;
    z-index: 2;
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    width: calc(var(--bc-field-height) - 8px);
    min-width: 0;
    height: calc(var(--bc-field-height) - 8px);
    min-height: 0;
    margin-right: 4px;
}

/* The ring is drawn inside, so it stays within the field. */
.portal-field > .field-trailing-action:focus-visible {
    outline-offset: -2px;
}

.portal-field > .field-trailing-action .icon {
    font-size: 18px;
}

.portal-field > .field-trailing-action[aria-pressed="true"] {
    --btn-label: var(--bc-tint);
}

/* Error message, then hint and counter, under the control. */
.portal-field > .field-validation-error {
    grid-row: 3;
}

.portal-field > small {
    grid-row: 4;
    display: block;
    margin-top: 6px;
    padding: 0 2px;
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-footnote-size);
    line-height: var(--bc-type-footnote-line);
    letter-spacing: var(--bc-type-footnote-tracking);
}

.portal-field:has(> .field-counter) > small:not(.field-counter) {
    grid-column: 1;
}

.portal-field > .field-counter {
    grid-column: 2;
    justify-self: end;
    padding-left: var(--bc-space-3);
    font-variant-numeric: tabular-nums;
}

.field-validation-error {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 6px;
    padding: 0 2px;
    color: var(--bc-destructive);
    font-size: var(--bc-type-footnote-size);
    line-height: var(--bc-type-footnote-line);
    letter-spacing: var(--bc-type-footnote-tracking);
}

.field-validation-error:not(:empty)::before {
    content: "error" / "";
    flex: 0 0 auto;
    width: 16px;
    height: var(--bc-type-footnote-line);
    overflow: hidden;
    font-family: var(--bc-icon-font-family);
    font-size: 16px;
    font-weight: 300;
    line-height: var(--bc-type-footnote-line);
    letter-spacing: normal;
    white-space: nowrap;
    font-feature-settings: "liga" 1;
    font-variation-settings: "FILL" 1, "GRAD" 0;
}

.field-validation-error:empty,
.field-validation-valid {
    display: none;
}

/* The inline variant, for a row of a grouped list (DESIGN.md 6.8): the label leads, the control trails
   on the same line with no fill of its own, and the group's row is the boundary. */
.portal-field-inline {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    column-gap: var(--bc-space-4);
    margin-bottom: 0;
}

.portal-field-inline > label {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    padding: 0;
    color: var(--bc-label);
    font-size: var(--bc-type-body-size);
    font-weight: var(--bc-type-body-weight);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
}

.portal-field-inline > :is(input, select, textarea) {
    grid-row: 1;
    grid-column: 2 / -1;
    padding-inline: 0;
    background: transparent;
    box-shadow: none;
    text-align: end;
}

.portal-field-inline > select {
    padding-right: 26px;
    text-align-last: end;
}

.portal-field-inline::after {
    grid-row: 1;
    margin-right: 0;
}

.portal-field-inline > :is(.field-validation-error, small) {
    grid-column: 1 / -1;
}

@media (hover: hover) {
    .portal-field-inline > :is(input, select, textarea):hover {
        background: transparent;
    }
}

.portal-field-inline > :is(input, select, textarea):focus {
    box-shadow: none;
}

/* The inline control has no boundary to recolour, so it keeps the ring. */
.portal-field-inline > :is(input, select, textarea):focus-visible {
    outline: var(--bc-focus-ring);
    outline-offset: 1px;
}

/* ------------------------------------------------------------------ selects (DESIGN.md 6.2)

   Every select drops the native arrow for the up-and-down chevrons of a pop-up button. A select outside
   .portal-field (the table's page size) sits in span.field-select, a compact pop-up button. Where the
   browser supports a customizable select, the list opens as a glass menu (DESIGN.md 6.7). */

.field-select {
    position: relative;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    max-width: 100%;
    vertical-align: middle;
}

.field-select > select {
    grid-row: 1;
    grid-column: 1 / -1;
    min-height: var(--bc-control-height);
    padding: 0 30px 0 var(--bc-space-3);
    border: 0;
    border-radius: var(--bc-radius-field);
    background: var(--bc-fill);
    box-shadow: inset 0 0 0 1px var(--bc-separator-strong);
    color: var(--bc-label);
    font-family: var(--bc-font-family);
    font-size: var(--bc-type-callout-size);
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out);
}

@media (hover: hover) {
    .field-select > select:hover {
        background: var(--bc-fill-hover);
    }
}

.field-select > select:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bc-tint);
    outline: none;
}

.field-select::after {
    content: var(--field-trailing-icon) / "";
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    margin-right: 8px;
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.portal-field > select,
.data-table-filter > select {
    appearance: none;
    cursor: pointer;
}

.portal-field select option,
.data-table-filter select option,
.field-select > select option {
    background: var(--bc-content);
    color: var(--bc-label);
}

@supports (appearance: base-select) {
    .portal-field select,
    .data-table-filter select,
    .field-select > select,
    .portal-field select::picker(select),
    .data-table-filter select::picker(select),
    .field-select > select::picker(select) {
        appearance: base-select;
    }

    .portal-field select,
    .data-table-filter select,
    .field-select > select {
        display: flex;
        align-items: center;
    }

    .portal-field select::picker-icon,
    .data-table-filter select::picker-icon,
    .field-select > select::picker-icon {
        display: none;
    }

    .portal-field select:open,
    .data-table-filter select:open {
        box-shadow: inset 0 0 0 1px var(--bc-tint);
    }

    /* The list: a glass menu under the field. */
    .portal-field select::picker(select),
    .data-table-filter select::picker(select),
    .field-select > select::picker(select) {
        margin-block: 4px;
        padding: 5px;
        border: var(--bc-glass-border);
        border-radius: var(--bc-radius-menu);
        background: var(--bc-glass-regular);
        -webkit-backdrop-filter: var(--bc-glass-regular-filter);
        backdrop-filter: var(--bc-glass-regular-filter);
        box-shadow: var(--bc-shadow-3);
        color: var(--bc-label);
    }

    .portal-field select option,
    .data-table-filter select option,
    .field-select > select option {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 var(--bc-space-3) 0 6px;
        border-radius: 7px;
        background: transparent;
        color: var(--bc-label);
        font-size: var(--bc-type-body-size);
        line-height: var(--bc-type-body-line);
    }

    /* The chosen option carries a check where macOS puts it; the others keep its room, so names line up. */
    .portal-field select option::checkmark,
    .data-table-filter select option::checkmark,
    .field-select > select option::checkmark {
        content: "check" / "";
        width: 16px;
        font-family: var(--bc-icon-font-family);
        font-size: 16px;
        font-feature-settings: "liga" 1;
        line-height: 1;
        visibility: hidden;
    }

    .portal-field select option:checked::checkmark,
    .data-table-filter select option:checked::checkmark,
    .field-select > select option:checked::checkmark {
        visibility: visible;
    }

    /* A tree's depth in a select of locations (D53), set as data-depth by the page, never as leading
       spaces: those showed in the closed field and stopped type-to-select from finding a name. A
       browser without base-select lists the options flat; the code path still says the depth. */
    .portal-field select option[data-depth="2"],
    .data-table-filter select option[data-depth="2"] { padding-inline-start: 22px; }
    .portal-field select option[data-depth="3"],
    .data-table-filter select option[data-depth="3"] { padding-inline-start: 38px; }
    .portal-field select option[data-depth="4"],
    .data-table-filter select option[data-depth="4"] { padding-inline-start: 54px; }
    .portal-field select option[data-depth="5"],
    .data-table-filter select option[data-depth="5"] { padding-inline-start: 70px; }
    .portal-field select option[data-depth="6"],
    .data-table-filter select option[data-depth="6"] { padding-inline-start: 86px; }

    /* The highlighted option is the accent, as in a macOS menu. */
    .portal-field select option:is(:hover, :focus-visible),
    .data-table-filter select option:is(:hover, :focus-visible),
    .field-select > select option:is(:hover, :focus-visible) {
        background: var(--bc-tint-fill);
        color: var(--bc-on-tint);
        outline: none;
    }
}

/* ------------------------------------------------------- selection controls (DESIGN.md 6.3)

   label.checkbox > input[type="checkbox"] + span.checkbox-mark, and label.radio > input[type="radio"] +
   span.radio-mark. The input stays the real control with appearance: none, drawn as the box or the
   circle; the check (or the indeterminate dash, or the radio's dot) is the sibling span, because
   generated content on <input> is not reliable. The label is the minimum target. */

.checkbox,
.radio {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--bc-target-min);
    height: var(--bc-target-min);
    vertical-align: middle;
    cursor: pointer;
}

.checkbox > input,
.checkbox > .checkbox-mark,
.radio > input,
.radio > .radio-mark {
    position: relative;
    grid-area: 1 / 1;
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkbox > input,
.radio > input {
    appearance: none;
    border: 1.5px solid var(--bc-separator-strong);
    background: var(--bc-content);
    cursor: inherit;
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out),
                border-color var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy);
}

.checkbox > input {
    border-radius: 5px;
}

.radio > input {
    border-radius: 50%;
}

@media (hover: hover) {
    .checkbox:hover > input:not(:disabled, :checked, :indeterminate),
    .radio:hover > input:not(:disabled, :checked) {
        border-color: var(--bc-label-secondary);
    }
}

.checkbox:active > input:not(:disabled),
.radio:active > input:not(:disabled) {
    transform: scale(0.92);
}

.checkbox > input:focus-visible,
.radio > input:focus-visible {
    outline: var(--bc-focus-ring);
    outline-offset: var(--bc-focus-offset);
}

.checkbox > input:is(:checked, :indeterminate),
.radio > input:checked {
    border-color: var(--bc-tint-fill);
    background: var(--bc-tint-fill);
}

.checkbox > .checkbox-mark,
.radio > .radio-mark {
    background: var(--bc-on-tint);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.6);
    transition: opacity var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy);
}

.checkbox > .checkbox-mark {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7.3 13.1 3.6 9.4l1.1-1.1 2.6 2.6 6-6 1.1 1.1z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M7.3 13.1 3.6 9.4l1.1-1.1 2.6 2.6 6-6 1.1 1.1z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.radio > .radio-mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.checkbox > input:is(:checked, :indeterminate) + .checkbox-mark,
.radio > input:checked + .radio-mark {
    opacity: 1;
    transform: scale(1);
}

.checkbox > input:indeterminate + .checkbox-mark {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='4.5' y='8.2' width='9' height='1.6' rx='.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='4.5' y='8.2' width='9' height='1.6' rx='.8'/%3E%3C/svg%3E");
}

.checkbox:has(> input:disabled),
.radio:has(> input:disabled) {
    cursor: not-allowed;
}

.checkbox > input:disabled,
.radio > input:disabled {
    border-color: var(--bc-separator);
    background: var(--bc-fill);
}

.checkbox > input:disabled:is(:checked, :indeterminate),
.radio > input:disabled:checked {
    border-color: transparent;
    background: var(--bc-fill-hover);
}

.checkbox > input:disabled + .checkbox-mark,
.radio > input:disabled + .radio-mark {
    background: var(--bc-label-tertiary);
}

/* A switch, for a boolean setting that takes effect as a whole form is saved: a real checkbox with
   role="switch", drawn with appearance: none. The thumb is a radial gradient on the input itself, so
   it needs no sibling and slides by background position on the bouncy spring. */
input.switch {
    --switch-width: 40px;
    --switch-height: 24px;
    flex: 0 0 auto;
    width: var(--switch-width);
    height: var(--switch-height);
    margin: 0;
    border: 0;
    border-radius: var(--bc-radius-capsule);
    background-color: var(--bc-separator-strong);
    background-image: radial-gradient(circle closest-side, #FFFFFF calc(100% - 2.5px), transparent calc(100% - 2px));
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: var(--switch-height) var(--switch-height);
    vertical-align: middle;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out),
                background-position var(--bc-duration-bouncy) var(--bc-spring-bouncy);
}

input.switch:checked {
    background-color: var(--bc-tint-fill);
    background-position: 100% 50%;
}

input.switch:focus-visible {
    outline: var(--bc-focus-ring);
    outline-offset: var(--bc-focus-offset);
}

input.switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (width < 600px) {
    input.switch {
        --switch-width: 51px;
        --switch-height: 31px;
    }
}

/* A checkbox or a switch with its text, as a row of a form: the control and a label for it beside it. */
.field-checkbox {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    margin: 0 0 var(--bc-space-4);
    color: var(--bc-label);
}

.field-checkbox > label:not(.checkbox, .radio) {
    cursor: pointer;
}

/* ------------------------------------------------------------------ banners (DESIGN.md 6.9)

   A persistent outcome or notice on solid content: a rounded panel on the soft fill of its meaning, the
   meaning's filled glyph leading, the text in the label colour so it reads on every fill. A form at its end
   (the suspended organization's Organizasyondan ayrıl) trails, wrapping under the text when there is no room. */

.workspace-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-2) var(--bc-space-3);
    margin-bottom: var(--bc-space-4);
    padding: var(--bc-space-3) var(--bc-space-4);
    border-radius: var(--bc-radius-menu);
    background: var(--bc-tint-soft);
    color: var(--bc-label);
    font-size: var(--bc-type-body-size);
    font-weight: var(--bc-type-body-weight);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
}

.workspace-banner > .icon:first-child {
    --icon-fill: 1;
    flex: 0 0 auto;
    color: var(--bc-tint);
    font-size: 20px;
}

.workspace-banner > .icon:first-child + span,
.workspace-banner > .icon:first-child + div {
    flex: 1 1 240px;
    min-width: 0;
}

/* The items a refusal names one by one, under its sentence (the operators' device release, D58). */
.workspace-banner-list {
    margin: var(--bc-space-1) 0 0;
    padding-left: 1.25em;
    overflow-wrap: anywhere;
}

.workspace-banner > form {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

.workspace-banner-warning {
    background: var(--bc-warning-soft);
}

.workspace-banner-warning > .icon:first-child {
    color: var(--bc-warning);
}

.workspace-banner-error {
    background: var(--bc-destructive-soft);
}

.workspace-banner-error > .icon:first-child {
    color: var(--bc-destructive);
}

.workspace-banner-success {
    background: var(--bc-success-soft);
}

.workspace-banner-success > .icon:first-child {
    color: var(--bc-success);
}

.workspace-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Validation summary rendered by asp-validation-summary on the auth pages, and the notice
   carried across the redirect from sign-up to sign-in: the same panel without a glyph. */
.form-banner-error:not(:empty),
.form-banner-success:not(:empty) {
    margin-bottom: var(--bc-space-4);
    padding: var(--bc-space-3) var(--bc-space-4);
    border-radius: var(--bc-radius-menu);
    color: var(--bc-label);
    font-size: var(--bc-type-body-size);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
}

.form-banner-error:not(:empty) {
    background: var(--bc-destructive-soft);
}

.form-banner-success:not(:empty) {
    background: var(--bc-success-soft);
}

.form-banner-error ul,
.workspace-banner ul {
    margin: 0;
    padding-left: var(--bc-space-5);
}

/* One message is a sentence, not a list: no bullet (the validation summary always renders a list). */
.form-banner-error ul:has(> li:only-child),
.workspace-banner ul:has(> li:only-child) {
    padding-left: 0;
    list-style: none;
}

/* -------------------------------------------------------------------- cards (DESIGN.md 6.9)

   Solid content on the window background: a white (dark: #1C1C1E) rounded panel with a resting shadow, no
   outline. Glass never carries content (DESIGN.md 2.4). */

.workspace-card {
    margin-bottom: var(--bc-space-6);
    padding: var(--bc-space-5);
    border-radius: var(--bc-radius-card);
    background: var(--bc-content);
    box-shadow: var(--bc-shadow-1);
}

.workspace-card h2,
.dashboard-card h2 {
    margin: 0 0 var(--bc-space-1);
    color: var(--bc-label);
    font-size: var(--bc-type-title-2-size);
    font-weight: var(--bc-type-title-2-weight);
    line-height: var(--bc-type-title-2-line);
    letter-spacing: var(--bc-type-title-2-tracking);
}

/* A heading with nothing under it carries no trailing space; what follows it sets the distance. */
.workspace-card h2:last-child,
.dashboard-card h2:last-child {
    margin-bottom: 0;
}

/* The last card on a page ends at the pane's own bottom padding rather than adding to it. A page's
   dialogs follow its content in the markup, so "last" means nothing but dialogs comes after. */
.page-container > :is(.workspace-card, .dashboard-card):not(:has(~ :not(dialog, script, template, [hidden]))),
.page-container > :not(:has(~ :not(dialog, script, template, [hidden]))) > :is(.workspace-card, .dashboard-card):last-child {
    margin-bottom: 0;
}

.workspace-card p,
.dashboard-card p {
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-callout-size);
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
}

/* ------------------------------------------------------- badges and status (DESIGN.md 6.5)

   A capsule with a text label and, optionally, a glyph; colour is never the only signal. The soft fill
   of its meaning behind the meaning's own text colour. .workspace-chip (app.css) is the neutral badge
   beside a name. */

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 20px;
    padding: 0 var(--bc-space-2);
    border-radius: var(--bc-radius-capsule);
    background: var(--bc-fill);
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-footnote-size);
    font-weight: 600;
    line-height: var(--bc-type-footnote-line);
    letter-spacing: var(--bc-type-footnote-tracking);
    white-space: nowrap;
    vertical-align: middle;
}

.status-chip:has(> .icon:first-child) {
    padding-left: 6px;
}

.status-chip .icon {
    font-size: 14px;
    --icon-fill: 1;
}

.status-chip.status-primary {
    background: var(--bc-tint-soft);
    color: var(--bc-tint);
}

.status-chip.status-info {
    background: var(--bc-fill);
    color: var(--bc-label-secondary);
}

.status-chip.status-success {
    background: var(--bc-success-soft);
    color: var(--bc-success);
}

.status-chip.status-warning,
.status-chip.status-operational {
    background: var(--bc-warning-soft);
    color: var(--bc-warning);
}

.status-chip.status-error {
    background: var(--bc-destructive-soft);
    color: var(--bc-destructive);
}

/* ------------------------------------------------------------ touch targets (DESIGN.md 9.3)

   On phones every control's hit area reaches 44×44 through an invisible box centred on it, whatever its
   drawn size. */

@media (width < 600px) {
    .btn::after,
    .checkbox::after,
    .radio::after,
    .touch-target::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, var(--bc-target-min));
        height: max(100%, var(--bc-target-min));
        transform: translate(-50%, -50%);
    }

    .touch-target {
        position: relative;
    }

    /* A small button stays drawn small in a dense row, at a height a thumb can still find. */
    .btn-sm {
        min-height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Password strength meter (password-strength.js), last in a password field: four segments filled up to the
   level, then the level and, when the policy refuses the password, the rule it breaks. */
.portal-field > .password-strength {
    grid-row: 5;
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 0 2px;
}

.password-strength[hidden] {
    display: none;
}

.password-strength-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.password-strength-bar > span {
    height: 4px;
    border-radius: 2px;
    background: var(--bc-fill);
    transition: background-color 0.2s ease;
}

.password-strength[data-tone="weak"] { --password-strength-color: var(--bc-destructive); }
.password-strength[data-tone="fair"] { --password-strength-color: var(--bc-warning); }
.password-strength[data-tone="strong"] { --password-strength-color: var(--bc-success); }

.password-strength[data-level="1"] .password-strength-bar > span:nth-child(-n + 1),
.password-strength[data-level="2"] .password-strength-bar > span:nth-child(-n + 2),
.password-strength[data-level="3"] .password-strength-bar > span:nth-child(-n + 3),
.password-strength[data-level="4"] .password-strength-bar > span:nth-child(-n + 4) {
    background: var(--password-strength-color);
}

.password-strength-text {
    margin: 6px 0 0;
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-footnote-size);
    line-height: var(--bc-type-footnote-line);
    letter-spacing: var(--bc-type-footnote-tracking);
}

.password-strength-text > strong {
    color: var(--password-strength-color);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .password-strength-bar > span {
        transition: none;
    }
}