/* ============================================================
   Я зову — кабинет «Мои события»
   ------------------------------------------------------------
   Здесь хозяин праздника получает то, за что заплатил: ссылку
   на живую страницу, файлы, правки — и список гостей.

   ЧТО ОТСЮДА УБРАНО И ПОЧЕМУ

   Семьдесят строк на экран, которого не было. От прототипа
   остались .detail, .events, .stat, table.guests, .side — вёрстка
   кабинета, который так и не собрали: разметки под неё нет ни в
   одном шаблоне темы, и не было никогда.

   Мёртвые правила — это не просто лишний вес. Заголовок этого
   файла обещал «список гостей», стили под него лежали на месте,
   и по файлу выходило, что функция есть. На сайте её не было:
   ответы гостей попадали в письмо за три дня — и всё. Список
   появился только теперь (см. «Кто ответил» ниже, .ag-*), и
   написан он заново, потому что старая вёрстка была под другую
   раскладку страницы.

   Файлы стилей читают, чтобы понять, что на сайте есть.
   ============================================================ */

/* ============================================================
   Кабинет: вход по ссылке и список заказов
   ------------------------------------------------------------
   Демонстрационные события из прототипа убраны: человек, впервые
   открывший «Мои события», видел три чужих праздника и решал,
   что попал не в свой аккаунт.
   ============================================================ */
.acc-head{padding:1.8rem 0 1.2rem}
.acc-head h1{font-size:clamp(1.7rem,3.6vw,2.3rem);margin:0 0 .3rem}
.acc-head p{margin:0;color:var(--ink-2);font-size:.95rem}

.acc-ok{
  margin:0 0 1.2rem;padding:.75rem .9rem;border-radius:8px;
  background:color-mix(in srgb, var(--good) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--good) 35%, transparent);
  font-size:.92rem;
}

.acc-enter{max-width:34rem;margin:0 0 3rem;border:1px solid var(--rule);background:var(--card);padding:1.5rem}
.acc-enter h2{font-family:var(--serif);font-size:1.3rem;margin:0 0 .5rem}
.acc-enter p{margin:0 0 1rem;color:var(--ink-2);font-size:.94rem}
.acc-form{display:flex;gap:.5rem;flex-wrap:wrap}
.acc-form input{
  flex:1;min-width:12rem;font-family:var(--sans);font-size:1rem;padding:.65rem .7rem;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
}
.acc-note{font-size:.88rem;color:var(--ink-3);margin:1.2rem 0 2.5rem}

.acc-orders{display:flex;flex-direction:column;gap:1.2rem;margin:0 0 1rem}
.acc-order{border:1px solid var(--rule);background:var(--card);padding:1.2rem 1.3rem}
.ao-head{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;margin:0 0 .9rem}
.ao-head h2{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:0}
.ao-state{font-size:.8rem;padding:.12rem .6rem;border-radius:100px;background:var(--paper-2);color:var(--ink-2)}
.ao-state.is-ok{background:color-mix(in srgb, var(--good) 14%, transparent);color:var(--good-ink)}
.ao-sum{margin-left:auto;font-family:var(--serif);font-size:1.2rem;font-weight:600}
.ao-item{border-top:1px solid var(--rule);padding-top:.9rem;margin-top:.9rem}
.ao-item:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ao-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 .4rem}
.ao-link{margin:0;font-size:.82rem;color:var(--ink-3);word-break:break-all}
.ao-wait{margin:0;color:var(--ink-2);font-size:.92rem}

/* ---------- правки события ---------- */
.ao-edit{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.8rem}
.ao-edit summary{
  cursor:pointer;font-size:.9rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:.18em;list-style:none;
}
.ao-edit summary::-webkit-details-marker{display:none}
.ao-edit summary::before{content:"✎ ";color:var(--brand)}
.ao-edit[open] summary{color:var(--ink);margin-bottom:.5rem}
.ao-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;margin-top:.8rem}
.ao-form label{display:flex;flex-direction:column;gap:.2rem}
.ao-form span{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ao-form input{
  font-family:var(--sans);font-size:.95rem;padding:.5rem .6rem;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
}
.ao-save{grid-column:1/-1;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:.3rem 0 0}
.ao-save small{color:var(--ink-3);font-size:.82rem;flex:1;min-width:14rem}

/* ============================================================
   ОФОРМЛЕНИЕ СТРАНИЦЫ ГОСТЯ
   ------------------------------------------------------------
   Пять вариантов — и у каждого маленький образец, а не только
   название. «Праздничная» и «Бумага» словами не различаются:
   человек выбирает вслепую и идёт проверять на живой странице,
   которую уже разослал гостям.

   Образец — не картинка, а те же цвета, что достанутся странице.
   Файлов не заводим, разойтись им не с чем.
   ============================================================ */
.ao-skin{grid-column:1/-1;border:0;padding:0;margin:.4rem 0 0;min-width:0}
.ao-skin legend{
  padding:0;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
}
.ao-skin-h{margin:.25rem 0 .6rem;font-size:.82rem;color:var(--ink-3);line-height:1.45}
.ao-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:.5rem}
/* Специфичность выше, чем у «.ao-form label»: то правило ставит
   всем подписям формы колонку и КАПС, и без перебивки выбор
   оформления разваливался на три этажа заглавных букв. */
.ao-skins .ao-sk{
  display:flex;flex-direction:row;gap:.6rem;align-items:center;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:10px;padding:.55rem .6rem;
  transition:border-color .15s ease,background .15s ease;
}
.ao-skins .ao-sk:hover{border-color:var(--brand)}
/* Выбранное отмечено рамкой И заливкой, а не только цветом рамки:
   один тонкий контур другого оттенка на светлом фоне видит не
   каждый глаз. */
.ao-skins .ao-sk:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.ao-skins .ao-sk input{flex:none;margin:0;accent-color:var(--brand);width:1rem;height:1rem}
.ao-skins .ao-sk-t{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:.1rem;
  text-transform:none;letter-spacing:0;color:var(--ink);text-align:left;
}
.ao-skins .ao-sk-t b{font-size:.88rem;font-weight:600}
.ao-skins .ao-sk-t small{font-size:.75rem;color:var(--ink-2);line-height:1.35}

/* Образец: прямоугольник фона с «карточкой» и «панелью» внутри.
   Три цвета — ровно те, что задаёт оформление. */
.ao-skins .ao-sk-p{
  flex:none;width:2.1rem;height:2.6rem;border-radius:5px;
  border:1px solid var(--rule);overflow:hidden;
  display:flex;flex-direction:column;gap:2px;padding:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
}
.ao-sk-p::before{content:"";flex:2;border-radius:2px;background:rgba(255,255,255,.85)}
.ao-sk-p::after{content:"";flex:1;border-radius:2px;background:rgba(255,255,255,.6)}
.ao-sk-p[data-sk="card"]{background:linear-gradient(135deg,#FDE7EE 0%,#E8E4F6 100%)}
.ao-sk-p[data-sk="light"]{background:#FBF7F4}
.ao-sk-p[data-sk="dark"]{background:#17141C}
.ao-sk-p[data-sk="dark"]::before{background:#3A3346}
.ao-sk-p[data-sk="dark"]::after{background:#241F2C}
.ao-sk-p[data-sk="soft"]{background:linear-gradient(180deg,#FFF1F5 0%,#FDF7FF 100%)}
.ao-sk-p[data-sk="paper"]{background:#F2EDE3}
.ao-sk-p[data-sk="paper"]::before{background:#FBF8F2}
.ao-sk-p[data-sk="paper"]::after{background:#FBF8F2;opacity:.7}

/* Дата и время в форме правок — своими выборщиками.
   Обёртка нужна, чтобы подпись встала над кнопкой так же, как
   над обычным полем: .ao-form label — это флекс-колонка, а
   выборщик приезжает своим блоком и в неё не заворачивается. */
.ao-when{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ao-lbl{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ao-when .dp,.ao-when .tp{width:100%}
/* Правило .ao-form span делает КАПС из любой подписи внутри формы,
   и дата на кнопке выборщика превращалась в «10 ОКТЯБРЯ». Это не
   имя поля, а значение — регистр возвращаем. */
.ao-when .dp-val,.ao-when .tp-val{
  text-transform:none;letter-spacing:0;color:var(--ink);font-size:.95rem;
}

/* ============================================================
   КТО ОТВЕТИЛ
   ------------------------------------------------------------
   Главный экран сервиса, которого до сих пор не существовало.
   Ответы гостей были в базе, в комплекте карточек и в письме
   за три дня — а в кабинете, куда человек заходит по ссылке из
   письма об оплате, их не было.

   Стоит выше правок и открывается заметнее: за правками сюда
   приходят один раз, за ответами — каждый день до праздника.
   ============================================================ */
/* Свёртка кабинета. Два блока одинакового устройства — «Кто
   ответил» и «Что подарить», — и одно правило на оба: они стоят
   друг под другом, и разное поведение стрелки или рамки у соседей
   читалось бы как поломка, а не как замысел. */
.ao-guests,.ag-wish{
  margin-top:.9rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--paper);overflow:hidden;
  transition:border-color .15s ease;
}
.ao-guests:hover,.ag-wish:hover{border-color:var(--rule-2)}
.ao-guests[open],.ag-wish[open]{border-color:var(--rule-2)}
.ao-guests > summary,.ag-wish > summary{
  cursor:pointer;list-style:none;display:flex;gap:.6rem;align-items:baseline;
  padding:.7rem .9rem;font-size:.92rem;
}
.ao-guests > summary::-webkit-details-marker,
.ag-wish > summary::-webkit-details-marker{display:none}
.ao-guests > summary::after,.ag-wish > summary::after{
  content:"";margin-left:auto;flex:none;width:.5rem;height:.5rem;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg) translateY(-.12rem);transition:transform .18s ease;
}
.ao-guests[open] > summary::after,
.ag-wish[open] > summary::after{transform:rotate(-135deg) translateY(-.12rem)}
.ao-guests > summary:hover .ag-t,.ag-wish > summary:hover .ag-t{color:var(--brand)}
.ao-guests > summary:focus-visible,
.ag-wish > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ag-wish-in{padding:.9rem;border-top:1px solid var(--rule)}
.ag-wish-in .acc-ok{margin:0 0 .8rem}
.ag-t{font-weight:600;transition:color .15s ease}
.ag-n{font-size:.82rem;color:var(--ink-3)}
.ag-body{padding:0 .9rem 1rem;border-top:1px solid var(--rule)}
.ag-empty{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-2);line-height:1.5}

/* Счётчики. «Придут» крупнее остальных: это то число, ради
   которого экран и открывают. */
.ag-sum{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 .9rem}
.ag-c{
  display:flex;gap:.4rem;align-items:baseline;padding:.4rem .75rem;
  border:1px solid var(--rule);border-radius:100px;background:var(--card);
}
.ag-c b{font-family:var(--serif);font-size:1.15rem;line-height:1}
.ag-c span{font-size:.8rem;color:var(--ink-2)}
/* Те же три цвета, что у пилюль и что на главной. Крупная цифра
   на фоне карточки, а не на -soft, поэтому здесь читается и
   основной тон. */
.ag-c.is-yes{border-color:color-mix(in srgb, var(--good) 45%, transparent);background:var(--good-soft)}
.ag-c.is-yes b{color:var(--good-ink,var(--good))}
.ag-c.is-no{border-color:color-mix(in srgb, var(--amber) 45%, transparent);background:var(--amber-soft)}
.ag-c.is-no b{color:var(--amber-ink,var(--amber))}

/* Таблица. На телефоне уезжает вбок внутри своей обёртки, а не
   тянет за собой страницу. */
.ag-scroll{overflow-x:auto;margin:0 -.2rem}
.ag-tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:26rem;table-layout:fixed}
/* Ширины заданы: без них «Гость» растягивается на пол-экрана, а
   пожелания — то, ради чего колонка и есть, — жмутся к краю. */
.ag-tbl th:nth-child(1){width:30%}
.ag-tbl th:nth-child(2){width:9rem}
.ag-tbl th:nth-child(3){width:9rem}
.ag-tbl th{
  text-align:left;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:0 .5rem .4rem;white-space:nowrap;
}
.ag-tbl td{padding:.5rem;border-top:1px solid var(--rule);vertical-align:top}
.ag-tbl tr{transition:background .12s ease}
.ag-tbl tbody tr:hover{background:var(--paper-2)}
.ag-name{font-weight:600;min-width:8rem}
.ag-cnt{white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-cnt small{color:var(--ink-3);font-size:.76rem;font-weight:400}

/* Ответ — словом и цветом, не только цветом.

   Три состояния покрашены ровно так же, как в примере на главной:
   зелёная пилюля «придут», янтарная «не смогут», нейтральная
   «думают». Это не совпадение оттенков ради красоты — человек
   видит мокап на главной, покупает и открывает свой список.
   Разная раскраска одного и того же означала бы, что показанное
   на витрине и купленное — разные вещи.

   Буквы берут -ink: пара «янтарь на янтарном» из мокапа давала
   контраст 2.2 при норме 4.5 (см. tokens.css). В списке гостей
   статус — это данные, а не украшение, и читаться он обязан. */
.ag-st{
  display:inline-block;font-size:.78rem;padding:.1rem .55rem;border-radius:100px;
  background:var(--paper-2);color:var(--ink-2);white-space:nowrap;
}
.ag-tbl tr.is-yes .ag-st{background:var(--good-soft);color:var(--good-ink,var(--good))}
.ag-tbl tr.is-no  .ag-st{background:var(--amber-soft);color:var(--amber-ink,var(--amber))}
/* Отказавшийся не выцветает до нечитаемого: он такой же ответ,
   как и остальные, и хозяину важен не меньше. Приглушено только
   имя, и то слегка. */
.ag-tbl tr.is-no .ag-name{color:var(--ink-2);font-weight:600}

.ag-note{color:var(--ink-2);line-height:1.45}
.ag-note span{display:block}
.ag-menu{font-size:.82rem;color:var(--brick,#C4462F)}
.ag-msg{font-size:.85rem;font-style:italic}

/* «Поправил» — гость изменил ответ после того, как записал его.
   Хозяин, смотревший список вчера, должен видеть, что поменялось. */
.ag-upd{
  display:inline-block;margin-left:.35rem;font-size:.7rem;font-weight:500;
  vertical-align:.06em;padding:.05rem .45rem;border-radius:100px;cursor:help;
  /* Заливка и рамка янтарные, а буквы — обычные чернила.
     Янтарь на янтаре читается плохо: на светлой теме это
     оранжевый по кремовому, меньше трёх к одному. Цвет здесь
     нужен, чтобы метку заметили, а не чтобы её читали цветом. */
  background:var(--amber-soft,#FFF3DC);color:var(--ink);
  border:1px solid color-mix(in srgb, var(--amber,#E8930C) 45%, transparent);
}

/* Молчуны — то, ради чего список приглашённых и вставляют. */
.ag-silent{
  margin:.9rem 0 0;padding:.7rem .8rem;border-radius:8px;
  background:var(--brand-soft);border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.ag-silent b{display:block;font-size:.85rem;margin-bottom:.25rem}
.ag-silent p{margin:0;font-size:.9rem;line-height:1.5}
.ag-hint{margin-top:.35rem !important;font-size:.8rem !important;color:var(--ink-2)}
.ag-all{margin:.9rem 0 0;font-size:.88rem;color:var(--good-ink)}

/* Список приглашённых: свёрнут, когда заполнен. */
.ag-exp{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.7rem}
.ag-exp summary{
  cursor:pointer;list-style:none;font-size:.86rem;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:.18em;
}
.ag-exp summary::-webkit-details-marker{display:none}
.ag-exp summary:hover{color:var(--brand)}
.ag-exp-h{margin:.6rem 0 .5rem;font-size:.82rem;color:var(--ink-3);line-height:1.5}
/* Поле списка — одно правило на оба списка, гостей и подарков.
   Второй завёлся без него и получил браузерное поле по умолчанию:
   узкое, моноширинное, в четверть ширины блока. Разъехались бы
   они и дальше — правила у соседних форм должны быть общими. */
.ag-exp textarea,.ag-wish-in textarea{
  width:100%;font-family:var(--sans);font-size:.92rem;line-height:1.5;padding:.55rem .65rem;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:4px;color:var(--ink);
  resize:vertical;
}
.ag-exp textarea:focus,
.ag-wish-in textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.ag-exp-f{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 0}
.ag-exp-f small{color:var(--ink-3);font-size:.8rem;flex:1;min-width:12rem}

@media (max-width:560px){
  .ag-sum{gap:.4rem}
  .ag-c{padding:.35rem .6rem}
}

/* Подпись под выборщиком в форме правок: правило .ao-form span
   делает КАПС из подписей полей, а это пояснение, а не имя поля. */
.ao-sub{
  font-size:.76rem;color:var(--ink-3);line-height:1.4;
  text-transform:none;letter-spacing:0;margin-top:.1rem;
}

/* Незаполненные поля приглашения — предупреждение хозяину.
   Не ошибка: он мог и не собираться указывать адрес. Поэтому
   янтарь, а не красный, и глагол «впишите», а не «исправьте». */
.ao-miss{
  margin:.7rem 0 0;padding:.6rem .8rem;border-radius:8px;font-size:.87rem;line-height:1.45;
  background:var(--amber-soft);border:1px solid color-mix(in srgb, var(--amber) 40%, transparent);
}

/* Доплата до «Праздника» — на месте кнопки, которой нет.
   Человек пришёл за страницей гостей, не нашёл её среди кнопок
   и тут же читает, как получить. Не баннер: предложение
   уместное, а не навязанное. */
.ao-up{
  margin:.9rem 0 0;padding:.9rem 1rem;border-radius:10px;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.ao-up b{display:block;font-size:.95rem;margin-bottom:.25rem}
.ao-up p{margin:0 0 .7rem;font-size:.87rem;line-height:1.5;color:var(--ink-2)}
.ao-up form{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
/* --ink-2, а не --ink-3: подложка у этих блоков цветная
   (--brand-soft, --good-soft), и самому тихому уровню серого
   на ней уже не хватает контраста — 4.15 при норме 4.5.
   --ink-3 рассчитан на чистые поверхности: бумагу, врезку,
   карточку. На крашеной подложке тише второго уровня
   спуститься нельзя. */
.ao-up small{color:var(--ink-2);font-size:.8rem;flex:1;min-width:12rem}

/* Позвать снова — тот же блок, что доплата, и намеренно.
   Он стоит на её месте и отвечает на тот же вопрос «что
   дальше с этим праздником»; разный вид намекал бы, что это
   разного рода вещи. Оформление у прошедшего спокойнее:
   не малиновое, а серое — это не срочное предложение,
   а спокойная возможность, к которой человек вернётся
   через год. */
.ao-again{
  margin:.9rem 0 0;padding:.9rem 1rem;border-radius:10px;
  background:var(--paper-2);
  border:1px solid var(--rule);
}
.ao-again b{display:block;font-size:.95rem;margin-bottom:.25rem}
.ao-again p{margin:0 0 .7rem;font-size:.87rem;line-height:1.5;color:var(--ink-2)}
.ao-again p b{display:inline;font-size:inherit;margin:0}

/* ============================================================
   СПИСОК ИМЁН ТИРАЖА В ПРАВКЕ СОБЫТИЯ
   ------------------------------------------------------------
   Во всю ширину формы, а не в колонку из автосетки: в нём
   тридцать строк, и колонка в одиннадцать сантиметров
   превратила бы список в щель.
   ============================================================ */
.ao-names{grid-column:1/-1}
.ao-names textarea{
  font-family:var(--sans);font-size:.95rem;line-height:1.45;padding:.5rem .6rem;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);
  resize:vertical;width:100%;box-sizing:border-box;
}
.ao-names-n{grid-column:1/-1;margin:-.3rem 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.45}