/* Prototype shell: one live phone. On a phone the app fills the screen; on a wide screen it is a 390×844 phone
   with a side panel. Builds on kit.css; section styles live in app/s-*.css. */
html,body{height:100%}
body{margin:0;background:var(--pg-bg);color:var(--pg-ink)}
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:40px;padding-block:24px;padding-inline:16px;box-sizing:border-box}
.stage .intro{max-width:300px}
.stage .intro .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.stage .intro a,.stage .intro button{font:600 14px var(--font);color:var(--pg-ink)}
.stage .intro button{border:0;border-radius:12px;background:var(--pg-card);min-height:44px;padding:0 14px;cursor:pointer}
#ph{width:390px;height:844px;flex:none;max-width:none;touch-action:manipulation}

/* the screen scrolls inside the sheet; a list above a dock scrolls inside .scr */
#ph>.body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#ph>.body:has(>.scr){overflow:hidden}
#ph .scr{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;margin:0 -16px;padding:0 16px 8px}
#ph>.body>.dock{position:relative;z-index:2}
#ph>.tabbar{position:relative;z-index:6}
#ph .fab.float{z-index:7}

/* screen change: a short slide, meaning «deeper» / «back» */
#ph.in-fwd>:is(.hd,.body,.zone,.lgbar){animation:pin-fwd .2s var(--ease) both}
#ph.in-back>:is(.hd,.body,.zone,.lgbar){animation:pin-back .2s var(--ease) both}
@keyframes pin-fwd{from{opacity:0;transform:translateX(24px)}}
@keyframes pin-back{from{opacity:0;transform:translateX(-24px)}}

/* bottom sheet */
.pscrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s var(--ease);z-index:39}
.pscrim.open{opacity:1;pointer-events:auto}
.psheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;z-index:40;background:var(--surface-1);color:var(--ink);border-radius:26px 26px 0 0;box-shadow:0 -12px 32px -12px rgba(0,0,0,.35);display:none;flex-direction:column}
.psheet.open{display:flex}
.psheet.full{top:56px;max-height:none}
.psheet.enter{animation:psheet-in .24s var(--ease) both}
@keyframes psheet-in{from{transform:translateY(40%);opacity:.4}}
.psheet .grab{width:40px;height:5px;border-radius:3px;background:var(--surface-3);margin:8px auto 2px;flex:none}
.psheet .sheet-in{overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.psheet h4{font-size:17px;margin:0}

/* undo toast: low, above the tab bar, clear of the board's main value */
.ptoast{position:absolute;left:16px;right:16px;bottom:24px;z-index:50;background:var(--board);color:var(--board-ink);border-radius:14px;padding:6px 6px 6px 14px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;box-shadow:0 0 0 1px rgba(255,255,255,.14),var(--sh-2);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
#ph.has-tabs .ptoast{bottom:92px}
#ph:has(>.fab.float) .ptoast{right:92px}
#ph:not(.has-tabs):has(>.body>.dock) .ptoast{bottom:88px}
#ph:has(>.psheet.open) .ptoast{bottom:auto!important;top:calc(12px + env(safe-area-inset-top,0px))}
.ptoast.show{opacity:1;transform:none;pointer-events:auto}
.ptoast button{border:0;background:none;color:var(--board-ink);font:700 15px var(--font);min-height:44px;padding:0 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;flex:none}

@media (prefers-reduced-motion:reduce){
  #ph.in-fwd>*,#ph.in-back>*,.psheet.enter{animation:none!important}
  .pscrim,.ptoast{transition:none}
}

/* phone: the app is the screen — no frame, no fake status bar */
@media (max-width:520px){
  .stage{display:block;padding:0}
  .stage .intro{display:none}
  #ph{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
  #ph>.sb{display:none}
  #ph>:is(.hd,.zone,.lgbar):first-of-type,#ph>.sb+*{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  #ph>.tabbar{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  #ph>.body>.dock{padding-bottom:env(safe-area-inset-bottom,0px)}
  #ph.has-tabs>.fab.float,#ph.has-tabs .ptoast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  #ph:not(.has-tabs) .ptoast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* board main value (was local to clients.html) */
.hd .bigv{font:700 26px/1.1 var(--font-d);letter-spacing:-.01em;margin-top:6px}

/* palette sheet (proto.palette) */
.psheet .ppal{display:grid;gap:6px;margin-top:4px}
.psheet .ppal button{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:0;border-radius:14px;background:var(--surface-2);color:var(--ink);font:500 16px var(--font);text-align:left;cursor:pointer}
.psheet .ppal button.on{box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}
.psheet .ppal button>span:nth-child(2){flex:1;min-width:0}
.psheet .ppal .sw{display:flex;flex:none}
.psheet .ppal .sw i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px var(--surface-2)}
.psheet .ppal .sw i+i{margin-left:-6px}
.psheet .ppal [data-i] svg{width:20px;height:20px}

/* Secondary buttons on a white plate were lost against it (owner 27.09, variant А of two compared):
   inside a plate they take the darker tint and drop the shadow; outside plates they stay white. */
#ph .plate .btn.sec{background:var(--surface-3);box-shadow:none}

/* Toasts never block what is under them: only «Отменить» takes taps (sim QA 27.09 — a toast swallowed «Вести» in the calendar). */
#ph .ptoast.show{pointer-events:none}
#ph .ptoast.show button{pointer-events:auto}
/* A floating «＋» must not sit over the last rows: lists under it get room to scroll clear. */
#ph:has(>.fab.float)>.body>.scr::after,#ph:has(>.fab.float)>.body:not(:has(>.scr))::after{content:"";display:block;flex:none;height:84px}
/* Horizontally scrolled chip rows fade at the edge, so a clipped chip reads as «more», not as broken. */
#ph .fchips,#ph .td-qrow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}

/* Screen guide (P.guide): a spotlight on one element and a card next to it. Above sheets and toasts. */
.pguide{position:absolute;inset:0;z-index:80;display:none}
.pguide.open{display:block}
.pguide .g-dim{position:absolute;inset:0;background:rgba(8,10,12,.62)}
.pguide .g-hole{position:absolute;border-radius:16px;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 9999px rgba(8,10,12,.62);transition:all .22s var(--ease);pointer-events:none}
.pguide .g-card{position:absolute;left:16px;right:16px;background:var(--surface-1,#fff);color:var(--ink,#121410);border-radius:18px;padding:14px 16px 10px;box-shadow:0 12px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:6px;animation:gIn .2s var(--ease)}
.pguide .g-card small{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pguide .g-card b{font:700 18px/1.25 var(--font-d);text-wrap:balance}
.pguide .g-card p{margin:0;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.pguide .g-bt{display:flex;align-items:center;gap:6px;margin-top:4px}
.pguide .g-bt span{flex:1}
.pguide .g-bt button{min-height:44px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink-2);font:600 15px var(--font);cursor:pointer}
.pguide .g-bt .g-pri{background:var(--ink);color:var(--surface-1,#fff);padding:0 18px}
@keyframes gIn{from{opacity:0;transform:translateY(6px)}}
.pguide .g-card[style*="translateY(-50%)"]{animation:none}
@media (prefers-reduced-motion:reduce){.pguide .g-hole{transition:none}.pguide .g-card{animation:none}}