/*
 * HighCohesion UI blocks for the Control Panel. See docs/ui/README.md.
 *
 * Opt-in only: every token is --hc-*, every rule hangs off an hc- class, and
 * nothing here restyles Nova, hicoh.css or a bare element. Values come from the
 * HighCohesion Design System; a token only appears once a block uses it.
 */

:root {
    /* Surfaces and text */
    --hc-bg-elev: #ffffff;
    --hc-bg-sunken: #f4f4f3;
    --hc-fg: #050505;
    --hc-fg-muted: #4a4a46;
    --hc-fg-subtle: #6e6e69;
    --hc-border: #ddddda;
    --hc-border-strong: #c2c2be;
    --hc-border-focus: #bd95e5;
    --hc-shadow-1: 0 1px 2px rgba(5, 5, 5, .06), 0 1px 1px rgba(5, 5, 5, .04);
    --hc-glow-focus: 0 0 0 4px rgba(189, 149, 229, .28);

    /* Tones: a soft background and the text that sits on it; --hc-danger also colours icons */
    --hc-danger: #c94b4b;
    --hc-danger-bg: #f7eaea;
    --hc-danger-text: #6b1c1c;
    --hc-warning-bg: #faf6dc;
    --hc-warning-text: #4a4006;
    --hc-success-bg: #e8f5ef;
    --hc-success-text: #164d34;
    --hc-info: #4b7fc9;
    --hc-info-bg: #ebf1fa;
    --hc-info-border: #bad0ee;
    --hc-info-text: #1c3b65;
    --hc-neutral-bg: #ececea;
    --hc-neutral-text: #2e2e2c;
    --hc-accent-bg: #d9c2f0;
    --hc-accent-text: #050505;

    /* Diffs: the words that changed, on top of the line's own tint */
    --hc-diff-inserted-text: #a8d9c1;
    --hc-diff-removed-text: #edbbbb;

    /* Buttons */
    --hc-button-primary-bg: #050505;
    --hc-button-primary-text: #ffffff;
    --hc-button-secondary-bg: #ffffff;

    /* Inverse: a black tile with white on it, such as an icon tile */
    --hc-bg-inverse: #050505;
    --hc-fg-inverse: #fafafa;

    /* Shape and type */
    --hc-radius-sm: 8px;
    --hc-radius-md: 12px;
    --hc-radius-pill: 999px;
    --hc-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --hc-duration: 240ms;
    --hc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Nova's dark mode. Surfaces come from the design's hc-dark palette; the tones are derived (the design keeps them light). */
.dark {
    --hc-bg-elev: #0e0e0e;
    --hc-bg-sunken: #000000;
    --hc-fg: #fafafa;
    --hc-fg-muted: #b8b8b5;
    --hc-fg-subtle: #8a8a86;
    --hc-border: #1f1f1d;
    --hc-border-strong: #2e2e2c;
    --hc-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);

    /* Derived: a dim tint of the -500 step with the -100 step as text, and the -300 step for icons. */
    --hc-danger: #d97070;
    --hc-danger-bg: rgba(201, 75, 75, .18);
    --hc-danger-text: #edbbbb;
    --hc-warning-bg: rgba(184, 160, 16, .18);
    --hc-warning-text: #eee08a;
    --hc-success-bg: rgba(62, 155, 111, .18);
    --hc-success-text: #a8d9c1;
    --hc-info: #7aaad9;
    --hc-info-bg: rgba(75, 127, 201, .18);
    --hc-info-border: rgba(75, 127, 201, .4);
    --hc-info-text: #bad0ee;
    --hc-neutral-bg: #2e2e2c;
    --hc-neutral-text: #ddddda;
    --hc-accent-bg: rgba(189, 149, 229, .24);
    --hc-accent-text: #d9c2f0;

    --hc-diff-inserted-text: rgba(62, 155, 111, .45);
    --hc-diff-removed-text: rgba(201, 75, 75, .45);

    --hc-button-primary-bg: #fafafa;
    --hc-button-primary-text: #050505;
    --hc-button-secondary-bg: transparent;

    /* Derived: the tile turns light so it still stands out from the card. */
    --hc-bg-inverse: #fafafa;
    --hc-fg-inverse: #050505;
}

/* ------------------------------------------------------------------ Card */

.hc-card {
    color: var(--hc-fg);
    background: var(--hc-bg-elev);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    box-shadow: var(--hc-shadow-1);
    overflow: hidden;
    text-align: left;
}

.hc-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--hc-border);
}

.hc-card__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hc-card__overline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

.hc-card__title {
    margin: 0;
    color: var(--hc-fg);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hc-card__description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg-muted);
    max-width: 60ch;
}

.hc-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.hc-card__body {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.5;
}

/* Inside a Nova panel a card is drawn with its border only. */
.hc-card--nested {
    box-shadow: none;
}

/* A table fills the card edge to edge. */
.hc-card__body--flush {
    padding: 0;
}

.hc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 16px 24px;
    background: var(--hc-bg-sunken);
    border-top: 1px solid var(--hc-border);
}

.hc-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-card__footer-text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg-muted);
}

/* ----------------------------------------------------------------- Table */

.hc-table-scroll {
    overflow-x: auto;
}

.hc-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg);
}

.hc-col--label {
    /* Column widths include the cell padding: 148px of label, 220px of the first value, 16px of arrow, 160px of status. */
    width: 180px;
}

/* The first value column of a comparison: fixed, so the side synced to takes the rest. */
.hc-col--from {
    width: 236px;
}

.hc-col--arrow {
    width: 32px;
}

.hc-col--status {
    width: 192px;
}

.hc-table th,
.hc-table td {
    padding: 16px 8px;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--hc-border);
}

.hc-table th:first-child,
.hc-table td:first-child {
    padding-left: 24px;
}

.hc-table th:last-child,
.hc-table td:last-child {
    padding-right: 24px;
}

/* hicoh.css styles every td in the app (height, weight, min-width, a grey hover with !important); undo that here. */
.hc-table td {
    height: auto;
    min-width: 0;
    font-weight: 400;
}

.hc-table tbody tr:hover > * {
    background-color: transparent !important;
}

.hc-table tbody tr:last-child > * {
    border-bottom: 0;
}

.hc-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--hc-bg-sunken);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

/* A row whose note follows it loses its border, so the two read as one. */
.hc-table tr.hc-table__row--noted > * {
    border-bottom: 0;
    padding-bottom: 10px;
}

.hc-table tr.hc-table__note-row > * {
    padding-top: 0;
    vertical-align: top;
}

.hc-table td.hc-table__note {
    font-size: 12px;
    line-height: 1.4;
    color: var(--hc-fg-muted);
}

/* Cells */

.hc-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hc-cell__label {
    font-size: 14px;
    font-weight: 600;
}

.hc-cell__sub {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--hc-fg-subtle);
}

.hc-cell__inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-cell__arrow {
    display: block;
    color: var(--hc-fg-subtle);
}

/* A value that is not there yet: what is missing, muted, and what to do about it underneath. */
.hc-cell__missing {
    color: var(--hc-fg-muted);
}

.hc-cell__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hc-mono {
    font-family: var(--hc-font-mono);
    font-size: 0.92em;
}

.hc-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--hc-border-strong);
    text-underline-offset: 3px;
}

.hc-link:hover {
    text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ List */

/* A list of things to act on, each with a tone icon, an instruction, a detail and a status. */
.hc-list-section:not(:last-child) {
    border-bottom: 1px solid var(--hc-border);
}

.hc-list__heading {
    padding: 10px 24px;
    background: var(--hc-bg-sunken);
    border-bottom: 1px solid var(--hc-border);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

.hc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The status column matches a table's, so badges line up down the card. */
.hc-list__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 160px;
    column-gap: 16px;
    align-items: center;
    padding: 16px 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg);
}

.hc-list__item + .hc-list__item {
    border-top: 1px solid var(--hc-border);
}

.hc-list__icon {
    display: block;
}

.hc-list__icon--danger { color: var(--hc-danger); }
.hc-list__icon--warning { color: var(--hc-warning-text); }
.hc-list__icon--info { color: var(--hc-fg-subtle); }

/* An info item has nothing to act on, so no status column. */
.hc-list__item--info {
    grid-template-columns: 20px minmax(0, 1fr);
    padding-top: 12px;
    padding-bottom: 12px;
}

/* A list with no heading or card around it, in a field of its own. */
.hc-list--bare .hc-list__item {
    padding-left: 0;
    padding-right: 0;
}

.hc-list__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hc-list__title {
    font-weight: 600;
}

.hc-list__detail {
    color: var(--hc-fg-muted);
}

/* ------------------------------------------------------------------ Name */

/* A name inside a sentence: set apart from the words around it, never quoted. */
.hc-name {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--hc-neutral-bg);
    color: var(--hc-fg);
    font-size: 0.9em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ----------------------------------------------------------------- Check */

/* Something to check by hand, as a reminder: no state, nothing to click. */
.hc-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-pill);
    font-size: 13px;
    line-height: 1.2;
    color: var(--hc-fg);
    white-space: nowrap;
}

.hc-check svg {
    color: var(--hc-fg-subtle);
}

/* ------------------------------------------------------------ Field value */

/* A short value beside its label in a Nova panel: a badge, then a muted line. */
.hc-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg);
    text-align: left;
}

.hc-muted {
    color: var(--hc-fg-muted);
}

/* A block of content in a Nova field: a bold headline, then a muted sentence, then more. */
.hc-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg);
    text-align: left;
}

.hc-stack__headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
}

/* --------------------------------------------------------------- Compare */

/* Two sides of the same things, entity by entity. See docs/ui/compare.md. */
.hc-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--hc-fg-subtle);
}

.hc-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--hc-info-bg);
    border: 1px solid var(--hc-info-border);
}

.hc-compare__head,
.hc-compare__row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    padding: 10px 24px;
}

.hc-compare__head {
    background: var(--hc-bg-sunken);
    border-top: 1px solid var(--hc-border);
    border-bottom: 1px solid var(--hc-border);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

.hc-compare__entity {
    border-bottom: 1px solid var(--hc-border);
    scroll-margin-top: 80px;
}

.hc-compare__entity:last-child {
    border-bottom: 0;
}

.hc-compare__row {
    align-items: start;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--hc-border);
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg);
}

.hc-compare__row--differs,
.hc-compare__code--differs {
    background: var(--hc-info-bg);
}

.hc-compare__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    font-weight: 500;
}

.hc-compare__dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: var(--hc-radius-pill);
    background: var(--hc-info);
}

.hc-compare__value {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.hc-compare__value--none {
    color: var(--hc-fg-subtle);
}

.hc-compare__test {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hc-compare__annotation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hc-compare__note {
    font-size: 12px;
    font-weight: 400;
    color: var(--hc-fg-muted);
}

.hc-compare__code {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--hc-border);
    font-size: 14px;
    color: var(--hc-fg);
}

.hc-compare__empty {
    margin: 0;
    padding: 12px 24px 16px 64px;
    border-top: 1px solid var(--hc-border);
    font-size: 14px;
    color: var(--hc-fg-muted);
}

/* A section that opens and closes: a whole-width button with a chevron. */
.hc-disclosure {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border: 0;
    background: transparent;
    color: var(--hc-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hc-disclosure:hover {
    background: var(--hc-bg-sunken);
}

.hc-disclosure:focus-visible {
    outline: none;
    box-shadow: inset var(--hc-glow-focus);
}

.hc-disclosure__chevron {
    flex-shrink: 0;
    color: var(--hc-fg-muted);
    transition: transform var(--hc-duration) var(--hc-ease);
}

.hc-disclosure[aria-expanded="true"] .hc-disclosure__chevron {
    transform: rotate(90deg);
}

.hc-disclosure__type {
    width: 136px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

.hc-disclosure__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.hc-disclosure__count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--hc-fg-subtle);
}

/* A choice between two or three views: pressed shows which. */
.hc-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    background: var(--hc-bg-sunken);
}

.hc-segmented__option {
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--hc-fg-muted);
    cursor: pointer;
}

.hc-segmented__option[aria-pressed="true"] {
    background: var(--hc-bg-elev);
    box-shadow: var(--hc-shadow-1);
    color: var(--hc-fg);
}

.hc-segmented__option:focus-visible,
.hc-icon-button:focus-visible {
    outline: none;
    box-shadow: var(--hc-glow-focus);
}

.hc-icon-button {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--hc-border);
    border-radius: 6px;
    background: var(--hc-bg-elev);
    color: var(--hc-fg-muted);
    cursor: pointer;
}

.hc-icon-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* A read-only diff of code: a title bar, then the viewer. */
.hc-diff {
    overflow: hidden;
    border: 1px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-sm);
    background: var(--hc-bg-elev);
}

.hc-diff__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 6px 8px 6px 12px;
    background: var(--hc-bg-sunken);
    border-bottom: 1px solid var(--hc-border);
    font-size: 12px;
}

.hc-diff__title,
.hc-diff__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hc-diff__tools {
    gap: 6px;
}

.hc-diff__sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--hc-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-fg-subtle);
}

.hc-diff__sides > span {
    padding: 6px 12px;
}

.hc-diff__sides > span + span {
    border-left: 1px solid var(--hc-border);
}

.hc-diff__editor {
    position: relative;
}

.hc-diff__loading {
    margin: 0;
    padding: 12px;
    font-size: 12px;
    color: var(--hc-fg-muted);
}

/* ----------------------------------------------------------------- Badge */

.hc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--hc-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--hc-neutral-bg);
    color: var(--hc-neutral-text);
}

.hc-badge--danger { background: var(--hc-danger-bg); color: var(--hc-danger-text); }
.hc-badge--warning { background: var(--hc-warning-bg); color: var(--hc-warning-text); }
.hc-badge--success { background: var(--hc-success-bg); color: var(--hc-success-text); }
.hc-badge--info { background: var(--hc-info-bg); color: var(--hc-info-text); }
.hc-badge--neutral { background: var(--hc-neutral-bg); color: var(--hc-neutral-text); }
.hc-badge--accent { background: var(--hc-accent-bg); color: var(--hc-accent-text); }

/* ---------------------------------------------------------------- Button */

.hc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--hc-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--hc-duration) var(--hc-ease), border-color var(--hc-duration) var(--hc-ease);
}

.hc-button:focus-visible {
    outline: none;
    box-shadow: var(--hc-glow-focus);
}

.hc-button--sm {
    padding: 6px 12px;
    font-size: 13px;
}

.hc-button--primary {
    background: var(--hc-button-primary-bg);
    border-color: var(--hc-button-primary-bg);
    color: var(--hc-button-primary-text);
}

.hc-button--secondary {
    background: var(--hc-button-secondary-bg);
    border-color: var(--hc-border-strong);
    color: var(--hc-fg);
}

.hc-button--ghost {
    background: transparent;
    color: var(--hc-fg);
}

.hc-button--ghost:hover,
.hc-button--secondary:hover {
    background: var(--hc-bg-sunken);
}

.hc-button:disabled,
.hc-button[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------------------------------------------------------------- Select */

.hc-select {
    position: relative;
}

.hc-select select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 32px 8px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--hc-fg);
    background: var(--hc-bg-elev);
    border: 1px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-sm);
    appearance: none;
    -webkit-appearance: none;
}

.hc-select select:focus {
    outline: none;
    border-color: var(--hc-border-focus);
    box-shadow: var(--hc-glow-focus);
}

.hc-select svg {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -7px;
    pointer-events: none;
    color: var(--hc-fg-muted);
}

/* ----------------------------------------------------------------- Alert */

/* A message about the page or the form: a tone icon, an optional bold title and a sentence. See docs/ui/forms.md. */
.hc-alert {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 16px;
    border-radius: var(--hc-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}

.hc-alert__icon {
    display: block;
    margin-top: 1px;
}

.hc-alert__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hc-alert__title {
    font-weight: 600;
}

/* Admins type announcements with line breaks; keep them. */
.hc-alert__text--lines {
    white-space: pre-line;
}

.hc-alert__list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.hc-alert--danger { background: var(--hc-danger-bg); color: var(--hc-danger-text); }
.hc-alert--warning { background: var(--hc-warning-bg); color: var(--hc-warning-text); }
.hc-alert--success { background: var(--hc-success-bg); color: var(--hc-success-text); }
.hc-alert--info { background: var(--hc-info-bg); color: var(--hc-info-text); }

.hc-alert--danger .hc-alert__icon { color: var(--hc-danger); }
.hc-alert--info .hc-alert__icon { color: var(--hc-info); }

.hc-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- Field */

/* A label, an input and an optional hint, stacked. See docs/ui/forms.md. */
.hc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.hc-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hc-field__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hc-fg);
}

.hc-field__aside,
.hc-field__aside a {
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-fg-muted);
}

/* Specific enough to win over .hc-auth-card's underlined links. */
.hc-field__label-row .hc-field__aside a[href] {
    text-decoration: none;
}

.hc-field__label-row .hc-field__aside a[href]:hover {
    text-decoration: underline;
}

.hc-field__input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    color: var(--hc-fg);
    background: var(--hc-bg-elev);
    border: 1px solid var(--hc-border-strong);
    border-radius: var(--hc-radius-sm);
    box-shadow: none;
    transition: border-color var(--hc-duration) var(--hc-ease), box-shadow var(--hc-duration) var(--hc-ease);
}

.hc-field__input::placeholder {
    color: var(--hc-fg-subtle);
}

.hc-field__input:focus {
    outline: none;
    border-color: var(--hc-border-focus);
    box-shadow: var(--hc-glow-focus);
}

.hc-field__input[aria-invalid="true"] {
    border-color: var(--hc-danger);
}

.hc-field__input--code {
    font-family: var(--hc-font-mono);
    letter-spacing: 0.08em;
}

.hc-field__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hc-fg-subtle);
}

/* ------------------------------------------------------------------ Copy */

/* A value to copy, such as a URL or a code: mono, wrapping, with a Copy button once the clipboard is there. */
.hc-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    box-sizing: border-box;
    padding: 4px 4px 4px 12px;
    background: var(--hc-bg-sunken);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
    text-align: left;
}

.hc-copy__value {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    font-family: var(--hc-font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hc-fg);
    overflow-wrap: anywhere;
    user-select: all;
}

.hc-copy__button {
    flex-shrink: 0;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--hc-border-strong);
    border-radius: 6px;
    background: var(--hc-bg-elev);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--hc-fg);
    cursor: pointer;
}

.hc-copy__button:focus-visible {
    outline: none;
    box-shadow: var(--hc-glow-focus);
}

.hc-copy__button[hidden] {
    display: none;
}

/* ------------------------------------------------------------- Auth page */

/* The pages before Nova: logo, a 420px column of cards, a line under it. See docs/ui/auth.md. */
.hc-auth {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 48px 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    background: var(--hc-bg-sunken);
    color: var(--hc-fg);
    font-size: 14px;
    line-height: 1.5;
}

.hc-auth__logo {
    display: flex;
    align-items: center;
    height: 48px;
}

.hc-auth__logo img {
    display: block;
    width: auto;
    height: 13px;
}

/* The white file pads its artwork (letters 196 of 500 units tall) and its width and height attributes don't match its viewBox, so it gets both sizes, drawn larger to match the black one. */
.hc-auth__logo img.hc-auth__logo-dark {
    width: 198px;
    height: 33px;
}

.hc-auth__logo-dark,
.dark .hc-auth__logo-light {
    display: none !important;
}

.dark .hc-auth__logo-dark {
    display: block !important;
}

.hc-auth__main {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hc-auth__footer {
    margin: 0;
    font-size: 14px;
    color: var(--hc-fg-muted);
    text-align: center;
}

.hc-auth__footer a {
    font-weight: 600;
    color: var(--hc-fg);
}

.hc-auth-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 32px;
    background: var(--hc-bg-elev);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    box-shadow: var(--hc-shadow-1);
    text-align: left;
}

.hc-auth-card__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hc-auth-card__title {
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--hc-fg);
}

.hc-auth-card__description,
.hc-auth-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hc-fg-muted);
}

.hc-auth-card__text {
    font-size: 14px;
}

.hc-auth-card a:not(.hc-button),
.hc-auth-panel a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--hc-border-strong);
    text-underline-offset: 3px;
}

.hc-auth-card a:not(.hc-button):hover,
.hc-auth-panel a:hover {
    text-decoration-color: currentColor;
}

.hc-auth-card a.hc-auth-card__hint {
    color: var(--hc-fg-muted);
}


.hc-auth-card__steps {
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: decimal;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hc-fg-muted);
}

.hc-auth-card__steps--bullets {
    list-style: disc;
}

.hc-auth-card__steps li::marker {
    font-weight: 600;
    color: var(--hc-fg);
}

.hc-auth-card__stack,
.hc-auth-card__step-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hc-auth-card__step-body {
    margin-top: 8px;
}

.hc-auth-card__qr {
    display: block;
    width: 180px;
    height: 180px;
    padding: 8px;
    box-sizing: border-box;
    background: #ffffff; /* A QR code needs a light quiet zone in either theme. */
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-sm);
}

.hc-auth-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.hc-auth-card__actions form {
    margin: 0;
}

.hc-auth-card__hint {
    font-size: 13px;
    color: var(--hc-fg-subtle);
}

/* A smaller card beside the form, such as the MCP Server card on login. */
.hc-auth-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: var(--hc-bg-elev);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    color: var(--hc-fg);
    text-align: left;
}

.hc-auth-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hc-auth-panel__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--hc-radius-sm);
    background: var(--hc-bg-inverse);
    color: var(--hc-fg-inverse);
}

.hc-auth-panel__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hc-auth-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.hc-auth-panel__description,
.hc-auth-panel__steps {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hc-fg-muted);
}

/* "How to connect" opens the steps; "How it works" sits at the right of the same row. */
.hc-auth-panel__more {
    position: relative;
}

.hc-auth-panel__link {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--hc-fg-muted) !important;
}

.hc-auth-panel__more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.hc-auth-panel__more summary::-webkit-details-marker {
    display: none;
}

.hc-auth-panel__more summary:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--hc-glow-focus);
}

.hc-auth-panel__more summary svg {
    transition: transform var(--hc-duration) var(--hc-ease);
}

.hc-auth-panel__more details[open] summary svg {
    transform: rotate(180deg);
}

.hc-auth-panel__more details[open] .hc-auth-panel__steps {
    margin-top: 8px;
}

.hc-auth-panel__steps {
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: decimal;
}

@media (max-width: 480px) {
    .hc-auth {
        padding-top: 32px;
    }

    .hc-auth-card {
        padding: 24px;
    }

    .hc-auth-card__title {
        font-size: 26px;
    }
}

/* ------------------------------------------------------------------ Misc */

.hc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}