/* ================================================================
   HERMES TYPOGRAPHY + UI SCALE // V1 // 2026-10-02

   115% = Hermes default readable scale.
   User preference: profile.preferences -> ui.scale
   Range: 80% .. 150% in 5% steps.

   app.js applies the scale tokens and raises legacy fixed pixel text
   below 11px to an 11px baseline before user scaling.
   ================================================================ */

:root {
    --ui-scale-factor: 1.15;
    --ui-scale-percent: 115;
    --ui-top-control-size: 36px;

    /* Readable baseline. JS rewrites these for the selected scale. */
    --text-meta: 11px;
    --text-small: 12px;
    --text-body: 14px;
    --text-value: 16px;
    --text-card-title: 17px;
    --text-section: 21px;
    --text-page-title: 28px;
}

html,
body {
    font-size: var(--text-body);
}

/* Controls need to grow with text rather than clipping it. */
:is(
    .outline-button,
    .send-button,
    .talk-button,
    .stop-button,
    .menu-panel button,
    .server-range-controls button,
    .selected-server-heading > button,
    .profile-avatar-actions button,
    .community-heading-actions button,
    .community-message-tools button,
    .community-compose-actions button,
    .community-drawer button,
    .amp-sidebar nav button,
    .admin-local-nav button,
    .control-actions button,
    .admin-instance-maintenance button,
    .workspace-tabs button,
    .workspace-command button,
    .workspace-tools button,
    .audio-actions button,
    .store-v2-controls button,
    .management-panel button,
    .admin-utility-panel button
) {
    min-height: var(--control-height);
}

:is(input, select, textarea, button) {
    line-height: 1.25;
}

:is(p, li, dd, dt) {
    line-height: 1.5;
}

.top-utility-button,
.menu-button {
    width: var(--ui-top-control-size);
    height: var(--ui-top-control-size);
}

.top-wallet-balances {
    min-height: var(--ui-top-control-size);
}

/* ---------------------------------------------------------------
   UI Settings -> UI Scale
   --------------------------------------------------------------- */

.ui-scale-settings {
    margin: 0 0 var(--section-gap);
    padding: clamp(18px, 2vw, 28px);
    border: 1px solid rgba(225, 232, 238, .11);
    background:
        linear-gradient(100deg, rgba(var(--accent-rgb), .035), transparent 48%),
        rgba(255, 255, 255, .012);
}

.ui-scale-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.ui-scale-heading small {
    display: block;
    color: rgba(var(--accent-rgb), .78);
    font-size: var(--text-meta) !important;
    font-weight: 700;
    letter-spacing: .12em;
}

.ui-scale-heading h2 {
    margin: 7px 0 5px;
    color: #d0d7da;
    font-size: var(--text-section) !important;
    font-weight: 400;
    letter-spacing: -.01em;
}

.ui-scale-heading p {
    max-width: 720px;
    margin: 0;
    color: #8b969c;
    font-size: var(--text-body) !important;
}

.ui-scale-value {
    flex: 0 0 auto;
    min-width: 92px;
    color: var(--accent);
    font-size: var(--text-page-title) !important;
    font-weight: 300;
    line-height: 1;
    text-align: right;
}

.ui-scale-control {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
}

.ui-scale-control > span {
    color: #778288;
    font-size: var(--text-meta) !important;
    font-weight: 700;
    letter-spacing: .10em;
}

.ui-scale-control input[type="range"] {
    width: 100%;
    min-height: 32px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.ui-scale-control button {
    min-height: var(--control-height);
    padding: 0 15px;
    border: 1px solid rgba(225, 232, 238, .12);
    background: rgba(255, 255, 255, .018);
    color: #aeb7bb;
    cursor: pointer;
    font-size: var(--text-small) !important;
    font-weight: 600;
    letter-spacing: .06em;
}

.ui-scale-control button:hover {
    border-color: rgba(var(--accent-rgb), .34);
    color: var(--accent);
    background: rgba(var(--accent-rgb), .045);
}

.ui-scale-control button:disabled,
.ui-scale-control input:disabled {
    opacity: .5;
    cursor: wait;
}

.ui-scale-status {
    min-height: 1.4em;
    margin-top: 12px;
    color: rgba(var(--accent-rgb), .76);
    font-size: var(--text-meta) !important;
    font-weight: 600;
    letter-spacing: .08em;
}

.ui-scale-status.error {
    color: #d88f8f;
}

@media (max-width: 760px) {
    .ui-scale-settings {
        padding: 16px;
    }

    .ui-scale-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .ui-scale-value {
        min-width: 72px;
    }

    .ui-scale-control {
        grid-template-columns: auto 1fr auto;
        gap: 9px;
    }

    .ui-scale-control button {
        grid-column: 1 / -1;
        width: 100%;
    }
}