@layer brewery-components {
@scope (.brewery) {
/* Reusable controls and surfaces. Route styles consume these classes but must
   not redefine their geometry, state colors, or accessibility affordances. */
.button { display: inline-flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .7rem; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--field); color: var(--fg); cursor: pointer; font: inherit; font-weight: 650; line-height: 1; text-decoration: none; }
.button:hover { background: var(--accent-soft); color: var(--fg); text-decoration: none; }
.button--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.button--primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--on-accent); }
.button--danger { border-color: var(--danger); color: var(--danger); }
.button--danger:hover { border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.button--secondary { background: var(--field); }
.button--compact { min-height: 0; padding: .32rem .65rem; color: var(--accent-strong); font-size: .8rem; font-weight: 600; }
.button--compact svg { display: block; flex: 0 0 auto; width: .9rem; height: .9rem; }
.button--quiet { min-height: 0; border: 0; background: transparent; border-radius: var(--radius); color: var(--fg); justify-content: flex-start; }
.button--text { min-height: 0; padding: .35rem .15rem; border-color: transparent; background: transparent; color: var(--muted); }
.button--icon { position: relative; width: var(--nav-control-height); height: var(--nav-control-height); min-height: var(--nav-control-height); padding: 0; }
.button--icon svg { width: 1.05rem; height: 1.05rem; }

.page-stack { width: 100%; margin: .35rem 0 1.5rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.settings-panel { padding: 1rem; border: 1px solid var(--line); border-radius: calc(var(--radius) + .2rem); background: var(--panel); }
.settings-panel-wide { grid-column: 1 / -1; }
.settings-layout { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; margin-top: 1.25rem; }
.settings-nav { display: grid; align-content: start; gap: .15rem; height: max-content; padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.settings-nav a { padding: .48rem .6rem; border-radius: calc(var(--radius) - .1rem); color: var(--muted); font-size: .86rem; font-weight: 650; text-decoration: none; }
.settings-nav a:hover, .settings-nav a:focus-visible { color: var(--fg); background: var(--accent-soft); }
.settings-nav a[aria-current=page] { background: var(--accent-soft); color: var(--accent-strong); }
.settings-nav .settings-nav-danger { margin-top: .35rem; border-top: 1px solid var(--line); border-radius: 0; color: var(--danger); }
.account-settings-page { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.account-settings-page > .settings-nav { position: sticky; top: 1rem; }
.account-settings-page .account-settings { min-width: 0; }
.account-settings-page .settings-grid > * { display: none; }
.account-settings-page--profile .settings-panel:has(form[action="/account/profile"]), .account-settings-page--security .settings-panel[data-account-security], .account-settings-page--access .settings-panel:has(form[action="/account/keys"]), .account-settings-page--access .settings-panel:has(form[action="/account/tokens"]), .account-settings-page--organizations .settings-panel:has(form[action="/organizations"]), .account-settings-page--data .settings-panel:has(a[href="/api/v1/account/export"]), .account-settings-page--data .settings-panel:has(form[action="/account/delete"]), .account-settings-page--signing .settings-panel.account-gpg-keys, .account-settings-page--signing .settings-panel.account-gpg-proof { display: block; grid-column: 1 / -1; }
.admin-settings { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.admin-settings > .section-head { grid-column: 1 / -1; width: 100%; }
.admin-settings-nav { grid-column: 1; align-self: start; margin: 0; }
.admin-settings-nav .settings-nav { position: sticky; top: 1rem; }
.admin-settings > .settings-grid { grid-column: 2; margin-top: 0; }
.admin-settings .settings-panel { width: 100%; max-width: 56rem; }
.admin-settings .settings-grid > * { display: none; }
.admin-settings > .admin-settings-nav--access + .settings-grid > .settings-panel:has(form[action="/admin/settings/registration-mode"]), .admin-settings > .admin-settings-nav--access + .settings-grid > .settings-panel:has(form[action="/admin/settings/registration-tokens"]), .admin-settings > .admin-settings-nav--storage + .settings-grid > .settings-panel:has(form[action="/admin/settings/media-policy"]), .admin-settings > .admin-settings-nav--storage + .settings-grid > .settings-panel:has(form[action="/admin/settings/artifact-policy"]), .admin-settings > .admin-settings-nav--accounts + .settings-grid > .settings-panel:has(form[action="/admin/settings/users"]), .admin-settings > .admin-settings-nav--maintenance + .settings-grid > .settings-panel:has(form[action="/admin/settings/maintenance"]), .admin-settings > .admin-settings-nav--activity + .settings-grid > .settings-panel:has(.inline-actions) { display: block; grid-column: 1 / -1; }
.settings-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .8rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.settings-panel-head h2 { margin: 0; font-size: .95rem; }
.settings-panel-head p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; }
.settings-form { display: grid; gap: .75rem; max-width: 48rem; }
.settings-form button { justify-self: start; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.form-grid { display: grid; gap: .75rem; }
.form-grid.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-fieldset { margin: 0; }
.settings-list { padding: 0; margin: .8rem 0 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.settings-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.compact-empty { margin: .8rem 0 0; padding: .75rem; }
.badge { display: inline-block; padding: .12rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.badge-mirror { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.badge--fork { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); background: var(--accent-soft); }
.badge--fork svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.md-editor { border: 1px solid var(--border-control); border-radius: var(--radius); overflow: hidden; background: var(--panel); margin-top: .35rem; align-self: stretch; }
.md-editor-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); background: var(--code-bg); }
.md-tabs { display: flex; gap: .2rem; }
.md-tab { padding: .3rem .7rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: .85rem; font-weight: 600; }
.md-tab:hover { background: transparent; border-color: transparent; color: var(--fg); }
.md-tab.active { background: var(--panel); border-color: var(--border-control); color: var(--fg); }
.md-toolbar { display: flex; gap: .1rem; flex-wrap: wrap; }
.md-tool { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: .82rem; }
.md-tool:hover { background: var(--panel); border-color: var(--border-control); color: var(--fg); }
.md-tool svg { width: .9rem; height: .9rem; }
.md-input { display: block; width: 100%; max-width: none; border: 0; border-radius: 0; margin: 0; min-height: 8rem; }
.md-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.md-preview { padding: 1rem 1.1rem; min-height: 8rem; }
.md-preview.empty { color: var(--muted); font-style: italic; }
.md-toolbar[hidden], .md-input[hidden] { display: none; }
.md-preview.empty p { margin: 0; }

.menu { position: relative; margin: 0; padding: 0; border: 0; background: transparent; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 5; display: grid; gap: .1rem; min-width: 12rem; padding: .4rem; border: 1px solid var(--border-control); border-radius: calc(var(--radius) + .2rem); background: var(--panel); box-shadow: var(--shadow-pop); }
.menu__panel .button--quiet { width: 100%; padding: .45rem .6rem; font-weight: inherit; border-radius: var(--radius); }
.menu__panel form { margin: 0; }
.menu__panel form + a, .menu__panel a + form { margin-top: .1rem; padding-top: .2rem; border-top: 1px solid var(--line); }
.close-menu > summary { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .65rem; }
.close-menu .menu__panel { min-width: 13rem; }
.close-menu .menu__panel button { width: 100%; justify-content: flex-start; white-space: nowrap; }
.close-menu-chevron svg { width: .8rem; height: .8rem; display: block; }
.menu__panel a { display: block; padding: .45rem .6rem; border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.menu__panel a:hover { background: var(--accent-soft); }

.property-picker { display: grid; gap: .35rem; min-width: 0; }
.property-picker-menu { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.property-picker-label { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.property-picker-trigger { display: flex; width: 100%; min-height: 2.25rem; align-items: center; justify-content: flex-start; padding: .35rem .5rem; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--field); color: var(--fg); cursor: pointer; font-weight: 400; list-style: none; text-align: left; }
.property-picker-trigger::-webkit-details-marker { display: none; }
.property-picker-trigger:hover { background: var(--accent-soft); border-color: var(--accent); }
.property-picker-value { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.property-picker-placeholder { color: var(--muted); }
.property-chip { display: inline-flex; max-width: 100%; padding: .1rem .38rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-picker-panel { position: absolute; inset-block-start: calc(100% + .3rem); inset-inline-start: 0; z-index: 20; display: grid; gap: .45rem; width: min(22rem, calc(100vw - 2rem)); margin: 0; padding: .5rem; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--panel); color: var(--fg); box-shadow: var(--shadow-pop); }
.property-picker-search { width: 100%; margin: 0; }
.property-picker-options { display: grid; max-height: 15rem; overflow: auto; gap: .15rem; }
.property-picker-option { display: block; width: 100%; padding: .42rem .5rem; border: 0; border-radius: calc(var(--radius) - .1rem); background: transparent; color: var(--fg); font-weight: 500; text-align: left; text-decoration: none; }
.property-picker-option:hover, .property-picker-option[aria-pressed=true] { background: var(--accent-soft); color: var(--fg); }
}
@media (max-width: 700px) {
  .settings-grid, .form-grid.two-cols, .settings-layout, .account-settings-page, .admin-settings { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-settings-page > .settings-nav, .admin-settings-nav .settings-nav { position: static; }
  .admin-settings > .settings-grid { grid-column: 1; }
}
}