/* Shared controls. Typography and palette come from the shared stylesheets. */
:root {
    --control-height: clamp(2.25rem, calc(2rem + 1vw), 2.75rem);
    --control-padding-block: clamp(.375rem, calc(.25rem + .5vw), .6875rem);
    --control-padding-inline: clamp(.625rem, calc(.45rem + .65vw), .875rem);
    --control-gap: clamp(.75rem, calc(.5rem + 1vw), 1.25rem);
    --control-border: #506172;
    --control-background: #0a121d;
    --control-radius: .25rem;
    --control-icon-size: clamp(1rem, calc(.875rem + .5vw), 1.25rem);
    --control-height-large: clamp(2rem, calc(1.5rem + 2vw), 3rem);
    --icon-display-size: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
    --control-icon-size-large: clamp(1rem, calc(.8rem + .8vw), 1.5rem);
}

/* Explicit classes cover controls outside a field wrapper as well. */
.form-control, .field .form-control {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: var(--control-padding-block) var(--control-padding-inline);
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: var(--control-background);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-body);
    line-height: 1.5;
}
textarea.form-control, .field textarea.form-control { min-height: 7rem; resize: vertical; }
select.form-control { cursor: pointer; }
.form-control::placeholder, .field .form-control::placeholder { color: var(--subtle); opacity: 1; }
.form-control:focus, .field .form-control:focus { border-color: var(--cyan); }
.form-control[aria-invalid="true"], .field .form-control[aria-invalid="true"] { border-color: var(--error); }
.form-control:read-only:not(select), .field .form-control:read-only:not(select) { background: var(--surface-raised); }
.form-control:disabled, .field .form-control:disabled { background-color: var(--surface-raised); color: var(--subtle); border-color: var(--line); cursor: not-allowed; }

/* Keep single-select sizing consistent with other fields, including in Safari. */
select.form-control:not([multiple]):not([size]), .field select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: calc(var(--control-padding-inline) * 2 + var(--control-icon-size));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4b2c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--control-padding-inline) center;
    background-size: var(--control-icon-size);
}

.field-label, .field > label, .choice-group > legend { display: block; margin-bottom: .375rem; color: var(--text); font-size: var(--font-small); font-weight: 500; line-height: 1.5; }
.field-help, .field-error { margin: .375rem 0 0; font-size: var(--font-caption); line-height: 1.5; }
.field-help { color: var(--muted); }
.field-error { color: var(--error); }
.optional { color: var(--subtle); font-size: var(--font-caption); }
.stack-form { gap: var(--control-gap); }
.actions, .form-actions { gap: var(--control-gap); }

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: var(--control-padding-block) var(--control-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: var(--font-small);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button:hover:not(:disabled) { background: var(--blue-hover); color: #fff; }
.button-secondary { background: #182532; border-color: #3b4d5e; color: var(--text); }
.button-secondary:hover:not(:disabled) { background: #243747; border-color: #6d879d; color: var(--text); }
.button-danger { background: #b33438; border-color: #d55c60; }
.button-danger:hover:not(:disabled) { background: #c13b40; border-color: #e7797d; }
.button-small { min-height: var(--control-height); padding: .375rem .625rem; font-size: var(--font-caption); }
.button:disabled, .button:disabled:hover { background: var(--surface-raised); border-color: var(--line); color: var(--subtle); cursor: not-allowed; }

/* Keywords share the same appearance on links, filter buttons and plain labels. */
.tag-list { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .5rem; }
.tag, .common-searches .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 1.75rem;
    padding: .1875rem .5rem;
    border: 1px solid var(--control-border);
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--font-small);
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.tag, button.tag, .common-searches a.tag { color: var(--cyan); cursor: pointer; }
a.tag:hover, button.tag:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--cyan); }
button.tag[aria-pressed="true"], a.tag[aria-current]:not([aria-current="false"]) { background: var(--surface-raised); border-color: var(--cyan); }
button.tag:disabled { color: var(--subtle); border-color: var(--line); opacity: .5; cursor: not-allowed; }
.tag.tag-small { min-height: 0; padding: .0625rem .375rem; font-size: var(--font-caption); line-height: 1.4; }

/* Shared icon actions, with independent size and appearance modifiers. */
.icon-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: .375rem;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: .5rem;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: var(--font-small);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.icon-button > svg, .icon-button .icon { display: block; flex-shrink: 0; width: var(--control-icon-size); height: var(--control-icon-size); }
.icon-button > svg:not(.icon) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-button-count { font-variant-numeric: tabular-nums; }
.icon-button:hover:not(:disabled), .icon-button[aria-pressed="true"] { background: var(--surface-raised); color: var(--cyan); }
.icon-button[aria-pressed="true"] > svg { fill: currentColor; fill-opacity: .18; }
.icon-button:disabled { opacity: .4; cursor: not-allowed; }
.icon-button-large { min-width: max(var(--control-height), var(--control-height-large)); min-height: max(var(--control-height), var(--control-height-large)); }
.icon-button-large > svg, .icon-button-large .icon { width: var(--control-icon-size-large); height: var(--control-icon-size-large); }
.icon-button-outlined { aspect-ratio: 1; border: 1px solid var(--control-border); border-radius: 50%; color: var(--text); }
.icon-button-outlined:hover:not(:disabled) { border-color: var(--cyan); }
/* Keep the visible circle compact while preserving the shared hit area. */
.icon-button-large.icon-button-outlined { position: relative; border-color: transparent; background: transparent; }
.icon-button-large.icon-button-outlined::before { content: ""; position: absolute; width: var(--control-height-large); height: var(--control-height-large); border: 1px solid var(--control-border); border-radius: 50%; pointer-events: none; }
.icon-button-large.icon-button-outlined:hover:not(:disabled)::before { border-color: var(--cyan); background: var(--surface-raised); }
.icon-button-large.icon-button-outlined > svg { position: relative; }

/* Noninteractive symbols use the same scale as regular button icons. */
.ui-icon { display: inline-block; flex-shrink: 0; width: var(--control-icon-size); height: var(--control-icon-size); vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.metadata { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--muted); font-size: var(--font-small); line-height: 1.5; }
.metadata-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.byline { display: flex; align-items: center; gap: .625rem; min-width: 0; color: var(--muted); font-size: var(--font-small); line-height: 1.5; }
.byline-text { min-width: 0; overflow-wrap: anywhere; }
.byline-text a { color: inherit; text-decoration: none; }
.byline-text a:hover, .byline-text a:focus-visible { color: var(--cyan); text-decoration: underline; }
.avatar, .member-picture.avatar, .project-byline .member-picture.avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--avatar-size, clamp(2rem, calc(1.75rem + 1vw), 2.5rem)); height: auto; aspect-ratio: 1; overflow: hidden; border: 1px solid #365568; border-radius: 50%; color: #9dc9e0; background: #162a3e; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar > :is(.icon, .ui-icon) { width: 55%; height: 55%; }
.avatar-large { --avatar-size: clamp(4rem, calc(3.25rem + 3vw), 5.75rem); }
.avatar-small { --avatar-size: clamp(1.625rem, calc(1.5rem + .5vw), 2rem); }
.avatar-inline { --avatar-size: 1.5em; }
.metadata-item .icon, .button .icon { width: var(--control-icon-size); height: var(--control-icon-size); }

.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem clamp(.5rem, 1vw, .75rem); }
/* The header selector supersedes the imported site's mobile navigation sizing. */
.nav-links .nav-link, .site-header .nav-links .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: var(--control-height); padding-block: .25rem; font-size: var(--font-small); line-height: 1.5; color: var(--muted); text-decoration: none; }
.nav-links .nav-link:hover { color: var(--text); }
.nav-links .nav-link[aria-current]:not([aria-current="false"]) { color: var(--cyan); text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 2px; }

.dialog { width: min(var(--dialog-width, 30rem), calc(100% - 2rem)); max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); overflow: auto; padding: var(--panel-padding); border: 1px solid var(--control-border); border-radius: .625rem; background: var(--surface); color: var(--text); }
.dialog-wide { --dialog-width: 40rem; }
dialog.dialog:not([open]) { display: none; }
.dialog::backdrop { background: #0009; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--control-gap); margin-top: var(--control-gap); }
.status-message { padding: .75rem 1rem; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface-raised); color: var(--text); font-size: var(--font-small); line-height: 1.5; }

.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkbox, .radio, .field .checkbox, .field .radio { display: flex; align-items: flex-start; gap: .5rem; min-height: var(--control-height); margin: 0; padding-block: .625rem; color: var(--muted); font-size: var(--font-small); font-weight: 400; line-height: 1.5; cursor: pointer; }
.checkbox input, .radio input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; min-height: 0; margin: .0625rem 0 0; padding: 0; accent-color: var(--blue); }
.checkbox input:disabled, .radio input:disabled { cursor: not-allowed; }
.checkbox input:disabled + span, .radio input:disabled + span { color: var(--subtle); cursor: not-allowed; }
.form-control:focus-visible, .tag:focus-visible, .button:focus-visible, .icon-button:focus-visible, .checkbox input:focus-visible, .radio input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

@media (pointer: coarse) {
    :root { --control-height: 2.75rem; }
    a.tag, button.tag, .common-searches a.tag { min-width: var(--control-height); min-height: var(--control-height); }
}

/* Native specialised inputs retain their browser interaction. */
input.form-control[type="file"], .field input.form-control[type="file"] { overflow: hidden; padding: 0 var(--control-padding-inline) 0 0; }
.form-control::file-selector-button { margin-right: var(--space-3); padding: var(--control-padding-block) var(--control-padding-inline); border: 0; border-right: 1px solid var(--control-border); border-radius: 0; background: var(--surface-raised); color: var(--text); font: inherit; cursor: pointer; }
.form-range, .field .form-range { display: block; width: 100%; min-width: 0; min-height: var(--control-height); padding: 0; accent-color: var(--blue); cursor: pointer; }
.form-color, .field .form-color { width: calc(var(--control-height) * 1.25); height: var(--control-height); min-height: var(--control-height); padding: var(--space-1); border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-background); cursor: pointer; }
.text-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--cyan); font: inherit; font-size: var(--font-small); line-height: 1.5; text-align: left; text-decoration: none; }
.text-button:hover:not(:disabled), .text-button[aria-pressed="true"] { color: var(--text); text-decoration: underline; }
.text-button:disabled { color: var(--subtle); cursor: not-allowed; }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: .0625rem .375rem; border: 1px solid #365065; border-radius: var(--control-radius); background: #183043; color: #bad6e6; font-size: var(--font-caption); line-height: 1.4; font-weight: 500; }
.badge .icon { width: 1em; height: 1em; }
.button[hidden], .icon-button[hidden], .text-button[hidden], .form-control[hidden] { display: none; }