/* IAM shell contract. Canonical values live in tokens.css (DESIGN.md). */
button,input,textarea,select{font-family:var(--font-ui)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
.login-motion-btn,.login-motion-label{background:var(--accent)!important;color:var(--on-accent)!important}
.detail-panel:not(.open){visibility:hidden}
.cfp-chip.on{background:var(--accent)!important;color:var(--on-accent)!important}
.cfp-lbl,.cfp-block-t{color:var(--text3)!important}
[data-theme="light"] .cal-ev-title{color:var(--text)!important}
[data-theme="light"] .cal-ev-time{color:var(--text2)!important;opacity:1}
/* One shared frame for every section, including home and both split panes. */
body{
  --shell-panel-top:var(--shell-inset);
  --shell-content-left:calc(var(--shell-inset) + var(--shell-sidebar-width) + var(--shell-gap));
  --shell-content-right:var(--shell-inset);
  --shell-split-width:calc((100vw - var(--shell-inset) * 2 - var(--shell-sidebar-width) - var(--shell-gap) * 2) / 2);
}
#app-sheet,body[data-page="home"] .main-area{
  position:fixed;top:var(--shell-panel-top)!important;
  left:var(--shell-content-left)!important;right:var(--shell-content-right)!important;
  bottom:var(--shell-inset)!important;width:auto!important;height:auto!important;
  border-radius:var(--shell-panel-radius)!important;overflow:hidden;
  /* An inset edge keeps the light workspace distinct without changing its fill. */
  outline:1px solid var(--border);outline-offset:-1px;
}
#app-sheet{display:flex!important;flex-direction:column!important;transform:none!important;background:var(--surface-workspace)!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:none!important}
#app-sheet>.sheet-content{display:flex!important;flex-direction:column;pointer-events:auto!important;padding:var(--shell-control-clearance) 0 0;min-width:0}
body:not([data-page="home"]) .main-area{visibility:hidden}
body[data-page="home"] #app-sheet{display:none!important}
body[data-page="home"] .main-area{padding-left:0;padding-top:var(--shell-control-clearance)}
.sheet-content>.page{padding:28px 32px 40px;scrollbar-width:thin;scrollbar-color:var(--border3) transparent}
.sheet-content>.page::-webkit-scrollbar{display:block;width:6px}
#app-sidebar{top:var(--shell-panel-top);left:var(--shell-inset);bottom:var(--shell-inset);border:1px solid var(--border);border-radius:var(--shell-panel-radius);padding-bottom:max(16px,env(safe-area-inset-bottom));overflow-x:hidden;overscroll-behavior:contain}
#app-sidebar .sb-btn{color:var(--text2);min-height:44px}
#app-sidebar .sb-btn.active{background:var(--accent);color:var(--on-accent)}
#app-sidebar .sb-proj-row,#app-sidebar .sb-sub-row,#app-sidebar .sb-sub-add{color:var(--text2);min-height:44px}
#app-sidebar .sb-proj-row.active,#app-sidebar .sb-sub-row.active{background:var(--accent-bg);color:var(--text)}
#app-sidebar .sb-proj-lbl,#app-sidebar .sb-proj-count,#app-sidebar .sb-proj-arrow{color:var(--text3)}
/* Invisible window-drag area; only the corner controls remain visible. */
#app-topbar-chrome{background:transparent;border:0}
/* Native traffic lights end above this edge; browser panels keep their 12px inset. */
@media(min-width:761px){
  html[data-shell-host="macos"] body:not(.pane2){--shell-panel-top:var(--shell-topbar-height);--shell-control-clearance:0px}
}
#app-menu-toggle,#app-menu-backdrop{display:none}
body:not(.authed) #app-menu-toggle{display:none}
#split-toggle{top:0;right:12px;z-index:1250;width:44px;height:44px;border:0;background:none;color:var(--text2);-webkit-app-region:no-drag}
body.split-mode{--shell-content-right:calc(var(--shell-inset) + var(--shell-split-width) + var(--shell-gap))}
body.split-mode #app-sheet{left:var(--shell-content-left)!important;right:var(--shell-content-right)!important}
body.split-mode #split-toggle{left:auto;right:12px;transform:none}
#split-pane{top:var(--shell-panel-top);right:var(--shell-inset);bottom:var(--shell-inset);width:var(--shell-split-width);height:auto;z-index:960;border:0;border-radius:var(--shell-panel-radius);overflow:hidden;outline:1px solid var(--border);outline-offset:-1px;background:var(--surface-workspace)}
/* The parent iframe frame supplies its outer radius and inset: do not double them. */
body.pane2{--shell-sidebar-width:0px;--shell-topbar-height:44px;--shell-inset:0px;--shell-content-left:0px;--shell-panel-radius:0px;--shell-panel-top:var(--shell-topbar-height);--shell-control-clearance:0px}
.pane2 #app-sidebar{top:calc(var(--shell-topbar-height) + var(--shell-drawer-inset));left:var(--shell-drawer-inset);bottom:var(--shell-drawer-inset);width:min(250px,calc(100vw - var(--shell-drawer-inset) * 2));border-radius:var(--shell-drawer-radius);transform:translateX(calc(-100% - var(--shell-drawer-inset)));z-index:1250;transition:transform .2s}
.pane2.app-menu-open #app-sidebar{transform:translateX(0)}
.pane2 #app-menu-toggle{display:block}
.pane2 #app-topbar-chrome{padding-top:0}
.pane2 #app-menu-backdrop{z-index:1240}
.pane2.app-menu-open #app-menu-backdrop{display:block}
.pane2 .trail-board{grid-template-columns:repeat(2,minmax(0,1fr))}
.pane2 .trail-intro{flex-wrap:wrap}
/* The same surfaces must not force dark panels when the theme changes. */
[data-theme="light"] .fg-sheet,[data-theme="light"] .sec-sheet,[data-theme="light"] .modal,[data-theme="light"] .ctx-menu,[data-theme="light"] .cal-filter-pop{color:var(--text)!important;border-color:var(--border2)!important;box-shadow:0 20px 60px #20212620!important}
[data-theme="light"] .t-name,[data-theme="light"] .cl-chip-title,[data-theme="light"] .cl-popup-title{color:var(--text)!important}
[data-theme="light"] .anim-check-box.checked{background:var(--accent)!important;border-color:var(--accent)!important}
[data-theme="light"] .anim-check-box.checked .anim-check-path{stroke:var(--on-accent)!important}
[data-theme="light"] .task-check{border-color:var(--border3)!important}
[data-theme="light"] .note-card:hover,[data-theme="light"] .fg-card:hover{background:var(--surface-hover)!important}
[data-theme="light"] .prof-wall{display:none}
.sec-title{font-family:var(--font-display)}
.prof-wall .fg-blob{background:var(--accent);opacity:.025}
#page-calendar .cal-mc.today{background:var(--accent-bg)}
.cal-col-day .cal-dn{color:var(--text)!important}
#page-trail .sec-title{color:var(--text)!important}
/* Midnight surface map. Keep the legacy dark/light rules and all geometry intact. */
[data-theme="midnight"] :is(#app-sheet,#split-pane,.main-area,#page-home){background:var(--workspace-image),var(--surface-workspace)!important}
[data-theme="midnight"] #page-trail{background:transparent}
[data-theme="midnight"] :is(.sheet-wall,.cal-wall,.prof-wall){display:none}
[data-theme="midnight"] :is(
  #app-sidebar,.task-wrap,.task-accordion,.task-row.editing-inline,
  .note-card.expanded,.note-card.expanded:hover,.fx-block.open,.fx-block.open:hover,
  .trail-month,.login-box
){background:var(--surface-panel)!important}
/* One continuous gradient across the expanded task, not a new gradient per child. */
[data-theme="midnight"] :is(#app-sheet,.fg-sheet,.sec-sheet) .task-wrap :is(.task-row,.task-row:hover,.task-accordion){background:transparent!important}
[data-theme="midnight"] #page-checklist .note-card.expanded{background:var(--surface-panel)!important}
[data-theme="midnight"] #app-sidebar .sb-btn.active{background:var(--surface-selection);color:var(--text)}
[data-theme="midnight"] #app-sidebar .sb-btn:not(.active):hover{background:var(--accent-bg)}
/* Workflow reference: a separate header and a full-bleed, dotted canvas.
   The existing workspace haze remains visible; nothing changes on other routes. */
body[data-page="workflow"] #app-sheet>.sheet-content{padding-top:0}
body[data-page="workflow"] #app-sheet>.bn-wrap{display:none}
.sheet-content>#page-workflow{padding:0;min-height:0;overflow:hidden}
.sheet-content>#page-workflow.active{display:flex;flex-direction:column}
.workflow-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;flex-shrink:0;padding:24px 32px;border-bottom:1px solid var(--workflow-header-border)}
#page-workflow .workflow-title{font-size:22px;font-weight:600;letter-spacing:-.5px;text-transform:none;color:var(--text)}
.workflow-canvas{
  position:relative;overflow:clip;isolation:isolate;flex:1;min-height:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  background-image:radial-gradient(circle,var(--workflow-grid-color) var(--workflow-grid-dot-size,1px),transparent var(--workflow-grid-dot-size,1px));
  background-size:calc(var(--workflow-grid-size) * var(--workflow-zoom,1)) calc(var(--workflow-grid-size) * var(--workflow-zoom,1));
  background-position:var(--workflow-pan-x,0px) var(--workflow-pan-y,0px);
}
.workflow-canvas.is-panning{cursor:grabbing}
.workflow-canvas:focus-visible{outline-offset:-3px}
.workflow-context-menu[hidden]{display:none!important}
.workflow-context-menu:not([hidden]){display:block;min-width:210px;max-width:calc(100vw - 16px)}
.workflow-context-menu .ctx-menu-item{width:100%;min-height:40px;border:0;background:transparent;font-family:var(--font-ui);text-align:left;white-space:nowrap}
.workflow-context-menu .ctx-menu-item:hover{background:rgba(var(--ink-rgb),.06)}
.workflow-context-plus{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:21px;font-weight:400;line-height:1;flex-shrink:0}
/* Three choices fit within the existing settings row, also on narrow phones. */
.bn-theme-toggle{flex-wrap:wrap}
@media(max-width:1100px){:root{--shell-sidebar-width:220px}.sheet-content>.page{padding:24px}.workflow-header{padding:24px}}
@media(max-width:760px){
  .workflow-header{padding:22px 16px}
  :root{--shell-sidebar-width:0px;--shell-topbar-height:calc(52px + env(safe-area-inset-top,0px));--shell-inset:8px;--shell-panel-radius:20px}
  body:not(.pane2){--shell-content-left:var(--shell-inset);--shell-panel-top:calc(var(--shell-topbar-height) + var(--shell-inset));--shell-control-clearance:0px}
  html,body,.app{height:100dvh}
  #app-topbar-chrome{padding-top:env(safe-area-inset-top,0px)}
  #app-menu-toggle{display:block}
  #app-sidebar{width:min(300px,calc(100vw - 56px));z-index:1250;transform:translateX(calc(-100% - var(--shell-inset)));transition:transform .2s ease}
  body.app-menu-open #app-sidebar{transform:translateX(0)}
  body.app-menu-open #app-menu-backdrop{display:block}
  .sheet-content>.page{padding:22px 16px calc(28px + env(safe-area-inset-bottom,0px))}
  .sec-hdr{gap:12px;flex-wrap:wrap;margin-bottom:20px}
  .sec-actions{flex-wrap:wrap}
  .detail-panel{max-width:100vw;width:100vw}
  .modal{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 32px);overflow:auto}
  .fg-sheet,#sec-sheet,#blk-sheet{left:8px!important;right:8px!important;width:auto!important;max-width:calc(100vw - 16px)!important;border-radius:24px!important;transform:none!important}
  .cl-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-name{overflow-wrap:anywhere;min-width:0}
  .task-row{min-height:52px}
  .sec-ico-btn,.tsk-action-btn,.acc-tb-btn,.cl-popup-x,.fx-x,.re-btn,.cal-arrow{min-width:44px;min-height:44px}
  .cfp-chip,.cfp-save,.cfp-cancel,#cfp-when{min-height:44px}
  input,textarea,select{font-size:16px!important}
  .cal-mc{min-height:72px;padding:4px}
  .cal-mc-day{font-size:12px}
  .cal-hdr{flex-wrap:wrap!important;gap:10px!important}
  .cal-hdr-left{flex-basis:100%;justify-content:space-between}
  .cal-hdr-title{overflow:visible;white-space:normal;text-align:center}
}
#app-menu-toggle{position:absolute;left:8px;bottom:4px;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--text);font-size:22px;cursor:pointer;-webkit-app-region:no-drag}
#app-menu-backdrop{position:fixed;inset:var(--shell-topbar-height) 0 0;z-index:1240;background:#0007;border:0}
@media(hover:none){.app-sheet .task-accordion .anim-check-wrap>button{opacity:1}.task-check{position:relative}.task-check::before{content:'';position:absolute;inset:-12px}.acc-tb-btn,.fx-x{opacity:1!important}}
/* «Новый» дизайн анимируется независимо от настройки системы — решение владельца 30.10 (mn1) */