/*
 * D34's shared page primitives: the segmented control and its action row (DESIGN.md 6.4), grouped lists and
 * settings (6.8), sheets and the bcConfirm alert (6.6), menus and the bottom sheets' pieces (6.7). Loaded by
 * _Layout.cshtml and _AuthLayout.cshtml after base.css, whose buttons and fields these compose.
 *
 * Every value comes from design-tokens.css. Hand-built under D21: native <dialog>, no library.
 */

/* ------------------------------------------------- segmented control (DESIGN.md 6.4)

   Routed tabs drawn as a glass segmented control: a capsule track on the thin glass material under the
   gray fill, the current section a solid capsule inside it. The items stay links, one URL each (D34). Without the
   script the current item carries its own capsule; with it (_TabBar.cshtml) one indicator is laid
   under the current item and, on a click, slides to the chosen one on the bouncy spring while the page
   loads. When the items do not fit the track scrolls sideways, and the end with more items fades. */

.segmented {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
    max-width: 100%;
    margin: 0 0 var(--bc-space-6);
    padding: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    border: var(--bc-glass-border);
    border-radius: var(--bc-radius-capsule);
    /* The gray of a segmented track over the glass, so the solid current item stands off it. */
    background: linear-gradient(var(--bc-fill), var(--bc-fill)), var(--bc-glass-thin);
    -webkit-backdrop-filter: var(--bc-glass-thin-filter);
    backdrop-filter: var(--bc-glass-thin-filter);
    box-shadow: var(--bc-shadow-1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.segmented::-webkit-scrollbar {
    display: none;
}

.segmented-item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* The track (3px inset and its 1px rim) is a control's height, so the control lines up with the buttons
       and fields beside it; the items and the indicator are the track's inside. */
    min-height: calc(var(--bc-control-height) - 8px);
    padding: 0 14px;
    border-radius: var(--bc-radius-capsule);
    color: var(--bc-label-secondary);
    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-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--bc-duration-fade) var(--bc-ease-out),
                background-color var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy);
}

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

@media (hover: hover) {
    .segmented-item:not([aria-current="page"], .is-pending):hover {
        background: var(--bc-fill);
    }
}

.segmented-item:active {
    transform: scale(0.96);
}

/* The track scrolls, so a ring outside an item would be clipped: it is drawn inside. */
.segmented-item:focus-visible {
    outline-offset: -2px;
}

.segmented-item .icon {
    font-size: 18px;
}

/* The current section: the solid capsule, the label in full colour and the glyph filled. The weight stays,
   so an item keeps its width when it becomes current and the indicator lands exactly on it. */
.segmented-item[aria-current="page"],
.segmented-item.is-pending {
    color: var(--bc-label);
}

.segmented-item[aria-current="page"]:not(.is-leaving) .icon,
.segmented-item.is-pending .icon {
    --icon-fill: 1;
}

.segmented-item.is-leaving {
    color: var(--bc-label-secondary);
}

.segmented-item[aria-current="page"],
.segmented-indicator {
    background: var(--bc-control-raised);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.04);
}

/* With the script the indicator draws the capsule, so the item's own is dropped. */
.segmented.is-enhanced .segmented-item[aria-current="page"] {
    background: transparent;
    box-shadow: none;
}

.segmented-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    z-index: 0;
    width: var(--indicator-width, 0);
    border-radius: var(--bc-radius-capsule);
    pointer-events: none;
    transform: translateX(var(--indicator-x, 0));
}

.segmented-indicator.is-moving {
    transition: transform var(--bc-duration-bouncy) var(--bc-spring-bouncy),
                width var(--bc-duration-smooth) var(--bc-spring-smooth);
}

/* Below 840px the items drop their glyphs and tighten, so a six-item page fits beside the content rather
   than scrolling its last items out of sight. */
@media (width < 840px) {
    .segmented-item {
        padding: 0 var(--bc-space-3);
    }

    .segmented-item .icon {
        display: none;
    }
}

/* Fades on the side that has more items (set by _TabBar.cshtml's script), so an item beyond the edge never
   looks like the last one. */
.segmented.is-overflow-end {
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.segmented.is-overflow-start {
    mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent);
}

.segmented.is-overflow-start.is-overflow-end {
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* ------------------------------------------------------------- tab row (DESIGN.md 4.5)

   The segmented control and the active section's primary action share one row while both fit: the
   control as wide as its items, the action at the trailing end. When they do not fit the action wraps
   onto a line of its own, still trailing, rather than the control scrolling its last items out of sight
   behind it; the control scrolls only when it alone is wider than the page. */

.tab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-3) var(--bc-space-4);
    margin: 0 0 var(--bc-space-6);
}

.tab-row .segmented {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 0;
}

.tab-row-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--bc-space-2);
    margin-left: auto;
}

/* ------------------------------------------------ grouped lists and settings (DESIGN.md 6.8)

   Apple's grouped inset lists: solid rounded groups on the window background, a header above each group
   and an optional footer below it. A row leads with its label and trails with its value, a control or a
   chevron; rows are divided by hairlines inset from the leading edge. A settings screen (an Ayarlar tab,
   /Account) is a column of such groups: each section's name is the group's header and the section's body
   the group, holding its one form. The danger zone is the last group, its actions rows of their own. */

.group-header,
.settings-section > h2,
.danger-zone > h2 {
    margin: 0;
    padding: 0 var(--bc-space-4);
    color: var(--bc-label);
    font-size: var(--bc-type-headline-size);
    font-weight: var(--bc-type-headline-weight);
    line-height: var(--bc-type-headline-line);
    letter-spacing: var(--bc-type-headline-tracking);
}

.group-footer {
    margin: 0;
    padding: 0 var(--bc-space-4);
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-footnote-size);
    font-weight: var(--bc-type-footnote-weight);
    line-height: var(--bc-type-footnote-line);
    letter-spacing: var(--bc-type-footnote-tracking);
}

.group,
.danger-zone-actions {
    margin: 0;
    padding: 0;
    overflow: clip;
    border-radius: var(--bc-radius-group);
    background: var(--bc-content);
    list-style: none;
}

.group > *,
.danger-zone-actions > * {
    position: relative;
}

/* The hairline between two rows, inset from the leading edge as Apple's lists draw it. */
.group > * + *::before,
.danger-zone-actions > * + *::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: var(--bc-space-4);
    border-top: 1px solid var(--bc-separator);
    pointer-events: none;
}

.group-row {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
    min-height: var(--bc-row-height);
    padding: var(--bc-space-1) var(--bc-space-4);
    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);
}

.group-row-icon {
    flex: 0 0 auto;
    color: var(--bc-tint);
    font-size: 20px;
}

.group-row-label {
    flex: 1 1 auto;
    min-width: 0;
}

.group-row-value {
    min-width: 0;
    color: var(--bc-label-secondary);
    text-align: end;
    overflow-wrap: anywhere;
}

.group-row > .portal-field-inline {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* A row that opens a page: the whole row is the link, a chevron at its end. */
a.group-row,
a.group-row:hover,
a.group-row:focus {
    color: var(--bc-label);
    text-decoration: none;
}

a.group-row {
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out);
}

@media (hover: hover) {
    a.group-row:hover {
        background: var(--bc-fill);
    }
}

a.group-row:active {
    background: var(--bc-fill-hover);
}

a.group-row:focus-visible {
    outline-offset: -2px;
}

.group-row-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--bc-label-tertiary);
    font-size: 20px;
}

/* A row that is an action: the button is the row, its label in the accent (or red when it destroys). The
   danger zone's buttons are drawn this way whatever their variant. */
.danger-zone-item {
    display: flex;
}

.danger-zone-item > form {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

:is(.group-button, .danger-zone .danger-zone-item .btn) {
    --btn-fill: transparent;
    --btn-fill-hover: var(--bc-fill);
    --btn-fill-pressed: var(--bc-fill-hover);
    --btn-label: var(--bc-tint);
    justify-content: flex-start;
    gap: var(--bc-space-3);
    width: 100%;
    min-height: var(--bc-row-height);
    padding: var(--bc-space-1) var(--bc-space-4);
    border-radius: 0;
    font-weight: 400;
    text-align: start;
    white-space: normal;
}

:is(.group-button-destructive, .danger-zone .danger-zone-item .btn-destructive) {
    --btn-label: var(--bc-destructive);
}

:is(.group-button, .danger-zone .danger-zone-item .btn):active {
    transform: none;
}

:is(.group-button, .danger-zone .danger-zone-item .btn):focus-visible {
    outline-offset: -2px;
}

:is(.group-button, .danger-zone .danger-zone-item .btn) .icon {
    font-size: 20px;
}

/* The account's sessions on /Account (D80): the browser with its chips on one line, when it signed in and was last
   used under it, and the end-session button trailing. */
.session-row {
    padding-block: var(--bc-space-2);
}

.session-row-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-2);
}

.session-row-meta {
    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);
}

.session-row > form {
    flex: 0 0 auto;
    margin: 0;
}

/* A settings screen: the groups in one readable column. */
.settings {
    display: grid;
    gap: var(--bc-space-8);
    max-width: 720px;
}

.settings-section,
.danger-zone {
    display: grid;
    gap: var(--bc-space-2);
    min-width: 0;
}

/* A settings group holds one form whose fields keep their label above (DESIGN.md 6.2), so the group is
   padded rather than divided into rows. */
.settings-section-body {
    min-width: 0;
    padding: var(--bc-space-4);
    border-radius: var(--bc-radius-group);
    background: var(--bc-content);
}

.settings-form {
    margin: 0;
}

/* Groups a form's fields so that one attribute disables them all for a viewer who may read but not
   change them; it draws nothing itself. */
.settings-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* One form may span several groups (organization Ayarlar, DESIGN.md 7.2): they keep the screen's distance
   between groups, and its one save follows the last. */
.settings-form:has(> .settings-fieldset > .settings-section) {
    display: grid;
    gap: var(--bc-space-4);
}

.settings-form:has(> .settings-fieldset > .settings-section) > .workspace-banner {
    margin-bottom: 0;
}

.settings-fieldset:has(> .settings-section) {
    display: grid;
    gap: var(--bc-space-8);
}

/* The group's padding is the distance below its last field. */
.settings-section-body > .portal-field:last-child,
.settings-section-body > .settings-media:last-child > .portal-field {
    margin-bottom: 0;
}

.settings-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--bc-space-2);
    margin-top: var(--bc-space-2);
}

/* A picture or logo beside the form that changes it; the form drops under it when there is no room. */
.settings-media {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--bc-space-4);
}

.settings-media > .settings-form,
.settings-media > .portal-field {
    flex: 1 1 280px;
    min-width: 0;
}

/* ----------------------------------------------------------- sheets (DESIGN.md 6.6)

   Every form dialog is a glass sheet: centred and at most 560px wide on desktop and tablet, a bottom sheet
   with a grabber on phones. The title leads, the fields scroll between it and the actions, so a long form
   never loses either; the corners never cut the scrollbar, since only the middle scrolls. It springs open
   over the scrim. Without script a server-opened sheet shows inline, in the page flow, on a solid surface
   (DESIGN.md 6.6.1). Native <dialog>; dialog.js upgrades it. */

html:has(dialog:is(.sheet, .alert):modal) {
    overflow: hidden;
}

/* A page that had a scrollbar keeps its gutter while locked (dialog.js and confirm-dialog.js set has-scrollbar as
   they open), so the content does not widen under the sheet and jump back when it closes; the empty track stays
   where the scrollbar was. */
html.has-scrollbar:has(dialog:is(.sheet, .alert):modal) {
    scrollbar-gutter: stable;
}

.sheet {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--bc-space-6));
    max-width: 560px;
    max-height: calc(100% - 2 * var(--bc-space-6));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--bc-glass-border);
    border-radius: var(--bc-radius-sheet);
    background: var(--bc-glass-regular);
    -webkit-backdrop-filter: var(--bc-glass-regular-filter);
    backdrop-filter: var(--bc-glass-regular-filter);
    color: var(--bc-label);
    box-shadow: var(--bc-shadow-3);
    transition: opacity var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-smooth) var(--bc-spring-smooth),
                overlay var(--bc-duration-smooth) allow-discrete,
                display var(--bc-duration-smooth) allow-discrete;
}

.sheet[open] {
    display: flex;
    flex-direction: column;
}

.sheet:not([open]) {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
}

@starting-style {
    .sheet[open]:modal {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
}

/* Without script: inline, in the page flow, solid like the content around it. */
.sheet[open]:not(:modal) {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 0 var(--bc-space-6);
    overflow: visible;
    border-color: var(--bc-separator);
    background: var(--bc-content);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--bc-shadow-1);
}

:is(.sheet, .alert)::backdrop {
    background: transparent;
    transition: background-color var(--bc-duration-fade) var(--bc-ease-out),
                overlay var(--bc-duration-smooth) allow-discrete,
                display var(--bc-duration-smooth) allow-discrete;
}

:is(.sheet, .alert)[open]::backdrop {
    background: var(--bc-scrim);
}

@starting-style {
    :is(.sheet, .alert)[open]::backdrop {
        background: transparent;
    }
}

.sheet-form {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

.sheet-title {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--bc-space-6) var(--bc-space-6) var(--bc-space-2);
    color: var(--bc-label);
    font-size: var(--bc-type-title-1-size);
    font-weight: var(--bc-type-title-1-weight);
    line-height: var(--bc-type-title-1-line);
    letter-spacing: var(--bc-type-title-1-tracking);
    overflow-wrap: anywhere;
}

.sheet-content {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    padding: var(--bc-space-2) var(--bc-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sheet:not(:modal) .sheet-content {
    overflow: visible;
}

.sheet-content > :last-child {
    margin-bottom: 0;
}

.sheet-supporting {
    margin: 0 0 var(--bc-space-4);
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-callout-size);
    font-weight: var(--bc-type-callout-weight);
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
    overflow-wrap: anywhere;
}

.sheet-content .workspace-banner {
    margin-bottom: var(--bc-space-4);
}

.sheet-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bc-space-2);
    padding: var(--bc-space-4) var(--bc-space-6) var(--bc-space-6);
}

/* ------------------------------------------------- bottom sheets on phones (DESIGN.md 6.6)

   Along the window's bottom edge, 28px top corners, a grabber, sliding up on the smooth spring. The
   actions move to the top as an Apple sheet's bar: Vazgeç leading, the confirm trailing (a sheet with
   only a dismiss puts it trailing), the title under them across the width, then the fields. The grabber
   is decoration: the sheet is not dragged, Vazgeç and Escape close it. */

@media (width < 600px) {
    .sheet:modal {
        width: 100%;
        max-width: none;
        max-height: calc(100% - var(--bc-space-10) - env(safe-area-inset-top, 0px));
        margin: auto 0 0;
        border-bottom: 0;
        border-radius: var(--bc-radius-bottom-sheet) var(--bc-radius-bottom-sheet) 0 0;
    }

    .sheet:not([open]) {
        opacity: 1;
        transform: translateY(100%);
    }

    @starting-style {
        .sheet[open]:modal {
            opacity: 1;
            transform: translateY(100%);
        }
    }

    .sheet:modal .sheet-form {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .sheet:modal .sheet-form::before {
        content: "";
        grid-row: 1;
        grid-column: 1 / -1;
        justify-self: center;
        width: 36px;
        height: 5px;
        margin-top: var(--bc-space-2);
        border-radius: var(--bc-radius-capsule);
        background: var(--bc-separator-strong);
        opacity: 0.6;
    }

    .sheet:modal .sheet-actions {
        display: contents;
    }

    .sheet:modal .sheet-actions > [data-dialog-close] {
        grid-row: 2;
        grid-column: 1;
        margin: var(--bc-space-2) 0 0 var(--bc-space-4);
    }

    .sheet:modal .sheet-actions > :not([data-dialog-close]),
    .sheet:modal .sheet-actions:not(:has(> :not([data-dialog-close]))) > [data-dialog-close] {
        grid-row: 2;
        grid-column: 3;
        margin: var(--bc-space-2) var(--bc-space-4) 0 0;
    }

    /* Two or more actions besides Vazgeç — the account's Askıya al and Pasifleştir (D56), the operators'
       Serbest bırak and Aktar (D58) — would share one cell. They share the header row instead: Vazgeç
       leading, the others trailing in their order. */
    .sheet:modal .sheet-actions:has(> :not([data-dialog-close]) ~ :not([data-dialog-close])) {
        display: flex;
        grid-row: 2;
        grid-column: 1 / -1;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--bc-space-2);
        margin: var(--bc-space-2) var(--bc-space-4) 0;
        padding: 0;
    }

    .sheet:modal .sheet-actions:has(> :not([data-dialog-close]) ~ :not([data-dialog-close])) > * {
        margin: 0;
    }

    .sheet:modal .sheet-actions:has(> :not([data-dialog-close]) ~ :not([data-dialog-close])) > [data-dialog-close] {
        margin-right: auto;
    }

    .sheet:modal .sheet-title {
        grid-row: 3;
        grid-column: 1 / -1;
        padding: var(--bc-space-4) var(--bc-space-4) var(--bc-space-1);
    }

    .sheet:modal .sheet-content {
        grid-row: 4;
        grid-column: 1 / -1;
        padding: var(--bc-space-2) var(--bc-space-4) calc(var(--bc-space-6) + env(safe-area-inset-bottom, 0px));
    }
}

/* ----------------------------------------------------------- alerts (DESIGN.md 6.6)

   bcConfirm's dialog: a small centred glass alert, its title and message centred, the two actions side by
   side as equal capsules (stacked on phones), Vazgeç first. It pops in from a little larger, as Apple's do. */

.alert {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--bc-space-8));
    max-width: 320px;
    margin: auto;
    padding: var(--bc-space-5) var(--bc-space-5) var(--bc-space-4);
    border: var(--bc-glass-border);
    border-radius: var(--bc-radius-sheet);
    background: var(--bc-glass-regular);
    -webkit-backdrop-filter: var(--bc-glass-regular-filter);
    backdrop-filter: var(--bc-glass-regular-filter);
    color: var(--bc-label);
    box-shadow: var(--bc-shadow-3);
    text-align: center;
    transition: opacity var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy),
                overlay var(--bc-duration-snappy) allow-discrete,
                display var(--bc-duration-snappy) allow-discrete;
}

.alert:not([open]) {
    opacity: 0;
    transform: scale(0.96);
}

@starting-style {
    .alert[open] {
        opacity: 0;
        transform: scale(1.08);
    }
}

.alert-title {
    margin: 0;
    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);
    overflow-wrap: anywhere;
}

.alert-message {
    margin: var(--bc-space-2) 0 0;
    color: var(--bc-label);
    font-size: var(--bc-type-callout-size);
    font-weight: var(--bc-type-callout-weight);
    line-height: var(--bc-type-callout-line);
    letter-spacing: var(--bc-type-callout-tracking);
    overflow-wrap: anywhere;
}

.alert-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bc-space-2);
    margin-top: var(--bc-space-5);
}

.alert-actions > .btn {
    min-width: 0;
    white-space: normal;
}

@media (width < 600px) {
    .alert-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------ menus (DESIGN.md 6.7)

   One menu surface on the regular glass: the account menu, the sign-in pages' language menu and the
   overflow menus. Rows are 32px (44px on phones) with 7px corners inside a 5px inset; under the pointer a
   row takes the accent, its label and glyph white, as a macOS menu does; keyboard focus draws the ring.
   A popover menu springs from its button; the layouts place theirs (app.css, admin-auth.css), so the
   motion here is written with no specificity of its own. */

.menu {
    box-sizing: border-box;
    min-width: 200px;
    max-width: min(320px, calc(100vw - 2 * var(--bc-space-4)));
    margin: 0;
    padding: 5px;
    border: var(--bc-glass-border);
    border-radius: var(--bc-radius-menu);
    background: var(--bc-glass-popover);
    -webkit-backdrop-filter: var(--bc-glass-regular-filter);
    backdrop-filter: var(--bc-glass-regular-filter);
    color: var(--bc-label);
    box-shadow: var(--bc-shadow-3);
}

:where(.menu[popover]) {
    position: fixed;
    inset: auto;
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
    transform-origin: top right;
    transition: opacity var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy),
                overlay var(--bc-duration-snappy) allow-discrete,
                display var(--bc-duration-snappy) allow-discrete;
}

:where(.menu[popover]:popover-open) {
    opacity: 1;
    transform: none;
}

@starting-style {
    :where(.menu[popover]:popover-open) {
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
    }
}

.menu-form {
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--bc-label);
    font-family: var(--bc-font-family);
    font-size: var(--bc-type-body-size);
    font-weight: 400;
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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

.menu-item:focus-visible {
    outline-offset: -2px;
}

.menu-item .icon {
    flex: 0 0 auto;
    color: var(--bc-label-secondary);
    font-size: 18px;
}

.menu-item-destructive,
.menu-item-destructive:is(:hover, :focus),
.menu-item-destructive .icon {
    color: var(--bc-destructive);
}

.menu-check {
    margin-left: auto;
    color: var(--bc-tint);
}

@media (hover: hover) {
    .menu-item:hover {
        background: var(--bc-tint-fill);
    }

    .menu-item-destructive:hover {
        background: var(--bc-destructive-fill);
    }

    .menu-item:hover,
    .menu-item:hover .icon {
        color: var(--bc-on-tint);
    }

    /* The ring would vanish on the accent; the highlight already marks the row. */
    .menu-item:hover:focus-visible {
        outline-color: var(--bc-on-tint);
    }
}

.menu-item:active {
    background: color-mix(in srgb, var(--bc-tint-fill) 86%, var(--bc-label));
    color: var(--bc-on-tint);
}

.menu-item:active .icon {
    color: var(--bc-on-tint);
}

/* A destructive row (Çıkış yap, Organizasyondan ayrıl) deepens its own red under the press, as its hover is red. */
.menu-item-destructive:active {
    background: color-mix(in srgb, var(--bc-destructive-fill) 86%, #000);
}

@media (width < 600px) {
    .menu-item {
        min-height: var(--bc-row-height);
    }
}

/* A titled group of a menu (the account menu's Görünüm and Dil). */
.menu-section {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--bc-separator);
}

.menu-section[hidden] {
    display: none;
}

.menu-label {
    margin: 0;
    padding: var(--bc-space-1) 10px;
    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);
}

.menu-divider {
    margin: 5px 10px;
    border: 0;
    border-top: 1px solid var(--bc-separator);
}

/* The language button: the current language's flag where an icon would be. It and its menu need the
   popover attribute; a browser without it gets neither and keeps the language it has. Flags differ in
   proportion; each is cropped to the same 3:2 box. The outline keeps a white field visible on a light
   surface. */
.language-flag {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    outline: 1px solid var(--bc-separator);
}

.language-menu {
    min-width: 180px;
}

.language-menu .language-menu-item[aria-current="true"] {
    font-weight: 600;
}

@supports not selector(:popover-open) {
    .language-button,
    .language-menu {
        display: none;
    }
}

/* The overflow menu (DESIGN.md 6.7): a page's rarely used actions, such as leaving a project or an
   organization, behind a "more" icon button instead of beside the heading. A details element, so it opens
   without a script; menu.js adds light dismiss and Escape. The menu hangs under the button's trailing edge. */
.overflow-menu {
    position: relative;
}

.overflow-menu > summary {
    list-style: none;
    cursor: pointer;
}

.overflow-menu > summary::-webkit-details-marker {
    display: none;
}

.overflow-menu > .menu {
    position: absolute;
    top: calc(100% + var(--bc-space-1));
    right: 0;
    z-index: 30;
    transform-origin: top right;
    transition: opacity var(--bc-duration-fade) var(--bc-ease-out),
                transform var(--bc-duration-snappy) var(--bc-spring-snappy);
}

@starting-style {
    .overflow-menu[open] > .menu {
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
    }
}

.overflow-menu > .menu .menu-item {
    white-space: nowrap;
}

/* ------------------------------------------------- bottom sheets (DESIGN.md 4.4, 6.6)

   The pieces the popover bottom sheets share (the phone's Daha fazla sheet and, on phones, the account
   menu); app.css places them along the window's bottom edge. */
.bottom-sheet-grabber {
    flex: 0 0 auto;
    width: 36px;
    height: 5px;
    margin: 0 auto var(--bc-space-2);
    border-radius: var(--bc-radius-capsule);
    background: var(--bc-separator-strong);
    opacity: 0.6;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-2);
    padding: 0 0 var(--bc-space-2) var(--bc-space-2);
}

.bottom-sheet-title {
    margin: 0;
    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);
}

.bottom-sheet-close {
    background: var(--bc-fill);
}

/* The location template picker (D53), on the Konumlar tab and in the Yeni proje dialog: a select, then
   each template's count fields in its own group. With the script only the chosen group shows, and the
   select already names it, so its legend is dropped. */
.location-template-picker {
    display: grid;
    gap: var(--bc-space-4);
}

.location-template-group {
    display: grid;
    gap: var(--bc-space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.location-template-group legend {
    padding: 0;
    color: var(--bc-label);
    font-size: var(--bc-type-headline-size);
    font-weight: var(--bc-type-headline-weight);
    line-height: var(--bc-type-headline-line);
    letter-spacing: var(--bc-type-headline-tracking);
}

.location-template-picker.is-enhanced .location-template-group legend {
    display: none;
}

.location-template-summary {
    margin: 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);
}

.location-template-questions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--bc-space-4);
}

/* Inside the picker the grids space the fields: a field's own margins, the dialog's first-field
   allowance included, would stack on the gaps and drop the first count below its neighbours. */
.location-template-picker .portal-field,
.sheet-content .location-template-questions > .portal-field:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

.location-template-questions {
    align-items: start;
    padding-top: var(--bc-space-2);
}

/* ------------------------------------------------------------- device access (D72)

   The Cihazlar field of the project invite and access dialogs: the Tüm cihazlar / Seçili cihazlar select,
   and under it a scrolling list of the project's devices, one checkbox row each, the serial number with
   where it sits beneath. fields.js hides the list until Seçili cihazlar is chosen. */
.device-access[hidden],
.device-access-list[hidden] {
    display: none;
}

.device-access-list {
    max-height: 260px;
    min-width: 0;
    margin: 0 0 var(--bc-space-4);
    padding: var(--bc-space-2) var(--bc-space-3);
    overflow-y: auto;
    border: 1px solid var(--bc-separator);
    border-radius: var(--bc-radius-field);
    overscroll-behavior: contain;
}

.device-access-list > .field-checkbox {
    margin: 0;
    padding: var(--bc-space-2) 0;
}

.device-access-list > .field-checkbox + .field-checkbox {
    border-top: 1px solid var(--bc-separator);
}

.device-access-label {
    display: grid;
    min-width: 0;
}

.device-access-serial {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.device-access-location,
.device-access-empty {
    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);
}

.device-access-empty {
    margin: var(--bc-space-1) 0;
}

/* --------------------------------------------------------------- forced colours (DESIGN.md 9)

   Windows High Contrast and every other forced-colours mode replace the palette with the viewer's
   system colours and drop backgrounds, gradients and box-shadows. Glass then falls back to Canvas with
   its rim, which already reads. What would be lost is everything that is drawn only by a fill or a
   shadow: the boundary of a field and of a button, a checkbox's mark and a switch, and which item is the
   current one. Those come back here in system colours; outlines (the focus ring) survive on their own. */
@media (forced-colors: active) {
    /* Fields draw their boundary as an inset shadow; an outline inside the box takes its place. */
    .portal-field > :is(input, select, textarea),
    .data-table-filter > :is(input, select),
    .field-select > select,
    .global-search-field > input {
        outline: 1px solid FieldText;
        outline-offset: -1px;
    }

    .portal-field > :is(input, select, textarea):focus-visible,
    .data-table-filter > :is(input, select):focus-visible,
    .field-select > select:focus-visible,
    .global-search-field > input:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }

    /* A capsule button is a fill and a label; the fill becomes a ButtonText rim. */
    .btn {
        outline: 1px solid ButtonText;
        outline-offset: -1px;
    }

    .btn:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .btn:disabled {
        outline-color: GrayText;
        color: GrayText;
    }

    /* The checkbox's tick and the radio's dot are a background behind a mask. */
    .checkbox > input:is(:checked, :indeterminate),
    .radio > input:checked {
        border-color: Highlight;
        background: Highlight;
    }

    .checkbox > .checkbox-mark,
    .radio > .radio-mark {
        background: HighlightText;
    }

    .checkbox > input:disabled + .checkbox-mark,
    .radio > input:disabled + .radio-mark {
        background: GrayText;
    }

    /* The switch is one input painted with a gradient thumb: it keeps its own drawing in system colours. */
    input.switch {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
        background-color: Canvas;
        background-image: radial-gradient(circle closest-side, CanvasText calc(100% - 4px), transparent calc(100% - 3.5px));
    }

    input.switch:checked {
        border-color: Highlight;
        background-color: Highlight;
        background-image: radial-gradient(circle closest-side, HighlightText calc(100% - 4px), transparent calc(100% - 3.5px));
    }

    input.switch:disabled {
        border-color: GrayText;
        background-image: radial-gradient(circle closest-side, GrayText calc(100% - 4px), transparent calc(100% - 3.5px));
    }

    /* The current or chosen item of every navigation and choice: Highlight, as the system draws a selection. */
    .nav-item[aria-current="page"],
    .nav-item[aria-current="page"]:hover,
    .nav-item[aria-current="page"]:focus,
    .phone-tab[aria-current="page"],
    .phone-tab.is-current,
    .more-sheet-item[aria-current="page"],
    .account-menu-choice[aria-pressed="true"],
    .global-search-option[aria-selected="true"],
    .language-menu .language-menu-item[aria-current="true"],
    .segmented .segmented-item[aria-current="page"],
    .segmented.is-enhanced .segmented-item[aria-current="page"] {
        /* System colours only, so the text needs no backplate (which would draw Canvas over the Highlight). */
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    /* Their glyphs, counts and secondary text keep their own colours under forced-color-adjust: none. */
    :is(.nav-item[aria-current="page"], .phone-tab[aria-current="page"], .phone-tab.is-current,
        .more-sheet-item[aria-current="page"], .account-menu-choice[aria-pressed="true"],
        .global-search-option[aria-selected="true"], .language-menu .language-menu-item[aria-current="true"],
        .segmented .segmented-item[aria-current="page"]) * {
        color: HighlightText;
    }

    /* The segmented control's sliding capsule is a background; the current item carries Highlight instead. */
    .segmented-indicator {
        display: none;
    }
}