/* Такт — поверх pico.classless. Телефон 390px — эталон; ≥900px — три колонки рядом. */
:root { --tabs-h: 56px; }
body { padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); }
.page { padding: 0.5rem 4vw; max-width: 1200px; margin: 0 auto; }
input, select, textarea, button { font-size: 16px; }          /* iOS не зумит поля */
button, [role=button], .chip { min-height: 44px; }

.tabs { position: fixed; bottom: 0; left: 0; right: 0; height: var(--tabs-h); display: flex; align-items: stretch;
        background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color);
        padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs a { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; }
.tabs a.active { font-weight: 700; border-top: 3px solid var(--pico-primary); }
.tabs .logout { display: none; }

#sprint-head .row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
#sprint-head .who-filter a { margin-left: 0.5rem; }
#sprint-head .who-filter a.on { font-weight: 700; text-decoration: underline; }
#sprint-head form { display: flex; gap: 0.5rem; margin: 0.25rem 0; }
#sprint-head form input { flex: 1; margin: 0; }
#sprint-head form button { width: auto; margin: 0; }
#sprint-head .load { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 14px; color: var(--pico-muted-color); }
#sprint-head .load .over { color: var(--pico-del-color); font-weight: 700; }

.segment { position: sticky; top: 0; display: flex; gap: 0.5rem; padding: 0.25rem 0; background: var(--pico-background-color); z-index: 2; }
.segment button { flex: 1; padding: 0.25rem; margin: 0; font-size: 14px; }
.columns { display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 360px); gap: 12px; overflow-x: auto;
           scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.column { scroll-snap-align: start; }
.column h2 { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
ul.cards { list-style: none; padding: 0; margin: 0; min-height: 3rem; }
.card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25rem 0.5rem; align-items: center;
        padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
        background: var(--pico-card-background-color); cursor: pointer; }
.card .size { font-weight: 700; min-width: 1.5rem; text-align: center; }
.card .size.unsized { color: var(--pico-muted-color); border: 1px dashed var(--pico-muted-border-color); border-radius: 4px; }
.card .title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card .meta { grid-column: 1 / 3; display: flex; gap: 0.5rem; flex-wrap: wrap; color: var(--pico-muted-color); }
.card .who { border-radius: 999px; padding: 0 0.5rem; color: #fff; }
.card .who.u1001 { background: #3b6fd6; }      /* цвета меток — по id пользователей */
.card .who.u1002 { background: #d67a3b; }
.card.overdue time { color: var(--pico-del-color); font-weight: 700; }
.card .unplanned, .card .carry { font-size: 12px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.card .advance { grid-row: 1 / 3; width: auto; padding: 0.25rem 0.75rem; margin: 0; }
.card.ghost { opacity: 0.4; } .card.chosen { box-shadow: 0 0 0 2px var(--pico-primary); }

.rows .card { grid-template-columns: auto 1fr auto; }
.rows .grip { cursor: grab; color: var(--pico-muted-color); }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; grid-column: 1 / 4; }
.chip { width: auto; padding: 0 0.5rem; margin: 0; font-size: 13px; min-height: 32px; border-radius: 999px;
        background: transparent; color: var(--pico-contrast); border: 1px solid var(--pico-muted-border-color); }
        /* не var(--pico-color): pico переопределяет её у кнопок на белый — текст невыбранного чипа пропадал */
.chip.on { background: var(--pico-primary); color: #fff; border-color: var(--pico-primary); }
.chip.who.u1001 { background: transparent; color: #3b6fd6; border-color: #3b6fd6; }   /* не выбран — контур в цвете человека */
.chip.who.u1002 { background: transparent; color: #d67a3b; border-color: #d67a3b; }
.chip.who.u1001.on { background: #3b6fd6; color: #fff; }
.chip.who.u1002.on { background: #d67a3b; color: #fff; }
.chips.filter a { margin-right: 0.5rem; } .chips.filter a.on { font-weight: 700; text-decoration: underline; }

#flash { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 1rem); transform: translateX(-50%); display: none;
         padding: 0.5rem 1rem; border-radius: 8px; background: var(--pico-contrast); color: var(--pico-contrast-inverse); z-index: 6; }
#flash.show { display: block; animation: fade 4s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; display: none; } }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 7; }
.sheet-body { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto; padding: 1rem 4vw 2rem;
              border-radius: 16px 16px 0 0; background: var(--pico-background-color); }
.sheet-body header { display: flex; justify-content: space-between; align-items: center; }
.sheet-body .close { width: auto; margin: 0; }
.seg { display: flex; gap: 0.25rem; border: 0; padding: 0; margin-bottom: 0.5rem; }
.seg legend { font-size: 13px; color: var(--pico-muted-color); }
.seg label { flex: 1; text-align: center; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.4rem 0; }
.seg input[type=radio] { display: none; } .seg label:has(input:checked) { background: var(--pico-primary); color: #fff; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sheet-actions button, .sheet-actions a { width: auto; margin: 0; }
.danger { background: var(--pico-del-color); border-color: var(--pico-del-color); }
.error { color: var(--pico-del-color); }
.auth { max-width: 420px; margin: 10vh auto; text-align: center; }
.two-pane { display: grid; gap: 1rem; } .bar { display: inline-block; width: 120px; height: 8px; background: var(--pico-muted-border-color); border-radius: 4px; vertical-align: middle; }
.bar i { display: block; height: 100%; max-width: 100%; background: var(--pico-primary); border-radius: 4px; }
.table-wrap { overflow-x: auto; }
/* слой 2: апдейты недели и карточка прошлого спринта */
.checkins th { font-size: .85rem; white-space: nowrap; }
.checkins td { max-width: 16rem; white-space: pre-wrap; font-size: .85rem; vertical-align: top; }
.sprint-card ul.plain { list-style: none; padding: 0; } .sprint-card li { margin: .25rem 0; }
.sprint-card h4 { font-size: .9rem; margin: .5rem 0 .25rem; }
.sprint-card input.reason { display: block; width: 100%; max-width: 34rem; margin: .25rem 0 0 1.25rem; padding: .15rem .5rem; font-size: .85rem; height: auto; }

/* слой 3: пятая вкладка «Ещё», CRM */
.tabs .wide-only { display: none; }                    /* Идеи/Метрики/CRM живут под «Ещё» на телефоне */
.hub, .hub li { list-style: none; }   /* pico рисует маркер и при list-style на самом ul */
.hub { padding: 0; display: grid; gap: .5rem; }
.hub a { display: block; padding: .75rem 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; text-decoration: none; }
.hub a small { display: block; color: var(--pico-muted-color); }
form.quick { display: flex; gap: .5rem; margin: .5rem 0; }
form.quick input { flex: 1; margin: 0; } form.quick input.amount { flex: 0 0 7rem; }
form.quick button { width: auto; margin: 0; }
.funnel { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: 14px; color: var(--pico-muted-color); margin-bottom: .5rem; }
.funnel .total { font-weight: 600; color: var(--pico-contrast); }
/* имя клиента — главное на карточке: полная ширина и перенос, а не обрезка в две строки, как у задачи */
.card.deal { grid-template-columns: 1fr; gap: .2rem .5rem; }
.card.deal .title, .card.idea .title { display: block; overflow: visible; -webkit-line-clamp: unset; }
.card.deal .amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card.deal .meta { grid-column: 1 / -1; }
.card.deal.due .next { color: var(--pico-del-color); font-weight: 600; }
.lost-box { margin-top: 1rem; } .lost-box .card.lost { opacity: .7; grid-template-columns: 1fr auto; }
.lost-form { display: flex; gap: .5rem; margin: 0; flex: 1 1 16rem; }
.lost-form input { margin: 0; } .lost-form button { width: auto; margin: 0; }

/* слой 3: метрики */
/* 12 недель + динамика должны уместиться в ширину экрана, иначе колонка с линией уезжает за край */
table.metrics thead th { font-size: 12px; font-weight: 600; padding: 6px 6px; text-align: right; }
table.metrics thead th:first-child { text-align: left; }
table.metrics th[scope=row] { white-space: nowrap; font-size: 15px; padding: 6px 10px 6px 0; }
table.metrics th[scope=row] .chip { min-height: 24px; font-size: 11px; padding: 0 .4rem; margin-left: .25rem; }
table.metrics td { padding: .15rem .15rem; }
table.metrics form { margin: 0; }
table.metrics input { width: 3.9rem; margin: 0; padding: .15rem .3rem; font-size: 13.5px; height: auto;
                      text-align: right; font-variant-numeric: tabular-nums; }
table.metrics .now { background: var(--pico-code-background-color); }
table.metrics .spark { width: 6rem; padding: 6px .75rem 6px .25rem; border-right: 1px solid var(--pico-muted-border-color); }
table.metrics .spark svg { width: 6rem; height: 26px; display: block; }
table.metrics thead th.spark { text-align: left; }
.metric-form .grid { display: grid; grid-template-columns: 1fr 6rem; gap: .5rem; }

/* слой 3: идеи */
.card.idea { grid-template-columns: 1fr auto; align-items: start; }
.card.idea .title small { color: var(--pico-muted-color); }
.card.idea .title small.check { color: var(--pico-primary); }
.status-chip { font-size: 12px; border-radius: 999px; padding: 0 .5rem; border: 1px solid currentColor; white-space: nowrap; }
.status-chip.confirmed { color: var(--pico-ins-color); } .status-chip.rejected { color: var(--pico-del-color); }
.status-chip.parked { color: var(--pico-muted-color); }
.verdict-form { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; flex: 1 1 100%; }
.verdict-form input { flex: 1 1 11rem; min-width: 8rem; margin: 0; padding: .2rem .5rem; font-size: 13.5px; height: auto; }
.verdict-form .chip { flex: 0 0 auto; }   /* иначе pico растягивает кнопки формы на всю строку */
.chip.danger { color: var(--pico-del-color); border-color: var(--pico-del-color); background: transparent; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabs { position: sticky; top: 0; bottom: auto; height: 48px; border-top: 0; border-bottom: 1px solid var(--pico-muted-border-color); }
  .tabs a { flex: 0 0 auto; padding: 0 1rem; } .tabs a.active { border-top: 0; border-bottom: 3px solid var(--pico-primary); }
  .tabs .logout { display: block; margin-left: auto; } .tabs .logout button { width: auto; margin: 0; padding: 0.25rem 0.75rem; font-size: 14px; }
  .tabs .wide-only { display: flex; } .tabs .more-only { display: none; }   /* широкий экран — все семь ссылок в ряд */
  .segment { display: none; }
  .columns { grid-auto-columns: 1fr; overflow: visible; }
  .sheet-body { left: auto; top: 0; bottom: 0; width: 420px; max-height: none; border-radius: 0; }
  .two-pane { grid-template-columns: 1fr 1fr; }
}