/* Раскладка и страницы. Цвета и размеры только токенами, это проверяет tests/test_design.py. */

*, *::before, *::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--fg);
     font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal);}
p{margin:0; text-wrap:pretty;}
a{color:var(--accent-text);}
code{font-family:var(--font-mono); font-size:var(--text-xs);}
img{max-width:100%;}

/* ── Каркас ─────────────────────────────────────────────────────────── */
.shell{display:flex; min-height:100dvh;}
.sidebar{position:sticky; top:0; align-self:flex-start; display:flex; flex-direction:column; gap:var(--space-20);
         flex:none; width:var(--sidebar-w); height:100dvh; padding:var(--space-20) var(--space-14); overflow-y:auto;}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); padding:0 var(--space-10);
       color:var(--fg); text-decoration:none;}
.brand-logo{display:block; height:auto;}
.brand-name{color:var(--muted-fg); font-size:var(--text-sm);}
.sidebar-nav{display:flex; flex-direction:column; gap:var(--space-2); flex:1;}
.sidebar-nav .nav-item{padding:var(--space-10) var(--space-12); border-radius:var(--radius-md);}
.sidebar-foot{display:flex; flex-direction:column; gap:var(--space-10); padding:var(--space-14) var(--space-10) 0;
              border-top:1px solid var(--border);}
.who{display:flex; flex-direction:column; min-width:0;}
.who-name{font-weight:var(--weight-semibold); overflow:hidden; text-overflow:ellipsis;}
.who-role{color:var(--muted-fg); font-size:var(--text-sm);}
.who-actions{display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-14); font-size:var(--text-sm);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{display:none;}
.nav-scrim{display:none;}
.content{display:flex; flex-direction:column; gap:var(--space-20); width:100%; max-width:var(--content-max);
         padding:var(--space-32);}

.page-title{margin:0; font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-regular);
            line-height:var(--leading-tight); text-wrap:balance;}
.page-lead{max-width:60ch; margin-top:calc(var(--space-12) * -1); color:var(--muted-fg); font-size:var(--text-md);}
.block-title{margin:0; font-family:var(--font-head); font-size:var(--text-md); font-weight:var(--weight-semibold);
             line-height:var(--leading-tight);}
.text-muted{color:var(--muted-fg);}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--space-12);}
.table-wrap{overflow-x:auto;}

.form-row{display:flex; flex-direction:column; gap:var(--space-4); min-width:0;}
.form-label{color:var(--muted-fg); font-size:var(--text-sm);}

@media (max-width:900px){
  .topbar{position:sticky; top:0; z-index:var(--z-header); display:flex; align-items:center; gap:var(--space-8);
          padding:var(--space-8) var(--space-12); background:var(--bg); border-bottom:1px solid var(--border);}
  .topbar-logo{display:block; height:auto;}
  .sidebar{position:fixed; inset:0 auto 0 0; z-index:var(--z-drawer); height:100dvh; background:var(--bg);
           box-shadow:var(--shadow-lg); transform:translateX(-100%); visibility:hidden;
           transition:transform var(--dur-base), visibility var(--dur-base);}
  .nav-open .sidebar{transform:none; visibility:visible;}
  .nav-open .nav-scrim{display:block; position:fixed; inset:0; z-index:var(--z-overlay); background:var(--scrim);}
  .content{padding:var(--space-16); gap:var(--space-16);}
  .page-title{font-size:var(--text-xl);}
  .page-lead{margin-top:calc(var(--space-8) * -1); font-size:var(--text-base);}
  .kpi-row{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* ── Вход ───────────────────────────────────────────────────────────── */
.login-page{position:relative; display:flex; align-items:center; justify-content:center; min-height:100dvh;
            padding:var(--space-16);}
.login-card{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-6);
            width:100%; max-width:380px; padding:var(--space-32);}
.login-logo{display:block; height:auto; margin-bottom:var(--space-20);}
.login-title{margin:0; font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--weight-regular);
             line-height:var(--leading-tight);}
.login-sub{margin-bottom:var(--space-14); color:var(--muted-fg);}
.login-card .note{align-self:stretch; margin-bottom:var(--space-8);}
.login-form{display:flex; flex-direction:column; gap:var(--space-12); align-self:stretch;}
.login-form .field{width:100%;}
.login-form .btn{margin-top:var(--space-4);}

/* Вырезки из бумаги: россыпь вокруг карточки. Размер и место — только здесь, поэтому px и проценты */
.login-art{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.art{position:absolute; display:block; height:auto;}
.art-pear{width:300px; left:6%; top:-40px; transform:rotate(-14deg);}
.art-peas{width:210px; left:17%; bottom:8%;}
.art-carrot{width:230px; left:-50px; top:46%;}
.art-plate{width:320px; right:5%; bottom:-70px;}
.art-spoon{width:320px; right:-30px; top:-20px; transform:rotate(12deg);}
.art-radish{width:210px; right:18%; top:34%;}
@media (max-width:900px){
  .art-peas, .art-radish, .art-carrot{display:none;}
  .art-pear{width:170px; left:-30px; top:-30px;}
  .art-spoon{width:180px; right:-40px; top:-20px;}
  .art-plate{width:190px; right:-40px; bottom:-50px;}
}

/* ── Витрина /design ────────────────────────────────────────────────── */
.demo{display:flex; flex-direction:column; gap:var(--space-12); padding:var(--space-20);}
.demo-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.demo textarea{width:100%;}
.swatches{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:var(--space-10);}
.swatch{display:flex; flex-direction:column; gap:var(--space-4);}
.swatch-color{display:block; height:var(--space-48); border:1px solid var(--border); border-radius:var(--radius-sm);}
.sw-bg{background:var(--bg);} .sw-card{background:var(--card);} .sw-fg{background:var(--fg);}
.sw-muted{background:var(--muted);} .sw-muted-fg{background:var(--muted-fg);} .sw-border{background:var(--border);}
.sw-input{background:var(--input);} .sw-accent{background:var(--accent);} .sw-destructive{background:var(--destructive);}
.sw-ok{background:var(--ok);} .sw-warn{background:var(--warn);} .sw-info{background:var(--info);}
.sw-brand-carrot{background:var(--brand-carrot);} .sw-brand-sage{background:var(--brand-sage);}
.sw-brand-blue{background:var(--brand-blue);} .sw-brand-plum{background:var(--brand-plum);}
.sw-brand-mist{background:var(--brand-mist);}
.icon-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:var(--space-12);}
.icon-cell{display:flex; flex-direction:column; align-items:center; gap:var(--space-6); text-align:center; overflow-wrap:anywhere;}

/* ── Задания: список ────────────────────────────────────────────────── */
.filters{display:flex; flex-direction:column; gap:var(--space-10);}
a.chip{text-decoration:none;}
.chip-count{opacity:.7; font-weight:var(--weight-regular);}
.search{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.search .field{flex:0 1 320px;}
.sub-table td{overflow-wrap:anywhere;}
.sub-table tbody tr{position:relative;}
.sub-link{color:var(--fg); font-weight:var(--weight-medium); text-decoration:none;}
.sub-link::after{content:""; position:absolute; inset:0;}
.sub-link:focus-visible{outline:none;}
.sub-link:focus-visible::after{outline:2px solid var(--accent-text); outline-offset:-2px; border-radius:var(--radius-sm);}
.sub-when{color:var(--muted-fg); white-space:nowrap;}
.sub-task{white-space:nowrap;}
.sub-photos .icon, .sub-replies .icon{margin-right:var(--space-4); color:var(--muted-fg); vertical-align:-2px;}
.sub-points b{font-weight:var(--weight-semibold);}
.sub-bonus{display:inline-flex; align-items:center; margin-left:var(--space-6); color:var(--accent-text); font-size:var(--text-xs);}
.pager{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.pager .text-muted{margin-right:auto;}

/* На телефоне строка таблицы становится карточкой: семь колонок в 390 px не помещаются */
@media (max-width:600px){
  .sub-table thead{display:none;}
  .sub-table, .sub-table tbody{display:block;}
  .sub-table tr{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--space-4) var(--space-10);
                grid-template-areas:"name status" "task points" "when counts";
                padding:var(--space-12) var(--space-14); border-bottom:1px solid var(--border);}
  .sub-table tr:last-child{border-bottom:none;}
  .sub-table td{display:block; padding:0; border:none;}
  .sub-table tbody tr:hover td{background:transparent;}
  .sub-name{grid-area:name;} .sub-status{grid-area:status; justify-self:end;}
  .sub-task{grid-area:task;} .sub-table td:last-child{grid-area:points; justify-self:end;}
  .sub-when{grid-area:when;}
  .sub-photos{grid-area:counts; justify-self:end; margin-right:var(--space-48);}
  .sub-replies{grid-area:counts; justify-self:end;}
  .search .field{flex:1 1 100%;}
}

/* ── Задания: карточка ──────────────────────────────────────────────── */
.card-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); min-height:var(--control-md);}
.card-nav-side{display:flex; align-items:center; gap:var(--space-6);}
.only-phone{display:none;}
.card-head{display:flex; flex-direction:column; gap:var(--space-8); overflow-wrap:anywhere;}
.card-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6) var(--space-12);}
.card-layout{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:var(--space-20); align-items:start;}
.card-main{display:flex; flex-direction:column; gap:var(--space-16); min-width:0;}
.card-side{position:sticky; top:var(--space-20); display:flex; flex-direction:column; gap:var(--space-16); min-width:0; scroll-margin-top:var(--space-64);}
.block{display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-20); scroll-margin-top:var(--space-64);}
.block-count{margin-left:var(--space-8); color:var(--muted-fg); font-weight:var(--weight-regular);}

.post{display:flex; flex-direction:column; gap:var(--space-8); min-width:0;}
.post-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-8);}
.post-who{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-8); min-width:0; overflow-wrap:anywhere;}
a.badge{text-decoration:none;}
.post-author{font-weight:var(--weight-semibold);}
.post-time{color:var(--muted-fg); font-size:var(--text-xs); white-space:nowrap;}
.post-text{white-space:pre-wrap; overflow-wrap:anywhere;}
.post-quote{margin:0; padding:var(--space-2) 0 var(--space-2) var(--space-10); border-left:2px solid var(--brand-sage);
            color:var(--muted-fg); font-size:var(--text-sm); overflow-wrap:anywhere;}
.post-quote b{font-weight:var(--weight-medium); color:var(--fg);}
.post-files{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4);}
.post-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8);}
.block > .post + .post{padding-top:var(--space-14); border-top:1px solid var(--border);}

.thread{display:flex; flex-direction:column; gap:var(--space-10);}
.thread .post{padding:var(--space-12) var(--space-14); border:1px solid var(--border); border-radius:var(--radius-md);}
.thread .post-curator{background:var(--brand-mist); border-color:transparent;}
.thread .post-note{background:var(--muted); border-color:transparent;}

.photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:var(--space-6);}
.photo{position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--radius-sm); background:var(--muted);}
.photo img{display:block; width:100%; height:100%; object-fit:cover;}
.photo:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px;}
.photo-mark{position:absolute; left:var(--space-4); bottom:var(--space-4); max-width:calc(100% - var(--space-8)); white-space:normal;}
.lightbox-open{overflow:hidden;}

.history{gap:0;}
.history-title{display:flex; align-items:center; gap:var(--space-8); font-weight:var(--weight-semibold); cursor:pointer;}
.history-title .block-count{margin-left:0;}
.history-list{display:flex; flex-direction:column; gap:var(--space-6); margin:var(--space-12) 0 0; padding:0; list-style:none;
              font-size:var(--text-sm); overflow-wrap:anywhere;}

.review .field{width:100%;}
.review-title{display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);}
.review-title .badge{font-family:var(--font-body);}
.review-who, .review-hint{font-size:var(--text-sm);}
.review-saved{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4) var(--space-12);}
.review-actions{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-8);}
.review-actions .btn{padding:0 var(--space-8);}
.review-actions .btn.primary{grid-column:1 / -1;}
.review-keep{grid-column:1 / -1; order:1;}

/* ── Очередь ────────────────────────────────────────────────────────── */
.queue-entry{display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:var(--space-20); align-items:start;}
.queue-posts{display:flex; flex-direction:column; align-items:stretch; gap:var(--space-14); min-width:0;}
.queue-posts > .link-btn{align-self:flex-start;}
.queue-posts > .post + .post{padding-top:var(--space-14); border-top:1px solid var(--border);}
.queue-side{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-14); min-width:0;}
.queue-actions{display:flex; flex-direction:column; gap:var(--space-12); align-self:stretch;}
.queue-group{display:flex; flex-direction:column; gap:var(--space-6);}
.queue-buttons{display:flex; flex-wrap:wrap; gap:var(--space-6);}
.queue-guess{font-size:var(--text-sm);}
.queue-target{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-8);}
.queue-flash{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-6) var(--space-12);}
.queue-flash-side{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12);}

.row-list{display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
.row-item{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-8) var(--space-16);
          padding:var(--space-12) var(--space-16); border-bottom:1px solid var(--border);}
.row-item:last-child{border-bottom:none;}
.row-main{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-10); min-width:0; flex:1 1 320px; overflow-wrap:anywhere;}
.row-name{color:var(--fg); font-weight:var(--weight-medium);}
.row-snippet{flex-basis:100%;}
.row-who{font-size:var(--text-sm);}
.row-links{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-14);}

/* ── Участники ──────────────────────────────────────────────────────── */
.people-table td{overflow-wrap:anywhere;}
.people-table tbody tr{position:relative;}
.people-table th{white-space:nowrap;}
.people-name{min-width:180px;}
.people-queue{display:block; font-size:var(--text-xs);}
/* Вся строка ведёт в карточку участника, а ячейки заданий лежат поверх и ведут в сдачу */
.people-points, .people-status{position:relative; z-index:1;}
.people-points{display:inline-flex; align-items:center; color:var(--fg); text-decoration:none;}
.people-points b, .people-total b, .sub-points b{font-weight:var(--weight-semibold);}
/* Цифры одной ширины в Onest дают дыру вокруг единицы: в крупных и жирных числах она заметна */
.people-total, .kpi .value{font-variant-numeric:normal;}
.person-tasks .row-item{padding:var(--space-10) 0;}
.person-tasks .row-item:first-child{padding-top:0;}
.person-tasks .row-item:last-child{padding-bottom:0;}
.person-post{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6); scroll-margin-top:var(--space-64);}
.person-post > .post{align-self:stretch;}
.person-post + .person-post{padding-top:var(--space-14); border-top:1px solid var(--border);}
.person-sub{align-self:flex-start;}
.activity-just{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-6) var(--space-12);
               scroll-margin-top:var(--space-64);}

/* ── Instagram, рейтинг, настройки ──────────────────────────────────── */
.add-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-12); align-items:end;}
.add-form .field{width:100%;}
.add-submit{justify-self:start;}
.empty{display:flex; flex-direction:column; align-items:center; gap:var(--space-12); padding:var(--space-32) var(--space-16); text-align:center;}
.empty-art{display:block; width:96px; height:auto;}
.empty p{max-width:48ch;}
.link-row{scroll-margin-top:var(--space-64);}
.link-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6);}
.link-url{overflow-wrap:anywhere;}

.section-title{display:flex; align-items:center; gap:var(--space-8); margin-bottom:var(--space-10);}
.settings-form{display:flex; flex-direction:column; gap:var(--space-16);}
.prize-table td, .rating-table td{overflow-wrap:anywhere;}
.prize-left{white-space:nowrap;}
.rating-table tbody tr{position:relative; scroll-margin-top:var(--space-64);}
.rating-place{white-space:nowrap; font-weight:var(--weight-semibold);}
.rating-name{min-width:180px;}
.rating-tie{display:block; color:var(--muted-fg); font-size:var(--text-xs); text-wrap:pretty;}
.rating-gifts{font-size:var(--text-sm); text-wrap:pretty;}
.rating-badges{display:flex; flex-wrap:wrap; gap:var(--space-4);}
.rating-choice{position:relative; z-index:1;}

.settings-fields{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--space-14);}
.settings-fields .field{width:100%;}
.form-hint{color:var(--muted-fg); font-size:var(--text-xs); text-wrap:pretty;}
.settings-save{position:sticky; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12);
               padding:var(--space-12) 0; background:var(--bg);}

@media (max-width:600px){
  .prize-table thead, .rating-table thead{display:none;}
  .prize-table, .prize-table tbody, .rating-table, .rating-table tbody{display:block;}
  .prize-table tr{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4) var(--space-10);
                  padding:var(--space-12) var(--space-14); border-bottom:1px solid var(--border);}
  .prize-table td{display:block; padding:0; border:none; text-align:left;}
  .prize-title{grid-column:1 / -1; font-weight:var(--weight-medium);}
  .prize-goes{grid-column:1 / -1; color:var(--muted-fg); font-size:var(--text-sm);}
  .prize-count::before{content:attr(data-label); display:block; color:var(--muted-fg); font-size:var(--text-xs);}
  .prize-table tr:last-child, .rating-table tr:last-child{border-bottom:none;}
  .prize-table tbody tr:hover td, .rating-table tbody tr:hover td{background:transparent;}
  .rating-table tr{display:grid; grid-template-columns:var(--space-32) minmax(0, 1fr) auto; gap:var(--space-4) var(--space-10);
                   padding:var(--space-12) var(--space-14); border-bottom:1px solid var(--border);}
  .rating-table td{display:block; padding:0; border:none;}
  .rating-name{min-width:0;}
  .rating-nom, .rating-gifts, .rating-action{grid-column:2 / -1;}
  .rating-nom:not(:has(.badge)){display:none;}
}

/* На телефоне строка таблицы становится карточкой: имя и сумма, под ними 4 задания, ниже остальные баллы */
@media (max-width:600px){
  .people-table thead{display:none;}
  .people-table, .people-table tbody{display:block;}
  .people-table tr{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--space-8) var(--space-6);
                   padding:var(--space-12) var(--space-14); border-bottom:1px solid var(--border);}
  .people-table tr:last-child{border-bottom:none;}
  .people-table td{display:block; padding:0; border:none;}
  .people-table tbody tr:hover td{background:transparent;}
  .people-name{grid-column:1 / 10; grid-row:1; min-width:0;}
  .people-total{grid-column:10 / -1; grid-row:1; font-size:var(--text-md);}
  .people-cell{grid-column:span 3;}
  .people-cell::before, .people-extra::before{content:attr(data-label); display:block; color:var(--muted-fg); font-size:var(--text-xs);}
  .people-extra{grid-column:span 4; text-align:left;}
}

@media (max-width:900px){
  .card-layout, .queue-entry{grid-template-columns:minmax(0, 1fr);}
  .card-side{position:static;}
  .only-phone{display:inline-flex;}
  .block{padding:var(--space-16);}
}
@media (max-width:600px){
  .photos{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4);}
  .thread .post{padding:var(--space-10) var(--space-12);}
  .lightbox{padding:var(--space-48) 0;}
}

/* Пометка демо-оценок: на показе не должно выглядеть решением команды */
.demo-note{margin-bottom:var(--space-16);}

/* Режим показа: имена, ники, тексты и фото учеников размыты, для скриншотов и экрана на встрече. Класс ставит privacy.js */
.privacy-toggle{align-self:flex-start; font-size:var(--text-sm);}
.privacy-toggle span{display:inline-flex; align-items:center; gap:var(--space-4);}
.privacy-toggle .privacy-on, html.privacy .privacy-toggle .privacy-off{display:none;}
html.privacy .privacy-toggle .privacy-on{display:inline-flex;}
html.privacy .user-text{filter:blur(6px);}
html.privacy .photo img, html.privacy .lightbox-media{filter:blur(18px);}