/* Web adaptation of Apple's HIG (iOS 26/27): system typography, inset groups, semantic
   color, accessible controls, capsule-shaped controls, and Liquid Glass navigation floating
   above solid content (the "Liquid Glass" section at the end, with glass.js). */
:root {
  --app-safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --app-safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --app-safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
  --app-safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));

  color-scheme: light;
  font: -apple-system-body;
  --bg: #f2f2f7;
  --paper: #fff;
  --ink: #1c1c1e;
  --muted: #636366;
  --line: #d8d8dc;
  --fill: #e9e9ee;
  --accent: #0066cc;
  --soft: #e8f1fc;
  --green: #248138;
  --green-bg: #eaf6ed;
  --red: #c42b24;
  --red-bg: #fceceb;
  --warn: #8a4b00;
  --warn-bg: #fdf1dc;
  --glass-line: #ffffffd9;
  /* Liquid Glass: a see-through tint, a lit rim, and a soft lift off the content. */
  --glass: #ffffff6b;
  --glass-thick: #f9f9fbd6;
  --glass-rim: #ffffffe6;
  --glass-rim-low: #ffffff5c;
  --glass-shade: 0 10px 30px -10px #0000002e, 0 2px 8px -2px #00000014;
  --glass-blur: 14px;
  --lens: #7676801f;
  --lens-lifted: #ffffff2e;
  --thumb: #fff;
  --switch-off: #e9e9eb;
  --switch-on: #34c759;
  /* Springs (damping ≈ .72 and ≈ .9), as CSS linear() curves: a slight settle, like iOS. */
  --spring: linear(0, 0.025, 0.088, 0.175, 0.276, 0.382, 0.486, 0.584, 0.674, 0.752, 0.82, 0.877, 0.923, 0.96, 0.988, 1.008, 1.022, 1.031, 1.036, 1.038, 1.038, 1.036, 1.033, 1.029, 1.025, 1.021, 1.017, 1.013, 1.01, 1.008, 1.005, 1.003, 1);
  --spring-soft: linear(0, 0.026, 0.09, 0.175, 0.269, 0.365, 0.458, 0.543, 0.621, 0.689, 0.747, 0.797, 0.839, 0.874, 0.903, 0.926, 0.944, 0.959, 0.97, 0.979, 0.985, 0.99, 0.994, 0.997, 1);
  --radius: 24px;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23636366' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #000;
  --paper: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #aeaeb2;
  --line: #38383a;
  --fill: #2c2c2e;
  --accent: #6aafff;
  --soft: #1c304a;
  --green: #6bd483;
  --green-bg: #193323;
  --red: #ff8a83;
  --red-bg: #3b2223;
  --warn: #ffc56b;
  --warn-bg: #33270f;
  --glass-line: #ffffff21;
  --glass: #26262a80;
  --glass-thick: #1f1f22e0;
  --glass-rim: #ffffff52;
  --glass-rim-low: #ffffff17;
  --glass-shade: 0 10px 30px -10px #000000b3, 0 2px 8px -2px #00000066;
  --lens: #ffffff1f;
  --lens-lifted: #ffffff17;
  --thumb: #636366;
  --switch-off: #39393d;
  --switch-on: #30d158;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23aeaeb2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a, select, summary { touch-action: manipulation; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:is(button, a, select, input, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
a { color: var(--accent); }
svg {
  width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
h1, h2, h3, p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2.125rem; letter-spacing: -.035em; font-weight: 700; }
h2 { font-size: 1.375rem; letter-spacing: -.025em; font-weight: 700; }
h3 { font-size: 1.0625rem; letter-spacing: -.015em; font-weight: 600; }
.shell {
  max-width: 960px; margin: 0 auto;
  padding: var(--app-safe-top) max(20px, var(--app-safe-right)) calc(120px + var(--app-safe-bottom)) max(20px, var(--app-safe-left));
}
.ask-new { margin-top: 4px; }
/* ── Home, like Yandex Go's services: 2×2 big tiles whose 3D objects rise out of them → a paged rail
   of small tiles → one wide field. Labels sit under the tiles. ── */
:root { --go-bg: #fff; --go-tile: #f2f2ef; --go-ink: #21201f; --go-muted: #7a7a76; }
:root[data-theme=dark] { --go-bg: #191918; --go-tile: #2f2f2e; --go-ink: #f4f4f1; --go-muted: #a3a39f; }
body.home-mode { --bg: var(--go-bg); background: var(--go-bg); color: var(--go-ink); }
body.home-mode .footnote, body.home-mode::after { display: none; }
body.home-mode .shell { max-width: 640px; padding-bottom: calc(28px + var(--app-safe-bottom)); }
.go-home { padding: 4px 0 4px; }
.go-home a, .go-home button { -webkit-tap-highlight-color: transparent; }
.go-home :is(.go-service, .go-rail > *) { transition: transform .35s var(--spring); }
.go-home :is(.go-service, .go-rail > *):active { transform: scale(.96); }
.go-home img { pointer-events: none; -webkit-user-select: none; user-select: none; }
/* The big four: a short tile, the object standing on it and rising above its top edge. */
.go-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 14px; padding-top: 32px; }
.go-service { display: grid; justify-items: center; align-content: start; min-width: 0; color: var(--go-ink); text-align: center; text-decoration: none; }
.go-service-stage { position: relative; display: block; width: 100%; height: 72px; border-radius: 24px; background: var(--go-tile); }
.go-service img { position: absolute; left: 50%; bottom: 8px; height: 94px; width: auto; max-width: 92%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 8px 10px #00000026); }
.go-docs img, .go-status img { height: 96px; }
.go-service strong { display: block; margin-top: 8px; font-size: 1.0625rem; font-weight: 560; letter-spacing: -.02em; line-height: 1.15; }
.go-live { position: absolute; top: 11px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #2fd16f; box-shadow: 0 0 0 3px #2fd16f2e; animation: go-live 2.4s ease-in-out infinite; }
@keyframes go-live { 50% { box-shadow: 0 0 0 6px #2fd16f00; } }
.home.is-watcher-paused .go-live { background: #ffc232; box-shadow: 0 0 0 3px #ffc2322e; animation: none; }
.home.has-open-slots .go-live { background: #ff8a3d; box-shadow: 0 0 0 3px #ff8a3d2e; }
/* The rail: small square tiles that scroll sideways under the big four. */
.go-rail { display: flex; gap: 12px; margin: 26px calc(-1 * max(20px, var(--app-safe-left))) 0; padding: 0 max(20px, var(--app-safe-left)); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(20px, var(--app-safe-left)); scrollbar-width: none; overscroll-behavior-x: contain; }
.go-rail::-webkit-scrollbar { display: none; }
.go-rail > * { flex: 0 0 76px; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0; border: 0; color: var(--go-ink); background: none; text-align: center; text-decoration: none; font: inherit; cursor: pointer; scroll-snap-align: start; }
.go-rail span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--go-tile); }
.go-rail img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 5px #00000022); }
.go-rail b { max-width: 100%; font-size: .75rem; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.go-pages { display: flex; justify-content: center; gap: 9px; margin: 18px 0 22px; }
.go-pages i { width: 8px; height: 8px; border-radius: 50%; background: var(--go-muted); opacity: .45; transition: opacity .3s, background .3s; }
.go-pages i.on { background: var(--go-ink); opacity: 1; }
.go-pages[hidden] + .go-ask-field { margin-top: 26px; }
/* "Ask anything": a text field in the assistant's colours — gradient edge, soft glow, gradient sparkle and
   a blinking caret. It is read-only: a tap opens a new AI chat (app.js renderHome). */
.go-ask-field { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 18px; border: 1.5px solid transparent; border-radius: 22px; color: var(--go-ink); background: linear-gradient(var(--go-tile), var(--go-tile)) padding-box, var(--ai-edge) border-box; box-shadow: 0 12px 28px -20px var(--ai-glow), 0 0 0 4px var(--ai-tint); cursor: text; transition: transform .35s var(--spring), box-shadow .35s var(--spring); -webkit-tap-highlight-color: transparent; }
.go-ask-field:active { transform: scale(.985); box-shadow: 0 8px 20px -14px var(--ai-glow), 0 0 0 4px var(--ai-ring); }
.go-ask-field:focus-within { box-shadow: 0 12px 28px -20px var(--ai-glow), 0 0 0 4px var(--ai-ring); }
.go-ask-icon { display: grid; place-items: center; flex: none; }
.go-ask-icon svg { width: 25px; height: 25px; stroke-width: 1.8; }
.go-ask-caret { flex: none; width: 2px; height: 22px; margin-right: -10px; border-radius: 2px; background: var(--ai-grad); animation: go-caret 1.1s steps(1) infinite; }
@keyframes go-caret { 50% { opacity: 0; } }
.go-ask-field input { flex: 1; min-width: 0; height: 58px; padding: 0; border: 0; outline: 0; color: var(--go-ink); background: transparent; font: inherit; font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; cursor: text; caret-color: transparent; }
.go-ask-field input::placeholder { color: var(--go-ink); opacity: .72; }
/* Home → Ask: the field becomes the chat's composer and the chat page rises in (app.js openAsk). */
.vt-ask .go-ask-field, .vt-ask .ask-composer { view-transition-name: ask-field; }
::view-transition-group(ask-field) { animation-duration: .5s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
html.vt-ask::view-transition-old(root) { animation: go-page-out .28s ease both; }
html.vt-ask::view-transition-new(root) { animation: go-page-in .5s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes go-page-out { to { opacity: 0; transform: scale(.97); } }
@keyframes go-page-in { from { opacity: 0; transform: translateY(28px); } }
#askScreen.screen-enter { animation: go-page-in .45s cubic-bezier(.32, .72, 0, 1) both; }
@media (prefers-reduced-motion: reduce) { .go-live, .go-ask-caret, #askScreen.screen-enter { animation: none; } }
@media (min-width: 40rem) { .go-service-grid { row-gap: 72px; padding-top: 44px; }.go-service-stage { height: 92px; }.go-service img { height: 130px; }.go-rail { margin-left: 0; margin-right: 0; padding: 0; } }
.masthead { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 16px; margin-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.025em; min-height: 44px; min-width: 0; }
/* The bot's own picture (the Colosseum), round like its Telegram avatar. */
.brand-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 .5px #0000001a; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Share this page (share.js) beside the language picker; the same round button in dialogs. */
.masthead-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.share-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fill); color: var(--accent); }
.share-button svg, .dialog-actions .close svg { width: 20px; height: 20px; stroke-width: 2.1; }
.dialog-actions { display: flex; gap: 8px; flex: none; }
.share-toast { position: fixed; inset: auto; left: 50%; top: calc(var(--app-safe-top) + 12px); transform: translateX(-50%); z-index: 60; margin: 0; border: 0; width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px; color: var(--ink); font-size: .9375rem; line-height: 1.35; }
.share-toast[hidden] { display: none; }
.language select { min-height: 44px; min-width: 64px; background: var(--fill); border: 0; border-radius: 999px; color: var(--accent); padding: 0 12px; font-size: .9375rem; font-weight: 600; }
.hero { margin-bottom: 24px; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero p { color: var(--muted); margin-top: 8px; max-width: 640px; font-size: 1.0625rem; }
.year-pill { color: var(--muted); font-size: .9375rem; }
.filters { background: var(--paper); border-radius: var(--radius); overflow: visible; }
.filter-field { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; position: relative; min-width: 0; }
.filter-field + .filter-field::before { content: ''; position: absolute; top: 0; left: 50px; right: 0; height: .5px; background: var(--line); }
.filter-field > svg { color: var(--accent); width: 22px; height: 22px; }
.filter-label { font-size: 1rem; white-space: nowrap; }
.filter-field select {
  flex: 1; min-width: 0; min-height: 48px; text-align: right; text-align-last: right;
  border: 0; background: transparent; color: var(--muted); font-size: .9375rem;
  padding: 0 0 0 8px; border-radius: 8px; cursor: pointer;
}
.overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 16px 0 28px; background: var(--paper); border-radius: var(--radius); padding: 18px 0; container-type: inline-size; }
.stat { padding: 0 16px; min-width: 0; position: relative; }
.stat + .stat { border-left: .5px solid var(--line); }
.stat-label { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.stat strong { display: block; font-size: 1.875rem; letter-spacing: -.04em; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.stat small { font-size: .75rem; color: var(--muted); }
.stat > svg { width: 16px; height: 16px; }
.approved-stat strong, .approved-stat > svg { color: var(--green); }
.denied-stat strong, .denied-stat > svg { color: var(--red); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 12px; }
.section-head .small { font-size: .8125rem; color: var(--muted); text-align: right; }
/* Cases: the filters live in a sheet; the page shows them as one tappable line. */
.filter-summary { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 8px 0 16px; border: 0; border-radius: var(--radius); color: var(--ink); background: var(--paper); font: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.filter-summary > svg { width: 20px; height: 20px; color: var(--accent); }
.filter-summary span { flex: 1; min-width: 0; padding: 8px 0; line-height: 1.3; }
.filter-summary b { flex: none; padding: 7px 12px; border-radius: 999px; color: var(--accent); background: var(--soft); font-size: .875rem; font-weight: 600; }
.filter-sheet { padding: 16px 12px 10px; }
.filter-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 10px; }
.filter-sheet-head h2 { font-size: 1.25rem; }
.filter-sheet .filters { display: block; padding: 0; background: var(--fill); }
.filter-sheet .filter-field { display: flex; flex-wrap: nowrap; padding: 0 14px; }
.filter-sheet .note { padding: 8px 6px 0; }
.filter-reset { margin: 4px 6px 0; }
/* Cases: what approved applicants had, as three plain lines. */
.insights { margin-top: 24px; padding: 16px; border-radius: var(--radius); background: var(--paper); }
.insights h2 { font-size: 1.125rem; margin-bottom: 6px; }
.insights ul { margin: 0; padding: 0; list-style: none; }
.insights li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.insights li + li { border-top: .5px solid var(--line); }
.insight-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--green); background: var(--green-bg); }
.insight-icon svg { width: 20px; height: 20px; }
.insights strong { display: block; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.insights small { display: block; color: var(--muted); font-size: .8125rem; }
.insights .note { margin-top: 6px; }
.methodology { margin-top: 18px; background: var(--paper); border-radius: var(--radius); }
.methodology summary { display: flex; align-items: center; gap: 10px; list-style: none; min-height: 50px; padding: 12px 16px; cursor: pointer; font-size: .9375rem; }
.methodology summary::-webkit-details-marker { display: none; }
.methodology summary > svg:first-child { color: var(--accent); width: 20px; height: 20px; }
.methodology summary > svg:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--muted); }
.methodology[open] summary > svg:last-child { transform: rotate(90deg); }
.methodology > div { padding: 0 16px 12px; color: var(--muted); font-size: .9375rem; }
.methodology p + p { margin-top: 10px; }
.link-button { color: var(--accent); font-size: .9375rem; font-weight: 500; min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.link-button svg { width: 16px; height: 16px; }
.list-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.segments { display: flex; gap: 2px; border-radius: 999px; padding: 3px; background: var(--fill); }
.segment { flex: 1; min-width: 0; min-height: 44px; padding: 7px 8px; border-radius: 999px; font-size: .9375rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.segment[aria-pressed=true] { background: var(--thumb); font-weight: 600; box-shadow: 0 1px 3px #0002; }
.search { display: block; position: relative; }
.search > svg { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search input { min-height: 46px; width: 100%; border: 0; border-radius: 999px; background: var(--fill); padding: 10px 16px 10px 42px; font-size: 1rem; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.case-grid { display: grid; grid-template-columns: 1fr; background: var(--paper); border-radius: var(--radius); }
.case { width: 100%; text-align: left; padding: 18px 16px; min-width: 0; position: relative; border-radius: 0; }
.case:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.case:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.case:only-child { border-radius: var(--radius); }
.case + .case::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--line); }
.case-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.outcome { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; color: var(--green); background: var(--green-bg); border-radius: 7px; padding: 3px 7px; }
.outcome.denied { background: var(--red-bg); color: var(--red); }
.outcome svg { width: 13px; height: 13px; stroke-width: 2.1; }
.case-group { max-width: 62%; color: var(--muted); font-size: .75rem; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }
.case h3 { font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.metadata { color: var(--muted); font-size: .875rem; margin-top: 4px; line-height: 1.4; }
.case-metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .875rem; font-variant-numeric: tabular-nums; }
.case-metrics:empty { display: none; }
.case-metrics span { display: inline-flex; align-items: center; gap: 6px; }
.case-metrics svg { width: 17px; height: 17px; color: var(--muted); }
.case-bottom { display: flex; align-items: end; gap: 12px; margin-top: 15px; color: var(--muted); }
.case-bottom > svg { width: 13px; height: 13px; flex: 0 0 auto; margin: 0 2px 3px auto; }
.case-dates { display: flex; flex-wrap: wrap; gap: 9px 18px; min-width: 0; }
.case-dates span { display: grid; gap: 2px; }
.case-dates small { color: var(--muted); font-size: .6875rem; font-weight: 500; line-height: 1.2; }
.case-dates strong { color: var(--ink); font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.load-more { width: 100%; min-height: 50px; margin-top: 14px; background: var(--paper); color: var(--accent); border-radius: 999px; font-size: 1rem; font-weight: 500; padding: 12px 16px; }
.note { color: var(--muted); font-size: .8125rem; line-height: 1.5; margin-top: 18px; padding: 0 4px; }
.footnote { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 36px; }
.dock {
  position: fixed; z-index: 10; bottom: calc(10px + var(--app-safe-bottom));
  left: 50%; transform: translateX(-50%); display: flex; gap: 0; padding: 4px;
  width: min(420px, calc(100% - 24px)); border-radius: 999px;
}
.dock a { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 5px 4px; border-radius: 999px; color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; text-decoration: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dock a[aria-current=page] { background: var(--lens); color: var(--accent); font-weight: 600; }
.dock svg { width: 24px; height: 24px; }
/* Tabs share the bar equally; a tab whose label needs more room (Uzbek "Hujjatlarim" on a 320 px
   phone) widens instead of cutting the word. Below 310 px the five labels can't all fit, so the
   tabs go back to equal widths with an ellipsis rather than overflowing the bar. */
@media (max-width: 309px) { .dock a { min-width: 0; } }
.guide-grid { display: grid; grid-template-columns: 1fr; background: var(--paper); border-radius: var(--radius); }
.guide { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px 16px; min-height: 96px; min-width: 0; position: relative; }
.guide:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.guide:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.guide + .guide::before { content: ''; position: absolute; top: 0; left: 74px; right: 0; height: .5px; background: var(--line); }
.guide-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: #007aff; flex: none; }
.guide-dov .guide-icon { background: #5856d6; }
.guide-cimea .guide-icon { background: #af52de; }
.guide-apostille .guide-icon { background: #28824b; }
.guide-translations .guide-icon { background: #b86b13; }
.guide-steps .guide-icon { background: #5c707b; }
.guide-places .guide-icon { background: #c4372b; }
.guide-routes .guide-icon { background: #0b7a75; }
/* Guides index: "Start here" leads as a wide card, then the topics, then the practical pages. */
.guide-group-title { margin: 22px 4px 8px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.guide-start { margin-bottom: 4px; background: linear-gradient(135deg, var(--soft), var(--paper) 70%); }
.guide-start .guide-icon { background: var(--accent); }
.guide-start .guide-kicker { display: block; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.guide-icon svg { width: 25px; height: 25px; }
.guide-copy { min-width: 0; flex: 1; }
.guide h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: 4px; }
.guide p { font-size: .9375rem; line-height: 1.35; color: var(--muted); }
.guide > .arrow { width: 14px; height: 14px; color: var(--muted); }
.source-callout { display: flex; gap: 12px; margin-top: 24px; padding: 0 4px; }
.source-callout > svg { color: var(--accent); margin-top: 2px; }
.source-callout h2 { font-size: .9375rem; margin-bottom: 6px; }
.source-callout p { font-size: .9375rem; color: var(--muted); }
.back { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--accent); text-decoration: none; font-size: 1.0625rem; margin: -10px 0 16px; }
.back svg { width: 20px; height: 20px; }
.article { max-width: 720px; margin: 0 auto; }
.article .hero h1 { font-size: 2.125rem; }
.article-pages { background: var(--paper); border-radius: var(--radius); padding: 24px; }
.article-page + .article-page { border-top: .5px solid var(--line); margin-top: 28px; padding-top: 28px; }
.article-page h2 { font-size: 1.25rem; line-height: 1.35; margin-bottom: 16px; }
/* Guide text: the Telegram pages laid out for a phone (app.js guideBlocks). */
.guide-prose { font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
.guide-prose > * + *, .reports > * + * { margin-top: 12px; }
.guide-prose b { font-weight: 600; }
.guide-prose a { text-underline-offset: 3px; }
.guide-caption { color: var(--muted); font-size: .9375rem; }
.guide-prose > .guide-lead { margin-top: 24px; }
.guide-prose > .guide-lead:first-child, .guide-prose > .guide-caption + .guide-lead { margin-top: 16px; }
/* Numbered checklist: number, the document's name, then its rules in smaller type. */
.guide-items, .guide-bullets { list-style: none; margin: 0; padding: 0; }
.guide-items li { display: flex; gap: 12px; padding: 12px 0; }
.guide-items li + li, .guide-part + .guide-part > .guide-items:first-child li:first-child { border-top: .5px solid var(--line); }
.item-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-body { min-width: 0; flex: 1; padding-top: 2px; }
.item-name, .item-text { display: block; line-height: 1.4; }
.item-name { font-weight: 600; }
.item-detail { display: block; margin-top: 3px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.item-detail::first-letter { text-transform: uppercase; }
.item-detail b { color: var(--ink); }
.guide-bullets li { position: relative; padding-left: 20px; }
.guide-bullets li + li { margin-top: 8px; }
.guide-bullets li::before { content: ''; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* What applicants report: kept apart from the official rules. */
.reports { background: var(--warn-bg); border-radius: 18px; padding: 14px 16px; font-size: 1rem; }
.reports-title { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: .9375rem; line-height: 1.35; }
.reports-title svg { width: 18px; height: 18px; }
.reports .guide-bullets li::before { background: var(--warn); }
/* A letter to fill in, folded to its first lines. */
.letter { border: .5px solid var(--line); border-radius: 18px; padding: 0 16px; }
.letter-tools { display: flex; justify-content: flex-end; }
.letter-body { white-space: pre-wrap; font-size: 1rem; line-height: 1.6; max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.letter.open .letter-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
.letter-body mark { background: var(--soft); color: var(--accent); border-radius: 4px; padding: 0 2px; }
.letter .link-button svg { width: 18px; height: 18px; }
.letter-toggle svg { transform: rotate(90deg); transition: transform .2s; }
.letter.open .letter-toggle svg { transform: rotate(-90deg); }
.guide-sources { margin-top: 24px; padding-top: 14px; border-top: .5px solid var(--line); }
.guide-sources h3, .glance h2 { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.guide-sources ul, .glance ul { list-style: none; margin: 0; padding: 0; }
.guide-sources a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.guide-sources svg { width: 18px; height: 18px; }
/* The visa guide: summary card, sticky tabs, one section at a time. */
.glance { background: var(--paper); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 16px; }
.glance h2 { padding: 12px 0 4px; }
.glance li + li { border-top: .5px solid var(--line); }
.glance button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 0; text-align: left; }
.glance-copy { flex: 1; min-width: 0; }
.glance-copy { font-size: .9375rem; line-height: 1.4; }
.glance-label { font-weight: 600; color: var(--accent); }
.glance-label::after { content: ' · '; color: var(--muted); font-weight: 400; }
.glance button > svg { width: 14px; height: 14px; color: var(--muted); }
.guide-tabs { position: sticky; top: var(--app-safe-top); z-index: 21; isolation: isolate; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 12px; padding: 8px 20px 12px; }
.guide-tabs::-webkit-scrollbar { display: none; }
.guide-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 20px; background: var(--fill); font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.guide-tab[aria-pressed=true] { background: var(--accent); color: #fff; }
:root[data-theme=dark] .guide-tab[aria-pressed=true] { color: #001b3b; }
.tab-count { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: .75rem; font-weight: 700; text-align: center; }
.guide-tab[aria-pressed=true] .tab-count { background: #ffffff38; color: inherit; }
.guide-section > h2 { font-size: 1.375rem; margin-bottom: 12px; }
.next-section { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin-top: 20px; padding: 12px 20px; border-radius: 999px; background: var(--soft); color: var(--accent); text-align: left; }
.next-section span { color: var(--muted); font-size: .875rem; }
.next-section strong { flex: 1; font-weight: 600; }
.article-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; }
.primary { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 1.0625rem; font-weight: 600; padding: 12px 22px; text-decoration: none; box-shadow: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #0000001a; transition: transform .4s var(--spring); }
.primary:active { transform: scale(.97); }
:root[data-theme=dark] .primary { color: #001b3b; }
.status-panel { background: var(--paper); border-radius: var(--radius); padding: 24px; }
.status-bot { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .875rem; margin-bottom: 12px; }
.status-orb { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 5px var(--warn-bg); flex: none; }
.status-orb.on { background: var(--green); box-shadow: 0 0 0 5px var(--green-bg); }
.status-panel h2 { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.status-panel[data-state=open] h2 { color: var(--green); }
.status-answer { margin-top: 8px; line-height: 1.5; }
.status-book { margin-top: 18px; width: 100%; background: var(--green); }
.status-facts { margin: 18px 0 0; }
.status-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: .5px solid var(--line); }
.status-facts dt { color: var(--muted); }
.status-facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.status-legacy { white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.status-legacy pre { font-size: .875rem; white-space: pre; overflow-x: auto; padding: 16px; border-radius: 12px; background: var(--bg); }
.status-meta { border-top: .5px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; padding-top: 12px; color: var(--muted); font-size: .8125rem; }
.status-details { margin-top: 16px; }
.status-details > div { padding: 0 12px 12px; }
.status-details .status-card { background: var(--fill); }
.status-card { background: var(--paper); border-radius: var(--radius); padding: 20px 24px; }
.status-card + .status-card, #statusServices + .status-card { margin-top: 12px; }
.status-card h3 { font-size: 1.0625rem; }
.svc-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.svc-rows { list-style: none; margin: 12px 0 0; padding: 0; }
.svc-rows li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 11px 0; border-top: .5px solid var(--line); }
.svc-name { flex: 1; min-width: min(100%, 10rem); overflow-wrap: anywhere; }
.svc-times { color: var(--muted); font-size: .875rem; }
.svc-closed { margin-top: 12px; }
.svc-closed summary { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); cursor: pointer; list-style: none; }
.svc-closed summary::-webkit-details-marker { display: none; }
.svc-closed summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--spring-soft); }
.svc-closed[open] summary svg { transform: rotate(90deg); }
.svc-closed .svc-rows { margin-top: 0; }
.pill { display: inline-block; font-size: .8125rem; line-height: 1.3; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--muted); white-space: nowrap; }
.pill-open { background: var(--green-bg); color: var(--green); font-weight: 600; }
.pill-full { background: var(--warn-bg); color: var(--warn); }
.pill-error { background: var(--red-bg); color: var(--red); }
.status-meaning { margin-top: 32px; }
.status-meaning dl { margin: 12px 0 0; }
.status-meaning dl > div { padding: 10px 0; border-top: .5px solid var(--line); }
.status-meaning dd { margin: 6px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.status-meaning .note { padding: 0; }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); min-height: 50vh; }
.loading-dot { width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--muted); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 40px 20px; border-radius: var(--radius); background: var(--paper); }
.empty h2 { font-size: 1.375rem; }
.empty p { font-size: 1rem; max-width: 360px; margin: 10px auto 20px; color: var(--muted); }
dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 48px - var(--app-safe-top) - var(--app-safe-bottom)); border: 0; border-radius: 34px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 24px 100px #0004; overscroll-behavior: contain; }
dialog::backdrop { background: #00000059; }
body:has(dialog[open]) { overflow: hidden; }
.dialog-inner { padding: 24px; }
.dialog-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.dialog-top h2 { font-size: 1.5rem; line-height: 1.25; margin-top: 12px; overflow-wrap: anywhere; }
.close { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--fill); color: var(--ink); }
.close svg { width: 20px; height: 20px; stroke-width: 2.2; }
.case-prose { border-top: .5px solid var(--line); padding-top: 20px; font-size: 1.0625rem; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.dialog-note { border-top: .5px solid var(--line); padding-top: 16px; margin-top: 24px; color: var(--muted); font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
/* Reflow the summary when text grows, rather than squeezing its columns. */
@container (width < 18rem) {
  .stat { grid-column: 1 / -1; padding: 16px; }
  .stat + .stat { border-left: 0; border-top: .5px solid var(--line); }
  .stat-label { min-height: 0; }
}
@media (min-width: 48rem) {
  .shell { padding-left: 40px; padding-right: 40px; }
  .masthead { min-height: 80px; margin-bottom: 32px; }
  .filters { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr; padding: 4px 0; }
  .filter-field { display: grid; grid-template-columns: 22px 1fr; gap: 0 9px; padding: 8px 18px; }
  .filter-field + .filter-field::before { top: 12px; bottom: 12px; left: 0; width: .5px; height: auto; }
  .filter-field select { grid-column: 1 / -1; text-align: left; text-align-last: left; padding-left: 0; min-height: 44px; }
  .filter-label { font-size: .8125rem; color: var(--muted); }
  .stat { padding: 0 24px; }
  .stat-label { min-height: 1.25em; }
  .stat strong { font-size: 2.125rem; }
  .overview { padding: 24px 0; }
  .list-controls { flex-direction: row; align-items: center; }
  .search { flex: 1; }
  .segments { flex: 1; }
  .case { padding: 22px 24px; }
  .case + .case::before { left: 24px; }
  .case-bottom { margin-top: 17px; }
  .guide { padding: 20px 24px; }
  .guide + .guide::before { left: 82px; }
}
@media (max-width: 23rem) {
  .shell { padding-left: 16px; padding-right: 16px; }
  .filter-field { gap: 8px; padding-left: 12px; padding-right: 12px; flex-wrap: wrap; }
  .filter-label { font-size: .9375rem; }
  .filter-field select { font-size: .875rem; flex-basis: 48%; }
  .stat { padding: 0 12px; }
  .guide { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .guide-icon { width: 36px; height: 36px; border-radius: 10px; }
  .article-pages, .status-panel, .status-card, .dialog-inner { padding: 20px; }
  .guide-tabs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #414144; --line: #929298; }
  :root[data-theme=dark] { --muted: #d1d1d6; --line: #8e8e93; }
  .dock { background: var(--paper); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :is(.case-grid, .guide-grid, .overview, .insights, .filters, .filter-summary, .methodology) { outline: 1px solid var(--line); }
}
/* Reserve a separate trailing area for the chevron. Native browser arrows
   otherwise sit against right-aligned values and differ between platforms. */
:is(.language select, .filter-field select) {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
.filter-field select {
  background-position: right center;
  padding-right: 24px;
}
@media (forced-colors: active) {
  :is(.language select, .filter-field select) { appearance: auto; -webkit-appearance: auto; background-image: none; }
  .dock { border: 1px solid ButtonText; }
  .segment[aria-pressed=true], .dock a[aria-current=page] { outline: 2px solid Highlight; }
}

/* Ask: the support assistant chat (ask.js). */
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ask-example { border: 0; border-radius: 18px; background: var(--soft); color: var(--accent); font: inherit; font-size: .9375rem; padding: 10px 14px; min-height: 44px; text-align: left; cursor: pointer; }
.ask-log { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.ask-msg { display: flex; flex-direction: column; max-width: 88%; }
.ask-msg.user { align-self: flex-end; align-items: flex-end; }
.ask-msg.bot { align-self: flex-start; }
.ask-bubble { border-radius: 18px; padding: 10px 14px; line-height: 1.45; font-size: 1rem; overflow-wrap: anywhere; }
.ask-msg.user .ask-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
:root[data-theme=dark] .ask-msg.user .ask-bubble { color: #001b3b; }
.ask-msg.bot .ask-bubble { background: var(--paper); color: var(--ink); border-bottom-left-radius: 6px; }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ask-link { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--fill); color: var(--accent); font-size: .875rem; font-weight: 500; text-decoration: none; }
.ask-link svg { width: 14px; height: 14px; }
/* Options under an ask-back: tap one to answer the assistant's question. */
.ask-option { border: 0; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; text-align: left; }
.ask-options { margin-top: 8px; }
.ask-typing { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-style: italic; }
.ask-typing .dots { display: inline-flex; gap: 4px; }
.ask-typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ask-dot 1.2s infinite ease-in-out; }
.ask-typing .dots i:nth-child(2) { animation-delay: .15s; }
.ask-typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ask-typing .dots i { animation: none; opacity: .6; } }
.ask-composer { position: sticky; bottom: calc(84px + var(--app-safe-bottom)); display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 24px; background: var(--paper); border: .5px solid var(--line); margin-top: 8px; cursor: text; }
.ask-composer textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; padding: 10px 8px; min-height: 44px; max-height: 140px; outline: none; }
.ask-composer button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ask-composer button:disabled { opacity: .45; cursor: default; }
.ask-composer button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask-guest { background: var(--paper); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.ask-guest p { margin: 0 0 12px; color: var(--muted); }

/* Interview date row in the case filters: looks like the select rows, and the
   whole row opens the calendar (the button's ::after covers it; × sits above). */
.date-field { flex-wrap: wrap; row-gap: 0; padding-bottom: 4px; }
.date-field .filter-label { min-height: 48px; display: flex; align-items: center; }
/* Grows from its own width, so a value that doesn't fit beside a long label (ru) wraps to its own line. */
.date-trigger { flex: 1 0 auto; max-width: 100%; min-height: 40px; padding: 0 24px 0 8px; text-align: right; color: var(--muted); font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--select-arrow) no-repeat right center / 12px 8px; }
.date-trigger::after { content: ''; position: absolute; inset: 0; }
.date-trigger.set { color: var(--accent); font-weight: 500; background-image: none; padding-right: 2px; }
.date-clear { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; color: var(--muted); flex: none; }
.date-clear svg { width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--fill); stroke-width: 2.6; }

/* Interview-date calendar (calendar.js): a bottom sheet on phones, a card on wide screens.
   The dialog itself has no padding, so a click whose target is the dialog is the backdrop. */
/* iOS 26+: a partial-height sheet floats inset from the screen edges, its corners concentric with the device's. */
dialog.sheet { width: calc(100% - 16px - var(--app-safe-left) - var(--app-safe-right)); max-width: 100%; margin: auto auto calc(8px + var(--app-safe-bottom)); border-radius: 36px; max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 24px); overflow-y: auto; }
dialog.sheet[open] { animation: sheet-up .5s var(--spring-soft); }
@keyframes sheet-up { from { transform: translateY(30%); opacity: 0; } }
.sheet-inner { max-width: 440px; margin: 0 auto; padding: 18px 18px 20px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-top h2 { font-size: 1.25rem; }
.cal-hint { color: var(--muted); font-size: .875rem; line-height: 1.4; margin: 4px 0 14px; }
.cal-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal-month-title { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cal-month-title strong { font-size: 1.0625rem; font-weight: 600; }
.cal-month-title small { color: var(--muted); font-size: .8125rem; }
.cal-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; color: var(--accent); background: var(--fill); }
.cal-arrow svg { width: 18px; height: 18px; stroke-width: 2.4; }
#calPrev svg { transform: scaleX(-1); }
.cal-arrow:disabled { opacity: .35; }
/* Month chips: scroll sideways; the chosen month is centred after each render (calendar.js). */
.cal-strip { position: relative; display: flex; align-items: center; gap: 6px; margin: 4px -16px 8px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.cal-strip::-webkit-scrollbar { display: none; }
.cal-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--fill); color: var(--ink); font-size: .875rem; }
.cal-chip b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-chip[aria-pressed=true] { background: var(--accent); color: #fff; font-weight: 600; }
.cal-chip[aria-pressed=true] b { color: inherit; }
:root[data-theme=dark] .cal-chip[aria-pressed=true] { color: #001b3b; }
.cal-chip-year { flex: none; padding-left: 6px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.cal-chip-year:first-child { padding-left: 0; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-week span { padding: 4px 0; text-align: center; color: var(--muted); font-size: .75rem; overflow: hidden; }
.cal-grid { row-gap: 4px; touch-action: pan-y; }
.cal-grid.slide-next { animation: cal-next .2s ease-out; }
.cal-grid.slide-prev { animation: cal-prev .2s ease-out; }
@keyframes cal-next { from { opacity: .3; transform: translateX(16px); } }
@keyframes cal-prev { from { opacity: .3; transform: translateX(-16px); } }
.cal-day { position: relative; display: grid; place-items: center; height: 46px; padding: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; }
.cal-day.has { color: var(--ink); font-weight: 600; }
.cal-day[aria-current=date] .cal-num { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
/* The count badge sits on the circle's top-right corner, like an app-icon badge. */
.cal-badge { position: absolute; top: 0; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
/* The range: a soft band between the ends, filled circles on the ends. */
.cal-day.in { background: var(--soft); }
.cal-day.in .cal-badge { box-shadow: 0 0 0 2px var(--soft); }
.cal-grid > .in:nth-child(7n + 1) { border-radius: 23px 0 0 23px; }
.cal-grid > .in:nth-child(7n) { border-radius: 0 23px 23px 0; }
.cal-day.band-start { background: linear-gradient(90deg, transparent 50%, var(--soft) 50%); }
.cal-day.band-end { background: linear-gradient(90deg, var(--soft) 50%, transparent 50%); }
.cal-day.sel .cal-num { background: var(--accent); color: #fff; box-shadow: none; }
.cal-day.sel .cal-badge { background: var(--paper); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
:root[data-theme=dark] :is(.cal-badge, .cal-day.sel .cal-num) { color: #001b3b; }
:root[data-theme=dark] .cal-day.sel .cal-badge { color: var(--accent); }
.cal-empty { padding: 24px 0; text-align: center; color: var(--muted); }
.cal-status { min-height: 1.45em; margin-top: 12px; text-align: center; color: var(--muted); font-size: .875rem; }
.cal-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.cal-actions .primary { flex: 1; }
@media (min-width: 48rem) {
  dialog.sheet { width: 420px; margin: auto; border-radius: 36px; }
  dialog.sheet[open] { animation-name: sheet-in; }
  .sheet-inner { padding: 20px; }
  .filters { grid-template-columns: .8fr 1.1fr 1.1fr 1.3fr; }
  .date-field { grid-template-columns: 22px 1fr auto; padding-bottom: 8px; }
  .date-field .filter-label { min-height: 0; display: block; }
  .date-trigger { grid-column: 1 / 3; min-height: 44px; padding-left: 0; text-align: left; }
  .date-clear { grid-column: 3; grid-row: 2; margin-right: -8px; }
}
@keyframes sheet-in { from { transform: scale(.96); opacity: 0; } }

/* My documents (docs.js). */
.doc-card { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.doc-card h2 { font-size: 1.0625rem; margin: 0 0 8px; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: .5px solid var(--line); }
.doc-row:first-of-type { border-top: 0; }
/* Test results (My application): score and/or level, and a remove button. */
.doc-test-in { display: flex; align-items: center; gap: 6px; }
.doc-test input[type=number] { width: 84px; min-height: 38px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink); font: inherit; font-size: .9375rem; padding: 4px 10px; }
.doc-test-x { width: 32px; height: 32px; border-radius: 16px; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.doc-tests-hint { margin: 0 0 4px; font-size: .8125rem; }
.doc-tests-head { margin: 18px 0 2px; padding-top: 14px; border-top: .5px solid var(--line); color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.doc-test-add select { width: 100%; background: transparent; color: var(--accent); font-weight: 600; padding-left: 0; }
a.ai-fb-btn { display: inline-flex; align-items: center; text-decoration: none; }
.doc-text .doc-tests { display: block; margin-top: 2px; color: var(--ink); font-weight: 600; }
.ai-saved b { color: var(--ink); font-weight: 600; }
.doc-row select, .doc-row input[type=date], .doc-date input, .doc-num input, .doc-num select { min-height: 38px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink); font: inherit; font-size: .9375rem; padding: 4px 10px; }
.doc-progress { display: flex; align-items: center; gap: 12px; margin: 0 4px 14px; color: var(--muted); font-size: .875rem; }
/* My documents: no appointment date yet → one line pointing at the field that unlocks the deadline checks. */
.doc-set-date { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius); color: var(--accent); background: var(--soft); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.doc-set-date span { flex: 1; }
.doc-set-date svg { width: 20px; height: 20px; }
.doc-set-date svg:last-child { width: 16px; height: 16px; }
/* "Compare with real cases": folded until someone wants it. */
.doc-compare summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; list-style: none; cursor: pointer; }
.doc-compare summary::-webkit-details-marker { display: none; }
.doc-compare summary h2 { margin: 0; }
.doc-compare summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .25s; }
.doc-compare[open] summary svg { transform: rotate(90deg); }
.doc-compare h3 { margin: 16px 0 6px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.doc-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.doc-bar span { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .3s; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-item { border-top: .5px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.doc-item:first-child { border-top: 0; }
.doc-main { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.doc-text { flex: 1 1 180px; min-width: 0; }
.doc-text strong { display: block; font-size: .9375rem; }
.doc-text small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.35; margin-top: 2px; }
.doc-status { display: inline-flex; background: var(--fill); border-radius: 999px; padding: 2px; flex: none; }
.doc-status button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .8125rem; padding: 6px 10px; border-radius: 999px; min-height: 32px; cursor: pointer; }
.doc-status button[aria-pressed=true] { background: var(--thumb); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px #0002; }
.status-have .doc-status button[aria-pressed=true] { color: var(--green); }
.status-progress .doc-status button[aria-pressed=true] { color: var(--accent); }
.doc-date { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.doc-check { font-size: .8125rem; }
.doc-check.ok { color: var(--green); }
.doc-check.warn { color: var(--red); }
.doc-guide { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; font-size: .8125rem; text-decoration: none; }
.doc-guide svg { width: 12px; height: 12px; }
.doc-num { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; border-top: .5px solid var(--line); }
.doc-num:first-of-type { border-top: 0; }
.doc-num-input { display: flex; gap: 6px; }
.doc-num input { width: 120px; text-align: right; }
.doc-summary { font-weight: 600; margin: 4px 0; }
.doc-vs { color: var(--muted); font-size: .875rem; margin: 4px 0 10px; }
.doc-similar { display: flex; flex-direction: column; gap: 6px; }
.doc-case { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; }
.doc-case-body { flex: 1; min-width: 0; }
.doc-case-body strong { display: block; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-case-body small { color: var(--muted); font-size: .8125rem; }
.doc-case > svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.dock a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.doc-save { color: var(--muted); font-size: .8125rem; min-height: 1.2em; margin-top: 6px; }
/* My documents: after arriving in Italy (docs.js afterCard) */
.doc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.doc-count { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.doc-deadline { font-size: .9375rem; line-height: 1.4; margin: 0; padding: 10px 0; border-top: .5px solid var(--line); color: var(--muted); }
.doc-deadline.due { color: var(--ink); font-weight: 600; }
.doc-deadline.ok { color: var(--green); }
.doc-deadline.warn { color: var(--red); font-weight: 600; }
.doc-after .doc-list { border-top: .5px solid var(--line); }
/* My documents: when the decision usually comes (docs.js waitBlock) */
.wait { border-top: .5px solid var(--line); padding: 12px 0 2px; }
.wait h3 { font-size: .9375rem; margin: 0 0 4px; }
.wait p { font-size: .9375rem; line-height: 1.4; margin: 0; }
.wait .note { margin-top: 8px; padding: 0; }
.wait-bar { position: relative; height: 10px; border-radius: 5px; background: var(--fill); margin: 12px 0 4px; }
.wait-band { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.wait-median { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent); }
.wait-you { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); }

/* Ask: the chats list */
.chat-new { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; }
.chat-new svg { width: 18px; height: 18px; }
.chat-list { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.chat-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; color: var(--ink); text-decoration: none; border-bottom: .5px solid var(--line); }
.chat-row:last-child { border-bottom: 0; }
.chat-row:active { background: var(--fill); }
.chat-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--accent); display: grid; place-items: center; }
.chat-icon svg { width: 20px; height: 20px; }
.chat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview { color: var(--muted); font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-when { flex: none; align-self: flex-start; color: var(--muted); font-size: .8125rem; }
.chat-when .dots { display: inline-flex; gap: 3px; }
.chat-when .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ask-dot 1.2s infinite ease-in-out; }
.chat-when .dots i:nth-child(2) { animation-delay: .15s; }
.chat-when .dots i:nth-child(3) { animation-delay: .3s; }

/* Ask: one chat, full screen (no tab bar, masthead or footer) */
body.chat-mode .dock, body.chat-mode .masthead, body.chat-mode .footnote { display: none; }
body.chat-mode .shell { padding-bottom: calc(96px + var(--app-safe-bottom)); }
.chat-bar { position: sticky; top: var(--app-safe-top); z-index: 21; isolation: isolate; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 56px; margin: 0 -20px 12px; padding: 6px 12px; }
.chat-bar h1 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-back { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); text-decoration: none; }
.chat-back svg, .chat-remove svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-remove { position: relative; justify-self: end; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.chat-remove:disabled { opacity: .4; cursor: default; }
.chat-hint { color: var(--muted); margin: 8px 4px 16px; }
body.chat-mode .ask-composer { position: fixed; z-index: 15; left: max(12px, var(--app-safe-left)); right: max(12px, var(--app-safe-right)); bottom: calc(10px + var(--app-safe-bottom)); max-width: 936px; margin: 0 auto; box-shadow: 0 4px 24px #0002; }

/* ── AI assistant (Ask tab): its own look, so it reads as the app's premium part ──
   One identity: a violet → indigo → cyan "aurora", gradient orb avatar, hairline
   gradient edges, nested (shell + core) hero, pill CTA with its icon in its own
   circle, and spring-like motion. Motion is transform/opacity only and stops with
   reduced motion; no blur on scrolling content. */
:root {
  --ai-a: #8b5cf6; --ai-b: #6366f1; --ai-c: #06b6d4;
  --ai-text: #5b4ce0;                                         /* readable on white (≥ 4.5:1) */
  --ai-grad: linear-gradient(135deg, var(--ai-a), var(--ai-b) 50%, var(--ai-c));
  --ai-btn: linear-gradient(135deg, #7c3aed, #4f46e5 55%, #0891b2);  /* white text stays readable */
  --ai-edge: linear-gradient(135deg, #8b5cf670, #6366f126 45%, #06b6d470);
  --ai-tint: #8b5cf614; --ai-ring: #8b5cf633; --ai-glow: #6366f166;
  --ai-ease: cubic-bezier(.32, .72, 0, 1);
}
:root[data-theme=dark] {
  --ai-a: #a78bfa; --ai-b: #818cf8; --ai-c: #22d3ee;
  --ai-text: #b4a7ff;
  --ai-edge: linear-gradient(135deg, #a78bfa80, #818cf826 45%, #22d3ee70);
  --ai-tint: #a78bfa1c; --ai-ring: #a78bfa3d; --ai-glow: #818cf855;
}

/* Bottom bar: the Ask tab carries the gradient sparkle. */
.dock a.ai-tab[aria-current=page] { background: linear-gradient(135deg, #8b5cf61f, #06b6d41a); color: var(--ai-text); box-shadow: inset 0 0 0 .5px var(--ai-ring); }

/* Hero: an outer shell around an inner core with the aurora inside it. */
.ai-hero { margin: 4px 0 28px; padding: 6px; border-radius: 30px; background: var(--ai-tint); box-shadow: inset 0 0 0 .5px var(--ai-ring), 0 30px 60px -36px var(--ai-glow); animation: ai-rise .9s var(--ai-ease) both; }
.ai-hero-core { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: 22px 20px 20px; background: var(--paper); box-shadow: inset 0 1px 0 #ffffff1a; }
.ai-hero-core::before {
  content: ''; position: absolute; z-index: -1; inset: -40% -30% auto -30%; height: 150%; pointer-events: none;
  background:
    radial-gradient(38% 34% at 22% 28%, #8b5cf633, transparent 70%),
    radial-gradient(34% 30% at 82% 22%, #06b6d42e, transparent 70%),
    radial-gradient(36% 30% at 62% 62%, #6366f126, transparent 70%);
  animation: ai-drift 16s var(--ai-ease) infinite alternate;
}
.ai-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--ai-tint); color: var(--ai-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 .5px var(--ai-ring); }
.ai-eyebrow svg { width: 15px; height: 15px; stroke-width: 1.6; }
.ai-title {
  margin-top: 14px; font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 750;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--ai-b) 78%, var(--ai-a)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ai-intro { color: var(--muted); margin-top: 10px; font-size: 1rem; max-width: 560px; }
.ai-cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; min-height: 50px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--ai-btn); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 12px 28px -12px #4f46e5b3, inset 0 1px 0 #ffffff45; transition: transform .5s var(--ai-ease), box-shadow .5s var(--ai-ease); }
.ai-cta-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ffffff2e; box-shadow: inset 0 0 0 .5px #ffffff40; transition: transform .6s var(--ai-ease); }
.ai-cta-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }
.ai-cta:active { transform: scale(.97); }
.ai-cta:hover .ai-cta-icon, .ai-cta:focus-visible .ai-cta-icon { transform: rotate(90deg) scale(1.05); }

.ai-section { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 4px 10px; }
.ai-section-note { color: var(--muted); margin: 0 4px 12px; font-size: .9375rem; }
.ai-kept { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: .8125rem; line-height: 1.45; margin: 16px 4px 0; }
.ai-kept svg { width: 15px; height: 15px; margin-top: 1px; stroke-width: 1.7; }

/* The assistant's avatar: a gradient orb with a sparkle. */
.ai-orb { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 120% at 28% 18%, #ffffff59, transparent 46%), var(--ai-btn); box-shadow: 0 6px 16px -7px #4f46e5cc, inset 0 0 0 .5px #ffffff40; }
.ai-orb svg { width: 19px; height: 19px; stroke-width: 1.7; }
.ai-orb-sm { width: 24px; height: 24px; } .ai-orb-sm svg { width: 13px; height: 13px; stroke-width: 2; }
.ai-orb-xs { width: 20px; height: 20px; box-shadow: none; } .ai-orb-xs svg { width: 11px; height: 11px; stroke-width: 2.1; }
.ai-orb-lg { width: 64px; height: 64px; box-shadow: 0 18px 40px -16px #4f46e5cc, inset 0 0 0 .5px #ffffff40; } .ai-orb-lg svg { width: 32px; height: 32px; stroke-width: 1.4; }
.ai-orb.is-thinking { animation: ai-breathe 1.8s var(--ai-ease) infinite; }

/* Chats list: orb icons. */
.chat-row .ai-orb { width: 38px; height: 38px; }
.chat-when .dots i { background: var(--ai-b); }

/* Chat page. */
.chat-bar h1 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.chat-bar h1 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-welcome { padding-top: 8px; animation: ai-rise .8s var(--ai-ease) both; }
.ai-welcome .ask-bubble p + p { margin-top: 4px; }
.ai-welcome-how { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.ai-welcome-how li::marker { color: var(--ai-text); }
.ask-examples { display: grid; gap: 8px; margin: 16px 0; }
.ask-example { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 20px; background: var(--paper); color: var(--ink); font-size: .9375rem; text-align: left; box-shadow: inset 0 0 0 .5px var(--line); animation: ai-rise .7s var(--ai-ease) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); transition: transform .45s var(--ai-ease), box-shadow .45s var(--ai-ease); }
.ask-example svg { width: 18px; height: 18px; color: var(--ai-text); stroke-width: 1.7; }
.ask-example:active { transform: scale(.98); box-shadow: inset 0 0 0 1px var(--ai-ring); }
.ai-who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px 2px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: -.005em; }
.ask-msg.ai-new { animation: ai-rise .7s var(--ai-ease) both; }
.ask-msg.bot .ask-bubble { background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ai-edge) border-box; border: 1px solid transparent; border-radius: 6px 20px 20px 20px; padding: 12px 15px; box-shadow: 0 14px 30px -22px var(--ai-glow); }
.ask-msg.user .ask-bubble, :root[data-theme=dark] .ask-msg.user .ask-bubble { background: var(--ai-btn); color: #fff; border-radius: 20px 20px 6px 20px; box-shadow: 0 10px 24px -16px #4f46e5cc; }
.ask-typing { font-style: normal; }
.ai-sources { margin: 12px -3px 0; padding: 10px 12px; border-radius: 14px; background: var(--ai-tint); box-shadow: inset 0 0 0 .5px var(--ai-ring); font-size: .875rem; }
.ai-sources-head { display: flex; align-items: center; gap: 6px; color: var(--ai-text); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.ai-sources-head svg { width: 15px; height: 15px; stroke-width: 1.8; }
.ai-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--ink); line-height: 1.4; }
.ai-disclaimer { margin-top: 10px; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.ai-disclaimer i { font-style: normal; }
.ai-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 2px 0; color: var(--muted); font-size: .8125rem; }
.ai-fb-row { display: flex; gap: 8px; }
.ai-fb-btn { min-height: 34px; padding: 6px 14px; border-radius: 17px; background: var(--paper); color: var(--ink); font-size: .875rem; box-shadow: inset 0 0 0 .5px var(--line); transition: transform .35s var(--ai-ease), box-shadow .35s var(--ai-ease); }
.ai-fb-btn:active { transform: scale(.95); box-shadow: inset 0 0 0 1px var(--ai-ring); }
.ai-fb-btn.is-primary, :root[data-theme=dark] .ai-fb-btn.is-primary { background: var(--ai-btn); color: #fff; box-shadow: none; }
.ai-fb.is-done { gap: 6px; animation: ai-rise .5s var(--ai-ease) both; }
.ai-fb.is-done svg { width: 15px; height: 15px; color: var(--ai-text); stroke-width: 2; flex: none; }
.ai-fb-note { flex-direction: column; align-items: stretch; animation: ai-rise .5s var(--ai-ease) both; }
.ai-fb-note textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .9375rem; color: var(--ink); padding: 10px 12px; border-radius: 16px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 .5px var(--line); resize: none; }
.ai-fb-note textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ai-ring), 0 0 0 4px var(--ai-tint); }
.ai-shimmer { background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 38%, var(--ai-a) 50%, var(--ai-c) 56%, var(--muted) 68%, var(--muted) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 2.4s cubic-bezier(.4, 0, .6, 1) infinite; }
.ask-link { background: var(--ai-tint); color: var(--ai-text); box-shadow: inset 0 0 0 .5px var(--ai-ring); }
.ask-composer { background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ai-edge) border-box; border: 1px solid transparent; transition: box-shadow .5s var(--ai-ease); }
.ask-composer:focus-within { box-shadow: 0 0 0 4px var(--ai-tint), 0 14px 32px -14px var(--ai-glow); }
.ask-composer button, :root[data-theme=dark] .ask-composer button { background: var(--ai-btn); color: #fff; box-shadow: 0 8px 18px -10px #4f46e5cc, inset 0 1px 0 #ffffff40; transition: transform .4s var(--ai-ease); }
.ask-composer button:active { transform: scale(.92); }
body.chat-mode .ask-composer:focus-within { box-shadow: 0 0 0 4px var(--ai-tint), 0 14px 32px -14px var(--ai-glow); }

.ai-settled :is(.ai-hero, .ai-welcome, .ask-example) { animation: none; }
@keyframes ai-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ai-drift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
@keyframes ai-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ai-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .ai-fb.is-done, .ai-fb-note, .ai-hero, .ai-hero-core::before, .ai-orb.is-thinking, .ai-welcome, .ask-example, .ask-msg.ai-new { animation: none; }
  .ai-shimmer { animation: none; background: none; color: var(--muted); }
}
@media (forced-colors: active) {
  .ai-title, .ai-shimmer { background: none; color: CanvasText; }
  .ai-hero-core::before { display: none; }
}

/* Guides → Places in Tashkent and Document routes (places.js) */
.place-list { display: flex; flex-direction: column; gap: 12px; }
.place { background: var(--paper); border-radius: var(--radius); padding: 16px; scroll-margin-top: 12px; transition: box-shadow .4s; }
.place.flash { box-shadow: 0 0 0 3px var(--accent); }
.place-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.place-icon { font-size: 1.75rem; line-height: 1; flex: none; }
.place-head h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.place-head p { color: var(--muted); font-size: .9375rem; line-height: 1.4; margin-top: 3px; }
.place-address { display: flex; gap: 6px; align-items: flex-start; font-size: .9375rem; line-height: 1.4; padding: 10px 0; border-top: .5px solid var(--line); }
.place-address svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
.place-maps { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.place-map { flex: 1 1 130px; text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: .9375rem; font-weight: 600; text-decoration: none; padding: 8px 14px; }
.place-phones { list-style: none; margin: 0; padding: 10px 0; border-top: .5px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; }
.place-phones li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.place-phones span { color: var(--muted); }
.place-phones a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.place-line { font-size: .9375rem; line-height: 1.45; padding: 8px 0; border-top: .5px solid var(--line); }
.place-line strong { font-weight: 600; margin-right: 4px; }
.place-note { font-size: .875rem; line-height: 1.45; color: var(--muted); padding: 8px 0; border-top: .5px solid var(--line); }
.place-links { display: flex; flex-wrap: wrap; gap: 0 16px; border-top: .5px solid var(--line); }
.place-links .link-button { font-size: .875rem; }
/* An office's centres by district (DXM): name, address, then phone and map links on one line. */
.place-branches { padding: 2px 0 6px; border-top: .5px solid var(--line); }
.place-branches h3 { margin: 10px 0 2px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.place-branches ul { list-style: none; margin: 0; padding: 0; }
.place-branch { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; font-size: .9375rem; line-height: 1.4; }
.place-branch + .place-branch { border-top: .5px solid var(--line); }
.place-branch b { font-weight: 600; }
.place-branch > span { color: var(--muted); }
.place-branch .place-branch-links { display: flex; flex-wrap: wrap; gap: 2px 16px; color: inherit; }
.place-branch-links a { font-weight: 600; text-decoration: none; }
.route { background: var(--paper); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; scroll-margin-top: 12px; }
.route.flash { box-shadow: 0 0 0 3px var(--accent); }
.route h2 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.route-intro { color: var(--muted); font-size: .9375rem; line-height: 1.4; margin-top: 4px; }
.route-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.route-step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.route-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.route-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); font-weight: 700; font-size: .875rem; }
.route-body { min-width: 0; flex: 1; padding-top: 3px; }
.route-body p { font-size: .9375rem; line-height: 1.45; }
.route-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.route-meta span { font-size: .8125rem; color: var(--muted); background: var(--fill); border-radius: 8px; padding: 3px 8px; }
.route-place { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.route-place svg { width: 12px; height: 12px; }


/* Places map (map.js): the map fills the screen, the sheet slides between three stops (--sheet-top). */
body.map-mode { overflow: hidden; }
body.map-mode .dock, body.map-mode .masthead, body.map-mode .footnote { display: none; }
.pm { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: var(--bg); --sheet-top: 50%; --ease: cubic-bezier(.2, .9, .3, 1); }
.pm > .pm-map { position: absolute; inset: 0; background: var(--fill); } /* over maplibre-gl.css, which loads later */
.pm-map.loading::after { content: ''; position: absolute; left: 50%; top: 30%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: pm-spin .8s linear infinite; }
@keyframes pm-spin { to { transform: rotate(1turn); } }
.pm-probe { position: absolute; left: 0; width: 0; visibility: hidden; pointer-events: none; }
.pm-probe-top { top: 0; height: var(--app-safe-top); }
.pm-probe-bottom { bottom: 0; height: var(--app-safe-bottom); }
.pm-fab { position: absolute; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); }
.pm-fab svg { width: 22px; height: 22px; stroke-width: 2.1; }
.pm-back { top: calc(var(--app-safe-top) + 10px); left: max(12px, var(--app-safe-left)); }
.pm-share { top: calc(var(--app-safe-top) + 10px); right: max(12px, var(--app-safe-right)); }
.pm-locate { right: max(12px, var(--app-safe-right)); top: calc(var(--sheet-top) - 58px); transition: top .38s var(--ease), opacity .2s; }
.pm-locate.on svg { fill: currentColor; }
.pm[data-sheet=full] .pm-locate { opacity: 0; pointer-events: none; }
.pm.dragging .pm-locate { transition: opacity .2s; }
.pm-toast { position: absolute; z-index: 4; left: 50%; top: calc(var(--app-safe-top) + 12px); transform: translateX(-50%); width: max-content; max-width: min(calc(100% - 128px), 420px); display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; color: var(--ink); font-size: .9375rem; line-height: 1.35; animation: pm-in .25s var(--ease); }
.pm-toast button { flex: none; color: var(--accent); font-weight: 600; min-height: 36px; }
@keyframes pm-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.pm-sheet { position: absolute; z-index: 2; left: max(8px, var(--app-safe-left)); right: max(8px, var(--app-safe-right)); top: 0; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; border-radius: 32px 32px 0 0; transform: translate3d(0, var(--sheet-top), 0); transition: transform .38s var(--ease), left .38s var(--ease), right .38s var(--ease), border-radius .38s var(--ease), background-color .38s; will-change: transform; touch-action: none; }
/* Full height, the sheet reaches the screen's edges and turns opaque, like Maps. */
.pm[data-sheet=full] .pm-sheet { left: 0; right: 0; border-radius: 22px 22px 0 0; }
.pm.dragging .pm-sheet { transition: none; }
.pm-grab { flex: none; padding: 4px 16px 10px; user-select: none; -webkit-user-select: none; cursor: grab; }
.pm-handle { display: block; width: 100%; height: 22px; }
.pm-handle span { display: block; width: 38px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--line); }
.pm-search { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--fill); color: var(--muted); cursor: text; }
.pm-search > svg { width: 20px; height: 20px; }
.pm-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: var(--ink); font-size: 1.0625rem; outline: none; -webkit-appearance: none; appearance: none; }
.pm-search input::placeholder { color: var(--muted); }
.pm-search input::-webkit-search-cancel-button { display: none; }
.pm-clear { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
.pm-clear svg { width: 18px; height: 18px; }
.pm-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 16px calc(28px + var(--app-safe-bottom)); overscroll-behavior: contain; }
.pm[data-sheet=full] .pm-body { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pm-group { margin: 12px 4px 2px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 2px; text-align: left; border-bottom: .5px solid var(--line); }
.pm-row:active { background: var(--fill); }
.pm-row-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); font-size: 1.3rem; line-height: 1; }
.pm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-row-text b { font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-text span { color: var(--muted); font-size: .875rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-row-dist { flex: none; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.pm-row-pin { flex: none; color: var(--accent); }
.pm-row-pin svg { width: 18px; height: 18px; }
.pm-empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: .9375rem; }
.pm-routes { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 16px; padding: 0 18px; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.pm-routes span { flex: 1; }
.pm-routes svg:last-child { width: 16px; height: 16px; }
.pm-foot { margin-top: 14px; padding: 0 4px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.pm-list { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 2px -4px; color: var(--accent); font-size: 1rem; }
.pm-list svg { width: 20px; height: 20px; }
.pm-dist { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .875rem; margin-bottom: 6px; }
.pm-dist svg { width: 15px; height: 15px; color: var(--accent); }
.pm-body .place { padding: 4px 0 0; background: none; border-radius: 0; }
.pm-branches { border-top: .5px solid var(--line); margin-bottom: 8px; }
.pm-branches .pm-group { margin-top: 10px; }
.pm-branch { min-height: 56px; }
.pm-row-tel { flex: none; font-size: .9375rem; font-weight: 600; text-decoration: none; }
/* Pins: a teardrop with the place's icon; its tip is the spot. The chosen one turns blue and grows. */
.pm-pin { position: relative; width: 36px; height: 46px; padding: 0; transform-origin: 50% 100%; transition: transform .2s var(--ease); filter: drop-shadow(0 3px 5px #0000004d); }
.pm-pin svg { position: absolute; inset: 0; width: 36px; height: 46px; fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; }
.pm-pin-icon { position: absolute; left: 0; right: 0; top: 7px; text-align: center; font-size: 17px; line-height: 1.2; }
.pm-pin-label { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); max-width: 160px; padding: 2px 8px; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: .75rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 4px #00000033; }
.pm-pin.on { transform: scale(1.18); z-index: 1; }
.pm-pin.on svg { fill: var(--accent); stroke: var(--paper); }
/* A district centre: a smaller pin, named when chosen or when the map is zoomed in. */
.pm-pin.small, .pm-pin.small svg { width: 26px; height: 33px; }
.pm-pin.small svg { stroke-width: 3; }
.pm-pin.small .pm-pin-icon { top: 4px; font-size: 12px; }
.pm-pin.small .pm-pin-label { display: none; font-size: .6875rem; }
.pm.pm-zoomed .pm-pin.small .pm-pin-label, .pm-pin.small.on .pm-pin-label { display: block; }
/* The user's position: a blue dot with a soft pulse. */
.pm-me { width: 18px; height: 18px; border-radius: 50%; background: #0a84ff; border: 3px solid #fff; box-shadow: 0 1px 6px #00000059, 0 0 0 0 #0a84ff66; animation: pm-pulse 2.2s ease-out infinite; }
@keyframes pm-pulse { to { box-shadow: 0 1px 6px #00000059, 0 0 0 16px #0a84ff00; } }
.pm .maplibregl-ctrl-top-right { top: calc(var(--app-safe-top) + 10px); right: max(8px, var(--app-safe-right)); }
@media (prefers-reduced-motion: reduce) { .pm-sheet, .pm-locate, .pm-pin { transition: none; } .pm-me { animation: none; } }

/* My documents: "Check a document" (doccheck.js through /api/chat) and the results under each item. */
.sp-check { width: 100%; }
.sp-check svg { width: 20px; height: 20px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-act { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px; background: var(--soft); color: var(--accent); font-size: .875rem; font-weight: 600; text-decoration: none; }
.doc-act svg { width: 16px; height: 16px; }
.doc-result { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: .9375rem; line-height: 1.45; box-shadow: inset 3px 0 0 #d69a00; }
.doc-result strong { display: block; font-weight: 600; }
.doc-result ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.doc-result li { display: flex; gap: 8px; }
.doc-result li span { flex: none; }
.doc-result .note { margin-top: 8px; padding: 0; }
.doc-result.v-ready { box-shadow: inset 3px 0 0 var(--green); }
.doc-result.v-fix { box-shadow: inset 3px 0 0 var(--red); }
.doc-result.checking { display: flex; align-items: center; gap: 10px; color: var(--muted); box-shadow: none; }
.doc-result.fail { color: var(--red); background: var(--red-bg); box-shadow: none; }

/* Document samples (samples.js): a drawing of the paper, light even in dark mode, marked SAMPLE. */
.sample-sheet .sp-intro { color: var(--muted); font-size: .9375rem; line-height: 1.45; margin: 4px 0 14px; }
.sp-paper { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 18px 18px 22px; border-radius: 6px; background: #fffef9; color: #2b2b2b; box-shadow: 0 1px 2px #00000033, 0 10px 30px #00000024; font-family: Georgia, 'Times New Roman', serif; font-size: .8125rem; line-height: 1.4; }
:root[data-theme=dark] .sp-paper { background: #f1efe8; }
.sp-watermark { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.75rem/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .18em; color: #c62828; opacity: .11; transform: rotate(-24deg); pointer-events: none; }
.sp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid #1f4e8c; color: #1f4e8c; font: 700 .75rem/1.3 -apple-system, BlinkMacSystemFont, sans-serif; }
.sp-logo { width: 28px; height: 28px; border-radius: 7px; background: #1f4e8c; flex: none; }
.sp-title { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-weight: 700; letter-spacing: .06em; font-size: .875rem; }
.sp-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-bottom: 4px; border-bottom: 1px dotted #00000038; }
.sp-field span { color: #6b6b6b; font-size: .75rem; }
.sp-field b { font-weight: 600; }
.sp-field.strong b { color: #0b5d2b; font-size: .9375rem; }
.sp-rows, .sp-lines { position: relative; display: grid; gap: 6px; padding-right: 28px; }
.sp-rows i, .sp-lines i { display: block; width: var(--w); height: 7px; border-radius: 4px; background: #0000001c; }
.sp-rows .sp-mark, .sp-lines .sp-mark { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.sp-text { font-style: italic; }
.sp-text .sp-mark { margin-left: 6px; vertical-align: middle; }
.sp-stamp-row, .sp-qr-row, .sp-photo-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sp-stamp { display: grid; place-items: center; width: 84px; height: 84px; padding: 8px; border-radius: 50%; border: 3px double #2f55b0; color: #2f55b0; font: 700 .625rem/1.2 -apple-system, BlinkMacSystemFont, sans-serif; text-align: center; transform: rotate(-12deg); }
.sp-sign { display: flex; align-items: flex-end; gap: 10px; }
.sp-scribble { width: 110px; height: 30px; border-bottom: 1px solid #00000066; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 30'%3E%3Cpath d='M4 24c10-18 16-18 14-4s8-14 16-10-2 14 8 8 14-16 20-8-6 12 6 8 18-14 24-6' fill='none' stroke='%232b2b2b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.sp-sign small { color: #6b6b6b; }
.sp-sign .sp-mark { margin-left: auto; }
.sp-qr { width: 54px; height: 54px; border: 4px solid #fff; outline: 1px solid #00000026; background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.sp-paper-photo { justify-items: center; background: #fff; }
.sp-photo { display: grid; place-items: end center; width: 120px; height: 154px; overflow: hidden; background: #fff; border: 1px solid #00000026; }
.sp-photo svg { width: 100%; height: auto; fill: #9aa3ad; stroke: none; }
.sp-mark { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: #e8590c; color: #fff; font: 700 .6875rem/1 -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 0 0 2px #fffef9; }
.sp-h { margin: 20px 0 8px; font-size: 1.0625rem; }
.sp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.sp-points .sp-mark { margin: 1px 0 0; box-shadow: none; }
.sp-points.plain li::before { content: '✓'; flex: none; color: var(--green); font-weight: 700; }
.sp-service { margin-bottom: 14px; }
.sp-mistakes { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: .9375rem; line-height: 1.45; }
.sp-mistakes li::marker { content: '✗  '; color: var(--red); font-weight: 700; }
.sp-note { margin-top: 8px; color: var(--muted); font-size: .8125rem; font-style: italic; }
.sp-check { margin-top: 20px; }
/* A real example's pages (web/samples/pages), in the sheet and full screen (docs.js). */
.sp-example .sp-h { margin-top: 6px; }
.sp-example .sp-note { margin: 0 0 10px; }
.sp-pages { display: grid; gap: 10px; margin-bottom: 20px; }
.sp-page { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px #00000033, 0 10px 30px #00000024; cursor: zoom-in; }
.sp-page img, .pv-scroll img { display: block; width: 100%; height: auto; }
dialog.page-viewer { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; background: #111; }
dialog.page-viewer::backdrop { background: #111; }
.page-viewer .close { position: fixed; z-index: 1; top: calc(12px + var(--app-safe-top)); right: calc(12px + var(--app-safe-right)); }
.pv-scroll { position: relative; height: 100%; overflow: auto; overscroll-behavior: contain; padding: calc(64px + var(--app-safe-top)) 8px calc(16px + var(--app-safe-bottom)); display: grid; align-content: start; gap: 8px; }
.pv-scroll img { background: #fff; cursor: zoom-in; }
.pv-scroll.zoomed { grid-template-columns: 250%; }
.pv-scroll.zoomed img { cursor: zoom-out; }

/* ── Liquid Glass (iOS 26, kept in iOS 27) ─────────────────────────────────────────────────
   HIG: glass is only for the navigation layer that floats over content — the tab bar, bar
   buttons, sheets, the chat composer, map controls. Content (cards, lists, text) stays solid,
   and glass never sits on glass. The material: a light tint, blur + saturation of what's behind,
   a lit rim (brighter at the top-left, like light catching an edge) and a soft shadow.
   glass.js adds real refraction at the rim on Chromium (--refract), the tab bar's liquid lens,
   the sliding thumbs and the shrinking tab bar. */
:where(.glass:not(dialog)) { position: relative; }
.glass, .close {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-rim-low), var(--glass-shade);
}
.glass::after, .close::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--glass-rim), transparent 30%, transparent 70%, var(--glass-rim-low));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Chromium: the backdrop really bends at the rim (glass.js builds the filter for this size). */
.refract .glass-refract[style*="--refract"] { -webkit-backdrop-filter: var(--refract); backdrop-filter: var(--refract); }
/* Glass you can press swells a little and springs back, as iOS's interactive glass does. */
:is(a, button).glass, .close { transition: transform .45s var(--spring), background-color .3s; }
:is(a, button).glass:active, .close:active { transform: scale(1.1); }
/* Sheets and the map's sheet carry reading content: a thicker, frostier glass. */
dialog.glass, .pm-sheet.glass { background: var(--glass-thick); --glass-blur: 30px; }
.pm[data-sheet=full] .pm-sheet.glass { background: var(--paper); }
.close { --glass: var(--fill); }

/* The tab bar: the selection is one lens that slides like a drop of liquid (glass.js). */
.dock { touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: padding .45s var(--spring-soft), bottom .45s var(--spring-soft); }
.dock-lens {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; right: 4px; border-radius: 999px; pointer-events: none;
  background: var(--lens);
  /* Moving right, the right edge leads and the left trails, so the lens stretches and settles. */
  transition: left .62s var(--spring), right .4s var(--spring), top .45s var(--spring-soft), bottom .45s var(--spring-soft), transform .5s var(--spring), background-color .25s, box-shadow .25s;
}
.dock[data-dir=left] .dock-lens { transition: left .4s var(--spring), right .62s var(--spring), top .45s var(--spring-soft), bottom .45s var(--spring-soft), transform .5s var(--spring), background-color .25s, box-shadow .25s; }
.dock:not([data-ready]) .dock-lens { transition: none; }
.dock[data-ready] a[aria-current=page], .dock[data-ready] a.ai-tab[aria-current=page] { background: none; box-shadow: none; }
.dock[data-current=ask] .dock-lens { background: linear-gradient(135deg, #8b5cf62e, #06b6d424); box-shadow: inset 0 0 0 .5px var(--ai-ring); }
/* Pressed: the lens lifts above the icons as clear glass (and magnifies them on Chromium). */
.dock.pressing .dock-lens {
  z-index: 2; transform: scale(1.1, 1.2); background: var(--lens-lifted);
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 .5px var(--glass-rim-low), 0 6px 18px -6px #00000040;
}
.refract .dock.pressing .dock-lens[style*="--refract"] { -webkit-backdrop-filter: var(--refract); backdrop-filter: var(--refract); }
.dock.dragging .dock-lens { transition: left .09s linear, right .09s linear, transform .5s var(--spring), background-color .25s, box-shadow .25s; }
.dock a > * { transition: transform .45s var(--spring); }
.dock a.under-lens > * { transform: scale(1.14); }
.dock.dragging a.under-lens { color: var(--accent); }
/* Shrinks while you read (scrolling down), grows back when you scroll up. */
.dock a span { max-height: 1.3em; transition: max-height .4s var(--spring-soft), opacity .25s; }
.dock.compact { padding: 2px; bottom: calc(6px + var(--app-safe-bottom)); }
.dock.compact a { min-height: 46px; }
.dock.compact a span { max-height: 0; opacity: 0; }
.dock.compact .dock-lens { top: 2px; bottom: 2px; }

/* Scroll edge effect: once content scrolls under the status bar (Telegram full screen) or the
   top of the window, a soft blur fades it out instead of a hard bar. Same at the bottom, under
   the tab bar. Sticky bars below carry their own (::before). */
body::before, body::after {
  content: ''; position: fixed; left: 0; right: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body::before {
  z-index: 20; top: 0; height: calc(var(--app-safe-top) + 24px);
  background: linear-gradient(var(--bg) var(--app-safe-top), color-mix(in srgb, var(--bg) 0%, transparent));
  -webkit-mask-image: linear-gradient(#000 var(--app-safe-top), transparent); mask-image: linear-gradient(#000 var(--app-safe-top), transparent);
  opacity: 0; transition: opacity .3s;
}
.scrolled body::before { opacity: 1; }
body::after {
  z-index: 9; bottom: 0; height: calc(var(--app-safe-bottom) + 76px);
  background: linear-gradient(color-mix(in srgb, var(--bg) 0%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
}
body.map-mode::after, body.map-mode::before { display: none; }
.chat-bar::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 -14px; pointer-events: none;
  background: linear-gradient(var(--bg) 45%, color-mix(in srgb, var(--bg) 0%, transparent));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
/* .guide-tabs scrolls sideways, so a pseudo-element would scroll away with the chips: its own
   background (which stays put in a scroll container) fades instead. */
.guide-tabs { background: linear-gradient(var(--bg) 65%, color-mix(in srgb, var(--bg) 0%, transparent)); }

/* The chat page: a title between two glass circle buttons, the composer a glass capsule. */
.chat-bar h1 { font-size: 1.0625rem; }
.ask-composer.glass { border: 0; border-radius: 28px; padding: 6px; }
.ask-composer.glass::after { background: var(--ai-edge); padding: 1px; }
body.chat-mode .ask-composer.glass { box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shade); }
.ask-composer.glass:focus-within { box-shadow: inset 0 1px 0 var(--glass-rim), 0 0 0 4px var(--ai-tint), 0 14px 32px -14px var(--ai-glow); }

/* Segmented controls: the selection is a thumb that slides between options (glass.js places it). */
:is(.segments, .doc-status) { position: relative; isolation: isolate; }
:is(.segments, .doc-status)[data-thumb]::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: var(--thumb-y); width: var(--thumb-w); height: var(--thumb-h);
  transform: translateX(var(--thumb-x)); border-radius: 999px; background: var(--thumb);
  box-shadow: 0 3px 8px #0000001f, 0 1px 1px #0000000f, inset 0 .5px 0 #ffffff26;
}
:is(.segments, .doc-status)[data-thumb=on]::before { transition: transform .5s var(--spring), width .5s var(--spring), height .3s; }
:is(.segments, .doc-status)[data-thumb] > [aria-pressed=true] { background: transparent; box-shadow: none; }
/* Pressing the chosen option swells the thumb, like iOS 26's segmented control. */
.segments[data-thumb]:has(> [aria-pressed=true]:active)::before { transform: translateX(var(--thumb-x)) scale(1.05); }

/* On/off settings are switches (HIG), not checkboxes. The knob stretches while pressed. */
input[role=switch] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0;
  border-radius: 999px; background: var(--switch-off); cursor: pointer; transition: background-color .25s;
}
input[role=switch]::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: 0 3px 8px #00000026, 0 1px 1px #00000029, 0 0 0 .5px #0000000a;
  transition: left .45s var(--spring), width .45s var(--spring), background-color .2s;
}
input[role=switch]:checked { background: var(--switch-on); }
input[role=switch]:checked::before { left: 22px; }
input[role=switch]:active::before { width: 35px; background: #ffffffe0; }
input[role=switch]:checked:active::before { left: 14px; }
input[role=switch]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.doc-toggle { gap: 16px; }

/* Accessibility: Reduce Transparency → solid surfaces with a hairline (glass.js mirrors the
   setting as .solid-glass, which also stops the refraction). Increase Contrast → opaque + border. */
.solid-glass :is(.glass, .close, .dock-lens) { background: var(--paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.solid-glass :is(.glass, .close) { box-shadow: 0 0 0 .5px var(--line), var(--glass-shade); }
.solid-glass :is(.glass, .close)::after { display: none; }
.solid-glass .dock-lens { background: var(--fill) !important; }
.solid-glass body::before, .solid-glass body::after, .solid-glass .chat-bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.solid-glass body::before { background: var(--bg); -webkit-mask-image: none; mask-image: none; height: var(--app-safe-top); }
.solid-glass body::after { display: none; }
@media (prefers-contrast: more) {
  .glass, .close { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line), var(--glass-shade); }
  .glass::after, .close::after { display: none; }
  .dock-lens { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
  input[role=switch] { box-shadow: inset 0 0 0 1px var(--line); }
}
@media (forced-colors: active) {
  .glass::after, .close::after, .dock-lens, :is(.segments, .doc-status)::before { display: none; }
  input[role=switch] { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; }
  input[role=switch]::before { display: none; }
}

/* Housing in Italy (#guides/housing) */
.guide-housing .guide-icon { background: #d9822b; }
.housing-reqs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
/* Housing: city and budget stay in view; the rest folds under "More filters". */
.housing-more { margin: 10px 0 12px; }
.housing-more > div .filters { background: var(--fill); }
.housing-more .housing-reqs { margin-bottom: 0; }
.housing-req {
  border: .5px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: .8125rem; font-weight: 600;
  background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.housing-req[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 14%, var(--paper)); border-color: var(--accent); color: var(--accent); }
.housing-city-card, .housing-portals-card, .housing-alert-card {
  background: var(--paper); border: .5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0;
  box-shadow: var(--shadow);
}
.housing-city-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.housing-city-head h3, .housing-portals-card h3, .housing-alert-card h3 { margin: 0; font-size: .9375rem; }
.housing-rent-range { font-size: .78rem; font-weight: 600; color: var(--accent); }
.housing-portal-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.housing-portal-link { font-size: .8125rem; padding: 6px 11px; }
.housing-alert-card { display: flex; flex-direction: column; gap: 10px; }
.housing-alert-card.active { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.housing-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.housing-card h3 { margin: 6px 0 4px; font-size: 1rem; line-height: 1.35; }
.housing-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.housing-price strong { font-size: 1.15rem; color: var(--ink); }
.housing-price span { font-size: .8125rem; color: var(--muted); margin-left: 4px; }
.housing-source-pill {
  font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--fill); color: var(--muted);
}
.housing-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.housing-badge {
  font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: var(--fill); color: var(--ink);
}
.housing-badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.housing-safety { margin-top: 18px; }

/* ── FDM Global (fdm.js; the owner, 24 Oct 2026) ─────────────────────────────────────────────
   Apple HIG on a plain, static background; Liquid Glass only on what floats (the tab bar, the
   segmented control); navy, gold and wine from the seal, used sparingly. Light mode only. */
:root {
  --fdm-navy: #14284b; --fdm-gold: #c9a45c; --fdm-wine: #8c1d2b;
  --accent: var(--fdm-navy); --soft: #e7ebf3; --go-bg: var(--bg);
}
body.home-mode .shell { padding-bottom: calc(120px + var(--app-safe-bottom)); }
body.paywall-mode .masthead { display: none; }
body.home-mode .masthead { margin-bottom: 0; }
body.paywall-mode .dock, body.paywall-mode .footnote { display: none; }
.dock-lens { background: #14284b14; }
.dock[data-current=ask] .dock-lens { background: linear-gradient(135deg, #8b5cf62e, #06b6d424); }

/* More liquid (the owner): on the way to a tab the lens squashes like a drop, overshoots and
   settles; the tab it lands on gives a small pop. Off with reduced motion. */
@keyframes fdm-squish { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .8); } 62% { transform: scale(.97, 1.07); } 82% { transform: scale(1.01, .98); } 100% { transform: scale(1, 1); } }
@keyframes fdm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.dock-lens.moving { animation: fdm-squish .62s var(--spring-soft); }
.dock[data-ready] a[aria-current=page] svg, .dock.seg[data-ready] button[aria-pressed=true] { animation: fdm-pop .5s var(--spring); }
@media (prefers-reduced-motion: reduce) { .dock-lens.moving, .dock[data-ready] a[aria-current=page] svg, .dock.seg[data-ready] button[aria-pressed=true] { animation: none; } }

/* Home */
.fdm-home { max-width: 560px; margin: 0 auto; padding-top: 12px; }
.fdm-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .875rem; }
.fdm-seal { border-radius: 50%; flex: none; }
.fdm-hi { margin: 14px 2px 14px; font-size: 2.125rem; }
.fdm-card { display: block; background: var(--paper); border-radius: 22px; color: var(--ink); text-decoration: none; overflow: hidden; }
.fdm-journey { padding: 14px 14px 6px; transition: transform .35s var(--spring); }
.fdm-journey:active { transform: scale(.98); }
.fdm-journey-head { display: flex; justify-content: space-between; color: var(--muted); font-size: .8125rem; }
.fdm-bar { display: flex; gap: 4px; margin: 10px 0 4px; }
.fdm-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--fill); }
.fdm-bar i.done { background: var(--fdm-navy); }
.fdm-bar i.now { background: var(--fdm-gold); }
.fdm-journey .fdm-row { padding: 8px 0; }
.fdm-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 60px; color: var(--ink); text-decoration: none; }
.fdm-card > .fdm-row + .fdm-row { border-top: .5px solid var(--line); }
.fdm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 1rem; line-height: 1.3; }
.fdm-row-text b { font-weight: 600; }
.fdm-row-text small { color: var(--muted); font-size: .8125rem; }
.fdm-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.fdm-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fdm-ic.navy { background: var(--fdm-navy); } .fdm-ic.gold { background: var(--fdm-gold); } .fdm-ic.wine { background: var(--fdm-wine); }
.fdm-ic.big { width: 56px; height: 56px; border-radius: 16px; } .fdm-ic.big svg { width: 28px; height: 28px; }
.fdm-chev { color: #c7c7cc; display: grid; } .fdm-chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.fdm-pill { flex: none; border: 0; border-radius: 999px; padding: 7px 14px; background: var(--fdm-navy); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; transition: transform .3s var(--spring), opacity .2s; }
.fdm-pill:active { transform: scale(.94); }
.fdm-pill:disabled { background: var(--fill); color: var(--muted); }
.fdm-panel { margin-top: 12px; }
.fdm-panel.fdm-in { animation: fdm-panel-in .4s var(--spring-soft); }
@keyframes fdm-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fdm-soon { padding: 26px 20px; text-align: center; }
.fdm-soon .fdm-ic { margin: 0 auto 12px; }
.fdm-soon h2 { font-size: 1.1875rem; margin: 0 0 6px; }
.fdm-soon p { color: var(--muted); margin: 0; font-size: .9375rem; line-height: 1.45; }
#coursesScreen .fdm-soon { margin-top: 8px; }

/* The segmented control: the tab bar's liquid lens, inline. */
.dock.seg { position: relative; left: auto; bottom: auto; transform: none; z-index: 1; width: 100%; margin-top: 14px; padding: 3px; background: #7676801f; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dock.seg.compact { padding: 3px; bottom: auto; }
.dock.seg button { position: relative; z-index: 1; flex: 1; min-height: 34px; border: 0; background: none; border-radius: 999px; font: inherit; font-size: .875rem; font-weight: 500; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.dock.seg button[aria-pressed=true] { font-weight: 600; }
.dock.seg .dock-lens { top: 3px; bottom: 3px; background: #fff; box-shadow: 0 3px 8px -2px #0000002e, 0 0 0 .5px #0000000a; }
.dock.seg:not([data-ready]) button[aria-pressed=true] { background: #fff; }

/* The paywall */
.fdm-paywall { max-width: 420px; margin: 0 auto; padding: 36px 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.fdm-paywall-seal { border-radius: 50%; box-shadow: 0 14px 30px -12px #14284b80; }
.fdm-paywall h1 { margin: 16px 0 2px; }
.fdm-muted { color: var(--muted); margin: 0; font-size: .9375rem; }
.fdm-muted.small { font-size: .8125rem; margin-top: 4px; }
.fdm-included { list-style: none; margin: 20px 0 16px; padding: 0; width: 100%; text-align: left; }
.fdm-included li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 1rem; }
.fdm-included li + li { border-top: .5px solid var(--line); }
.fdm-included .fdm-ic { width: 30px; height: 30px; border-radius: 9px; }
.fdm-price { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin: 6px 0 0; }
.fdm-cta { width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 999px; background: var(--fdm-navy); color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 600; box-shadow: 0 10px 24px -12px #14284bb3; transition: transform .3s var(--spring); }
.fdm-cta:active { transform: scale(.97); }
.fdm-cta.ghost { margin-top: 10px; background: var(--paper); color: var(--fdm-navy); box-shadow: none; }

/* Members' content: a watermark with their name over every page, and no copying. */
.fdm-watermark { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-image: var(--fdm-watermark); background-repeat: repeat; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable=true] { -webkit-user-select: text; user-select: text; }