/* Вид кабинета: слой поверх partials/chrome.css, отдельным файлом.
 *
 * Почему отдельным. CSP кабинета -- `default-src 'self'` без директивы
 * style-src (k8s-landing.yaml.tmpl, location = /account, ^~ /account/,
 * = /account/enter и три испанских двойника). style-src наследует
 * default-src, то есть 'self' без 'unsafe-inline': <style> внутри
 * страницы и любой style="..." браузер срежет, а <link rel=stylesheet>
 * со своего домена пропустит. Отсюда и файл.
 *
 * Токены (--porcelain, --ink, --red, --rule, ...), шапку, .wrap/.bar/.lang
 * и подвал даёт partials/chrome.css, подключённый ПЕРЕД этим файлом.
 * Здесь они не переобъявляются -- только используются, ровно как это
 * делает собственный <style> у index.html. Если chrome.css не доехал,
 * кабинет останется без палитры: это одна зависимость, а не две копии
 * палитры, которые разъедутся.
 *
 * Веб-шрифтов у кабинета нет и быть не может: font-src тоже наследует
 * default-src 'self', значит fonts.googleapis.com и fonts.gstatic.com
 * заблокированы. Поэтому в каждом стеке ниже шрифт сайта стоит первым
 * (вдруг он есть в системе), а следом -- осмысленный системный запас.
 * Georgia вместо Times: без запаса заголовки съезжали именно в Times, с
 * которого и начался разбор.
 *
 * Разметку кабинет рисует из account-ui.js БЕЗ классов -- голые h1/h2/p/
 * button/section/div. Поэтому селекторы здесь структурные и завязаны на
 * порядок узлов. Меняешь account-ui.js -- перечитай этот файл.
 */

:root{
  /* Новые имена, не подмена chrome.css: там шрифтовых токенов нет. */
  --acct-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --acct-serif:"Libre Caslon Text","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --acct-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* Экраны кабинета короткие -- один вход, одна строка «нужна проверка».
   Без этого подвал вставал бы посреди пустого листа, а не внизу. */
body{
  font:400 16px/1.6 var(--acct-sans);-webkit-text-size-adjust:100%;
  min-height:100vh;display:flex;flex-direction:column;
}

/* Колонка кабинета уже полосы шапки: шапка живёт в .wrap (1080), текст --
   в читаемой колонке, как .prose на длинных страницах сайта. */
main{flex:1 0 auto;width:100%;max-width:768px;margin:0 auto;padding:40px 24px 0}
footer{margin-top:48px}

main h1,main h2,main h3{font-family:var(--acct-serif);font-weight:700}
main h1{
  font:400 clamp(24px,4.6vw,30px)/1.22 var(--acct-serif);
  letter-spacing:-.01em;
  /* h1 кабинета -- это адрес владельца: длинный, без пробелов. */
  overflow-wrap:anywhere;
  margin:0 0 8px;
}
main a{color:var(--red)}

/* --- Экран входа: h1 + form(input, контейнер Turnstile, submit) -------- */

main>form{margin:18px 0 0}
#account>form{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;max-width:420px;margin:20px 0 0;
}
#account>form input[type=email]{
  width:100%;min-width:0;
  font:400 15.5px/1.4 var(--acct-sans);
  color:var(--ink);background:#fff;
  padding:12px 14px;
  border:1px solid var(--rule);border-radius:8px;
}
#account>form input[type=email]:hover{border-color:var(--ink-3)}
#account>form input[type=email]:focus{border-color:var(--ink-3);outline-offset:1px}
/* Контейнер виджета Turnstile: iframe у него фиксированные 300px, а на
   узком телефоне колонки столько нет. Пусть едет внутри себя, а не тащит
   вбок весь документ -- тот же приём, что и у chrome.css для таблиц. */
#account>form>div{max-width:100%;overflow-x:auto}
#account>form>button{margin:0}

/* --- Кнопки ----------------------------------------------------------- */
/* Различить их по разметке нельзя: «Выйти», «Ротировать ключ», «Купить
   basic» -- одинаковые голые <button> в одном родителе. Поэтому базовый
   вид один, обводкой (btn-ghost сайта). Красной остаётся только отправка
   собственной формы страницы -- вход и подтверждение входа: у обеих форма
   лежит прямым потомком <main>, у форм портала и счёта -- нет. */
main button{
  display:inline-block;
  font:600 14.5px/1 var(--acct-sans);
  color:var(--ink);background:#fff;
  padding:11px 16px;margin:0 8px 10px 0;
  border:1px solid var(--ink-3);border-radius:8px;
  cursor:pointer;
}
main button:hover:not(:disabled){border-color:var(--ink);background:var(--porcelain)}
main button:disabled{opacity:.45;cursor:default}
main>form>button[type=submit]{
  color:#fff;background:var(--red);border-color:var(--red);
  font-size:15px;padding:12px 20px;
}
main>form>button[type=submit]:hover:not(:disabled){background:var(--red-dark);border-color:var(--red-dark)}

/* --- Экран кабинета: адрес, дата, полосы h2 --------------------------- */

#account>p{color:var(--ink-2);margin:0 0 10px;max-width:62ch;overflow-wrap:anywhere}
/* «Account created: ...» -- служебная строка под адресом. */
#account>h1+p{
  font:400 13px/1.5 var(--acct-mono);
  color:var(--ink-3);letter-spacing:.02em;
  margin:0 0 18px;
}
/* Каждый h2 открывает полосу: тонкая линейка сверху вместо рамок вокруг. */
#account>h2{
  font:700 19px/1.3 var(--acct-serif);
  margin:30px 0 12px;padding-top:24px;
  border-top:1px solid var(--rule);
}
/* Значение под заголовком полосы: план и лимит, дата и состояние ключа.
   Моноширинный -- это показания счётчика, а не проза. */
#account>h2+p{
  font:500 15px/1.6 var(--acct-mono);
  color:var(--ink);margin:0 0 12px;
  overflow-wrap:anywhere;
}

/* --- График использования (инлайновый SVG) ---------------------------- */
/* Единственный узел кабинета с классами, и это осознанно: line/rect/text
   выступают здесь в трёх ролях каждый, а порядок узлов зависит от данных --
   линии квоты может не быть, средней подписи тоже, -- поэтому позиционные
   селекторы, на которых держится весь остальной файл, тут не работают. Все
   классы с префиксом usage-, живут только внутри figure.usage и заданы в
   usageChart() из account-ui.js: меняешь имена там -- правь здесь.
   Геометрия (viewBox, x/y/width/height, text-anchor) -- в account-ui.js
   АТРИБУТАМИ: это разметка, а не стиль, style-src её не касается. Здесь
   только вид. */
#account>figure.usage{margin:2px 0 4px;padding:0}
#account .usage-chart{
  display:block;
  width:100%;max-width:500px;height:auto;
  font-family:var(--acct-mono);
  /* Вертикальную прокрутку страницы палец сохраняет, горизонтальное
     движение достаётся графику: иначе на телефоне по нему не провести.
     manipulation здесь мало -- он отдаёт браузеру и горизонтальный жест. */
  touch-action:pan-y;
}
/* Обводку фокуса даёт :focus-visible из chrome.css: при щелчке мышью её
   нет, при табуляции есть -- ровно то, что нужно. */

/* Линейки. non-scaling-stroke: viewBox тянется от 354 до 500 CSS-пикселей,
   и без него волосяная линия на десктопе стала бы полуторапиксельной, а
   пунктир растянулся бы вместе с ней. */
#account .usage-chart line{stroke-width:1;vector-effect:non-scaling-stroke}
#account .usage-base{stroke:var(--ink-3)}
#account .usage-rule{stroke:var(--rule)}
#account .usage-rule-mid{stroke-dasharray:2 3}
#account .usage-quota{stroke:var(--red);stroke-dasharray:5 3;opacity:.55}

/* История приглушённая, сегодняшний столбик красный: вопрос «упрусь ли я в
   лимит сегодня» решает последний день ряда, и красный в этом графике
   значит ровно одно -- разговор про лимит (он же цвет пунктира квоты). */
#account .usage-bar{fill:var(--ink-3);opacity:.55}
#account .usage-bar-today{fill:var(--red);opacity:1}
/* Нулевой день -- серый обрубок, а не пустота: тридцать тихих дней должны
   читаться как тридцать дней, а не как чистый лист с одной палкой. */
#account .usage-bar-zero{fill:var(--rule);opacity:1}
#account .usage-bar-on{opacity:1}
/* Подсветка колонки, а не столбика: попасть пальцем в 7 единиц ширины
   нельзя, а в колонку -- можно, и нулевой день тоже читается. */
#account .usage-cursor{fill:var(--ink);opacity:.06;visibility:hidden}
#account .usage-cursor-on{visibility:visible}

#account .usage-y,#account .usage-x-label{font-size:9.5px;fill:var(--ink-3)}
#account .usage-empty{font-size:10.5px;fill:var(--ink-3)}

/* Строка чтения. В покое -- те же факты словами, что и в aria-label; под
   курсором -- один день. Лежит СНАРУЖИ svg[role=img]: внутри её содержимое
   поглотила бы метка картинки, и aria-live не работал бы.
   min-height держит место под текст: без него переключение сводки на строку
   дня дёргало бы вёрстку вверх-вниз. Две строки, а не одна: на платном
   тарифе длиннее оказывается как раз сводка («Daily limit 5,000 · busiest
   day 4,900 (4 Sept) · 26 days with traffic» переносится), а строка дня
   встаёт в одну, -- измерено в браузере, заголовок «API key» под графиком
   прыгал на 19,5px при каждом наведении. */
#account .usage-readout{
  font:500 13px/1.5 var(--acct-mono);
  color:var(--ink-2);margin:8px 0 0;min-height:3em;
  max-width:500px;display:flex;flex-wrap:wrap;gap:0 6px;
  overflow-wrap:anywhere;
}
#account .usage-readout span+span::before{content:"· ";color:var(--rule)}
/* Пунктирный образец ставится только когда линия квоты ДЕЙСТВИТЕЛЬНО
   нарисована; при квоте вне шкалы он показывал бы на пустоту. */
#account .usage-readout .usage-has-rule::before{
  content:"";display:inline-block;
  width:14px;height:0;margin-right:6px;vertical-align:.28em;
  border-top:1.5px dashed var(--red);opacity:.55;
}

/* --- Ключ: <pre> в кабинете после ротации и #key на странице выдачи --- */
/* Ключ показывают один раз, и читают его чаще всего с телефона: перенос
   по любому символу важнее сохранения строки, а user-select:all даёт
   выделить весь ключ одним касанием. */
#account>pre,#key{
  font:500 14px/1.6 var(--acct-mono);
  color:var(--code-ink);background:var(--code-bg);
  padding:16px 18px;margin:12px 0;
  border-radius:8px;max-width:100%;
  white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;
  -webkit-user-select:all;user-select:all;
}

/* --- Страница подтверждения входа и страница ключа -------------------- */

main>p[data-state]{color:var(--ink-2);margin:12px 0 0;max-width:62ch}
main>p[data-state] strong{
  font:500 15.5px/1.5 var(--acct-mono);
  color:var(--ink);overflow-wrap:anywhere;
}
/* «Перейти в кабинет» -- ссылка сразу за кнопкой «Скопировать», без
   пробела между ними в разметке. */
main>a{display:inline-block;margin:2px 0 0;font-weight:600;font-size:14.5px}

/* --- Подписки и платежи ----------------------------------------------- */
/* Каждая подписка -- <section> с карточкой сайта: белый фон, линейка,
   радиус 12. Внутри: h2 с идентификатором, пустой <div> под платежи,
   кнопка «показать» и формы портала. */
#account>section{
  background:#fff;
  border:1px solid var(--rule);border-radius:12px;
  padding:20px 22px 12px;margin:18px 0 0;
}
#account>section>h2{
  font:500 13px/1.5 var(--acct-mono);
  letter-spacing:.03em;color:var(--ink-2);
  margin:0 0 12px;padding:0;border:0;
  overflow-wrap:anywhere;
}
/* Формы портала (отмена подписки, смена карты) -- блочные по умолчанию,
   каждая уводила бы кнопку на свою строку. */
#account>section>form{display:inline-block;margin:0 8px 0 0}
#account>section>div>h3{font:700 16px/1.3 var(--acct-serif);margin:6px 0 8px}
#account>section>div>p{
  font:400 14px/1.55 var(--acct-mono);
  color:var(--ink-2);margin:0 0 6px;
  overflow-wrap:anywhere;
}
#account>section>div>button{margin-top:12px}
/* Строка платежа: дата, статус и сумма слева, счёт справа. */
#account>section>div>div{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
  padding:10px 0;border-top:1px solid var(--rule);
}
#account>section>div>div>p{
  flex:1 1 14rem;min-width:0;margin:0;
  font:400 13.5px/1.5 var(--acct-mono);color:var(--ink);
  overflow-wrap:anywhere;
}
#account>section>div>div button{margin:0;padding:8px 12px;font-size:13px}

/* --- Строка состояния ------------------------------------------------- */
/* <p id="message"> лежит за пределами <main>, поэтому колонку держит сам.
   Отличить успех от ошибки в разметке нечем -- класса нет ни у того, ни
   у другого, -- поэтому вид один, нейтральный: лист уведомления в бумаге
   сайта. Пустое сообщение не должно оставлять пустую рамку. */
#message{
  /* 720 = 768 колонки минус её же боковые отступы: рамка встаёт ровно
     по краю текста, а не шире его. */
  width:min(720px,100% - 48px);margin:22px auto 0;
  padding:12px 14px;
  font:500 13.5px/1.5 var(--acct-mono);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--paper-edge);border-radius:8px;
  overflow-wrap:anywhere;
}
#message:empty{display:none}

/* --- Телефон ---------------------------------------------------------- */

@media (max-width:560px){
  main{padding:28px 18px 0}
  #message{width:min(720px,100% - 36px)}
  #account>form{max-width:none;align-self:stretch}
  #account>form input[type=email],
  main>form>button[type=submit]{width:100%}
  #account>h2{margin-top:26px;padding-top:20px}
  /* Мельче на телефоне; запас в две строки тот же, но уже от 12px. */
  #account .usage-readout{font-size:12px;min-height:3em}
  #account>section{padding:16px 16px 8px;border-radius:10px}
  /* Дата платежа и кнопка счёта в столбик: рядом они на 320px не встают. */
  #account>section>div>div{flex-direction:column;align-items:flex-start;gap:6px}
  /* Ось у колонки вертикальная, и flex-basis строки платежа стал бы её
     ВЫСОТОЙ: без сброса каждая строка вырастала на 14rem пустоты. */
  #account>section>div>div>p{flex:0 0 auto}
  #account>pre,#key{padding:14px;font-size:13.5px}
}

/* Виджет Turnstile ровно 300px и не тянется. На 320px экране колонка
   даёт 284 -- пусть виджет займёт правый отступ страницы, чем поедет
   в собственной прокрутке. Ширина документа от этого не растёт:
   выступ съедает уже существующий padding. */
@media (max-width:359px){
  /* max-width:100% зажимал бы его обратно в 284: колонка узкая, а
     виджет флекс-элемент и сам по себе не переполнится. */
  #account>form>div{max-width:none;margin-right:-18px}
}

/* --- Выход в шапке --- */
/* Кнопка стоит среди ссылок навигации и обязана выглядеть как они: иначе
   единственный элемент управления в шапке торчит инородным телом. Правила
   повторяют то, что chrome.css даёт `nav a`, но не трогают сам chrome.css —
   он общий с маркетинговыми страницами, где такой кнопки нет. */
.nav-signout{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:var(--red);cursor:pointer;
}
.nav-signout:hover{text-decoration:underline}
.nav-signout:disabled{color:var(--ink-3);cursor:default;text-decoration:none}