/* Part of Survival Language — see index.html for load order.
All colors live in tokens.css; this and the other files below only use
var(--...) references, never raw hex, so a purchased theme (js/store.js
applyThemeSkin) or dark mode recolors everything without touching CSS. */
/* ---- Profile picker ---- */
.picker-shell{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
/* ---- Login screen (Sofia, Sept: real Tbilisi photo, card overlapping it) ----
.login-shell replaces .picker-shell only for renderLoginCard() — it needs to
flow top-to-bottom (hero, card, news, footer) instead of vertically centering
one short card, which is still exactly right for the add-profile/recovery
screens below that keep using .picker-shell. */
.login-shell{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding:20px 16px 32px; }
.picker-outer{ position:relative; max-width:640px; width:100%; margin:0 auto; }
.picker-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 14px; }
.picker-brand{ display:flex; align-items:center; gap:9px; font-family:'Unbounded',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.02em; color:var(--ink); line-height:1.2; }
.picker-brand-mark rect{ fill:var(--accent); }
.picker-brand-mark-notch{ fill:var(--accent); }
/* Old top-right overlay position/background only made sense sitting on top of the
photo — now the lang switch lives in a normal row above it (add-profile and the
recovery screens still use .picker-illust plainly, so this rule covers both). */
.picker-topbar .lang-switch{ position:static; background:var(--surface-2); box-shadow:none; }
.picker-topbar .lang-switch button{ color:var(--ink-soft); }
.picker-topbar .lang-switch button.active{ background:var(--accent); color:var(--accent-ink); }
.picker-illust{
width:100%; aspect-ratio:3/2; position:relative; overflow:hidden;
border-radius:90px 28px 90px 28px; background:var(--surface-2);
box-shadow:0 24px 48px -22px var(--shadow);
}
.picker-illust-img{ width:100%; height:100%; object-fit:cover; object-position:52% 42%; display:block; }
/* Base card box — shared skeleton for both auth contexts. Vertical placement
(overlapping the login screen's background photo vs. sitting flush in
.picker-shell's plain stacked layout) is set per-context below, not here. */
.picker-card{
position:relative; margin:0 auto;
background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg);
box-shadow:0 20px 40px -18px var(--shadow); z-index:2;
width:min(92%, 380px); text-align:center; padding:var(--space-6) var(--space-6) var(--space-8);
}
.picker-card .ka{ color:var(--accent); font-size:20px; font-weight:600; margin-bottom:6px; display:block; }
.picker-card h1{ font-size:28px; margin-bottom:var(--space-3); }
.picker-card p.lede{ color:var(--ink-soft); font-size:15px; line-height:1.5; margin-bottom:var(--space-8); }
/* .picker-shell (add-profile / recovery) still lays illust+card out as plain
stacked flow inside the old bordered box — .login-shell is the only context
where .picker-outer/.picker-illust/.picker-card get the overlap treatment. */
.picker-shell .picker-outer{
position:static; max-width:420px; background:var(--surface); border:1.5px solid var(--border);
border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 16px 34px -18px var(--shadow);
}
.picker-shell .picker-topbar{ padding:14px 14px 0; }
.picker-shell .picker-illust{ border-radius:0; box-shadow:none; }
.picker-shell .picker-card{
position:static; margin:0; width:100%; border:none; border-radius:0; box-shadow:none;
}
/* Sofia (Sept 7, v2): login screen, non-desktop — photo detached from the
flow and moved behind the header+card as a decorative full-bleed
background, instead of a stacked block the card overlaps by a fixed
negative margin. The header stays in the plain page background above the
photo (photo starts right below it, ~header height); the card floats
down over the photo's lower half. Exactly 120px between the header and
the card, independent of the photo's own size. Superseded by the grid
layout at 900px+ below. .picker-shell (add-profile/recovery) is
untouched — it keeps the plain in-flow layout above. */
.login-shell .picker-topbar{ position:relative; z-index:1; }
.login-shell .picker-illust{
position:absolute; top:48px; left:50%; transform:translateX(-50%);
width:100vw; max-width:900px; height:340px; aspect-ratio:auto; z-index:0;
}
/* Sofia (Sept 7, v3): the header+card block no longer caps at the old
640px reading column — it now runs the full available width (up to the
900px breakpoint below), with the card still centered inside it via its
own width:min(92%,380px) + margin:0 auto above. Wider than the card
itself, so this is genuinely visible from tablet width up. */
.login-shell .picker-outer{ max-width:none; }
.login-shell .picker-card{ margin-top:120px; }
/* Sofia (Sept 7, v3): news block redesign — the whole section (eyebrow +
tabs + item list) now sits inside one white card instead of loose items
on the plain page background; individual items switch from a shadow to a
border since a shadow doesn't read against another white surface right
behind it. Matches the wider .picker-outer above, not the old 640px
column — .news-section is also used standalone on updates.php, so this
stays scoped to the login screen. */
.login-shell .news-section{
max-width:none; background:var(--surface); border-radius:var(--radius-md);
padding:var(--space-4);
}
.login-shell .news-item{ box-shadow:none; border:1.5px solid var(--border); }
/* Sofia (Sept 7, v3): tablet width and up (still below the 900px desktop
breakpoint — there's no separate "tablet" media query anywhere else in
this file, this is the first one) — the photo's corners go from the
mobile 90/28/90/28 to a much rounder 200/28/200/28. Reset back to
90/28/90/28 for desktop below, since this would otherwise still match there too. */
@media (min-width:640px){
.login-shell .picker-illust{ border-radius:200px 28px 200px 28px; }
}
.profile-list{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-4); }
/* Same box-shadow + transparent-border pattern as .month-card/.practice-row: the
border only appears (in accent-2) to signal the interactive hover state. */
.profile-row{
display:flex; align-items:center; gap:14px; padding:var(--space-3) var(--space-4);
background:var(--surface); border:1.5px solid transparent; border-radius:var(--radius-md);
text-align:left; transition:border-color .15s ease;
}
.profile-row:hover{ border-color:var(--accent-2); }
.profile-row .who-avatar{ width:40px; height:40px; font-size:16px; }
.profile-row .p-name{ font-weight:700; font-size:16px; }
.profile-row .p-meta{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.profile-row .p-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.add-profile-form{ display:flex; gap:var(--space-2); margin-top:6px; }
.add-profile-form input{
flex:1; border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:15px; font-family:inherit;
}
.add-profile-form input:focus{ outline:2.5px solid var(--accent); outline-offset:1px; }
.link-btn{ background:none; border:none; color:var(--accent); font-weight:700; font-size:14px; padding:8px; }
.suggest-label{ font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin:var(--space-1) 0 var(--space-3); text-align:left; }
.suggest-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); }
.suggest-chip{
display:flex; align-items:center; gap:var(--space-2); background:var(--surface); border:1.5px dashed var(--accent-2);
color:var(--ink); border-radius:999px; padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2); font-weight:700; font-size:14px;
}
.suggest-chip:hover{ border-style:solid; }
.suggest-chip .who-avatar{ width:26px; height:26px; font-size:12px; background:var(--accent-2); }
.form-error{ color:var(--error); font-size:13px; font-weight:600; margin:-4px 0 8px; text-align:left; }
.form-success{ color:var(--success); font-size:13px; font-weight:600; margin:-4px 0 8px; text-align:left; }
.form-back{ background:none; border:none; color:var(--ink-faint); font-size:13px; font-weight:600; padding:6px 0; margin-bottom:10px; display:flex; align-items:center; gap:4px; }
.form-back:hover{ color:var(--ink); }
/* Static row (no hover/interactive state), so it's a plain neutral surface — shadow
instead of a border, same as .crystals-balance-card etc. */
.pin-row{ display:flex; align-items:center; gap:14px; padding:var(--space-3) var(--space-4); background:var(--surface); border-radius:var(--radius-md); text-align:left; margin-bottom:var(--space-4); }
.pin-row .p-name{ font-weight:700; font-size:16px; flex:1; }
.photo-pick-row{ display:flex; align-items:center; gap:var(--space-3); margin-top:2px; }
.photo-pick-row .who-avatar{ width:40px; height:40px; font-size:16px; }
.lang-switch{ position:absolute; top:12px; right:12px; display:flex; background:rgba(255,255,255,.85); border-radius:999px; padding:3px; gap:2px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.lang-switch button{ border:none; background:none; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; color:var(--ink-soft); }
.lang-switch button.active{ background:var(--accent); color:var(--accent-ink); }
.lang-switch-static{ position:static; background:var(--surface-2); box-shadow:none; display:inline-flex; align-self:flex-start; }
.lang-switch-static button{ color:var(--ink-soft); }
.lang-switch-static button.active{ background:var(--accent); color:var(--accent-ink); }
.settings-avatar{ width:96px; height:96px; font-size:32px; flex:none; }
/* Smaller sibling of .settings-avatar for the new grouped-list identity tile
(css: settings-grouped-redesign, п.31) — .settings-avatar itself can't be
resized, it's shared verbatim with the companion-preview modal
(js/screens.practice.js). */
.settings-id-avatar{ width:56px; height:56px; font-size:20px; flex:none; }
/* Frame preview modal — same avatar size Settings already uses, big enough that the
gradient frame ring actually reads as a frame instead of a thin outline. */
.preview-avatar-wrap{ display:flex; justify-content:center; margin:0 auto var(--space-4); }
.settings-photo-actions{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.settings-photo-actions .link-btn{ font-size:13.5px; padding:2px 0; }
.settings-field{ display:flex; flex-direction:column; gap:var(--space-2); }
.settings-field-label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.settings-field input[type="text"], .settings-field input[type="date"], .settings-field input[type="password"]{
border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:15px; font-family:inherit; width:100%;
}
.settings-field input:focus{ outline:2.5px solid var(--accent); outline-offset:1px; }
.birthdate-row{ display:flex; gap:var(--space-2); }
.bd-select{
border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
border-radius:var(--radius-sm); padding:var(--space-3) 30px var(--space-3) var(--space-3); font-size:14px; font-family:inherit; min-width:0;
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image: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 1l5 5 5-5' stroke='%2393ADB3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center; background-size:11px 7px;
}
.bd-select:focus{ outline:2.5px solid var(--accent); outline-offset:1px; }
.bd-day{ flex:0 0 62px; }
.bd-month{ flex:1.7; }
.bd-year{ flex:0 0 84px; }
.settings-pin-form{ display:flex; flex-direction:column; gap:var(--space-3); align-items:stretch; }
.settings-pin-form input{ width:100%; }
.settings-pin-form .btn{ align-self:flex-start; margin-top:3px; }
.gender-radios{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.gender-radio{
display:flex; align-items:center; gap:var(--space-2); border:1.5px solid var(--border);
border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:14.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.gender-radio input{ accent-color:var(--accent); width:16px; height:16px; margin:0; }
.gender-radio.active{ border-color:var(--accent); color:var(--ink); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* Matches .btn's own padding/radius formula (lesson.css) — the error-colored
border is what marks this as the destructive action. Still reused as-is by
the Junior profile's own logout button (renderJuniorProfile). */
.btn-logout{
background:none; border:1.5px solid var(--error); color:var(--error);
font-weight:700; font-size:15px; padding:var(--space-3) var(--space-6); border-radius:var(--radius-md); width:100%;
}
.btn-logout:hover{ background:var(--error-soft); }
/* ---- Settings redesign (Sofia, п.31): Apple-Settings-style grouped rows
instead of one long form. Phone: identity tile + grouped reveal-in-place
rows. Desktop (≥1024px, same breakpoint/idea as .side-nav and
renderNumbersDesktop's split view): identity+personal data merge into one
always-expanded wide card, and only "Безопасность" keeps a click-to-open
split pane (rarer, more form-like actions). ---- */
/* -- Identity tile (phone): avatar + name, tap to reveal photo/rename -- */
.settings-id-tile{
background:var(--surface); border-radius:var(--radius-lg);
padding:var(--space-4); display:flex; align-items:center; gap:var(--space-3);
margin-bottom:var(--space-6); cursor:pointer; border:none; width:100%; text-align:left; font-family:inherit;
}
.settings-id-body{ flex:1 1 auto; min-width:0; }
.settings-id-name{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; color:var(--ink); }
.settings-id-sub{ font-size:13px; color:var(--ink-faint); margin-top:2px; }
.settings-id-chevron{ color:var(--ink-faint); flex:none; transition:transform .18s ease; }
.settings-id-chevron svg{ width:18px; height:18px; }
.settings-id-tile[aria-expanded="true"] .settings-id-chevron svg{ transform:rotate(180deg); }
.settings-id-reveal{
background:var(--surface); border-radius:var(--radius-lg);
padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
margin:calc(-1 * var(--space-6) + 2px) 0 var(--space-6);
}
.settings-rename-row{ display:flex; gap:var(--space-2); }
/* Sofia: "Поле «имя» почему-то слетел стиль" — this input only ever had
flex:1 here, so it rendered with the bare browser-default border/
background instead of matching the birthdate/gender controls beside it.
.settings-field input[type="text"] (above) doesn't reach it — this row
isn't a .settings-field — so it needs its own copy of that same box. */
.settings-rename-row input{
flex:1; min-width:0; border:1.5px solid var(--border); background:var(--surface); color:var(--ink);
border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:15px; font-family:inherit;
}
.settings-rename-row input:focus{ outline:2.5px solid var(--accent); outline-offset:1px; }
/* -- Grouped list -- */
.settings-group{ margin-bottom:var(--space-6); }
/* п.37: заголовок группы строк (Личные данные / Прогресс / Безопасность и
т.п.) — настоящее название секции, не мелкий meta-лейбл, поэтому обычный
регистр вместо капса. */
.settings-group-label{ font-size:12px; font-weight:700; color:var(--ink-faint); margin:0 0 var(--space-2) var(--space-2); }
.settings-group-box{ background:var(--surface); border-radius:var(--radius-md); overflow:hidden; }
.settings-group-box-pad{ padding:var(--space-4); }
.settings-group-box.danger{ text-align:center; }
.settings-row{
display:flex; align-items:center; gap:var(--space-3); padding:13px var(--space-4);
border-bottom:1px solid var(--border); border-top:none; border-left:none; border-right:none;
background:none; width:100%; text-align:left; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.settings-row:last-child{ border-bottom:none; }
.settings-row.static{ cursor:default; }
.row-icon{ width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.row-icon svg{ width:16px; height:16px; }
.row-icon.tone-a{ background:var(--hero-a); }
.row-icon.tone-b{ background:var(--hero-b); }
.row-icon.tone-accent{ background:var(--accent); }
.row-icon.tone-neutral{ background:var(--ink-faint); }
.row-icon.tone-gold{ background:var(--badge-a-icon); color:var(--badge-a-ink); }
.row-label{ flex:1 1 auto; font-size:15px; font-weight:500; min-width:0; color:var(--ink); }
.row-value{ font-size:14px; color:var(--ink-faint); max-width:130px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-chevron{ color:var(--ink-faint); flex:none; transition:transform .18s ease; }
.row-chevron svg{ width:16px; height:16px; }
.settings-row[aria-expanded="true"] .row-chevron svg{ transform:rotate(180deg); }
.row-chevron.row-chevron-right svg{ transform:rotate(-90deg); }
.settings-row.selected{ background:var(--pink-100); }
.settings-reveal{ padding:var(--space-4); background:var(--surface-2); display:flex; flex-direction:column; gap:var(--space-3); }
/* -- "Детский профиль" promo card (replaces the plain switch — Sofia sent
a RuTube kids-profile reference: dark gradient, scattered stars, a
companion peeking in). The whole card is the tap target, same
instant-toggle behaviour the switch had. Approved on
settings_grouped_mockup.html (Claude artifact) across two rounds — card
shape, then stretched to full width on desktop (.kid-promo-card-wide). -- */
.kid-promo-card{
position:relative; display:flex; align-items:center; gap:var(--space-3);
width:100%; text-align:left; font-family:inherit; cursor:pointer; border:none;
border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-6);
overflow:hidden; box-shadow:var(--shadow-soft);
background:
radial-gradient(2px 2px at 20px 14px, rgba(255,255,255,.95), transparent 60%),
radial-gradient(1.6px 1.6px at 24px 16px, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1.2px 1.2px at 64px 38px, rgba(255,255,255,.75), transparent 60%),
radial-gradient(2px 2px at 100px 50px, rgba(255,255,255,.85), transparent 60%),
radial-gradient(1.6px 1.6px at 112px 12px, rgba(255,255,255,.55), transparent 60%),
radial-gradient(1.2px 1.2px at 158px 46px, rgba(255,255,255,.7), transparent 60%),
radial-gradient(1.6px 1.6px at 46px 58px, rgba(255,255,255,.5), transparent 60%),
radial-gradient(2px 2px at 180px 20px, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.2px 1.2px at 208px 24px, rgba(255,255,255,.55), transparent 60%),
radial-gradient(1.6px 1.6px at 258px 52px, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.2px 1.2px at 288px 18px, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, var(--hero-a), var(--hero-b));
}
.kid-promo-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.kid-promo-title{ display:block; font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; color:#fff; }
.kid-promo-sub{ display:block; font-size:12.5px; color:rgba(255,255,255,.82); margin-top:3px; line-height:1.4; }
.kid-promo-companion{
flex:none; width:52px; height:52px; border-radius:50%;
background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.32);
display:flex; align-items:center; justify-content:center; font-size:26px;
}
.kid-promo-check{
position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
background:#fff; color:var(--hero-a); align-items:center; justify-content:center; display:none;
}
.kid-promo-check svg{ width:13px; height:13px; }
.kid-promo-card.on .kid-promo-check{ display:flex; }
/* -- "Ещё" → achievements shown inline (Sofia: not enough of them to hide
behind a link) -- */
.settings-ach-header{ display:flex; align-items:center; gap:var(--space-3); padding:13px var(--space-4); }
.ach-count{ font-family:'Unbounded',sans-serif; font-variant-numeric:tabular-nums; color:var(--badge-a-icon); font-weight:800; }
.badges-grid.wide{ grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); padding:0 var(--space-4) var(--space-4); margin-top:0; }
/* ================= Desktop (≥1024px) ================= */
@media (min-width:1024px){
/* Имя + Личные данные merge into one always-expanded wide card — there's
room here, no reason to hide it behind a tap like on phone. */
.settings-wide-card{
background:var(--surface); border-radius:var(--radius-lg);
padding:var(--space-6); display:flex; gap:var(--space-8); margin-bottom:var(--space-6);
}
.settings-wide-card-photo{ flex:0 0 160px; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; }
.settings-wide-card-photo .settings-id-avatar{ width:88px; height:88px; font-size:28px; }
/* Sofia: "пол" и "язык" прилипли к строке с датой рождения" — this was
gap:var(--space-5), a token that doesn't exist in tokens.css (same
bug already fixed once in screens.css/.fact-card.featured); an
invalid var() makes the whole gap shorthand invalid, so the row-gap
silently collapsed to 0. var(--space-6) is a real token, matching
this card's own outer gap. */
.settings-wide-fields{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-8); align-content:start; }
.settings-wide-fields .span2{ grid-column:1 / -1; }
/* Wide (desktop) kid-promo variant — full width like every other group
here (Sofia: "в десктоп версии сделай на всю длину"), so a few extra
scattered stars further out keep the right-hand two-thirds of the card
from reading as empty gradient. */
.kid-promo-card-wide{
padding:var(--space-6) var(--space-8);
background:
radial-gradient(2px 2px at 20px 14px, rgba(255,255,255,.95), transparent 60%),
radial-gradient(1.6px 1.6px at 24px 16px, rgba(255,255,255,.9), transparent 60%),
radial-gradient(1.2px 1.2px at 64px 38px, rgba(255,255,255,.75), transparent 60%),
radial-gradient(2px 2px at 100px 50px, rgba(255,255,255,.85), transparent 60%),
radial-gradient(1.6px 1.6px at 112px 12px, rgba(255,255,255,.55), transparent 60%),
radial-gradient(1.2px 1.2px at 158px 46px, rgba(255,255,255,.7), transparent 60%),
radial-gradient(1.6px 1.6px at 46px 58px, rgba(255,255,255,.5), transparent 60%),
radial-gradient(2px 2px at 208px 24px, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.6px 1.6px at 258px 52px, rgba(255,255,255,.6), transparent 60%),
radial-gradient(1.2px 1.2px at 288px 18px, rgba(255,255,255,.5), transparent 60%),
radial-gradient(2px 2px at 360px 44px, rgba(255,255,255,.85), transparent 60%),
radial-gradient(1.2px 1.2px at 420px 14px, rgba(255,255,255,.5), transparent 60%),
radial-gradient(1.6px 1.6px at 480px 56px, rgba(255,255,255,.6), transparent 60%),
radial-gradient(2px 2px at 540px 22px, rgba(255,255,255,.8), transparent 60%),
radial-gradient(1.6px 1.6px at 600px 48px, rgba(255,255,255,.55), transparent 60%),
radial-gradient(1.2px 1.2px at 660px 16px, rgba(255,255,255,.5), transparent 60%),
radial-gradient(2px 2px at 700px 52px, rgba(255,255,255,.8), transparent 60%),
linear-gradient(120deg, var(--hero-a), var(--hero-b));
}
.kid-promo-card-wide .kid-promo-title{ font-size:18px; }
.kid-promo-card-wide .kid-promo-sub{ font-size:13.5px; }
.kid-promo-card-wide .kid-promo-companion{ width:64px; height:64px; font-size:32px; }
/* Безопасность keeps the click-to-open split pane — a rarer, more
form-like action than the always-visible fields above. Same
master-detail idea js/screens.numbers.js already uses for its own
desktop "round 5" (.numbers-split / renderNumbersDesktop). */
.settings-split{ display:flex; gap:var(--space-6); align-items:flex-start; margin-bottom:var(--space-6); }
.settings-split-list{ flex:0 0 360px; min-width:0; }
.settings-split-detail{
/* Sofia: stretch the other blocks to fill the width instead of capping
the whole card — only the fields inside (.settings-split-detail-inner)
keep a comfortable reading width. Sofia later asked to drop this
panel's own card chrome entirely ("убери фон и обводку") — it now
sits directly on the page background, flush with the list box
beside it instead of floating as a separate surface. */
flex:1; min-width:0; position:sticky; top:var(--space-6);
}
.settings-split-detail h3{ font-family:'Unbounded',sans-serif; font-size:17px; margin:0 0 var(--space-4); }
.settings-split-detail-inner{ max-width:420px; }
.settings-group-desktop-row{ display:flex; gap:var(--space-6); align-items:flex-start; }
.settings-group-desktop-row .settings-group{ flex:1; min-width:0; }
}
/* ---- "Детский профиль" toggle — reuses .gender-radio's bordered/active look
(same settings-field family), just with two lines of text instead of one, so
it needs top-aligned content instead of centered. ---- */
.child-toggle-row{ align-items:flex-start; cursor:pointer; }
.child-toggle-row input{ margin-top:2px; }
.child-toggle-label{ display:block; color:var(--ink); }
.child-toggle-hint{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--ink-faint); }
/* ---- Family panel (Settings) ---- */
.family-panel{ display:flex; flex-direction:column; gap:var(--space-3); align-items:stretch; }
.family-loading{ color:var(--ink-faint); font-size:14px; }
.family-intro{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.family-actions-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.family-actions-row .btn{ flex:none; }
/* Sofia: "сделай кнопки более явно кнопками" — .btn-ghost (lesson.css) is
background:none/box-shadow:none by design for lighter-weight actions
elsewhere, which here just reads as plain text next to the member list
and badges. Give Create/Join their own visible button chrome, same
bordered-pill look the app already uses for secondary controls
(.news-tab, .gender-radio). */
.family-actions-row .btn-ghost{
border:1.5px solid var(--border); background:var(--surface);
}
.family-actions-row .btn-ghost:hover{ border-color:var(--accent-2); }
.family-header{ display:flex; flex-direction:column; gap:2px; }
.family-name{ font-weight:700; font-size:16px; }
.family-code-row{ font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.family-code-row code{
font-family:'Unbounded',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.04em;
background:var(--surface-2); color:var(--ink); border-radius:var(--radius-sm); padding:2px 7px;
}
#family-copy-msg{ color:var(--success); font-weight:600; }
.family-member-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.family-member-list li{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); font-size:14.5px; font-weight:600; }
.family-role-badge{
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
color:var(--ink-soft); background:var(--surface-2); border-radius:999px; padding:3px 9px; flex:none;
}
.family-role-badge.child{ color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.family-note-compose{ display:flex; flex-direction:column; gap:var(--space-2); }
.family-notes-list{ display:flex; flex-direction:column; gap:var(--space-2); }
.family-note-item{
font-size:13.5px; line-height:1.4; color:var(--ink-soft); background:var(--surface-2);
border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3);
}
.family-note-item b{ color:var(--ink); }
/* ---- News section (login screen, below the login card) ----
.picker-card sits in normal flow now (see the overlap rule above), so this
is just the section's own breathing room below it — no clearance hack. */
.news-section{ max-width:640px; width:100%; margin:40px auto 0; padding:0 4px; }
.news-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:var(--space-3); }
/* п.37: заголовок секции новостей ("Что нового") рядом со ссылкой "Все" —
обычный регистр вместо капса, letter-spacing тоже убран. */
.news-title{ font-size:12.5px; font-weight:700; color:var(--ink-faint); }
.news-all{
display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700;
color:var(--accent); text-decoration:none; flex:none;
}
.news-all svg{ width:14px; height:14px; }
.news-all:hover{ color:var(--accent-hover); }
.news-tabs{ display:flex; gap:var(--space-2); margin-bottom:var(--space-3); }
.news-tab{
background:none; border:1.5px solid var(--border); color:var(--ink-soft); font-weight:600; font-size:13px;
border-radius:999px; padding:var(--space-1) var(--space-3);
}
.news-tab.active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.news-panel{ display:flex; flex-direction:column; gap:var(--space-3); }
/* Sofia (Sept 7): same bug as the cookie bar (see the [hidden] note on
.cookie-bar below) — display:flex above always wins over the browser's own
[hidden]{display:none}, so switching tabs left both panels visibly stacked. */
.news-panel[hidden]{ display:none; }
.news-item{ display:flex; gap:13px; align-items:flex-start; background:var(--surface); border-radius:var(--radius-md); padding:var(--space-4); }
/* Sofia (Sept 6): one brand color, not a rotating set — and a pill wide enough
for "v1.NN" (soon to mirror the app's real ?v= build number, not a separate
news-only counter — see DEPLOY.md). */
.news-item-version{
flex:none; min-width:38px; height:30px; padding:0 9px; border-radius:999px;
display:flex; align-items:center; justify-content:center;
font-family:'Unbounded',sans-serif; font-weight:800; font-size:12.5px; color:#fff;
background:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.news-item-body-wrap{ min-width:0; }
.news-item-title{ font-weight:700; font-size:14.5px; margin-bottom:2px; }
.news-item-body{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
/* Sofia (Sept 7): cap long entries at 3 lines, reveal the rest on click —
keeps the card grid on updates.php even instead of some cards towering
over their neighbours. .news-item-toggle starts `hidden` in the markup;
JS only reveals it for items that actually overflow at 3 lines. */
.news-item-body.clamped{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-item-toggle{
display:block; margin-top:4px; background:none; border:none; padding:0;
font-size:12.5px; font-weight:700; color:var(--accent); cursor:pointer;
}
.news-item-toggle[hidden]{ display:none; }
.news-item-toggle:hover{ color:var(--accent-hover); }
.news-empty{
background:var(--surface); border-radius:var(--radius-md); padding:var(--space-4);
font-size:13px; color:var(--ink-faint); line-height:1.5; text-align:center;
}
/* ---- Legal footer + cookie consent (login screen only) ---- */
.legal-footer{
max-width:640px; width:100%; margin:40px auto 0; padding-top:18px; border-top:1.5px solid var(--border);
display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center;
}
.legal-footer-copy{ font-size:12px; color:var(--ink-faint); }
.legal-links{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.legal-links a{ font-size:12px; color:var(--ink-faint); text-decoration:none; }
.legal-links a:hover{ color:var(--accent); }
.cookie-bar{
position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:640px; margin:0 auto;
background:var(--cookie-bg); border:1.5px solid var(--cookie-border); border-radius:18px;
box-shadow:0 20px 40px -16px rgba(0,0,0,.45); padding:16px 18px;
display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between;
}
/* Sofia (Sept 7): "Принять" looked like it did nothing — the rule above sets
display:flex unconditionally, which silently wins over the browser's own
default [hidden]{display:none} (author CSS always beats the UA stylesheet,
no matter which one is more specific), so JS setting el.hidden=true had no
visible effect at all. This re-asserts it once the hidden attribute is set. */
.cookie-bar[hidden]{ display:none; }
.cookie-text{ font-size:12.5px; line-height:1.5; color:var(--cookie-text); flex:1; min-width:220px; }
.cookie-text a{ color:var(--cookie-text-strong); text-decoration:none; font-weight:700; }
.cookie-actions{ display:flex; gap:8px; flex:none; }
.cookie-btn{ border:none; border-radius:999px; padding:9px 16px; font-weight:800; font-size:12.5px; white-space:nowrap; }
.cookie-btn.primary{ background:var(--accent); color:var(--accent-ink); }
.cookie-btn.primary:hover{ background:var(--accent-hover); }
.cookie-btn.ghost{ background:none; color:var(--cookie-ghost-text); border:1.5px solid var(--cookie-border); }
.cookie-btn.ghost:hover{ border-color:var(--cookie-text); }
/* ---- Login screen, wide viewport (Sofia, Sept 7 v3): the photo is now a
big backdrop on the left (a fixed height, ~83% of the row's width) and
the card floats on top of it, flush to the bottom-right corner, instead
of sitting beside it in its own grid column. .picker-outer stays
position:relative (from the base rule) — the photo is a normal flow
element (its height is what gives .picker-outer something to size
against), the card is pulled out with position:absolute so it can
overlap the photo's right edge; bottom:0/right:0 anchor it to wherever
the photo (the last flow child) actually ends, so this doesn't depend on
guessing a fixed pixel offset. */
@media (min-width:900px){
.login-shell{ padding:32px 32px 40px; }
.login-shell .picker-outer{ max-width:1000px; }
.login-shell .picker-topbar{ margin-bottom:0; }
.login-shell .picker-illust{
position:relative; top:auto; left:auto; transform:none;
width:83.4%; max-width:none; height:568px; aspect-ratio:auto; z-index:auto;
border-radius:90px 28px 90px 28px;
}
.login-shell .picker-card{
position:absolute; right:0; bottom:0; margin:0; width:380px; z-index:2;
}
/* Sofia (Sept 7): match the news list (and the footer below it) to the
hero+card block's own width (1000px) instead of staying at the
640px reading-column width used everywhere else in the app — on this
one screen the photo sets how wide the page reads, so the sections
under it should span the same width rather than looking narrower. */
.login-shell .news-section{ max-width:1000px; margin-top:56px; }
.login-shell .legal-footer{ max-width:1000px; }
}