:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --ink: #15212C;
  --muted: #5F6F7D;
  --line: #DCE3E9;
  --celeste: #2270B0;
  --celeste-soft: #E3EEF8;
  --sol: #C98A0A;
  --sol-soft: #FBF1DC;
  --warn: #B4492F;
  --warn-soft: #F8E6E1;
  --ok: #2E7D4F;
  --ok-soft: #E3F1E8;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tabh: 64px;
  --safe-b: env(safe-area-inset-bottom);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1620; --surface: #16212C; --ink: #E4EAF0; --muted: #8C9BA8;
    --line: #26333F; --celeste: #7CB8EA; --celeste-soft: #1A3148;
    --sol: #E8B54A; --sol-soft: #3A2E12; --warn: #E48A73; --warn-soft: #3A2320; --ok: #6CC393; --ok-soft: #173326;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabh) + var(--safe-b) + 24px);
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* top bar */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 16px;
  background: var(--bg);
}
.brand {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -0.02em;
  color: var(--celeste);
}
.top-actions { display: flex; gap: 2px; }
.icon {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 0; background: none; border-radius: 12px; color: var(--muted); cursor: pointer;
}
.icon:active { background: var(--line); }
.icon.small { width: 34px; height: 34px; }
.icon.on { color: var(--sol); }
.icon.on svg { fill: currentColor; }

main { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.view { padding-top: 4px; }

/* inputs */
.searchbar { display: flex; gap: 8px; margin: 4px 0 10px; }
input[type=search], input[type=password], input[type=text], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
input[type=search] { font-family: var(--serif); font-size: 20px; }
textarea { font-family: var(--serif); font-size: 18px; line-height: 1.55; resize: vertical; display: block; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--celeste); outline-offset: -1px; border-color: transparent; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.primary {
  border: 0; background: var(--celeste); color: #fff; font-weight: 600;
  padding: 12px 18px; border-radius: 14px; cursor: pointer; white-space: nowrap;
}
@media (prefers-color-scheme: dark) { .primary { color: #0E1620; } }
.primary[disabled] { opacity: .45; }
.primary.grow { flex: 1; }
.ghost {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 14px; border-radius: 12px; cursor: pointer; font-size: 14px;
}
.link { border: 0; background: none; color: var(--celeste); padding: 0; cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.row { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.row.wrap { flex-wrap: wrap; }
.row .primary { margin-left: auto; }
.row.wrap .seg { flex: 1 1 auto; }


.seg { display: inline-flex; background: var(--line); padding: 2px; border-radius: 12px; gap: 2px; }
.seg button { white-space: nowrap; border: 0; background: none; padding: 7px 11px; border-radius: 10px; font-size: 14px; color: var(--muted); cursor: pointer; flex: 1; }
.seg button[aria-checked=true] { background: var(--surface); color: var(--ink); font-weight: 600; }

.dirbar { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: 6px 0 8px; }
.dirbar span { min-width: 64px; }
.dirbar span:last-child { text-align: left; }
.cam { cursor: pointer; border: 1px solid var(--line); background: var(--surface); width: 46px; height: 46px; }

/* bottom tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b); height: calc(var(--tabh) + var(--safe-b));
}
.tabs button {
  flex: 1; border: 0; background: none; cursor: pointer; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px;
}
.tabs button[aria-selected=true] { color: var(--celeste); font-weight: 600; }
.tabs button[aria-selected=true] svg { stroke-width: 2.1; }

/* conjugation */
.lemma-head { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px; }
.lemma { font-family: var(--serif); font-size: 32px; line-height: 1.1; flex: 1; }
.gloss { color: var(--muted); font-size: 15px; }
.parts { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.parts b { font: 400 16px var(--serif); color: var(--ink); }
.found { font-size: 14px; color: var(--celeste); margin: 12px 0 0; }

.vosnote { font-size: 13px; color: var(--muted); margin: -6px 0 6px; }

.mood { font: 600 13px var(--sans); color: var(--celeste); margin: 26px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--celeste-soft); }
.tense { margin: 14px 0 0; }
.tense h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.tense h3 span { font-weight: 400; color: var(--muted); }
.frow { display: flex; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.frow .p { width: 42%; font-size: 13px; color: var(--muted); }
.frow .f { font-family: var(--serif); font-size: 18px; }
.frow:active { background: var(--celeste-soft); }
.speakable { cursor: pointer; }
.speakable:active { opacity: .6; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.card .head { display: flex; align-items: flex-start; gap: 8px; }
.card h3 { margin: 0; font: 400 26px/1.15 var(--serif); flex: 1; }
.card .pos { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.card ol { margin: 0; padding-left: 22px; }
.card li { margin: 0 0 10px; }
.ex { display: block; font-family: var(--serif); color: var(--muted); font-size: 16px; margin-top: 2px; }
.flag { display: flex; gap: 8px; align-items: baseline; margin: 10px 0 0; font-size: 15px; }
.tag { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--celeste-soft); color: var(--celeste); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.sol { background: transparent; border: 1px solid var(--sol); color: var(--sol); }
.aiwarn { font-size: 13px; color: var(--warn); background: var(--warn-soft); padding: 8px 12px; border-radius: 10px; margin: 12px 0; }

.tr-main { font: 400 22px/1.45 var(--serif); margin: 0; }
.tr-src { font-size: 14px; color: var(--muted); margin: 0 0 10px; white-space: pre-wrap; }
.alt-item { border-top: 1px solid var(--line); padding: 10px 0 0; margin: 10px 0 0; }
.alt-item .t { font: 18px var(--serif); }
.alt-item .n { font-size: 14px; color: var(--muted); }
.thumb { max-width: 100%; max-height: 180px; border-radius: 10px; display: block; margin: 0 0 10px; }

.diff { font: 19px/1.7 var(--serif); margin: 0 0 12px; white-space: pre-wrap; }
.diff del { margin-right: 3px; color: var(--warn); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.diff ins { color: var(--ok); text-decoration: none; background: color-mix(in srgb, var(--ok) 14%, transparent); border-radius: 3px; padding: 0 1px; }
.fix { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 12px 0; }
.fix .ft { font: 17px var(--serif); }
.fix .ft del { color: var(--warn); margin-right: 6px; }
.fix .ft ins { color: var(--ok); text-decoration: none; }
.fix .why { font-size: 14px; color: var(--muted); margin-top: 2px; }
.fix.style { border-left-color: var(--sol); }

.msg { color: var(--muted); font-size: 15px; padding: 16px 0; }
.msg.err { color: var(--warn); }
.empty { color: var(--muted); font-size: 15px; padding: 20px 0; line-height: 1.6; }
.empty b { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 17px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--celeste); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.pick { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px; margin: 8px 0; cursor: pointer; }
.pick b { font: 400 20px var(--serif); }
.pick span { display: block; font-size: 13px; color: var(--muted); }

/* sheet */
.scrim { position: fixed; inset: 0; background: rgba(8, 14, 20, .45); z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-height: 88vh; overflow: auto; background: var(--bg);
  border-radius: 20px 20px 0 0; padding: 8px 16px calc(24px + var(--safe-b));
  max-width: 640px; margin: 0 auto;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -8px; background: var(--bg); padding: 8px 0; }
.sheet-head h2 { margin: 0; font: 400 24px var(--serif); }
.list-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-item button.main { flex: 1; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; min-width: 0; }
.list-item .t { font: 18px var(--serif); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .s { font-size: 13px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { font-size: 11px; font-weight: 600; color: var(--celeste); background: var(--celeste-soft); border-radius: 6px; padding: 2px 6px; flex: none; }
.field-label { display: block; font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.help { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.help a { color: var(--celeste); }
.settings-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabh) + var(--safe-b) + 14px); z-index: 30;
  background: var(--ink); color: var(--bg); font-size: 14px;
  padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .16s ease-out; }
  .sheet { animation: up .2s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(4px); } }
  @keyframes up { from { transform: translateY(24px); opacity: .6; } }
}

/* ---------- v1.1 ---------- */
body { padding-top: calc(env(safe-area-inset-top) + 12px); }
.tabs button { font-size: 11px; }
.tabs button span { white-space: nowrap; }

.seg.full { display: flex; width: 100%; }
.seg.full button { padding: 8px 4px; }
.moodtabs { margin: 18px 0 4px; }
.moodtabs button { font-size: 13px; }
.moodtabs + .tense, .moodtabs + .vosnote { margin-top: 10px; }

/* 1.33: the person picker is a two-row segmented control like the mood tabs: singular, then plural. */
.pseg { flex-direction: column; gap: 2px; margin: 16px 0 4px; }
.pseg .prow { display: flex; gap: 2px; }
.pseg button { font-size: 13px; padding: 8px 6px; }
.pseg button.pchip[data-p=el], .pseg button.pchip[data-p=ellos] { flex: 1.8; }

.pline { display: flex; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pline .t { width: 44%; flex: none; font-size: 13px; color: var(--muted); padding-right: 8px; }
.pline .f { font-family: var(--serif); font-size: 18px; }
.pline .alt, .frow .alt { font: 13px var(--sans); color: var(--muted); margin-left: 8px; }
.pline:active { background: var(--celeste-soft); }

.frow.hit, .pline.hit { background: var(--celeste-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.frow.hit .f, .pline.hit .f { font-weight: 600; }

.row .cam { flex: none; width: 44px; height: 46px; }
#view-tr .row .primary { padding: 12px 14px; }

.readnote { display: flex; gap: 12px; align-items: flex-start; background: var(--celeste-soft); border-radius: 14px; padding: 12px; margin: 8px 0; font-size: 14px; }
.readnote p { margin: 0; }
.thumb.small { width: 64px; height: 64px; object-fit: cover; margin: 0; flex: none; }

#view-more .seg.full { margin: 4px 0 8px; }


/* ---------- v1.2: roots ---------- */
.roots { margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.roots summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--celeste); list-style: none; }
.roots summary::-webkit-details-marker { display: none; }
.roots summary::after { content: ' ▸'; }
.roots[open] summary::after { content: ' ▾'; }
.rparts { margin: 10px 0 0; line-height: 1.8; }
.rparts b { font: 400 18px var(--serif); }
.rparts span { font-size: 13px; color: var(--muted); }
.rparts i { font-style: normal; color: var(--muted); margin: 0 8px; }
.rlit { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.rline { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.rline b { font: 400 16px var(--serif); }
.rk { display: inline-block; min-width: 58px; font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 6px; }
.rline .rm { color: var(--muted); font-size: 13px; }

/* ---------- v1.3 ---------- */
.tawrap { position: relative; }
.tawrap textarea { padding-right: 44px; }
.tawrap .clear { position: absolute; top: 6px; right: 6px; }

.interim { margin: 6px 2px 0; font: italic 16px var(--serif); color: var(--muted); }

.mic.live { background: var(--warn); border-color: var(--warn); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .mic.live { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 25%, transparent); } }
}
.langbtn { font: 600 13px var(--sans); color: var(--celeste); cursor: pointer; }

.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 10px 0; }
.stage-img { display: flex; justify-content: center; background: var(--bg); border-radius: 10px; overflow: hidden; }
.stage-img canvas { max-width: 100%; max-height: 300px; height: auto; width: auto; display: block; }
.stage .row { margin: 10px 0 0; }

.zoomable { cursor: zoom-in; }
.viewer {
  position: fixed; inset: 0; z-index: 40; background: rgba(8, 14, 20, .92);
  overflow: auto; display: flex; align-items: flex-start; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 12px) 8px 12px;
}
.viewer img { max-width: 100%; height: auto; display: block; }

.help.warnnote { color: var(--warn); }

/* ---------- v1.5 ---------- */
/* File inputs stay in the layout (visually hidden), not display:none, so the label opens them. */
.cam { position: relative; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
#view-word .row .help { margin: 0 0 0 4px; }
.tabs { transition: transform .12s ease-out; }

.focusbox { margin-top: 10px; font-size: 15px; padding: 10px 12px; }

.ident { border-top: 1px solid var(--line); padding: 12px 0 8px; }
.ident:first-of-type { border-top: 0; }
.card .ident:first-child, .card .tr-src + .ident, .card .thumb + .ident { border-top: 0; }
.iw { font: 400 22px/1.2 var(--serif); }
.iw .art { color: var(--muted); }
.ig { font-size: 13px; color: var(--muted); margin-top: 2px; }
.idesc { font-size: 15px; margin-top: 4px; }
.ident .link { margin-top: 6px; }

.guide {
  position: fixed; inset: 0; z-index: 35; background: rgba(8, 14, 20, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.guide-card {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto;
  border-radius: 20px 20px 0 0; padding: 12px 18px calc(24px + env(safe-area-inset-bottom));
}
.ghead { display: flex; align-items: center; justify-content: space-between; }
.ghead h2 { margin: 6px 0; font: 400 26px var(--serif); }
.guide-card h3 { font-size: 15px; margin: 18px 0 6px; color: var(--celeste); }
.guide-card ol { margin: 0; padding-left: 22px; }
.guide-card li { margin: 0 0 6px; }
.guide-card a { color: var(--celeste); }
@media (prefers-reduced-motion: no-preference) { .guide-card { animation: up .22s ease-out; } }

/* ---------- v1.6: help ---------- */
#more-seg button { font-size: 13px; padding: 8px 2px; }
.help-intro { font-size: 15px; color: var(--muted); margin: 10px 2px 4px; }
.help-sec h3 { font: 400 22px var(--serif); margin: 0 0 8px; color: var(--celeste); }
.help-sec ul { margin: 0 0 12px; padding-left: 20px; }
.help-sec li { margin: 0 0 6px; font-size: 15px; }

@media (min-width: 700px) {
  .guide { align-items: center; }
  .guide-card { border-radius: 20px; max-height: 88vh; }
}

/* v1.10 tab hints */
.tabhint { padding: 12px 0 4px; font-size: 14.5px; }
.tabhint[hidden] { display: none; }

/* 1.28: By tense / By person switch above the results replaces the chip row */
.viewseg { margin: 18px 0 0; }
.viewseg button { padding: 7px 14px; }
.viewseg + #conj-body .moodtabs { margin-top: 8px; }
.viewseg + #conj-body .pseg { margin-top: 8px; }

/* 1.72.1 (t37): no text selection outside the text boxes, so a tap or long-press on the app's text never opens
   Chrome's Touch to Search panel and its translation; copying goes through the Copy buttons. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
[data-say][role=button]:focus { outline: none; }
[data-say][role=button]:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; border-radius: 6px; }

/* 1.28: irregular forms in amber, the irregular tag, the model line */
.frow .f.irr, .pline .f.irr { color: var(--sol); }
.vtags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.tag.irr { background: var(--sol-soft); color: var(--sol); }
.modelline { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.modelline .link { font: inherit; font-weight: 600; color: var(--celeste); padding: 0; background: none; border: 0; cursor: pointer; }
.modelline .exform { font-size: 13px; color: var(--ink); background: var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.irrkey { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.irrkey i { width: 10px; height: 10px; border-radius: 3px; background: var(--sol); display: inline-block; }

/* 1.28: lighter Conjugar layout. Each tense is a white card with light lines between rows;
   gerundio and participio are a labelled pair; Palabra is a text link. */
#view-conj .lemma { font-size: 34px; }
.parts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 12px 0 0; }
.parts > div { display: grid; gap: 1px; }
.parts span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.parts p { margin: 0; }
.parts b { font: 400 18px var(--serif); color: var(--ink); }
.parts i { font: normal 13px var(--sans); color: var(--muted); }
.palabra-row { margin: 10px 0 0; }
.textlink { border: 0; background: none; padding: 4px 0; color: var(--celeste); font: 600 14px var(--sans); cursor: pointer; }
.textlink::after { content: " \2192"; }
.modelline .link { text-decoration: none; }
#view-conj .tense { background: var(--surface); border-radius: 14px; padding: 12px 14px 6px; margin: 10px 0 0; }
#view-conj .tense h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin: 0 0 4px; }
#view-conj .tense.pmood h3 { color: var(--celeste); }
#view-conj .frow, #view-conj .pline { border-bottom: 0; }
#view-conj .frow + .frow, #view-conj .pline + .pline { border-top: 1px solid var(--line); }
#view-conj .frow .p { width: 36%; flex: none; }
#view-conj .frow .f, #view-conj .pline .f { font-size: 19px; }
#view-conj .frow.hit + .frow, #view-conj .pline.hit + .pline { border-top-color: transparent; }
.viewseg + #conj-body .pseg { margin-bottom: 0; }
#view-conj .frow .alt, #view-conj .pline .alt { white-space: nowrap; display: inline-block; }

/* 1.28, restyled in 1.30 and 1.36: how common a verb is, as four signal bars and no words (backlog 53).
   One ink shade for every band; rara is the same meter with none lit. Celeste is only for things you
   tap (Buscar), amber for irregular, red for cautions, green for the country chip. */
.tag.freq { display: inline-flex; align-items: center; padding: 2px 4px; background: transparent; color: var(--ink); }
.tag.freq .meter { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.tag.freq .meter i { width: 3px; border-radius: 1px; background: currentColor; opacity: .2; }
.tag.freq .meter i:nth-child(1) { height: 4px; } .tag.freq .meter i:nth-child(2) { height: 7px; }
.tag.freq .meter i:nth-child(3) { height: 9.5px; } .tag.freq .meter i:nth-child(4) { height: 12px; }
.tag.freq .meter i.on { opacity: 1; }

/* 1.29: Palabra lookup as a small button on the tags line; search box stays at the top */
/* 1.30: Buscar is a solid button with square-ish corners (tags are pills); the hit area reaches about 44px. */
.lookup { position: relative; display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--sans); color: var(--surface); background: var(--celeste); border: 0; border-radius: 8px; padding: 4px 11px 4px 9px; cursor: pointer; }
.lookup::after { content: ""; position: absolute; inset: -9px -4px; }
.lookup svg { width: 14px; height: 14px; stroke-width: 2.4; }
#view-conj .searchbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); margin: 0 -16px; padding: 4px 16px 8px; }
#view-conj .frow, #view-conj .pline { scroll-margin-top: 90px; }
.modelline .exform + .exform { margin-left: 2px; }

/* 1.29.3: Chrome on Android opens its word lookup when plain text is tapped. On the verb card,
   only the forms (buttons for the browser, tap to hear) can be selected; labels, headers, the
   meaning and the model line can't, so a tap there does nothing. Long-press still copies a form. */

/* 1.30: regional cautions. The normal word in the selected country gets a green chip with a pin and
   the country code (full name for screen readers); vulgar and ojo stay in the same soft red. */
.tag.cc { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); letter-spacing: .04em; }
.tag.cc svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* 1.30: the irregular tag starts the model line */
.modelline .tag.irr { margin-right: 2px; }

/* 1.31: the irregular forms panel (backlog 28). "Formas irregulares" sits at the right of the model
   line and opens one row per irregular tense between it and gerundio/participio, closed at first. */
.mlrow { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; }
.mlrow .modelline { flex: 1; min-width: 0; margin: 0; }
.irrtoggle { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; font: 600 13px var(--sans); color: var(--celeste); background: none; border: 0; padding: 2px 0; cursor: pointer; white-space: nowrap; }
.irrtoggle::after { content: ""; position: absolute; inset: -12px -6px; }
.irrtoggle svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .15s; }
.irrtoggle[aria-expanded=true] svg { transform: rotate(180deg); }
.irrpanel { background: var(--surface); border-radius: 12px; padding: 2px 12px; margin: 10px 0 0; }
.irow { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 8px 0; align-items: baseline; }
.irow + .irow { border-top: 1px solid var(--line); }
.irow .rl { font-size: 12px; color: var(--muted); }
.irow .rf { font: 17px var(--serif); color: var(--sol); }
.irow .rf i { font: normal 12px var(--sans); color: var(--muted); }
.irow .rule { font: 12px var(--sans); color: var(--ink); background: var(--line); border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.parts b.irr { color: var(--sol); }

/* 1.32: "y 15 más" opens a bottom sheet of the verbs that follow a model (backlog 36). */
.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: 75vh; padding: 0; border: 0; border-radius: 18px 18px 0 0; background: var(--bg); color: var(--ink); display: none; flex-direction: column; }
.sheet[open] { display: flex; }
.sheet::backdrop { background: rgba(0, 0, 0, .35); }
.sheet-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 18px 16px 10px; }
.sheet-head .grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line); }
.sheet-head h3 { flex: 1; margin: 0; font-size: 16px; }
.sheet-x { border: 0; background: none; padding: 6px; margin: -6px; color: var(--muted); cursor: pointer; }
.sheet-x svg { width: 20px; height: 20px; }
.sheet-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(16px + var(--safe-b)); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "v t" "g t"; gap: 0 10px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: 0; padding: 10px 12px; cursor: pointer; }
.srow + .srow { border-top: 1px solid var(--line); }
.sheet-list > .srow:first-child, .srare .srow:first-of-type { border-radius: 12px 12px 0 0; }
.sheet-list > .srow:last-of-type, .srare .srow:last-child { border-radius: 0 0 12px 12px; }
.sheet-list > .srow:only-of-type { border-radius: 12px; }
.srow b { grid-area: v; font: 400 18px var(--serif); color: var(--ink); }
.srow .sg { grid-area: g; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .tag { grid-area: t; }
.srare { margin: 12px 0 0; }
.srare summary { font: 600 13px var(--sans); color: var(--celeste); padding: 6px 0 10px; cursor: pointer; }

/* 1.34: Conjugar and Palabra get the same clear button as Traducir and Corregir (the browser's tiny one is hidden). */
.qwrap { position: relative; flex: 1; min-width: 0; }
.qwrap input { width: 100%; padding-right: 44px; }
.qwrap .clear { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }

/* 1.35: the Conjugar home (backlog 44) */
.home { padding: 8px 0 12px; }
.greet { font: 26px/1.35 var(--serif); color: var(--ink); margin: 18px 0 20px; }
.gslot { font: inherit; color: var(--celeste); background: none; border: 0; border-bottom: 2px solid var(--celeste-soft); padding: 0; cursor: pointer; display: inline-block; animation: gdrop .45s ease; }
@keyframes gdrop { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gslot { animation: none; } }
.hlab { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin: 18px 0 6px; }
.hlab span { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.hlab .icon { color: var(--celeste); margin-right: -6px; }
.hlab .icon svg { width: 18px; height: 18px; }
.vchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vchip { font: 17px var(--serif); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.vchip.irr { color: var(--sol); }
.mystery { display: block; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: 14px; padding: 12px 14px; margin: 20px 0 0; cursor: pointer; }
.mystery .k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mystery .q { display: block; font: 24px var(--serif); color: var(--sol); margin: 4px 0; }
.mystery .a { display: block; font-size: 13px; color: var(--muted); }
.mystery .a b { display: block; color: var(--celeste); margin-top: 4px; }
.donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; text-align: center; margin: 2px 0 14px; }
.donut .ring { position: relative; width: 44px; height: 44px; margin: 0 auto; }
.donut svg { width: 44px; height: 44px; fill: none; stroke-width: 6; }
.donut .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--sans); color: var(--ink); }
.hlab .htotal { font: 600 13px var(--sans); color: var(--celeste); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: none; }
button.donut { display: block; width: 100%; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.donut .track { stroke: var(--line); }
.donut .fill { stroke: var(--celeste); stroke-linecap: round; }
.donut span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.homehelp { background: var(--surface); border-radius: 14px; padding: 10px 14px; margin: 22px 0 0; }
.homehelp summary { font: 600 13px var(--sans); color: var(--celeste); cursor: pointer; }
.homehelp ul { margin: 8px 0 2px; padding-left: 18px; font-size: 14px; color: var(--ink); line-height: 1.6; }
.homehelp b { font: 400 16px var(--serif); }

/* 1.36: bars under the donuts, in the sheet title and as icons in the help */
.donut .tag.freq { margin-top: 2px; }
.sheet-head h3 .tag.freq { vertical-align: 1px; margin-left: 4px; }
.homehelp li.icon-li { list-style: none; margin-left: -18px; display: flex; gap: 8px; align-items: baseline; }
.homehelp li.icon-li .tag { flex: none; }

/* ---------- 1.39: Foto tab (a raised camera in the middle of the bar), Más at the top ---------- */
body { padding-top: 0; }
.top { position: static; max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 6px) 6px 0 16px; }
.top .icon { width: 44px; height: 44px; }
.top .icon[aria-current=page] { color: var(--celeste); background: var(--celeste-soft); }
.tabs .tab-cam { position: relative; justify-content: flex-end; padding-bottom: 9px; }
.tab-cam .fab {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--celeste); color: var(--bg); border: 4px solid var(--bg);
  box-shadow: 0 2px 8px rgba(8, 14, 20, .18);
}
.tab-cam .fab svg { width: 26px; height: 26px; stroke-width: 1.9; }
.tabs .tab-cam[aria-selected=true] .fab svg { stroke-width: 2.2; }

.ph-title { font: 400 32px/1.1 var(--serif); letter-spacing: -0.01em; margin: 10px 0 6px; }
#photo-sub { color: var(--muted); margin: 0 0 16px; line-height: 1.45; }
.ph-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ph-btn {
  position: relative; overflow: hidden; height: 128px; padding: 16px; border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  font-size: 17px; font-weight: 600; line-height: 1.2;
}
.ph-btn svg { width: 34px; height: 34px; color: var(--celeste); }
.ph-btn.main { background: var(--celeste); border-color: var(--celeste); color: var(--bg); }
.ph-btn.main svg { color: inherit; }
.ph-btn:active { transform: scale(.98); }
.ph-head { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 10px; }
.ph-head h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ph-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.ph-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.ph-tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--line); }
.ph-tile .w { font: 15px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tile .s { font-size: 12px; color: var(--muted); }
.ph-note { margin: 24px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--celeste-soft); font-size: 14px; line-height: 1.45; }
.ph-bar { display: flex; align-items: center; gap: 4px; margin: 0 -10px 0; }
.ph-when { flex: 1; font-size: 14px; color: var(--muted); }
.ph-card { margin-top: 4px; }
.ph-img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto 6px; border-radius: 12px; }
.ph-ans + .ph-ans { border-top: 1px solid var(--line); margin-top: 6px; }
.ph-ah, .card .ph-ah { display: block; margin: 10px 0 0; font: 600 14px/1.4 var(--sans); color: var(--ink); letter-spacing: 0; }
details.ph-ans summary { list-style: none; cursor: pointer; padding: 4px 0 10px; display: flex; flex-direction: column; gap: 2px; }
details.ph-ans summary::-webkit-details-marker { display: none; }
details.ph-ans[open] .ph-chips { display: none; }
.ph-chips { font: 15px var(--serif); color: var(--muted); }
.ph-again { display: flex; gap: 8px; margin: 12px 0 0; }
.ph-again input { flex: 1; min-width: 0; }
.ph-again button { flex: none; }

/* ---------- 1.43: top bar with the tab's name, a star for Guardados and a menu; Foto's home with your words ---------- */
.top { position: relative; z-index: 30; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 6px 0 16px; }
.top-title { margin: 0; font: 400 26px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
#top-saved { color: var(--sol); }
#top-saved[aria-current=page] svg { fill: currentColor; }
#top-saved[aria-current=page], #menu-btn[aria-current=page], #menu-btn[aria-expanded=true] { background: var(--celeste-soft); }
#menu-btn[aria-current=page], #menu-btn[aria-expanded=true] { color: var(--celeste); }
.top-menu {
  position: absolute; right: 8px; top: calc(env(safe-area-inset-top) + 56px); z-index: 20; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px 0; border-radius: 14px; background: var(--surface);
  box-shadow: 0 10px 32px rgba(8, 14, 20, .22);
}
.top-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: none; color: var(--ink); font-size: 15px; text-align: left; cursor: pointer; }
.top-menu button svg { width: 20px; height: 20px; color: var(--muted); }
.top-menu button[data-more=saved] svg { color: var(--sol); }
.top-menu button:active, .top-menu button:focus-visible { background: var(--celeste-soft); outline: none; }

.ph-hero { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 8px; }
.ph-big, .ph-gal { position: relative; overflow: hidden; height: 64px; border-radius: 16px; cursor: pointer; }
.ph-big { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--celeste); color: var(--bg); font-size: 18px; font-weight: 600; }
.ph-gal { width: 64px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--celeste); }
.ph-hero svg { width: 26px; height: 26px; }
.ph-big:active, .ph-gal:active { transform: scale(.98); }
.ph-words { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-word { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 16px var(--serif); cursor: pointer; }
.ph-more { padding: 6px 8px; border: 0; background: none; color: var(--celeste); font-size: 14px; font-weight: 600; cursor: pointer; }
.ph-saveall { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.ph-saveall svg { width: 16px; height: 16px; color: var(--sol); }
.ph-saveall.on svg { fill: currentColor; }
.ph-pic { position: relative; display: block; }
.ph-star { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; background: rgba(8, 14, 20, .55); }
.ph-star svg { width: 14px; height: 14px; color: var(--sol); fill: currentColor; }
.ident .acts { display: flex; gap: 18px; margin-top: 6px; }
.ident .acts .link { margin-top: 0; }
.ident .link.muted { color: var(--muted); }

/* 1.44: the app's name and logo in Ajustes, Acerca de (backlog 98) */
.about-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; }
.about-head img { border-radius: 12px; }
.about-name { font: 26px/1.1 var(--serif); color: var(--ink); }
.about-ver { font-size: 13px; color: var(--muted); }

/* 1.45: Palabra's home and card (backlog 94, 63, t64) */
.wcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.whead { display: flex; align-items: center; gap: 4px; }
.whead .hw { flex: 1; margin: 0; font: 400 40px/1.1 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.whead .art { color: var(--muted); }
.wgloss { margin: 4px 0 0; font-size: 17px; color: var(--muted); }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 4px; }
.wmeta .wpos { font-size: 14px; color: var(--muted); }
.pill { height: 32px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--celeste); color: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; }
@media (prefers-color-scheme: dark) { .pill { color: #0E1620; } }
.wlines { margin: 10px 0 2px; }
.wlines.wtop { margin: 12px 0 0; padding: 4px 14px 12px; background: var(--warn-soft); border-radius: 14px; }
.wline .softtag { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; white-space: nowrap; }
.wline.soft .tag { opacity: .75; }
.wline .fnote { display: block; margin-top: 4px; font-size: 14px; }
.wsenses { margin: 12px 0 0; padding: 4px 0 0 22px; border-top: 1px solid var(--line); }
.wsenses li { margin: 10px 0 0; font-size: 17px; }
.wsenses .def { display: block; }
.wsenses .ext { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wcard .hlab { margin: 14px 0 6px; min-height: 0; }
.wstrip { display: flex; align-items: center; gap: 2px; margin: 8px -6px 0; }
.wstrip .slab { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 4px 0 6px; }
.wstrip .icon { color: var(--celeste); flex: none; }
.wstrip .icon[disabled] { color: var(--line); }
.wstrip .icon svg { width: 18px; height: 18px; }
.strip-row { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.strip-row::-webkit-scrollbar { display: none; }
.schip { flex: none; padding: 5px 11px; border: 0; border-radius: 99px; background: var(--celeste-soft); color: var(--celeste); font: 15px var(--serif); white-space: nowrap; cursor: pointer; }
.schip.on { background: var(--celeste); color: var(--bg); }
.trychips { display: flex; flex-wrap: wrap; gap: 8px; }
.trychip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; text-align: left; }
.trychip .w { font: 17px var(--serif); color: var(--ink); }
.trychip .l { font-size: 12px; color: var(--muted); }
.whcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.whcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.whcard .k { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.whcard .dw { font: 22px/1.15 var(--serif); color: var(--celeste); }
.whcard .neq { color: var(--warn); }
.whcard .dm { font-size: 14px; line-height: 1.35; }
.whcard .tag { margin-top: 4px; }
.whist { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; }
.hrow { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.hrow:last-child { border-bottom: 0; }
.hrow .hw { font: 18px var(--serif); flex: none; }
.hrow .hs { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .hstar svg { width: 16px; height: 16px; color: var(--sol); fill: currentColor; }
.primary.wide { width: 100%; margin: 6px 0 4px; }
.synw { font: 400 28px var(--serif) !important; }
#word-form .primary.sq { width: 52px; padding: 0; display: grid; place-items: center; flex: none; }
#word-form .primary.sq svg { width: 22px; height: 22px; stroke-width: 2; }

/* 1.48.0: an arrow next to a verb's bars when its region differs from Spanish overall (backlog 108) */
.tag.freq .rarr { margin-left: 3px; font-size: 11px; font-weight: 700; line-height: 1; }

/* 1.47: Foto v2, where each thing is (numbered pins from photo prompt 7's boxes), examples, the scene in Spanish (backlog 83, 88) */
.ph-pics { position: relative; display: table; margin: 0 auto 6px; line-height: 0; overflow: hidden; border-radius: 10px; }   /* keeps the highlight's shade on the photo */
.ph-pics .ph-img { margin: 0; }
.ph-pin { position: absolute; transform: translate(-50%, -50%); min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; border: 2px solid #fff; background: var(--celeste); color: #fff; font: 700 13px/22px var(--sans, system-ui); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); cursor: pointer; }
.ph-pin.on { background: var(--sol); color: #1b1300; }
.ph-hl { position: absolute; border: 3px solid var(--sol); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(8, 14, 20, .35); pointer-events: none; }
.ph-num { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 2px; border-radius: 99px; border: 0; background: var(--celeste); color: #fff; font: 700 12px/1 var(--sans, system-ui); vertical-align: 3px; cursor: pointer; }
.ident.on .ph-num { background: var(--sol); color: #1b1300; }
.ident.on { background: var(--sol-soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.iex { margin-top: 6px; font: italic 16px/1.35 var(--serif); cursor: pointer; }
.iex svg, .ph-scene .es svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--celeste); }
.ph-scene { margin: 0 0 10px; }
.ph-scene .es { margin: 0 0 2px; font: 17px/1.35 var(--serif); cursor: pointer; }
.ph-scene .tr-src { margin: 0; }

/* 1.50.0, Palabra prompt 2 on the card: register, lines on their sense, collocations, the most natural option */
.tag.reg { background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-weight: 600; vertical-align: 1px; }
.wsenses .wline { margin: 6px 0 2px; font-size: 14px; }
.wcoll { list-style: none; margin: 0; padding: 0; }
.wcoll li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wcoll li:last-child { border-bottom: 0; }
.wcoll .cp { font: 17px var(--serif); color: var(--ink); }
.wcoll .cn { font-size: 13px; color: var(--muted); }
.tag.nat { display: inline-block; margin-bottom: 6px; background: var(--ok-soft); color: var(--ok); }

/* Two words (backlog 12, 112; mockup C4): the summary, then one column per word. Behind S.twoWords until tested. */
.wcard.two .tsum { margin: 0 0 8px; font: 18px/1.4 var(--serif); color: var(--ink); }
.wcard.two .tswap { margin: 0 0 12px; }
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tcol { min-width: 0; padding-top: 10px; border-top: 2px solid var(--celeste); }
.tcol.native { border-top-color: var(--line); }
.tcol .whead { display: flex; align-items: center; gap: 4px; }
.tcol .hw { margin: 0; font: 22px/1.2 var(--serif); overflow-wrap: anywhere; }
.tcol .wpos { display: inline-block; margin: 2px 0 6px; font-size: 14px; color: var(--muted); }
.tcol .tmeans { margin: 0 0 6px; font-size: 15px; }
.tcol .tuse { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.tcol .tuse .k { font-weight: 700; color: var(--ink); }
.tcol .ex { display: block; margin-top: 6px; font: italic 16px/1.35 var(--serif); }
.tcol .ext { display: block; font-size: 13px; color: var(--muted); }
.wcard.two .flag { margin-top: 12px; }

/* 1.53.0, Foto: boxes in the full-size view (backlog 122), the Claude-key note (backlog 114) */
.viewer .vw-pics { position: relative; max-width: 100%; line-height: 0; }
.vw-box { position: absolute; padding: 0; background: none; border: 2px solid rgba(255, 255, 255, .9); border-radius: 6px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(8, 14, 20, .55), inset 0 0 0 1px rgba(8, 14, 20, .35); }
.vw-box.on { border: 3px solid var(--sol); }
.vw-lab { position: absolute; bottom: 100%; left: -2px; margin-bottom: 3px; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  background: rgba(8, 14, 20, .82); color: #fff; font: 600 13px/1.2 var(--sans); }
.vw-box.on .vw-lab { background: var(--sol); color: #15212C; }
.vw-box.top .vw-lab { bottom: auto; top: 0; margin: 3px 0 0 3px; }
.vw-bar { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 16px); display: flex; justify-content: center; pointer-events: none; }
.vw-all { pointer-events: auto; padding: 9px 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); color: #15212C; font-weight: 600; font-size: 15px; }

/* 1.55.0, Foto's word card (backlog 126, 127): the word larger with its speaker right after it, the pin's number in
   the top right corner, and the whole card a tap target for marking it on the photo. */
.ident { position: relative; }
.ident.pinned { cursor: pointer; }
.ident.pinned .iw { padding-right: 34px; }
.ident .iw { font-size: 27px; line-height: 1.15; }
.ident .iw .icon { width: 36px; height: 36px; margin-left: 2px; vertical-align: -5px; }
.ident .iw .tag { margin-left: 4px; vertical-align: 4px; }
.ident > .ph-num { position: absolute; top: 14px; right: 0; margin: 0; min-width: 26px; height: 26px; font-size: 13px; vertical-align: 0; }
.ident.on > .ph-num { right: 10px; }

/* 1.56.0, Foto: the number on each word card twice as big (backlog 129). 1.57.0: the pins on the photo are back to
   their old size (backlog 130), and the card's number floats in the top right corner so the text runs up under the
   word instead of leaving a band below it (backlog 131). */
.ident > .ph-num { position: static; float: right; min-width: 52px; height: 52px; margin: 0 0 6px 12px; font-size: 24px; }
.ident.pinned .iw { padding-right: 0; }
.ident .acts { clear: right; }
.ph-hl.multi { box-shadow: 0 0 0 2px rgba(8, 14, 20, .5); }

/* 1.58.0, sound only from the speaker (backlog 135): the sentence is plain text, the small button beside it plays it.
   The button is wider and taller than its icon so it stays easy to hit on purpose. */
.iex, .ph-scene .es { cursor: auto; }
.say-inline { display: inline-grid; place-items: center; width: 34px; height: 30px; margin: -6px 0 -6px -2px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--celeste); vertical-align: middle; cursor: pointer; }
.say-inline:active { background: var(--line); }
.say-inline svg { width: 18px; height: 18px; }

/* 1.64.0, reports on results (backlog 152): the menu item sits under the others, and the sheet holds the reason, an
   optional note and what gets sent. */
.top-menu button.report { border-top: 1px solid var(--line); }
.rep { display: flex; flex-direction: column; gap: 10px; }
.rep textarea { width: 100%; box-sizing: border-box; font: 15px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.rep-what { margin: 0; font-size: 13px; color: var(--muted); }
.rep-err { margin: 0; font-size: 14px; color: var(--warn); }
.ghost.wide { width: 100%; }

/* 1.69.0, reuse a saved answer (backlog 85): one quiet line at the top of a card shown from a saved answer, with
   Preguntar de nuevo for a fresh one. */
.savedline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.savedline .link { font-size: 13px; }

/* Credits (t23, backlog 179, 183): the cost on each AI button, the balance on each AI tab, How Vos answers. */
.cost {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--sol-soft); color: var(--sol); font: 700 11px/1 var(--sans); vertical-align: middle;
}
.primary.sq, label.icon.cam, .ph-btn, .ph-big, .ph-gal { position: relative; }
.primary.sq > .cost, label.icon.cam > .cost, .ph-big > .cost, .ph-gal > .cost { position: absolute; top: -6px; right: -6px; margin: 0; }
.credits-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.credits-line.low { color: var(--warn); }
.credits-line .link { font-size: 13px; }
.door { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.door h3 { margin: 10px 0 2px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pack {
  display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
}
.pack b { font-weight: 600; }
.pack span { color: var(--celeste); font-weight: 600; }
.pack[disabled] { opacity: .5; cursor: default; }
#a-signin { margin-top: 10px; min-height: 44px; }
.packs > p { grid-column: 1 / -1; margin: 0; }