{"version":3,"file":"AudioRecorder.module.cjs","names":[],"sources":["../../../src/components/AudioRecorder/AudioRecorder.module.css"],"sourcesContent":[".recorder {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.record,\n.stop,\n.secondary {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.record {\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.record:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Stop reads as the danger control — while recording it is the one\n * irreversible-feeling thing on screen and has to be what the eye lands on without\n * reading labels — but it uses the **soft** danger pair, not solid red with white.\n *\n * Measured in a real browser: white on `--tempest-danger-solid` is 4.83:1 in the light\n * theme and **3.76:1** in dark, under the 4.5:1 floor for text. Every solid variant\n * fails there (`--tempest-danger` is 2.77:1 against white in dark, `-hover` 3.76:1);\n * only `--tempest-danger-fg` on `--tempest-danger-bg` clears it in both — 8.2:1 light,\n * 6.57:1 dark. The border keeps the control unmistakably red at a glance.\n */\n.stop {\n    border-color: var(--tempest-danger);\n    background-color: var(--tempest-danger-bg);\n    color: var(--tempest-danger-fg);\n}\n\n.secondary {\n    border-color: var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    padding-inline: var(--tempest-space-2);\n}\n\n.record:focus-visible,\n.stop:focus-visible,\n.secondary:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .record,\n    .stop,\n    .secondary {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .secondary::after {\n        content: \"\";\n        position: absolute;\n        inset: -6px;\n    }\n}\n\n/*\n * The meter is transform-driven, not width-driven: `transform` is composited, so a\n * value arriving 10 times a second does not force layout on the whole row.\n */\n.meter {\n    flex: 1 1 6rem;\n    min-width: 3rem;\n    height: 0.5rem;\n    overflow: hidden;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2);\n}\n\n.meterFill {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: var(--tempest-success);\n    transform-origin: left center;\n    transform: scaleX(0);\n    transition: transform 80ms linear;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .meterFill {\n        transition: none;\n    }\n}\n\n.clock {\n    flex: 0 0 auto;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.max {\n    color: var(--tempest-text-muted);\n}\n\n.status {\n    margin: 0;\n    min-height: 1.25em;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.notice {\n    margin: 0;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.footer {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n@media (max-width: 480px) {\n    .recorder {\n        padding: var(--tempest-space-2);\n    }\n\n    .meter {\n        flex-basis: 100%;\n        order: 1;\n    }\n}\n"],"mappings":";"}