/* Hallmark · shape: app screen · genre: atmospheric · theme: Bloom (deal 1/3, seed free-open-source-offline-bengali-f95b·731b3585·2026-11-02·r0) · brand: the logo's green and red
 * screen: a Bengali dictation sheet with a rubber record cap in a bottom dock · states: unsupported, model not loaded, loading, ready, hearing, error · v2.0.0 */
/* Hallmark · waive 37 · Anek Bangla fills only the Bengali glyphs inside the display stack · Ranade has no Bengali script and the sheet is written in বাংলা */
@import url("./tokens.css");
@import url("./base.css");

body { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }

.top { border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.top .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 56px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.wordmark img { width: 28px; height: 28px; }
.wordmark span { color: var(--color-muted); font-weight: 500; }
.top nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.top nav a { color: var(--color-ink-2); text-decoration: none; font-weight: 500; }
.top nav a:hover { color: var(--color-accent); }
.model { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.model[data-state="ready"] { background: color-mix(in oklab, var(--color-accent-2) 16%, var(--color-paper)); color: var(--color-ink); }
.model[data-state="error"] { background: color-mix(in oklab, var(--color-error) 12%, var(--color-paper)); color: var(--color-ink); }

main { padding-block: var(--space-xl); }
main .container { max-width: 920px; display: grid; gap: var(--space-md); }

.sheet { position: relative; border-radius: var(--radius-card); background: var(--color-sheet); box-shadow: var(--shadow-card); display: grid; }
.sheet textarea { width: 100%; min-height: 52dvh; resize: vertical; border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-ink); padding: var(--space-xl); font-family: var(--font-display); font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem); line-height: 1.7; }
.sheet textarea::placeholder { color: var(--color-muted); }
.sheet textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.partial { min-height: 1.7em; padding: 0 var(--space-xl) var(--space-lg); color: var(--color-muted); font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.375rem); }
.partial:empty::before { content: "\00a0"; }

.first { color: var(--color-muted); font-size: var(--text-sm); max-width: 62ch; }
.first b { color: var(--color-ink); font-weight: 500; }
.bar-load { height: 4px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.bar-load i { display: block; height: 100%; width: 100%; background: var(--color-accent-2); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-short) linear; }

.dock { position: sticky; bottom: 0; z-index: var(--z-sticky); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--color-rule); }
.dock .container { max-width: 920px; display: flex; align-items: center; gap: var(--space-md); min-height: 88px; padding-block: var(--space-sm); flex-wrap: wrap; }

.rec { flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 50% 30%, var(--bezel), var(--color-paper-3)); box-shadow: inset 0 2px 3px var(--shade-2), 0 1px 0 var(--hi); }
.rec__cap { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--color-accent-ink); background: radial-gradient(120% 110% at 50% 18%, var(--rubber-hi), var(--rubber) 48%, var(--rubber-lo)); box-shadow: inset 0 1px 0.5px var(--hi), 0 5px 9px -3px var(--shade-3); transition: transform var(--dur-micro) var(--ease-out); }
.rec__cap svg { width: 22px; height: 22px; }
.rec:hover .rec__cap { filter: brightness(1.05); }
.rec:active .rec__cap { transform: translateY(1px); }
.rec:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.rec:disabled { opacity: 0.55; cursor: not-allowed; }
.is-hearing .rec { animation: breathe 1.6s var(--ease-in-out) infinite; }
@keyframes breathe { 50% { transform: scale(0.94); } }

.status { display: grid; gap: var(--space-3xs); min-width: 0; flex: 1; }
.status b { font-weight: 600; }
.status span { color: var(--color-muted); font-size: var(--text-sm); }
.status kbd { font-family: var(--font-display); font-size: var(--text-xs); padding: 0 var(--space-2xs); border-radius: var(--radius-clip); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }

.meter { display: flex; align-items: center; gap: var(--space-3xs); height: 32px; width: 96px; }
.meter i { flex: 1; height: 100%; border-radius: var(--radius-pill); background: var(--color-rule); transform-origin: center; transform: scaleY(0.12); transition: transform var(--dur-micro) var(--ease-out); }
.is-hearing .meter i { background: var(--rubber); }

.tools { display: flex; gap: var(--space-xs); }
.btn { min-height: 40px; padding: var(--space-xs) var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); cursor: pointer; box-shadow: 0 0 0 1px var(--shade-1), inset 0 1px 0 var(--hi); transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { box-shadow: 0 0 0 1px var(--shade-2), 0 6px 14px -8px var(--shade-2), inset 0 1px 0 var(--hi); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.note { color: var(--color-muted); font-size: var(--text-sm); }
.note a { color: var(--color-accent); }

.toast { position: fixed; left: 50%; bottom: 104px; z-index: var(--z-toast); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: var(--space-xs); max-width: calc(100vw - 2 * var(--gutter)); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent-ink); font-weight: 500; font-size: var(--text-sm); box-shadow: var(--shadow-lift); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 40rem) { .toast { bottom: 120px; } }

@media (max-width: 40rem) {
  .top nav .hide-sm { display: none; }
  main { padding-block: var(--space-md); }
  .sheet textarea { padding: var(--space-lg); min-height: 44dvh; }
  .partial { padding: 0 var(--space-lg) var(--space-md); }
  .meter { display: none; }
  .tools { width: 100%; }
  .tools .btn { flex: 1; }
}