/* Host-only chrome. Everything else comes from the Ark sheets in UI.Shared. */
html, body {
    margin: 0;
    background: var(--surface-bg);
    color: var(--text-color);
}


/* The sign-in card moved to ark-base.css in UI.Shared: the phone needs the same screen, and none of it was host-specific. */

/* A raw JSON payload in a table cell: mono face on a faint well reads as machine output rather
   than wrapped prose — the tooltip carries the full value, this is only its first line. */
.ark-audit-details {
    display: inline-block;
    max-inline-size: 24rem;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

/* When a change happened: the date over the clock, each on its own line, neither allowed to wrap. */
.ark-audit-when {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    white-space: nowrap;
}

.ark-audit-clock {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* What it happened to: the entity over its shortened id. */
.ark-audit-target {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    white-space: nowrap;
}

.ark-audit-id {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

/* One choice out of three, laid out as a set rather than loose buttons — the gap is tight on purpose so they read as one control with three positions. */
.ark-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-subtle);
}

/* FocusOnNavigate moves focus to the page heading on every navigation so screen readers announce
   it, but WebView2 paints a focus ring around that programmatic focus like a stray box around the
   title. Suppressed for headings only, so keyboard focus rings on real controls are unaffected. */
h1:focus,
h1:focus-visible {
    outline: none;
}