/* Metr owner dashboard — base + chrome-shell styles, extracted from the
   owner-approved mockup (2026-07-13). U3 keeps this MINIMAL: base typography,
   the app chrome (sidebar / top bar / content column) and the generic card.
   Screen-specific components (KPI tiles, tables, feeds, inbox cards, charts)
   arrive with their screens in U4/U5. Colors/fonts come from tokens.css. */

/* ============ BASE ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input{font:inherit;color:inherit}
svg{display:block}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:11.5px}

/* ============ APP CHROME ============ */
.app{display:flex;min-height:100vh}
.side{width:232px;flex:0 0 232px;border-right:1px solid var(--line-soft);padding:18px 12px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:baseline;gap:8px;padding:2px 10px 14px}
.brand b{font-size:20px;font-weight:660;letter-spacing:-.015em}
.brand i{width:7px;height:7px;background:var(--accent);border-radius:2px;transform:rotate(45deg) translateY(-1px);display:inline-block}
.brand span{font-size:10.5px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink2);font-size:13.5px;font-weight:480;position:relative;text-align:left;width:100%;text-decoration:none}
.nav-item:hover{background:var(--neutral-bg);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--accent-soft);color:var(--ink);font-weight:560}
.nav-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent)}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-item .bdg{margin-left:auto;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:650;border-radius:99px;padding:1px 7px}
.nav-item.is-soon{color:var(--ink3);cursor:default}
.nav-item.is-soon:hover{background:none;color:var(--ink3)}
.side-foot{margin-top:auto;border-top:1px solid var(--line-soft);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.side-status{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);padding:0 10px}
.side-status .status-dot{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--bg);z-index:20}
.screen-title{font-size:18px;font-weight:640;margin:0;letter-spacing:-.012em}
.content{padding:22px 26px 48px;max-width:1240px;width:100%;margin:0 auto}

/* ============ GENERIC CARD ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.card h3{margin:0 0 4px;font-size:13.5px;font-weight:600;letter-spacing:.01em}
.card .sub{font-size:12px;color:var(--ink3);margin:0 0 14px}
.microlabel{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:560}

/* ============ «ПУЛЬС» COMPONENTS (U4) — ported from the approved mockup ==== */

/* header period chip */
.period{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);font-weight:560;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px}

/* layout */
.section-gap{height:22px}
.row-32{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
@media(max-width:980px){.row-32{grid-template-columns:1fr}}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:570;border-radius:6px;padding:2.5px 8px;white-space:nowrap}
.badge.up{color:var(--up);background:var(--up-bg)}
.badge.down{color:var(--down);background:var(--down-bg)}
.badge.warn{color:var(--warn);background:var(--warn-bg)}
.badge.crit{color:var(--crit);background:var(--crit-bg)}
.badge.mut{color:var(--ink2);background:var(--neutral-bg)}
.badge.acc{color:var(--accent);background:var(--accent-soft)}

/* live strip */
.live{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2);padding:10px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);margin-bottom:20px;flex-wrap:wrap}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--up);flex:0 0 8px}
.live .dot.stale{background:var(--warn)}
.live .dot.unknown{background:var(--ink3)}
.live .sep{color:var(--ink3);opacity:.6}
.live b{color:var(--ink);font-weight:560}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px;display:flex;flex-direction:column;gap:7px;min-width:0;transition:border-color .15s}
.kpi:hover{border-color:var(--accent)}
.kpi .val{font-size:27px;font-weight:560;letter-spacing:-.015em;line-height:1.05}
.kpi .val small{font-size:13px;color:var(--ink3);font-weight:480;letter-spacing:0}
.kpi .val.kpi-empty{font-size:13px;color:var(--ink3);font-weight:480}
.kpi .foot{display:flex;align-items:center;gap:8px;min-height:24px}
.kpi .spark{margin-left:auto;width:76px;height:24px;flex:0 0 76px}
.kpi .note{font-size:11px;color:var(--ink3)}
.meter{height:5px;border-radius:3px;background:var(--surface2);position:relative;overflow:hidden;margin-top:2px}
.meter i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--warn)}
.meter.ok i{background:var(--up)} .meter.over i{background:var(--crit)}

/* attention list */
.attn{display:flex;flex-direction:column}
.attn-item{display:flex;align-items:center;gap:13px;padding:12px 4px;border-top:1px solid var(--line-soft)}
.attn-item:first-of-type{border-top:none}
.attn-item .sev{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.sev.crit{background:var(--crit)} .sev.warn{background:var(--warn)} .sev.acc{background:var(--accent)} .sev.mut{background:var(--ink3)}
.attn-item .txt{flex:1;min-width:0}
.attn-item .txt b{font-weight:560}
.attn-item .txt .risk{color:var(--ink2);font-size:12.5px}
.attn-item .txt .risk em{font-style:normal;color:var(--ink);font-weight:560;white-space:nowrap}

/* venue table */
.vtable{width:100%;border-collapse:collapse}
.vtable th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:560;padding:0 10px 9px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.vtable td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.vtable tr:last-child td{border-bottom:none}
.vtable .vname{display:flex;align-items:center;gap:9px;font-weight:570}
.vtable .vname .sw{width:9px;height:9px;border-radius:3px}
.vtable .r{text-align:right}
.dots{display:inline-flex;gap:3px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--up)}
.dots i.off{background:var(--surface2)}

/* agent feed */
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;gap:12px;padding:9px 2px;border-top:1px solid var(--line-soft);align-items:baseline}
.feed-item:first-of-type{border-top:none}
.feed-item .t{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 74px;white-space:nowrap}
.feed-item .e{flex:1;font-size:12.8px;color:var(--ink2)}
.feed-item .e b{color:var(--ink);font-weight:540}

/* charts */
.chart-wrap{position:relative}
.chart-legend{display:flex;gap:16px;align-items:center;font-size:11.5px;color:var(--ink2);margin-bottom:8px;flex-wrap:wrap}
.chart-legend .key{display:inline-flex;align-items:center;gap:6px}
.chart-legend .key i{width:14px;height:2px;border-radius:2px;display:inline-block}
.tip{position:absolute;pointer-events:none;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12px;min-width:150px;display:none;z-index:5;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.tip .tt{color:var(--ink3);font-size:11px;margin-bottom:6px}
.tip .tr{display:flex;align-items:center;gap:7px;padding:1.5px 0}
.tip .tr i{width:10px;height:2px;border-radius:2px}
.tip .tr b{margin-left:auto;font-weight:590;font-variant-numeric:tabular-nums}
.tip .tr span{color:var(--ink2)}
.tip .tr.total{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}

/* explicit empty states («нет данных» — no fake zeros) */
.empty-state{font-size:12.5px;color:var(--ink3);padding:10px 0;margin:0}

/* ============ «ВХОДЯЩИЕ» COMPONENTS (U5) — ported from the approved mockup */

/* buttons (v1 renders only the «Открыть в Telegram» link in .btn chrome) */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:530;color:var(--ink2);text-decoration:none}
.btn:hover{background:var(--surface2);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:7px}

/* generic list row (mockup primitive shared by inbox-adjacent lists) */
.lrow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid var(--line-soft)}
.lrow:first-of-type{border-top:none}

/* «Разборы» archive: month separator between lrow groups (Task D) */
.archive-month-sep{margin:16px 2px 4px}
.archive-month-sep:first-child{margin-top:0}
.archive-month-sep + .lrow{border-top:none}
.archive-feed-head{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:0 2px 6px;color:var(--ink2);font-size:11.5px;font-weight:650}
.archive-event-heading{grid-column:2/-1}
.lrow.archive-item{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:start}
.archive-date{padding-top:2px;color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.archive-event{display:flex;align-items:flex-start;gap:12px;min-width:0}
.archive-status{display:block;margin-bottom:2px;color:var(--crit);font-size:12.5px;font-weight:700}
.lrow .grow{flex:1;min-width:0}
.lrow .ttl{font-weight:555;font-size:13px}
.lrow .meta{font-size:11.5px;color:var(--ink3)}
.lrow .amount{font-weight:580;font-variant-numeric:tabular-nums;white-space:nowrap}

/* inbox cards */
.inbox-lede{margin:0 0 16px;color:var(--ink3);font-size:12.5px}
.inbox-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:15px 18px;display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.inbox-item .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inbox-item .head .wait{margin-left:auto;font-size:11px;color:var(--ink3)}
.inbox-item .body{font-size:13.5px;color:var(--ink2)}
.inbox-item .body b{color:var(--ink);font-weight:555}
.inbox-item .quote{border-left:2px solid var(--line);padding:6px 12px;margin:2px 0;font-size:13px;color:var(--ink2);background:var(--neutral-bg);border-radius:0 8px 8px 0;white-space:pre-line}
.inbox-item .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inbox-item .acts .acts-hint{font-size:11.5px;color:var(--ink3)}
.inbox-empty{border:1px dashed var(--line);border-radius:12px;background:var(--surface);padding:26px 22px;font-size:13.5px;color:var(--ink2);text-align:center}
.inbox-empty b{color:var(--ink);font-weight:560}

/* ============ «РАЗБОРЫ» + «ДОКУМЕНТЫ» (archive PR) — from the mockup ==== */

/* filter chips (mockup .filters/.fchip; rendered as GET links here) */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters .fspacer{flex:1}
.fchip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4.5px 13px;font-size:12px;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fchip:hover{background:var(--surface2);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:550}

/* archive layout: feed (narrow) + reader (wide) */
.row-23{display:grid;grid-template-columns:1fr 1.55fr;gap:14px;align-items:start}
@media(max-width:980px){.row-23{grid-template-columns:1fr}}

/* feed rows */
.lrow.is-selected{background:var(--accent-soft);border-radius:9px;padding:11px 10px;margin:0 -8px;border-top:none}
.lrow-link{color:inherit;text-decoration:none}
.lrow-link:hover{color:var(--accent)}

@media(max-width:520px){
  .archive-feed-head,.lrow.archive-item{grid-template-columns:76px minmax(0,1fr)}
  .lrow.archive-item>.btn{grid-column:2;justify-self:start;margin-top:8px}
}

/* reader panel */
.reader .reader-text{font-size:13px;color:var(--ink2);line-height:1.55;margin:0 0 10px;white-space:pre-line}
.reader .reader-note{font-size:12.5px;color:var(--warn);margin:0 0 10px}
.reader .anchors{width:100%;border-collapse:collapse;margin:8px 0 4px}
.reader .anchors td{padding:7px 2px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink2)}
.reader .anchors tr:first-child td{border-top:none}
.reader .anchors td.r{text-align:right;color:var(--ink);font-weight:570;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:12.5px;align-items:baseline}
.fact:first-of-type{border-top:none}
.fact b{font-weight:580;white-space:nowrap}
.fact span{color:var(--ink3)}
.pipe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--ink2);margin-top:12px}
.pipe .st{border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:var(--surface2)}
.pipe svg{width:11px;height:11px;stroke:var(--ink3);fill:none;stroke-width:2;stroke-linecap:round}

/* documents search row */
.doc-search{display:flex;gap:8px;align-items:center;margin:2px 0 16px;flex-wrap:wrap}
.doc-search input[type="search"]{flex:1;min-width:220px;max-width:420px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--ink)}
.doc-search input[type="search"]::placeholder{color:var(--ink3)}

/* ============ RESPONSIVE CHROME ============ */
@media(max-width:900px){
  .side{width:60px;flex-basis:60px;padding:18px 8px 14px}
  .side .brand span,.brand b,.nav-item span,.side-status{display:none}
  .nav-item{justify-content:center}.nav-item .bdg{position:absolute;top:2px;right:2px;margin:0}
}
@media(max-width:640px){.top{flex-wrap:wrap}.period{margin-left:0}.content{padding:16px 14px 40px}}

/* ============ v2.1 ACTIONS (plan 2026-07-14-001) ============ */
/* Inline action forms on inbox cards + the pulse mute toggle. Dark while
   METR_WEB_DASHBOARD_ACTIONS_ENABLED is off (templates render no forms). */
.act-form{display:inline-flex;align-items:center;gap:8px;margin:0}
.act-form button.btn{cursor:pointer;font-family:inherit;line-height:inherit}
.act-form button.btn:disabled{opacity:.55;cursor:default}
.act-answer{display:flex;flex:1 1 100%;gap:8px;align-items:flex-start;min-width:240px}
.act-answer textarea{flex:1;min-height:38px;max-width:520px;resize:vertical;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;font:12.5px/1.45 inherit;color:var(--ink)}
.act-answer textarea::placeholder{color:var(--ink3)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:40;max-width:min(92vw,560px);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-size:12.5px;color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.25)}

/* home top-bar launch pill for the showcase (owner request 2026-07-16).
   Right-aligned whether or not the week .period chip rendered: the pill
   carries its own auto margin, cancelled when the chip (already auto-pushed)
   sits before it. */
.viz-launch{display:inline-flex;align-items:center;gap:8px;margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 13px 5px 6px;font-size:12.5px;font-weight:560;color:var(--ink);text-decoration:none;white-space:nowrap}
.top:has(.period) .viz-launch{margin-left:0}
.viz-launch img{width:24px;height:24px;border-radius:99px;object-fit:cover;display:block}
.viz-launch:hover{border-color:var(--accent);color:var(--accent)}
@media(prefers-reduced-motion:no-preference){.viz-launch{transition:border-color .15s,color .15s}}

/* ============ «Витрина» SCREEN (/viz) ============ */
/* Chooser menu of three poster cards + a full-viewport overlay that gives the
   active scene true 100vw/100vh (each scene is a self-contained bundle in its
   OWN same-origin <iframe>; only the open scene's document ever runs). */
.content:has(> .viz){max-width:1600px}
.viz-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:calc(100vh - 210px)}
.viz-card{position:relative;display:flex;flex-direction:column;min-height:420px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--ink);text-decoration:none}
.viz-card:hover{border-color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .viz-card{transition:border-color .15s,transform .18s,box-shadow .18s}
  .viz-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.20)}
}
.viz-card-media{flex:1;min-height:0;position:relative;background:#0c0d12 linear-gradient(160deg,#141722 0%,#0c0d12 60%)}
.viz-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.viz-card-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-top:1px solid var(--line-soft)}
.viz-card-body b{font-size:15px;font-weight:620;letter-spacing:-.01em}
.viz-card-desc{font-size:12.5px;color:var(--ink2)}
.viz-card-cta{font-size:12px;color:var(--accent);font-weight:560;margin-top:4px}
@media(max-width:980px){
  .viz-menu{grid-template-columns:1fr;min-height:0}
  .viz-card{min-height:300px}
}

/* fullscreen overlay */
.viz-overlay{position:fixed;inset:0;z-index:60;background:#0c0d12}
.viz-overlay[hidden]{display:none}
.viz-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0c0d12}
/* Floating controls cluster: top-left is the ONLY corner where all three
   scenes keep just decorative text (titles/brand) — top-right holds live
   in-scene buttons («Облёт недели», «ИНВЕСТОР-РЕЖИМ»), bottoms hold zoom/
   pause/filters. Translucent + blur so the covered chrome shows through. */
.viz-controls{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:8px}
.viz-back,.viz-osfull{border-radius:99px;background:rgba(10,12,18,.55);border:1px solid rgba(255,255,255,.16);color:#e9eef4;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.viz-back:hover,.viz-osfull:hover{background:rgba(10,12,18,.8);border-color:rgba(255,255,255,.32)}
.viz-back{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font-size:12.5px;font-weight:560;text-decoration:none}
.viz-osfull{width:34px;height:34px;font-size:15px;cursor:pointer;display:grid;place-items:center}
.viz-osfull[hidden]{display:none}
.viz-noscript{position:absolute;inset:0;display:grid;place-items:center;color:#9aa1ae;font-size:13px;pointer-events:none}
body.viz-immersive{overflow:hidden}

/* ============ v2.2 ACCOUNTS (owner order 2026-07-14) ============ */
/* /login standalone page + /account/password form + sidebar identity. */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(92vw,360px);padding:26px 24px}
.login-brand{margin-bottom:18px}
.login-title{font-size:17px;font-weight:640;margin:0 0 14px}
.login-error{background:var(--crit-bg);border:1px solid var(--crit);color:var(--ink);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:12px}
.login-form,.account-form{display:flex;flex-direction:column;gap:6px}
.login-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:560;margin-top:8px}
.login-input{border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:8px 12px;font-size:13.5px;color:var(--ink)}
.login-input:focus{border-color:var(--accent)}
.login-submit{margin-top:16px;justify-content:center;cursor:pointer;font-family:inherit}
.account-card{max-width:440px}
.account-card .sub{margin-top:12px}
.side-user{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2);padding:0 10px;min-width:0}
.side-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.side-user-link{color:var(--ink3);text-decoration:none;flex:none}
.side-user-link:hover{color:var(--ink)}
.logout-form{margin:0 0 0 auto;flex:none}
.logout-btn{border:0;background:none;padding:0;font:inherit;color:var(--ink3);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.logout-btn:hover{color:var(--ink)}
.mobile-account{display:none}
@media(max-width:900px){
  .side-user{display:none}
  .mobile-account{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:11.5px;color:var(--ink2);min-width:0}
  .mobile-account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-account a{color:var(--ink3);text-decoration:none;white-space:nowrap}
  .mobile-account a:hover{color:var(--ink)}
}
@media(max-width:520px){.mobile-account-name{display:none}}

/* M1 manager surface «Мои документы»: status pills + overdue highlight */
.badge.st-owed{color:var(--warn);background:var(--warn-bg)}
.badge.st-committed{color:var(--accent);background:var(--accent-soft)}
.badge.st-received{color:var(--info);background:rgba(127,176,216,.14)}
.badge.st-done{color:var(--up);background:var(--up-bg)}
.badge.st-closed{color:var(--ink2);background:var(--neutral-bg)}
.lrow.mydoc{align-items:flex-start;gap:10px}
.lrow.mydoc.is-overdue{background:var(--crit-bg);border-radius:9px;padding:11px 10px;margin:0 -8px;border-top:none}
.mydoc-late{color:var(--crit);font-weight:600}

/* «Чей сейчас ход» (owner order 2026-07-26). The colour rule is the whole
   point: ONLY «Твой ход» may read as a debt. An item parked on OUR review
   desk is neutral — the manager is not billed for our backlog. */
.badge.turn-theirs{color:var(--warn);background:var(--warn-bg)}
.badge.turn-ours{color:var(--info);background:rgba(127,176,216,.14)}
.badge.turn-done{color:var(--up);background:var(--up-bg)}
.badge.turn-closed{color:var(--ink2);background:var(--neutral-bg)}
.mydoc-turn{font-size:12.5px;color:var(--ink2);margin-top:1px}
.mydoc-onus{color:var(--ink3)}
.mydoc-tally{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
/* per-item history: a plain <details>, no JS (the manager page never loads
   the owner actions bundle). */
.mydoc-hist{margin-top:5px}
.mydoc-hist>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:11.5px;color:var(--ink3);list-style:none;padding:3px 0}
.mydoc-hist>summary::-webkit-details-marker{display:none}
.mydoc-hist>summary::before{content:"▸";font-size:.8em;line-height:1}
.mydoc-hist[open]>summary::before{content:"▾"}
.mydoc-hist>summary:hover{color:var(--ink)}
.mydoc-log{list-style:none;margin:4px 0 0;padding:2px 0 2px 11px;border-left:1px solid var(--line-soft)}
.mydoc-log li{display:flex;gap:10px;padding:3px 0;font-size:12px;color:var(--ink2);align-items:baseline}
.mydoc-log li.side-you .what{color:var(--ink)}
.mydoc-log .when{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 72px;white-space:nowrap}
.mydoc-hist-now{margin:8px 0 0;font-size:11.5px;color:var(--ink3)}

/* M1 owner admin «Управляющие»: stacked create form + inline row actions */
.toast-err{border-color:var(--crit);color:var(--crit)}
.stack-form{display:flex;flex-direction:column;gap:12px;margin-top:12px;max-width:420px}
.stack-form label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink2)}
.stack-form input,.stack-form select{border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:8px 12px;font-size:13.5px;color:var(--ink)}
.stack-form input:focus,.stack-form select:focus{border-color:var(--accent)}
.stack-form .btn{align-self:flex-start;cursor:pointer;font-family:inherit}
.inline-form{margin:0;flex:none}
.inline-form .btn{cursor:pointer;font-family:inherit}
.btn.danger{color:var(--crit);border-color:var(--crit-bg)}
.btn.danger:hover{background:var(--crit-bg);color:var(--crit)}
.reveal-card{border-color:var(--accent)}
.reveal-secret{display:block;margin-top:10px;padding:10px 14px;border:1px dashed var(--accent);border-radius:8px;background:var(--surface2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--ink);word-break:break-all;user-select:all}

/* ============ PHONE LAYOUT (owner order 2026-07-26) ============
   The portal was laid out for a laptop: at ≤900px the sidebar only shrank to a
   60px icon rail, so on a 375px phone it still ate a sixth of the width while
   its labels vanished. Below 640px the rail UNFOLDS into a horizontal strip
   instead — the content gets the full width back, every tap target reaches the
   44px minimum, form text reaches 16px (below that iOS Safari zooms the page
   on focus) and the obligation rows become cards. Comes AFTER the earlier
   breakpoints on purpose: same specificity, later wins. Desktop is untouched —
   every rule here lives inside the 640px query. */
@media(max-width:640px){
  .app{flex-direction:column}
  .side{width:auto;flex:0 0 auto;height:auto;position:static;top:auto;
        flex-direction:row;align-items:center;gap:8px;
        border-right:none;border-bottom:1px solid var(--line-soft);
        padding:6px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .side .brand{display:flex;flex:none;padding:0 4px 0 2px;align-items:center}
  .side .brand b{display:inline;font-size:16px}
  .side .brand span{display:none}
  /* flex:0 0 auto (never shrink) so a 6-item owner nav overflows the strip and
     SCROLLS instead of squeezing its labels away again. */
  .nav{flex-direction:row;gap:6px;flex:0 0 auto}
  .nav-item{flex:none;justify-content:flex-start;white-space:nowrap;
            min-height:44px;padding:8px 12px;font-size:15px}
  .nav-item span{display:inline}
  .nav-item .bdg{position:static;margin:0 0 0 6px}
  .nav-item[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:2px;width:auto;height:2px}
  .side-foot{display:none}

  .top{padding:10px 14px;gap:10px}
  .screen-title{font-size:17px}
  .content{padding:14px 12px 40px}
  .card{padding:14px;border-radius:12px}
  .card h3{font-size:16px}
  .card .sub{font-size:14px}
  .empty-state{font-size:15px}

  /* touch targets + no iOS zoom-on-focus */
  .btn{min-height:44px;padding:10px 16px;font-size:15px}
  .login-input,.stack-form input,.stack-form select,
  .doc-search input[type="search"],.act-answer textarea{font-size:16px;padding:11px 12px}
  .login-label{font-size:12px}
  .login-submit{width:100%;justify-content:center;min-height:48px;font-size:16px}
  .account-card{max-width:none}
  .account-form{gap:8px}
  .mobile-account{gap:14px}
  .mobile-account a,.mobile-account .logout-btn{min-height:44px;display:inline-flex;align-items:center;font-size:14px}

  /* «Мои документы»: the obligation list becomes cards */
  #screen-my-documents .lrow.mydoc{flex-direction:column;align-items:flex-start;gap:8px;
        border:1px solid var(--line);border-radius:12px;background:var(--surface2);
        padding:14px;margin:0 0 10px}
  #screen-my-documents .lrow.mydoc.is-overdue{background:var(--crit-bg);border-color:var(--crit);
        border-radius:12px;padding:14px;margin:0 0 10px}
  #screen-my-documents .lrow.mydoc>.grow{width:100%}
  #screen-my-documents .badge{font-size:13px;padding:5px 10px}
  #screen-my-documents .ttl{font-size:17px;line-height:1.35}
  #screen-my-documents .mydoc-turn{font-size:16px;color:var(--ink);margin-top:6px;line-height:1.4}
  #screen-my-documents .meta{font-size:15px;margin-top:6px;line-height:1.4}
  #screen-my-documents .mydoc-tally{gap:8px}
  #screen-my-documents .mydoc-hist>summary{font-size:15px;min-height:44px;padding:10px 0}
  #screen-my-documents .mydoc-log li{font-size:15px;padding:5px 0}
  #screen-my-documents .mydoc-log .when{flex:0 0 78px;font-size:13px}
  #screen-my-documents .mydoc-hist-now{font-size:14px}
}