/* Personal site extends the existing Prosвет palette and typography. */
a { color: inherit; text-underline-offset: 5px; }
.site-shell { max-width: 1370px; margin: 0 auto; padding: 0 var(--space-12); }
.site-topbar { position: relative; min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.personal-brand { display: inline-flex; flex-direction: column; text-decoration: none; flex-shrink: 0; }
.personal-brand span { font-size: 20px; letter-spacing: -.04em; font-weight: 600; }
.personal-brand small { font-size: 12px; color: var(--color-muted); }
.site-topbar nav { display: flex; align-items: center; gap: var(--space-8); }
.site-topbar nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.site-topbar nav a:hover { text-decoration: underline; }
.primary { text-decoration: none; }
.small-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-5); background: var(--color-ink); color: var(--color-paper); border: 0; border-radius: 12px; text-decoration: none; font-size: 13px; }
.small-primary:hover { background: var(--color-focus); }
a.primary:active, a.small-primary:active { transform: translateY(2px); }
.site-notice { font-size: 12px; color: var(--color-muted); background: var(--color-paper-2); border-radius: 8px; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-6); }
.profile-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--space-16); align-items: center; padding: var(--space-8) 0 var(--space-16); }
.profile-hero h1 { font-size: clamp(52px,5.8vw,84px); white-space: pre-line; }
.site-lead { font-size: 17px; color: var(--color-muted); line-height: 1.85; max-width: 39ch; margin: var(--space-6) 0 var(--space-8); text-wrap: pretty; }
.quiet-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; margin-left: var(--space-6); }
.portrait { margin: 0; position: relative; }
.portrait-placeholder, .portrait img { width: 100%; aspect-ratio: 4/4.4; border-radius: 46% 46% 16px 16px; background: var(--color-paper-3); object-fit: cover; }
.portrait-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); color: var(--color-muted); text-align: center; }
.portrait-placeholder svg { width: 44px; height: 44px; stroke-width: 1; }
.portrait figcaption { font-size: 12px; color: var(--color-muted); margin-top: var(--space-4); text-align: center; }
.editorial-section { border-top: 1px solid var(--color-rule); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); padding: var(--space-16) 0; scroll-margin-top: 30px; }
.site-body h2 { margin: 0 0 var(--space-6); font-size: 40px; line-height: 1.2; letter-spacing: -.045em; }
.site-body h3 { margin: var(--space-8) 0 var(--space-4); font-weight: 500; font-size: 18px; }
.section-copy > p { margin: 0 0 var(--space-8); max-width: 56ch; white-space: pre-line; font-size: 17px; line-height: 1.9; }
.editable-copy { color: var(--color-muted); white-space: pre-line; }
.section-copy details { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
summary { cursor: pointer; min-height: 44px; padding: var(--space-2) 0; }
summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.topics { padding-left: var(--space-5); margin: 0; color: var(--color-muted); }
.topics li { padding: var(--space-2) 0; }
.meeting-section { padding: var(--space-12); border-radius: 24px; background: var(--color-paper-2); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); scroll-margin-top: 24px; }
.meeting-section h2 { font-size: 38px; }
.meeting-section .site-lead { font-size: 15px; }
.meeting-details dl { margin: 0; }
.meeting-details dl div { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-rule); display: flex; gap: var(--space-6); justify-content: space-between; }
dt { color: var(--color-muted); font-size: 13px; }
dd { margin: 0; font-size: 15px; }
.meeting-details dd { text-align: right; max-width: 28ch; }
.meeting-details p { font-size: 13px; margin: var(--space-6) 0 0; }
.contact-section { padding: var(--space-16) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.contact-section h2 { font-size: 30px; margin-bottom: var(--space-3); }
.contact-section p { color: var(--color-muted); font-size: 15px; margin: 0; }
.messengers { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 13px; }
.messengers a { display: inline-flex; align-items: center; min-height: 44px; }
.large-links { flex-direction: column; gap: var(--space-2); }
.game-invitation { border-top: 1px solid var(--color-rule); padding: var(--space-8) 0 var(--space-12); display: flex; gap: var(--space-8); align-items: center; font-size: 14px; }
.game-invitation p { margin: 0; }
.game-invitation span { color: var(--color-muted); font-size: 12px; margin-left: auto; }
.site-footer { border-top: 1px solid var(--color-rule); padding: var(--space-8) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-footer > a:last-child { font-size: 12px; }
.booking-main { padding: var(--space-6) 0 var(--space-16); }
.back-link { font-size: 13px; display: inline-flex; min-height: 44px; align-items: center; }
.booking-heading { display: flex; gap: var(--space-12); align-items: center; justify-content: space-between; margin: var(--space-6) 0 var(--space-12); }
.booking-heading h1 { font-size: 58px; margin: 0; }
.booking-heading > p { max-width: 30ch; color: var(--color-muted); font-size: 15px; }
.booking-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--space-16); align-items: start; }
.site-body .booking-layout h2 { font-size: 25px; }
.muted { color: var(--color-muted); font-size: 13px; }
.day-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.day-picker button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 70px; min-height: 82px; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-clear); padding: var(--space-3); }
.day-picker strong { font-size: 23px; font-weight: 500; font-variant-numeric: tabular-nums; }
.day-picker span { font-size: 11px; }
.time-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); min-height: 50px; margin-bottom: var(--space-4); }
.time-picker button { background: var(--color-clear); border: 1px solid var(--color-rule); border-radius: 10px; padding: var(--space-2) var(--space-4); min-height: 44px; font-size: 15px; }
.day-picker button[aria-pressed="true"],.time-picker button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.day-picker button:hover:not([aria-pressed="true"]),.time-picker button:hover:not([aria-pressed="true"]) { background: var(--color-paper-3); }
.booking-facts { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--color-rule); padding-top: var(--space-6); margin-top: var(--space-6); color: var(--color-muted); font-size: 13px; }
.booking-form { background: var(--color-paper-2); border-radius: 24px; padding: var(--space-8); }
.booking-form > label, .admin-login > label { display: block; font-size: 13px; margin: var(--space-4) 0 var(--space-2); }
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),textarea { display: block; width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-muted); border-radius: 10px; background: var(--color-card); color: var(--color-ink); font: inherit; font-size: 15px; min-height: 48px; caret-color: var(--color-ink); }
textarea { resize: vertical; }
input::placeholder { color: var(--color-muted); }
input[type="checkbox"],input[type="radio"] { accent-color: var(--color-focus); width: 18px; height: 18px; flex-shrink: 0; }
.selected-slot { color: var(--color-muted); font-size: 13px; min-height: 3.2em; }
.contact-choice { border: 0; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.contact-choice legend { font-size: 13px; margin-bottom: var(--space-2); }
.contact-choice label { font-size: 12px; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.booking-form .consent { display: flex; gap: var(--space-3); align-items: start; margin-top: var(--space-6); font-size: 12px; line-height: 1.8; }
.consent input { margin-top: var(--space-1); }
.data-note { font-size: 12px; color: var(--color-muted); }
.data-note p { margin: var(--space-2) 0; }
.form-message { min-height: 1.6em; font-size: 13px; color: var(--color-ink); margin: var(--space-4) 0; overflow-wrap: anywhere; }
.bot-field { display: none; }
.booking-form .primary { width: 100%; }
.booking-alternative { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-rule); font-size: 14px; }
.booking-result { max-width: 720px; padding: var(--space-12) 0; }
.confirmation-symbol { display: inline-flex; font-size: 38px; color: var(--color-focus); margin-bottom: var(--space-6); }
.result-details { border-top: 1px solid var(--color-rule); margin: var(--space-8) 0; }
.result-details > div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: var(--space-4); border-bottom: 1px solid var(--color-rule); padding: var(--space-4) 0; }
.result-details dd { overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.cancel-confirm { border-top: 1px solid var(--color-rule); padding-top: var(--space-5); font-size: 14px; }
.cancel-confirm .text-button { margin-left: var(--space-6); }
.admin-main { padding: var(--space-8) 0 var(--space-16); max-width: 1000px; margin: 0 auto; }
.admin-main h1 { font-size: 54px; }
.admin-login { max-width: 450px; }
.admin-login .primary { margin-top: var(--space-6); }
.admin-toolbar { display: flex; gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); }
.admin-main details { border-top: 1px solid var(--color-rule); padding: var(--space-6) 0; }
.admin-main summary { font-size: 23px; }
.editor-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-6); margin-top: var(--space-6); }
.editor-grid label { font-size: 13px; }
.editor-grid input,.editor-grid textarea { margin-top: var(--space-2); }
.editor-grid .wide { grid-column: 1/-1; }
.editor-grid > button { justify-self: start; }
.slot-editor { display: flex; align-items: end; gap: var(--space-6); margin: var(--space-6) 0; }
.slot-editor label { font-size: 13px; }
.admin-slots { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.admin-slot { padding: var(--space-2) var(--space-4); background: var(--color-paper-2); border-radius: 10px; display: flex; align-items: center; gap: var(--space-3); font-size: 12px; }
.admin-slot button { border: 0; background: var(--color-clear); font-size: 12px; min-height: 44px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th,td { text-align: left; border-bottom: 1px solid var(--color-rule); padding: var(--space-4) var(--space-3); overflow-wrap: anywhere; }
th { color: var(--color-muted); font-weight: 500; }
@media(max-width:1000px) {
  .site-shell { padding: 0 var(--space-8); }
  .site-topbar nav { gap: var(--space-4); }
  .profile-hero,.editorial-section,.meeting-section,.booking-layout { gap: var(--space-8); }
  .profile-hero h1 { font-size: 57px; }
  .profile-hero .quiet-link { display: flex; margin: var(--space-4) 0 0; }
  .booking-heading h1 { font-size: 48px; }
  .booking-form { padding: var(--space-6); }
}
@media(max-width:760px) {
  .site-shell { padding: 0 var(--space-6); }
  .site-topbar { flex-wrap: wrap; min-height: 0; padding: var(--space-6) 0; gap: var(--space-4); }
  .site-topbar nav { width: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .site-topbar nav a { font-size: 12px; }
  .site-topbar nav .small-primary { position: absolute; top: 24px; right: 0; margin: 0; }
  .personal-brand span { font-size: 20px; }
  .site-notice { font-size: 11px; }
  .profile-hero { grid-template-columns: minmax(0,1fr); padding-top: var(--space-4); gap: var(--space-10); }
  .profile-hero h1 { font-size: 52px; }
  .site-lead { font-size: 15px; margin-bottom: var(--space-6); }
  .portrait { max-width: 400px; width: 100%; }
  .portrait-placeholder,.portrait img { aspect-ratio: 4/3.5; }
  .editorial-section { grid-template-columns: minmax(0,1fr); padding: var(--space-10) 0; gap: var(--space-4); }
  .site-body h2 { font-size: 32px; }
  .section-copy > p { font-size: 15px; }
  .meeting-section { grid-template-columns: minmax(0,1fr); padding: var(--space-6); }
  .meeting-section h2 { font-size: 30px; }
  .meeting-section .primary { font-size: 12px; padding: var(--space-3) var(--space-4); }
  .contact-section { display: block; padding: var(--space-10) 0; }
  .contact-section .messengers { margin-top: var(--space-5); }
  .game-invitation { flex-wrap: wrap; gap: var(--space-4); }
  .game-invitation span { margin-left: 0; }
  .site-footer { flex-wrap: wrap; }
  .site-footer .messengers { flex-basis: 100%; order: 3; }
  .site-footer > a:last-child { font-size: 11px; }
  .booking-heading { display: block; margin: var(--space-5) 0 var(--space-8); }
  .booking-heading h1 { font-size: 43px; }
  .booking-heading > p { max-width: none; }
  .booking-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-8); }
  .day-picker button { min-width: 60px; min-height: 76px; }
  .booking-form { padding: var(--space-6); }
  .result-details > div { grid-template-columns: 90px minmax(0,1fr); }
  .result-actions { gap: var(--space-4); }
  .result-actions .primary { font-size: 12px; }
  .admin-main h1 { font-size: 42px; }
  .editor-grid { grid-template-columns: minmax(0,1fr); }
  .slot-editor { align-items: stretch; flex-direction: column; }
  .slot-editor .primary { align-self: start; }
}
@media(max-width:370px) {
  .site-shell { padding: 0 var(--space-5); }
  .site-topbar nav { gap: var(--space-1) var(--space-3); }
  .site-topbar nav .small-primary { margin-left: 0; }
  .profile-hero h1 { font-size: 44px; }
  .booking-heading h1 { font-size: 38px; }
}

.booking-form { scroll-margin-top: var(--space-4); }
#schedule-title { scroll-margin-top: var(--space-4); }
.change-slot { font-size: 13px; text-decoration: underline; }
#selected-slot:focus { outline: none; }
@media(max-width:760px) {
  .site-shell { padding-left: max(var(--space-4),env(safe-area-inset-left)); padding-right: max(var(--space-4),env(safe-area-inset-right)); }
  .site-topbar { padding: max(var(--space-4),env(safe-area-inset-top)) 0 var(--space-3); gap: var(--space-2); }
  .site-topbar .personal-brand { min-width: 0; padding-right: 116px; }
  .site-topbar nav { gap: var(--space-2) var(--space-4); }
  .site-topbar nav .small-primary { top: max(var(--space-4),env(safe-area-inset-top)); padding-inline: var(--space-4); }
  .profile-hero { grid-template-columns: minmax(0,1fr) 31%; grid-template-areas: "title portrait" "intro intro" "action action" "more more"; gap: var(--space-4); align-items: center; padding: var(--space-5) 0 var(--space-10); }
  .profile-intro { display: contents; }
  .profile-hero h1 { grid-area: title; font-size: clamp(30px,8.6vw,40px); margin: 0; line-height: 1.16; }
  .profile-hero .portrait { grid-area: portrait; width: 100%; }
  .profile-hero .portrait img,.profile-hero .portrait-placeholder { aspect-ratio: 3/4; border-radius: 48% 48% 12px 12px; display: block; }
  .profile-hero .portrait-placeholder { display: flex; font-size: 11px; gap: var(--space-2); }
  .profile-hero .portrait figcaption { display: none; }
  .profile-hero .site-lead { grid-area: intro; max-width: none; margin: 0; font-size: 16px; line-height: 1.7; }
  .profile-hero .primary { grid-area: action; width: 100%; min-height: 52px; }
  .profile-hero .quiet-link { grid-area: more; margin: 0; justify-self: start; }
  .meeting-section { padding: var(--space-5); }
  .meeting-section .primary { white-space: normal; width: 100%; font-size: 13px; }
  .meeting-details dl div { gap: var(--space-4); }
  .meeting-details dd { min-width: 0; }
  .booking-main { padding-top: var(--space-2); }
  .booking-heading { margin: var(--space-4) 0 var(--space-6); }
  .booking-heading h1 { font-size: clamp(32px,8.7vw,40px); }
  .day-picker { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--space-1) var(--space-1) var(--space-3); margin: var(--space-4) calc(-1 * var(--space-1)); scrollbar-width: thin; scrollbar-color: var(--color-rule) var(--color-clear); }
  .day-picker button { flex: 0 0 64px; min-height: 76px; scroll-snap-align: start; }
  .day-picker button:focus-visible { outline-offset: -3px; }
  .time-picker { gap: var(--space-2); }
  .time-picker button { min-height: 48px; min-width: 72px; }
  .booking-facts { margin-top: var(--space-4); padding-top: var(--space-4); }
  .booking-form { padding: var(--space-5); }
  .booking-form h2 { margin-bottom: var(--space-3); }
  .selected-slot { min-height: 0; margin-bottom: var(--space-1); }
  input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),textarea,select { font-size: 16px; }
  .result-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .result-actions .primary { white-space: normal; font-size: 13px; }
  .site-footer { padding-bottom: max(var(--space-8),env(safe-area-inset-bottom)); }
}