/* «Офис помощников», шаг П «Общий дом». Цвета — из krasotkam-site globals.css (светлая тема). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0401, U+0410-044F, U+0451, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00AB, U+00B7, U+00BB, U+00D7, U+2013-2014, U+2026, U+2212; }
/* Playfair — только кириллица (заголовки и вкладки); цифры и знаки в заголовках не нужны */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/playfair-cyrillic.woff2") format("woff2");
  unicode-range: U+0401, U+0410-044F, U+0451; }

:root {
  --background: #FBF8F5; --foreground: #1F1F1F; --primary: #A24747; --secondary: #4F6E85; --gold: #82652F;
  --accent: #4F7358; --muted: #6B6B6B; --surface: #FFF; --error: #DC2626; --blush: #F4E6E1; --stena: #E3C8BE;
  --zel: #2E8B57; --zhelt: #E0A93B; --ser: #B7ADA6; --noch: #2F3E55;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground);
  font: 14px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ofis { max-width: 440px; margin: 0 auto; padding: 8px 8px 28px; }
h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; line-height: 1.2; margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* шапка: вкладки и часы */
.shapka { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.vkladki { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--blush); }
.vkladka { position: relative; min-width: 76px; height: 32px; padding: 0 14px; border-radius: 999px;
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 16px; color: var(--muted); }
.vkladka[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.znachok { position: absolute; right: 5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.chasy { flex: none; display: flex; align-items: baseline; gap: 6px; }
.chasy-vremya { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.chasy-gorod { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.steklo-nadpis { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #ECECEC; color: #3A3A3A;
  font-size: 13px; text-align: center; }
.test-chasy { position: sticky; top: 0; z-index: 500; margin: 0; padding: 2px 8px; background: #B45309; color: #fff;
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* улица с домиками и дом в разрезе */
.ulica, .steny { border-left: 5px solid var(--stena); border-right: 5px solid var(--stena); }
.ulica { border-color: transparent; }
.ulica svg, .fon svg { display: block; width: 100%; height: auto; }
.ulica svg { border-radius: 10px 10px 0 0; }
.ulica .zzz { display: none; }
.ulica .spit .zzz { display: block; }
.ulica .spit .okoshko { fill: #3A4658; }
.ulica.noch .nebo { fill: var(--noch); }
.ulica.noch .svetilo { fill: #F4EBC9; }
.scena-doma { position: relative; overflow: hidden; }
.scena-doma.noch .steklo { fill: var(--noch); }
.zemlya { height: 6px; background: var(--accent); border-radius: 0 0 8px 8px; opacity: .8; }

/* место: лампа над столом, стол, записка. Размеры — в долях дома (326 × 236) */
.mesto { position: absolute; top: 0; width: 19.632%; height: 47.97%; z-index: 100; cursor: pointer; }
.mesto svg { display: block; width: 100%; height: auto; overflow: visible; }
.mesto .scena { position: absolute; left: 0; bottom: 0; width: 100%; }
.plafon { fill: #C9C2BC; stroke: transparent; stroke-width: 1.6; }
.svet { fill: rgb(242 192 87 / 0%); }
.tuchka { display: none; }
[data-sost="rabotaet"] .plafon { fill: var(--zel); }
[data-sost="rabotaet"] .svet { fill: rgb(120 200 120 / 30%); }
[data-sost="otdyhaet"] .plafon, [data-sost="na_svyazi"] .plafon { fill: var(--zhelt); }
[data-sost="sboy"] .plafon { fill: var(--error); }
[data-sost="sboy"] .tuchka { display: block; }
[data-sost="ne_prishel"] .plafon { fill: #4A4A4A; }
[data-sost="eshche_ne"] .plafon, [data-sost="zhdem"] .plafon, [data-sost="proveryayu"] .plafon {
  fill: none; stroke: #9A9089; stroke-dasharray: 3 2.5; }
.zapiska { display: none; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) rotate(-4deg); width: 96%;
  background: #FFF3C4; color: #4A3B12; font-size: 9.5px; font-weight: 600; line-height: 1.15; padding: 3px 3px 4px;
  text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / 18%); }
[data-sost="ne_prishel"] .zapiska:not(:empty) { display: block; }

/* человечки: «путь» — прозрачный лист во весь дом, его сдвиг в процентах и есть место ног */
.put { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform;
  transition: opacity .3s; }
.put.net { opacity: 0; }
.put.net .chel { pointer-events: none; }
.chel { position: absolute; left: 0; bottom: 100%; width: 10.12%; margin-left: -5.06%; transform-origin: 50% 100%;
  pointer-events: auto; cursor: pointer; }
.chel svg { display: block; width: 100%; height: auto; overflow: visible; }
.chel .shag { display: none; transform-box: fill-box; transform-origin: center; }
.put.idet .chel .rovno { display: none; }
.put.idet .chel .shag { display: block; }

@keyframes dyh { 50% { transform: scaleY(1.03); } }
@keyframes kach { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes shag { 0%, 49.9% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes dyh-sidya { 50% { transform: translateY(1.3px); } }
@keyframes delo { 50% { transform: rotate(-8deg); } }
.put.a-dyh .chel { animation: dyh 3.4s ease-in-out infinite; }
.put.a-kach .chel { animation: kach .56s ease-in-out infinite; }
.put.a-shag .chel .shag { animation: shag .56s steps(1) infinite; }
/* невидимая фигурка в рост не анимируется (иначе сидящая дышала бы дважды) */
.put.net.net .chel, .put.net.net .chel .shag { animation: none; }
.mesto.a-dyh .verh { animation: dyh-sidya 3.4s ease-in-out infinite; }
.mesto.a-delo .delo { animation: delo 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 100%; }
/* окно скрыто или открыта другая вкладка — ни одной анимации */
.pauza .chel, .pauza .chel .shag, .pauza .verh, .pauza .delo { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .chel, .chel .shag, .verh, .delo { animation: none !important; }
  .put { transition: opacity .45s !important; }
}

.dannye { text-align: center; color: var(--muted); font-size: 11.5px; padding: 4px 6px 2px; }
.dannye b { color: var(--foreground); font-variant-numeric: tabular-nums; }

/* строки фактов: лампа, имя, состояние, время; подробности — по касанию */
.stroka { border-top: 1px solid rgb(31 31 31 / 8%); }
.stroka:first-child { border-top: 0; }
.glav { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 0 4px; text-align: left; }
.tochka { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--ser); }
.glav .imya { flex: none; font-weight: 700; font-size: 13.5px; }
.glav .slovo { flex: none; padding: 1px 8px 2px; border-radius: 999px; background: var(--blush); font-size: 12px; font-weight: 600; }
.glav .vremya { flex: 1 1 0; min-width: 0; text-align: right; color: var(--muted); font-size: 12px; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.glav::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 3px; border-right: 2px solid var(--ser);
  border-bottom: 2px solid var(--ser); transform: rotate(45deg); }
.otkryta .glav::after { transform: rotate(-135deg); margin-bottom: -3px; }
[data-sost="rabotaet"] .tochka { background: var(--zel); }
[data-sost="otdyhaet"] .tochka, [data-sost="na_svyazi"] .tochka { background: var(--zhelt); }
[data-sost="sboy"] .tochka { background: var(--error); }
[data-sost="sboy"] .slovo { background: rgb(220 38 38 / 12%); color: #991B1B; }
[data-sost="sboy"] .vremya { color: #991B1B; }
[data-sost="ne_prishel"] .tochka { background: #4A4A4A; }
[data-sost="ne_prishel"] .slovo { background: #FFF3C4; }
[data-sost="eshche_ne"] .tochka, [data-sost="zhdem"] .tochka, [data-sost="proveryayu"] .tochka {
  background: transparent; border: 2px dashed #9A9089; }
.podrobno { padding: 0 6px 9px 22px; font-size: 13px; line-height: 1.35; }
.podrobno p { margin-top: 3px; overflow-wrap: anywhere; }
.podrobno .rol { color: var(--muted); font-size: 12px; margin-top: 0; }
.podrobno .chto { display: block; font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }

.pravda { margin: 6px 8px 0; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.35; }

/* лента дня */
h3 { font-size: 16px; color: var(--primary); }
.lenta { margin-top: 12px; padding: 12px 14px 10px; background: var(--surface); border-radius: 14px;
  border: 1px solid rgb(31 31 31 / 8%); }
.lenta ol { margin-top: 8px; }
.lenta li { display: grid; grid-template-columns: 104px 1fr; gap: 8px; padding: 6px 0; font-size: 13px;
  border-top: 1px solid rgb(31 31 31 / 7%); }
.lenta li:first-child { border-top: 0; }
.lenta .vremya { color: var(--muted); font-variant-numeric: tabular-nums; }
.lenta .tiho { display: block; color: var(--muted); }

/* пустые столы «скоро» — одной строкой под лентой */
.skoro { margin-top: 10px; padding: 9px 14px; border-radius: 14px; border: 1px dashed rgb(130 101 47 / 45%); font-size: 13px; }
.skoro summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.skoro li { margin-top: 7px; }
.skoro .imya { font-weight: 600; }
.skoro .tablichka { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px;
  font-weight: 600; color: var(--gold); border: 1px solid rgb(130 101 47 / 45%); }
.skoro .delo { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }

.legenda { margin-top: 12px; padding: 0 6px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.legenda li { display: flex; gap: 7px; align-items: baseline; margin-top: 5px; }
.legenda .tochka { width: 9px; height: 9px; }
.legenda b { color: var(--foreground); font-weight: 600; }

/* две сцены рядом: вкладка сдвигает мир вбок; скрытая сцена сворачивается и не занимает места */
.okno { overflow: hidden; }
.mir { display: flex; align-items: flex-start; gap: 60px; transition: transform .4s ease; }
.mir.salon { transform: translateX(calc(-100% - 60px)); }
.panel { flex: 0 0 100%; min-width: 0; }
.panel.svernut { height: 0; overflow: hidden; visibility: hidden; }
.znachok[data-vid="zel"] { background: var(--zel); }
.znachok[data-vid="ser"] { background: var(--ser); }
.s-zhdu { padding: 40px 0; text-align: center; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .mir { transition: none; } }

/* нет связи — офис «за стеклом»: лампы серые, жизнь без правды не показываем */
.za-steklom .dom, .za-steklom .stroki, .za-steklom .lenta, .za-steklom .legenda, .za-steklom .chasy, .za-steklom .skoro {
  filter: grayscale(1) contrast(.85); opacity: .55; }
.za-steklom .plafon { fill: var(--ser) !important; stroke: none !important; }
.za-steklom .svet { fill: none !important; }
.za-steklom .tuchka, .za-steklom .znachok { display: none !important; }
.za-steklom .tochka { background: var(--ser) !important; border: 0 !important; }