/* The workspace frame (scr §2, CONCEPT.md §5): a left panel that never grows, the page beside it.
   The panel width comes from --side-w; up to 1000 px the panel is a sheet behind the menu button, a phone gets a
   bottom bar. Colours come from theme.css only. */
:root { --side-w: 240px; --bottom-h: 60px; }
:root:has(.shell-app.is-rail) { --side-w: 60px; }

.shell-app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; background: var(--background); }
.shell-page { min-width: 0; }
.shell-topbar { display: none; }
.shell-page .w-main { max-width: 1104px; } /* one width for every page, so the left edge does not move between them */

/* ---------- Panel ---------- */
.shell-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 12px 12px 10px; background: var(--panel); z-index: 20; }
.shell-top { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 2px 0 6px; margin-bottom: 12px; }
.shell-top .w-brand { min-width: 0; gap: 9px; text-decoration: none; }
.shell-top .w-brand-mark { width: 24px; height: 24px; }
.shell-top .w-brand-word { height: 15px; }
.shell-toggle { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--muted-foreground); opacity: 0; transition: background-color .14s; }
.shell-side:hover .shell-toggle, .shell-toggle:focus-visible { opacity: 1; }
.shell-toggle:hover { background: var(--hover); color: var(--foreground); }
.shell-toggle .w-i { width: 16px; height: 16px; }

/* The one field: it finds and it asks. */
.shell-find { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 8px 0 10px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--control-edge); color: var(--muted-foreground); font-size: 13.5px; text-align: left; transition: box-shadow .14s, color .14s; }
.shell-find:hover { box-shadow: 0 0 0 1px var(--border-strong); color: var(--body); }
.shell-find.is-on { box-shadow: 0 0 0 1px var(--accent); color: var(--accent-ink); }
.shell-find .w-i { width: 15px; height: 15px; flex-shrink: 0; }
.shell-find .shell-label { flex: 1; }
.shell-find kbd { flex: none; padding: 0 5px; border: 0; background: var(--secondary); border-radius: 5px; font: inherit; font-size: 11px; line-height: 18px; color: var(--muted-foreground); }

.shell-line { position: relative; }
.shell-row, .shell-new { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 9px; border-radius: 9px; color: var(--body); font-size: 14px; text-align: left; text-decoration: none; transition: background-color .12s, color .12s; }
.shell-row:hover, .shell-new:hover { background: var(--hover); color: var(--foreground); }
.shell-row .w-i, .shell-new .w-i { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-foreground); }
.shell-row.is-on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 530; }
.shell-row.is-on .w-i { color: var(--accent-ink); }
.shell-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-count { flex-shrink: 0; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.shell-late { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--late); }
.shell-new { margin-top: 6px; }
.shell-pop { display: block; }
.shell-pop .w-pop { top: calc(100% + 4px); left: 0; }
.shell-pop-up { display: block; }
.shell-pop-up .w-pop { top: auto; bottom: calc(100% + 6px); left: 0; }
.shell-mi-hint { display: block; font-size: 12.5px; line-height: 16px; color: var(--muted-foreground); }
.shell-core { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }

/* What the person keeps at hand; it scrolls inside itself, so the foot never moves. */
.shell-pins { flex: 1; min-height: 0; overflow-y: auto; margin: 20px -12px 6px; padding: 0 12px; }
.shell-gap { flex: 1; }
.shell-title { padding: 0 9px; margin-bottom: 4px; font-size: 12.5px; line-height: 20px; color: var(--muted-foreground); }
.shell-hint { margin: 0; padding: 2px 9px; font-size: 12.5px; line-height: 18px; color: var(--muted-foreground); }
.shell-hint .w-i { width: 12px; height: 12px; vertical-align: -1px; }
.shell-line.is-pin .shell-row { font-size: 13.5px; height: 32px; }
/* «Настроить»: each pin gets Выше / Ниже / Открепить at its right edge; the title stays clickable left of them. */
.shell-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shell-title-act { padding: 0 4px; border-radius: 6px; font-size: 12.5px; line-height: 20px; color: var(--muted-foreground); }
.shell-title-act:hover, .shell-title-act[aria-pressed="true"] { color: var(--foreground); background: var(--hover); }
.shell-pins.is-editing .shell-line.is-pin { display: flex; align-items: center; }
.shell-pins.is-editing .shell-line.is-pin .shell-row { flex: 1; min-width: 0; }
/* With the three tools beside it a name has half a line: it takes two lines instead of being cut to a word. */
.shell-pins.is-editing .shell-line.is-pin .shell-row { height: auto; min-height: 32px; padding-block: 5px; }
.shell-pins.is-editing .shell-line.is-pin .shell-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 18px; }
.shell-pin-tools { display: flex; align-items: center; flex-shrink: 0; }
.shell-pin-tool { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--muted-foreground); }
.shell-pin-tool .w-i { width: 14px; height: 14px; }
.shell-pin-tool:hover:not(:disabled) { background: var(--hover); color: var(--foreground); }
.shell-pin-tool:disabled { opacity: .35; cursor: default; }
.shell-pin-btn.is-on { color: var(--accent-ink); }
@media (max-width: 1000px) { .shell-pin-tool { width: 40px; height: 44px; } }
.shell-foot { display: flex; flex-direction: column; gap: 1px; }
.shell-foot .shell-row { font-size: 13.5px; height: 32px; }
.shell-me { color: var(--foreground); }
.shell-me .w-av { flex-shrink: 0; }
/* The person and, under them, the open organization: two lines, so the row is taller than the others. */
.shell-foot .shell-me { height: 40px; }
.shell-me-text { display: flex; flex-direction: column; line-height: 18px; }
.shell-me-text > * { overflow: hidden; text-overflow: ellipsis; }
.shell-me-org { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted-foreground); }

/* Folded into icons: five sections and nothing else. */
.is-rail .shell-side { align-items: center; padding-inline: 8px; }
.is-rail .shell-label, .is-rail .shell-count, .is-rail .shell-find kbd, .is-rail .w-brand-word { display: none; }
.is-rail .shell-top { flex-direction: column; height: auto; gap: 6px; padding: 0; }
.is-rail .shell-toggle { opacity: 1; }
.is-rail .shell-find, .is-rail .shell-row, .is-rail .shell-new { width: 40px; height: 36px; padding: 0; justify-content: center; }
.is-rail .shell-new { margin-top: 4px; }
.is-rail .shell-core { align-items: center; }

/* A page whose screen comes in a later package. */
.w-page-stub { padding-top: 8px; }
.w-page-stub .w-h1 { margin-bottom: 16px; }
.shell-find-failed { font-size: 13px; }

/* ---------- The sheet (761–1000 px and the phone) and the bottom bar ---------- */
.shell-bottom { display: none; }
.shell-scrim { display: none; }
@media (max-width: 1000px) {
  :root { --side-w: 0px; }
  .shell-app { display: block; }
  .shell-topbar { display: block; }
  .shell-topbar .w-header-in { flex-wrap: nowrap; gap: 4px; min-height: 52px; padding: 0 8px; }
  .shell-topbar .w-header-title { display: block; font-size: 15px; font-weight: 560; }
  .shell-topbar-brand { display: none; }
  .shell-topbar-menu { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--body); }
  .shell-topbar-menu:hover { background: var(--hover); }
  .shell-topbar .w-search-pill { width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; }
  .shell-side { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); visibility: hidden; transition: transform .2s cubic-bezier(.2, .7, .2, 1), visibility .2s; z-index: 41; box-shadow: var(--w-sheet-shadow); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .shell-side.is-open { transform: none; visibility: visible; }
  .shell-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: var(--w-scrim); }
  .shell-toggle { display: none; }
  .shell-find kbd { display: none; }
  .shell-find { height: 44px; font-size: 15px; }
  .shell-row, .shell-new, .shell-line.is-pin .shell-row, .shell-foot .shell-row { height: 44px; font-size: 15px; }
}
@media (max-width: 760px) {
  .shell-topbar .w-header-title { display: block; padding-left: 8px; }
  .shell-topbar-brand { position: relative; display: inline-flex; margin-left: 8px; }
  .shell-topbar-brand::before { content: ""; position: absolute; inset: -8px; } /* the mark stays 28 px, the finger gets 44 */
  .w-header.shell-topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--background); } /* a blurred bar would become the frame of a menu sheet inside it */
  .shell-page:has(.w-main h1) .shell-topbar .w-header-title { display: none; } /* the page says its name in its heading */
  .shell-topbar-menu, .shell-topbar .w-search-pill { display: none; } /* the bottom bar has both */
  .w-pop { z-index: 36; } /* a menu becomes a bottom sheet here: it lies over the bottom bar */
  .w-header.shell-topbar:has(.w-pop) { z-index: 31; } /* «+»'s sheet lies in the bar's stacking context: under the bottom bar its last row was hidden */
  .shell-pop .w-pop, .shell-pop-up .w-pop { top: auto; bottom: 8px; left: 8px; right: 8px; }
  .shell-find, .shell-line.is-in-bar { display: none; } /* «Ещё» holds what the bottom bar has no room for, not the bar again */
  .shell-side { top: auto; width: auto; right: 0; max-height: 86dvh; overflow-y: auto; border-radius: 20px 20px 0 0; transform: translateY(102%); }
  .shell-side.is-open { transform: none; }
  .shell-top { display: none; }
  .shell-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 4px max(4px, env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); }
  .shell-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 48px; border-radius: 10px; font-size: 11px; line-height: 14px; color: var(--muted-foreground); text-decoration: none; }
  .shell-tab .w-i { width: 20px; height: 20px; }
  .shell-tab.is-on { color: var(--accent-ink); }
  .shell-page .w-main { padding-bottom: calc(var(--bottom-h) + 32px); }
}
@media (prefers-reduced-motion: reduce) { .shell-side { transition: none; } }
/* WP17: the banner of the planned unavailability, one line over every page (r1 R1.14) */
.shell-maintenance { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 32px; border-bottom: 1px solid var(--border); background: var(--warning-bg); color: var(--foreground); font-size: 14px; line-height: 20px; }
.shell-maintenance .w-i { flex-shrink: 0; color: var(--warning); }
@media (max-width: 760px) { .shell-maintenance { padding: 8px 16px; } }