/*
 * TextSize control: "A-  110%  A+  Reset" in a page corner (modules/text-size/README.md).
 *
 * Every colour and size is a custom property WITH a fallback, prefixed --textsize-*,
 * so a host theme restyles the control by defining those properties and nothing else:
 *
 *   :root { --textsize-bg: #fff; --textsize-fg: #222; ... }
 *
 * The control is hidden (the `hidden` attribute) while the text is at 100%, unless the
 * host asked for control: 'always' or rendered it into its own element.
 */
.textsize {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--textsize-gap, 4px);
    padding: var(--textsize-padding, 4px);
    background: var(--textsize-bg, #ffffff);
    color: var(--textsize-fg, #222222);
    border: var(--textsize-border-width, 1px) solid var(--textsize-line, #bbbbbb);
    border-radius: var(--textsize-radius, 10px);
    box-shadow: var(--textsize-shadow, 0 2px 10px rgba(0, 0, 0, .25));
    font: var(--textsize-font-size, .875rem) / 1.2 var(--textsize-font, inherit);
}
.textsize[hidden] { display: none; }

/* Fixed in a bottom corner, clear of the notch / home bar. --textsize-bottom-extra lifts it above a host's bottom bar. */
.textsize--bottom-left,
.textsize--bottom-right {
    position: fixed;
    z-index: var(--textsize-z, 1030);
    bottom: calc(var(--textsize-offset, 12px) + var(--textsize-bottom-extra, 0px) + env(safe-area-inset-bottom, 0px));
}
.textsize--bottom-left  { left:  calc(var(--textsize-offset, 12px) + env(safe-area-inset-left, 0px)); }
.textsize--bottom-right { right: calc(var(--textsize-offset, 12px) + env(safe-area-inset-right, 0px)); }

.textsize__btn {
    box-sizing: border-box;
    min-width: var(--textsize-tap, 44px);
    min-height: var(--textsize-tap, 44px);
    margin: 0;
    padding: 0 var(--textsize-btn-padding, 10px);
    background: var(--textsize-btn-bg, #f2f2f2);
    color: inherit;
    border: var(--textsize-border-width, 1px) solid var(--textsize-line, #bbbbbb);
    border-radius: var(--textsize-btn-radius, 6px);
    font: inherit;
    font-weight: var(--textsize-btn-weight, 600);
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.textsize__btn:hover { background: var(--textsize-btn-hover-bg, #e4e4e4); }
.textsize__btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--textsize-focus-width, 3px) var(--textsize-focus, rgba(26, 115, 232, .55)); }
.textsize__btn:disabled { opacity: var(--textsize-disabled-opacity, .5); cursor: default; }

.textsize__value {
    min-width: var(--textsize-value-width, 3.2em);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Screen-reader announcement ("Text size 110%"), invisible. */
.textsize__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Inline mode (control rendered into a host element): no fixed position, no shadow. */
.textsize--inline { box-shadow: none; }

/* Motion is opt-in: users who asked for less motion get instant state changes. */
@media (prefers-reduced-motion: no-preference) {
    .textsize__btn { transition: background-color .15s ease-out; }
}