/* =============================================================================
   GitCuTi — visual system

   Two rules run through everything below.

   1. Prose is human, data is machine-set. Anything a person wrote (ticket titles,
      comments, descriptions) is IBM Plex Sans. Anything the system knows (ticket
      numbers, timestamps, repository names, field labels, counts) is IBM Plex Mono
      with tabular figures. That split is what makes the interface read as technical
      without pushing jargon at the customer.

   2. Panels are drawn with an edge, not a shadow. Only things that genuinely float —
      menus, dialogs, the snackbar — cast one.

   Colours mirror Theme/GitCutiPalette.cs, which feeds MudBlazor. The tokens here are
   for the few surfaces MudBlazor does not own: the transfer rail, readouts, labels.
   Change a colour in one file and change it in the other.
   ============================================================================= */

:root {
    --gc-ground: #EBECEF;
    --gc-surface: #FFFFFF;
    --gc-raised: #F5F6F8;
    --gc-ink: #111418;
    --gc-ink-muted: #4E5661;
    --gc-ink-faint: #646B76;
    --gc-edge: #D6DAE0;
    --gc-edge-strong: #8B939E;
    --gc-signal: #2B32C4;
    --gc-signal-soft: #EDEEFA;
    --gc-live: #0F6E4A;
    --gc-hold: #8A5A00;
    --gc-fault: #B3261E;
    --gc-accent: #0F6E63;
    --gc-accent-warm: #A6206A;
    --gc-overlay: #0A0B0D;

    /* Avatar-Flaechen fuer Nutzer ohne Bild. Eine feste, durchnummerierte Reihe: UserAvatar waehlt
       ueber einen stabilen Hash, die Reihenfolge darf sich deshalb nicht aendern — sonst wechselt
       jeder seine Farbe. Hell: dunkle Flaeche, heller Text. */
    --gc-avatar-ink: #FFFFFF;
    --gc-avatar-1: #2B32C4;
    --gc-avatar-2: #0F6E63;
    --gc-avatar-3: #8A5A00;
    --gc-avatar-4: #B3261E;
    --gc-avatar-5: #0F6E4A;
    --gc-avatar-6: #5B4B8A;
    --gc-avatar-7: #0B6280;
    --gc-avatar-8: #7A3E12;
    --gc-avatar-9: #45505E;
    --gc-avatar-10: #8A1F5C;
    --gc-avatar-11: #3C6E1F;
    --gc-avatar-12: #1F4E8C;

    --gc-sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --gc-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
    --gc-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

[data-theme="dark"] {
    --gc-ground: #0E1013;
    --gc-surface: #171A1E;
    --gc-raised: #1E2228;
    --gc-ink: #E6E9ED;
    --gc-ink-muted: #98A0AB;
    --gc-ink-faint: #868F9B;
    --gc-edge: #272C34;
    --gc-edge-strong: #5C6674;
    --gc-signal: #7C84FF;
    --gc-signal-soft: #1C2036;
    --gc-live: #41C08A;
    --gc-hold: #E0A73F;
    --gc-fault: #FF6B60;
    --gc-accent: #3FBDB0;
    --gc-accent-warm: #F075B0;
    --gc-overlay: #0A0B0D;

    /* Dunkel gedreht: helle Flaeche, dunkler Text — die hellen Toene der Light-Reihe waeren auf
       dunklem Grund flau, und Weiss darauf faellt unter AA. */
    --gc-avatar-ink: #0E1013;
    --gc-avatar-1: #7C84FF;
    --gc-avatar-2: #3FBDB0;
    --gc-avatar-3: #E0A73F;
    --gc-avatar-4: #FF6B60;
    --gc-avatar-5: #41C08A;
    --gc-avatar-6: #A99BE0;
    --gc-avatar-7: #4FB3E8;
    --gc-avatar-8: #D9905A;
    --gc-avatar-9: #97A1AF;
    --gc-avatar-10: #F075B0;
    --gc-avatar-11: #8FCB63;
    --gc-avatar-12: #6FA3E8;
}

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--gc-sans);
    -webkit-font-smoothing: antialiased;
}

/* Paints the page before MudBlazor's own variables land, so a dark reader never sees
   a white frame during the first render. */
body {
    background: var(--gc-ground);
    color: var(--gc-ink);
}

h1:focus {
    outline: none;
}

::selection {
    background: var(--gc-signal-soft);
    color: var(--gc-ink);
}

/* One focus ring everywhere, in the signal colour, always visible on keyboard.

   MudBlazor ships `button:focus { outline: none }` and `.mud-button-root { outline: 0 }`, which
   outrank a bare :focus-visible and leave keyboard users with no indicator at all. Matching every
   one of those selectors would be a losing game, so this is the one place !important earns its
   keep — never for looks, only to put back an indicator the library removed.

   tabindex="-1" is excluded: that marks a programmatic focus target — Blazor parks focus on the
   page heading after navigation — not something a keyboard user tabbed to. Right for a screen
   reader, pure noise as a visible ring around a heading. */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--gc-signal) !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* The exception, and it has to come after and outrank the rule above. */
[tabindex="-1"]:focus-visible {
    outline: none !important;
}

/* -----------------------------------------------------------------------------
   Typographic utilities
   -------------------------------------------------------------------------- */

/* A field name, a column header, a unit — never a sentence. */
.gc-label {
    font-family: var(--gc-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gc-ink-faint);
    display: block;
    line-height: 1.6;
}

/* A machine value: id, count, timestamp, repository, branch. */
.gc-mono {
    font-family: var(--gc-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.gc-readout {
    font-family: var(--gc-condensed);
    font-variant-numeric: tabular-nums;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--gc-ink);
}

.gc-hint {
    font-family: var(--gc-mono);
    font-size: .6875rem;
    line-height: 1.5;
    color: var(--gc-ink-faint);
}

/* -----------------------------------------------------------------------------
   Wordmark — carries the same rail motif the ticket list uses.
   -------------------------------------------------------------------------- */

/* a.mud-typography wins on specificity, so the wordmark has to match it to stay ink-coloured
   rather than turning into a blue link. */
.gc-wordmark,
a.gc-wordmark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--gc-mono);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--gc-ink);
    text-decoration: none;
}

.gc-wordmark::before {
    content: "";
    width: 2px;
    height: 1.125rem;
    background: var(--gc-signal);
    flex: none;
}

.gc-wordmark:hover,
a.gc-wordmark:hover {
    color: var(--gc-signal);
}

/* The path from the wordmark to where you are: ISSUES / #128 */
.gc-crumb {
    font-family: var(--gc-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gc-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   Signature: the transfer rail

   A rail down the left edge of every ticket row, carrying two facts on two channels.

   Colour is the ticket status, taken from the colour the tenant configured, so a list
   can be scanned for "what state is everything in" without reading a word. Shape is the
   crossing to GitHub: dashed line and hollow node while the ticket is local, solid line
   and filled node once it carries a GitHub number.

   The row states both in words too — the status chip, and the number or "local" — so the
   rail is shorthand, never the only signal. The status colour arrives per row as
   --gc-rail-color; the fallbacks below cover a ticket whose status has none.
   -------------------------------------------------------------------------- */

/* One carrier for both places the rail appears: the first cell of a table row, and a row of
   the recent-activity list. */
.gc-rail {
    position: relative;
    padding-left: 20px !important;
}

.gc-rail::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* The node sits on the line, so it needs a ring in the surface colour to read as a node rather
   than melting into it. */
.gc-rail::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: var(--gc-surface);
    box-shadow: 0 0 0 2px var(--gc-surface);
    box-sizing: border-box;
}

.gc-rail--remote::before,
.gc-rail--remote::after {
    background: var(--gc-rail-color, var(--gc-signal));
}

.gc-rail--local::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--gc-rail-color, var(--gc-edge-strong)) 0 3px,
        transparent 3px 7px
    );
}

.gc-rail--local::after {
    border: 2px solid var(--gc-rail-color, var(--gc-edge-strong));
}

/* The recent-activity list on the home page: the ticket list, condensed to what fits above
   the fold, using the same rail so the two read as one thing. */
.gc-list {
    border: 1px solid var(--gc-edge);
}

.gc-list-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .875rem;
    padding: .625rem 1rem .625rem 20px;
    border-bottom: 1px solid var(--gc-edge);
    color: inherit;
    text-decoration: none;
    transition: background-color .12s;
}

.gc-list-row:last-child {
    border-bottom: none;
}

.gc-list-row:hover {
    background: var(--mud-palette-table-hover);
}

.gc-list-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
}

.gc-list-row__time {
    font-size: .6875rem;
    color: var(--gc-ink-faint);
    white-space: nowrap;
}

@media (max-width: 599px) {
    .gc-list-row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        row-gap: .375rem;
    }

    .gc-list-row__time {
        grid-column: 2;
    }
}

/* Nav rail in the drawer footer: which deployment mode this instance runs in. Admin-only, and
   the kind of fact that belongs on a nameplate rather than in a settings page. */
.gc-drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The collapse control, at the edge it pulls the drawer towards. */
.gc-drawer__toggle {
    display: flex;
    justify-content: flex-end;
    padding: .5rem .5rem 0;
}

.gc-drawer--mini .gc-drawer__toggle {
    justify-content: center;
    padding: .5rem 0 0;
}

/* MudBlazor hides the labels of a collapsed mini drawer with a rule that expects .mud-navmenu to
   be a direct child of the drawer content. The wrapper this menu needs for its footer breaks that
   chain, so the same thing is said again here — and for the group headers, which MudBlazor's rule
   does not cover either. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text,
.mud-drawer--closed.mud-drawer-mini .mud-nav-link-expand-icon {
    display: none;
}

.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    justify-content: center;
}

.gc-drawer__foot {
    margin-top: auto;
    padding: .875rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

/* The number itself, or the word that stands in for it. */
.gc-ticket-no {
    font-family: var(--gc-mono);
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    color: var(--gc-ink);
}

.gc-ticket-no--local {
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gc-ink-muted);
}

/* Square with a small radius the way GitHub sets them, because in a table an avatar is a field
   value. The one exception is the signed-in user's own picture in the header: that is a person,
   not a record, and it stays round. */
.mud-avatar.gc-avatar-square {
    border-radius: 3px;
}

/* MudTooltip wraps its content in a block-level element with a line box, which parks anything
   inline — an avatar, an icon — on the text baseline and leaves descender space underneath it.
   That is what made the account picture in the header sit flush at the top with a gap below, and
   what nudged avatars off the column edge in the table. */
.mud-tooltip-root.mud-tooltip-inline {
    display: inline-flex;
    align-items: center;
}

/* The same fact, stated in full on the ticket page. */
.gc-transfer {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--gc-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gc-ink-faint);
}

.gc-transfer__stop {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

.gc-transfer__stop::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 2px solid var(--gc-edge-strong);
    box-sizing: border-box;
    flex: none;
}

.gc-transfer__stop--on {
    color: var(--gc-ink);
}

.gc-transfer__stop--on::before {
    background: var(--gc-signal);
    border-color: var(--gc-signal);
}

.gc-transfer__line {
    flex: 1;
    min-width: 24px;
    max-width: 96px;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--gc-edge-strong) 0 3px,
        transparent 3px 7px
    );
}

.gc-transfer--crossed .gc-transfer__line {
    background: var(--gc-signal);
}

/* -----------------------------------------------------------------------------
   MudBlazor: edges instead of shadows
   -------------------------------------------------------------------------- */

.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-paper.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
}

/* Menus, dialogs, tooltips and the snackbar float, so they keep their shadow and lose
   the border that would read as a seam. */
.mud-popover, .mud-dialog, .mud-tooltip, .mud-snackbar, .mud-picker-popover {
    border: none;
}

/* A tooltip is an overlay, not another panel: near-black with white text in both themes, plus a
   hairline in dark mode so it separates from the surface behind it. */
.mud-tooltip.mud-tooltip-default {
    background-color: var(--gc-overlay);
    color: #FFFFFF;
    font-family: var(--gc-sans);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .01em;
    padding: 5px 9px;
}

[data-theme="dark"] .mud-tooltip.mud-tooltip-default {
    border: 1px solid var(--gc-edge-strong);
}

.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-top-color: var(--gc-overlay);
}

.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.mud-drawer .mud-navmenu {
    padding-top: .5rem;
}

/* Nav labels stay in the reading face — a customer navigates here. Only the group
   headings take the machine face, as the labelling on a panel would. */
.mud-nav-link {
    font-size: .875rem;
    border-radius: 0;
}

.mud-nav-link.active {
    box-shadow: inset 2px 0 0 var(--gc-signal);
    background: var(--gc-signal-soft);
}

/* A group header is something you click to open, not a caption on a panel, so it reads at the
   same size and in the same case as the links under it. The monospace face and the quieter
   colour are enough to mark it as the heading of a group. */
.mud-nav-group > .mud-nav-link {
    font-family: var(--gc-mono);
    font-size: .875rem;
    letter-spacing: .01em;
    color: var(--gc-ink-faint);
}

/* -----------------------------------------------------------------------------
   Tables — the densest surface in the app, and the one that has to read like a log
   -------------------------------------------------------------------------- */

.mud-table-root {
    font-variant-numeric: tabular-nums;
}

/* MudBlazor's own header rule is more specific than a bare class, so this one has to match it
   to win. */
.mud-table-root .mud-table-head th.mud-table-cell,
.mud-table-root .mud-table-head th.mud-table-cell > * {
    font-family: var(--gc-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gc-ink-faint);
    white-space: nowrap;
}

.mud-table-root .mud-table-head th.mud-table-cell {
    background: var(--gc-raised);
}

.mud-table-cell {
    border-bottom-color: var(--mud-palette-table-lines);
}


/* -----------------------------------------------------------------------------
   Chips, inputs, buttons
   -------------------------------------------------------------------------- */

.mud-chip {
    border-radius: 2px;
    font-family: var(--gc-mono);
    font-size: .6875rem;
    letter-spacing: .02em;
    height: 22px;
}

.mud-chip.mud-chip-size-small {
    height: 20px;
    font-size: .625rem;
}

.mud-button-root {
    border-radius: 3px;
}

.mud-input-outlined-border {
    border-radius: 3px;
}

.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined .mud-input-slot {
    font-size: .875rem;
}

/* The label above a field is a field name, so it follows the same rule as a column
   header — but only once it has shrunk to its resting position. */
.mud-input-label-outlined.mud-input-label-inputcontrol.mud-input-label-margin-dense {
    font-size: .8125rem;
}

/* -----------------------------------------------------------------------------
   Menus
   -------------------------------------------------------------------------- */

.gc-menu-heading {
    font-family: var(--gc-mono);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gc-ink-faint);
    padding: .625rem .875rem .25rem;
}

.gc-menu-item--on {
    color: var(--gc-signal);
    box-shadow: inset 2px 0 0 var(--gc-signal);
}

.gc-menu-item--on .mud-icon-root {
    color: var(--gc-signal);
}

/* -----------------------------------------------------------------------------
   Status filter — the panel behind the "Status" button, and the chips above the list
   -------------------------------------------------------------------------- */

.gc-filter-panel {
    min-width: 280px;
    padding: 0 .5rem .5rem;
}

.gc-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.gc-filter-panel__head .gc-menu-heading {
    padding-left: .375rem;
}

.gc-filter-panel__hint {
    padding: 0 .375rem .5rem;
}

.gc-filter-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-right: .5rem;
}

/* A count is a machine value, so it is set like every other one: mono, tabular figures. */
.gc-filter-row__count {
    margin-left: auto;
    font-family: var(--gc-mono);
    font-variant-numeric: tabular-nums;
    font-size: .6875rem;
    color: var(--gc-ink-faint);
}

/* Square like the avatars in tables: a data point, not a person. */
.gc-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: .375rem;
    flex: none;
    vertical-align: middle;
}

.gc-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-bottom: .75rem;
}

.gc-filter-chips .gc-label {
    display: inline;
    margin-right: .25rem;
}

/* -----------------------------------------------------------------------------
   Page furniture
   -------------------------------------------------------------------------- */

/* Eyebrow + title + actions, the header every page opens with. */
.gc-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--gc-edge);
    margin-bottom: 1.25rem;
}

.gc-page-head__title {
    font-family: var(--gc-condensed);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--gc-ink);
    margin: 0;
}

/* A row of readings: count, label, and what the count means. */
.gc-readout-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--gc-edge);
    background: var(--gc-surface);
}

.gc-readout-cell {
    padding: 1rem 1.125rem;
    border-right: 1px solid var(--gc-edge);
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

/* The mark belongs to the label, so it sits next to it. Pinned to the far edge it drifted away
   from what it marks as soon as the strip got wide, and it broke the left reading axis that
   label, number and note share. */
.gc-readout-cell__head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* One colour per reading, drawn from the four the palette already carries. They sit at the same
   level of saturation, which is what keeps a row of four from looking like a bag of badges. */
.gc-readout-mark {
    color: var(--gc-ink-faint);
    flex: none;
}

.gc-readout-mark--open {
    color: var(--gc-signal);
}

.gc-readout-mark--done {
    color: var(--gc-live);
}

/* Not amber: that one means "waiting" everywhere else in the app. Not blue either, which would
   compete with the signal on the first tile, and not red, which reads as a fault. */
.gc-readout-mark--teams {
    color: var(--gc-accent-warm);
}

.gc-readout-mark--repos {
    color: var(--gc-accent);
}

.gc-readout-cell:last-child {
    border-right: none;
}

@media (max-width: 599px) {
    .gc-readout-cell {
        border-right: none;
        border-bottom: 1px solid var(--gc-edge);
    }

    .gc-readout-cell:last-child {
        border-bottom: none;
    }
}

/* -----------------------------------------------------------------------------
   Markdown — customer prose, so it keeps the reading face and normal proportions
   -------------------------------------------------------------------------- */

.markdown-body {
    line-height: 1.65;
    word-wrap: break-word;
    font-size: .875rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    font-family: var(--gc-condensed);
    margin-top: 1.25em;
    margin-bottom: .5em;
    font-weight: 600;
    letter-spacing: -.005em;
}

.markdown-body h1 { font-size: 1.4em; border-bottom: 1px solid var(--gc-edge); padding-bottom: .3em; }
.markdown-body h2 { font-size: 1.2em; border-bottom: 1px solid var(--gc-edge); padding-bottom: .3em; }
.markdown-body h3 { font-size: 1.05em; }

.markdown-body p { margin: .6em 0; }

.markdown-body code {
    font-family: var(--gc-mono);
    background: var(--gc-raised);
    border: 1px solid var(--gc-edge);
    padding: .05em .35em;
    border-radius: 2px;
    font-size: .85em;
}

.markdown-body pre {
    font-family: var(--gc-mono);
    background: var(--gc-raised);
    border: 1px solid var(--gc-edge);
    padding: .875em 1em;
    border-radius: 3px;
    overflow-x: auto;
    font-size: .8125rem;
    line-height: 1.55;
}

.markdown-body pre code {
    background: none;
    border: none;
    padding: 0;
}

.markdown-body blockquote {
    border-left: 2px solid var(--gc-signal);
    margin: .75em 0;
    padding: .25em 1em;
    color: var(--gc-ink-muted);
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.75em;
    margin: .6em 0;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gc-edge);
    border-radius: 3px;
}

.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: .75em 0;
    font-size: .8125rem;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--gc-edge);
    padding: .45em .7em;
    text-align: left;
}

.markdown-body th {
    background: var(--gc-raised);
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Markdown editor
   -------------------------------------------------------------------------- */

.markdown-textarea {
    width: 100%;
    font-family: var(--gc-mono);
    font-size: .8125rem;
    line-height: 1.6;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 3px;
    resize: vertical;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.markdown-textarea:focus {
    border-color: var(--gc-signal);
    box-shadow: 0 0 0 1px var(--gc-signal);
    outline: none;
}

.markdown-textarea::placeholder {
    color: var(--gc-ink-faint);
}

.markdown-textarea.drag-over {
    border-color: var(--gc-signal);
    border-style: dashed;
    background: var(--gc-signal-soft);
}

/* -----------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Admin table toolbar
   -------------------------------------------------------------------------- */

/* Add on the left of the pair, remove on the right; Cancel joins them only while selecting.
   Right-aligned so the buttons sit above the end of the table rather than over its first
   column, where they would read as belonging to the data. */
.gc-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   Link picker — the checkbox list in an editor that ties an entry to others
   -------------------------------------------------------------------------- */

/* Members and repositories are open lists now, not a dropdown; a tenant with many users
   scrolls inside the frame instead of pushing the dialog off the screen. */
.gc-link-picker {
    max-height: 16rem;
    overflow-y: auto;
}

/* -----------------------------------------------------------------------------
   Legal footer — a nameplate, set like every other machine-written line in the app
   -------------------------------------------------------------------------- */

/* Pushed to the bottom of the main content: on a short page it rests at the foot of the window
   instead of floating halfway up, on a long one it waits at the end. */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.gc-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: .875rem 1.5rem;
    border-top: 1px solid var(--gc-edge);
    font-family: var(--gc-mono);
    font-size: .6875rem;
    letter-spacing: .01em;
    color: var(--gc-ink-faint);
}

.gc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
}

.gc-footer a {
    color: inherit;
    text-decoration: none;
}

.gc-footer a:hover {
    color: var(--gc-signal);
    text-decoration: underline;
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0 16px 16px;
}

.blazor-error-boundary {
    background: var(--gc-fault);
    padding: 1rem 1.25rem;
    color: #fff;
    font-family: var(--gc-mono);
    font-size: .8125rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--gc-edge-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gc-edge-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 5px;
}

@media (max-width: 960px) {
    .mud-main-content {
        padding-left: 0 !important;
    }
}

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