:root {
  --pl-owner:#5FD068; --pl-overseer:#D3F5D3; --pl-aioverseer:#5ED6CC; --pl-domain:#FF9F45; --pl-job:#CCF7F7; --pl-humanjob:#FFC9C9;
  --pl-node-ink:#1F1E1B; --pl-edge:#6F6A62;
  --pl-done:#15803D; --pl-progress:#2563EB; --pl-blocked:#DC2626; --pl-notstarted:#8A857C;
  /* D85, drawing 1: each department its own colour, a thin outline; Management is the page's ink. */
  --dp-management:var(--ink); --dp-product:#0E7C7B; --dp-marketing:#B45309; --dp-legal:#1E3A8A; --dp-finance:#15803D;
  --dp-people:#BE185D; --dp-support:#6D28D9; --dp-own:#C2410C;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --pl-owner:#3E9E46; --pl-overseer:#9FD9A0; --pl-aioverseer:#3FB3AA; --pl-domain:#E0842E; --pl-job:#9FE3E3; --pl-humanjob:#F2A9A9;
    --pl-node-ink:#141311; --pl-edge:#A39E95;
    --pl-done:#16A34A; --pl-progress:#2563EB; --pl-blocked:#DC2626; --pl-notstarted:#78726A;
    --dp-product:#2DD4BF; --dp-marketing:#FBBF24; --dp-legal:#60A5FA; --dp-finance:#4ADE80;
    --dp-people:#F472B6; --dp-support:#A78BFA; --dp-own:#FB923C;
  }
}
:root[data-theme="dark"] {
    --pl-owner:#3E9E46; --pl-overseer:#9FD9A0; --pl-aioverseer:#3FB3AA; --pl-domain:#E0842E; --pl-job:#9FE3E3; --pl-humanjob:#F2A9A9;
    --pl-node-ink:#141311; --pl-edge:#A39E95;
    --pl-done:#16A34A; --pl-progress:#2563EB; --pl-blocked:#DC2626; --pl-notstarted:#78726A;
    --dp-product:#2DD4BF; --dp-marketing:#FBBF24; --dp-legal:#60A5FA; --dp-finance:#4ADE80;
    --dp-people:#F472B6; --dp-support:#A78BFA; --dp-own:#FB923C;
  }
.planbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:.9rem 0; }
.planbar .projtitle { flex:1 1 12rem; min-width:0; text-align:center; }
.planbar .projname { margin:0; font-size:1.15rem; }
/* The project's goal in short (D72 round): thinner and smaller, one line, "…" opens the rest. */
.projgoal { display:flex; justify-content:center; align-items:baseline; gap:.3rem; margin:.15rem auto 0; max-width:46rem; font-size:.8rem; font-weight:300; color:var(--ink-2); }
.projgoal .goaltext { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.projgoal.expanded .goaltext { white-space:normal; overflow:visible; }
button.goalmore { flex:none; font:inherit; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; padding:0 .45rem; min-height:1.6rem; min-width:2rem; cursor:pointer; }
button.goalmore:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* D72: low and optional jobs are drawn muted, lighter and dashed. */
svg.plantree .node.optional .body { fill-opacity:.3; stroke-dasharray:3 3; stroke-width:1.5; }
svg.plantree .node.optional text { opacity:.7; }
svg.plantree .node.optional .mark { opacity:.6; }
.prio { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px dashed var(--hairline-strong); border-radius:999px; padding:0 .4rem; margin-left:.3rem; }
.planbar .barright { display:flex; gap:.5rem; align-items:center; }
.pocline { font-size:.82rem; color:var(--ink-2); margin:0 0 .9rem; }
main.app.wrap.planwrap { max-width:1760px; }
/* D85, drawing 1: the Workbench on the left, the whole project in the middle, your jobs and the walls on the
   right. The page's order stays graph, Workbench, walls, so a phone and a screen reader meet the graph first. */
.plangrid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,.9fr); grid-template-areas:"detail tree wall"; gap:1rem; align-items:stretch; margin-bottom:2rem; }
.plangrid > .treepanel { grid-area:tree; }
.plangrid > .detailpanel { grid-area:detail; }
.plangrid > .wallpanel { grid-area:wall; }
.plangrid.treemax { grid-template-areas:"tree tree tree" "detail detail wall"; }
/* Side by side, the Workbench and the walls are exactly as tall as the tree panel, whatever they hold: their
   own content never sets the row's height (contain:size), and what does not fit scrolls inside them. */
@media (min-width: 1001px) { .plangrid:not(.treemax) > .detailpanel, .plangrid:not(.treemax) > .wallpanel { contain:size; max-height:none; } }
/* On a computer the three panels fit one screen (Ofir, 2026-10-29: "it all need to fit into a screen"): the row is
   the window's height, and the tree, like the Workbench and the walls, scrolls inside its own panel, its key under it. */
@media (min-width: 1001px) {
  .plangrid:not(.treemax) { height:calc(100dvh - 1.5rem); min-height:30rem; grid-template-rows:minmax(0,1fr); }
  .plangrid:not(.treemax) > .treepanel { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  .plangrid:not(.treemax) > .treepanel > #treeslot { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
  .plangrid:not(.treemax) svg.plantree { flex:1 1 0; min-height:16rem; height:auto; }
  .plangrid:not(.treemax) .legend { flex:none; }
}
/* The tree panel's one top row: its name, which part, the counts and the zoom. */
.treepanel > .panelhead { flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start; gap:.4rem .6rem; margin-bottom:.5rem; }
.treebar { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; flex:1 1 auto; min-width:0; }
.treebar .where { display:flex; align-items:center; gap:.5rem; flex:0 1 auto; min-width:0; }
.treebar .whowrap { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.treebar .tabs, .treebar .treetools { margin:0; }
.treebar .treetools { flex:1 1 auto; }
.treebar .treecount { white-space:nowrap; }
.plangrid.treemax svg.plantree { height:78vh; }
/* The Team tree's top row (drawing 2): "<", where you are ("Team tree › Product"), whose work, the zoom. */
button.backbtn { font:inherit; font-weight:700; font-size:1rem; min-width:2.4rem; height:2.4rem; border:1px solid var(--ink-2); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
button.backbtn[hidden] { display:none; }
button.backbtn:focus-visible, button.crumb:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
nav.crumbs { flex:0 1 auto; min-width:0; }
nav.crumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:0 .3rem; list-style:none; margin:0; padding:0; font-size:.92rem; }
nav.crumbs li { display:inline-flex; align-items:center; min-width:0; max-width:100%; }
nav.crumbs li + li::before { content:"›"; color:var(--ink-2); margin-right:.3rem; }
button.crumb { font:inherit; color:var(--link); background:none; border:0; padding:0 .1rem; text-decoration:underline; cursor:pointer; min-height:2.2rem; max-width:13rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crumbnow { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whosep { color:var(--ink-2); }
.whowrap select.whopick { max-width:12rem; font-size:.85rem; }
/* u26: a member with no seat is told why the whole project is shown. */
.plangrid p.seatnote { margin:0 0 .45rem; }
button.maxbtn { font:inherit; font-size:.85rem; min-width:2.2rem; height:2.2rem; border:1px solid var(--hairline-strong); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
.plangrid > .panel { padding:1rem; min-width:0; }
.plangrid .panelhead h2 { font-size:1.05rem; }
/* Bounded, each with its own scroll (Ofir, 2026-10-11: "need to be scrollable - not infinite size"): the
   walls and the workbench never grow the page without end. Their heads stay in sight while they scroll. */
.plangrid > .detailpanel, .plangrid > .wallpanel { max-height:min(85vh,52rem); overflow-y:auto; overscroll-behavior:contain; }
.plangrid > .detailpanel > .panelhead, .plangrid > .wallpanel > .panelhead { position:sticky; top:-1rem; z-index:1; background:var(--card); margin:-1rem -1rem 0; padding:1rem 1rem .5rem; border-bottom:1px solid var(--hairline); }
.tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .7rem; }
.tabs button { font:inherit; font-size:.82rem; color:var(--ink-2); background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; padding:.3rem .75rem; cursor:pointer; min-height:2.2rem; }
.tabs.lefttabs { gap:.25rem; }
.tabs.lefttabs button { padding:.3rem .45rem; font-size:.78rem; white-space:nowrap; }
.wallpanel .morebtn { margin:.1rem 0 .3rem; }
.tabs button[aria-selected="true"] { color:var(--bg); background:var(--ink); border-color:var(--ink); }
.treetools { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.5rem; }
.treetools select { font:inherit; font-size:.85rem; padding:.25rem .4rem; border-radius:6px; max-width:100%; }
.treetools .zoom { margin-left:auto; display:flex; gap:.3rem; }
.treetools .zoom button { font:inherit; font-size:.85rem; min-width:2.2rem; height:2.2rem; border:1px solid var(--hairline-strong); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
svg.plantree { display:block; width:100%; height:min(70vh,620px); background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius); touch-action:none; cursor:grab; user-select:none; }
svg.plantree.dragging { cursor:grabbing; }
/* One column of circles on a phone: as tall as it is drawn, and the page scrolls past it. */
/* The whole project is about as tall as it is wide: its panel gives it the room. */
svg.plantree.circles { height:min(76vh,700px); }
/* Drawing 3: square brackets from the parent down, no arrowheads. */
svg.plantree .edge { fill:none; stroke:var(--pl-edge); stroke-width:2; stroke-linejoin:miter; }
svg.plantree .edge.link { stroke-width:1.3; opacity:.75; }
/* D117 (u30): the "Links" switch and its waits lines, in the page's ink and dashed, so they are never read as the
   tree's square brackets; a line to a job done is faint, the picked job's lines bold. */
button.linksbtn { font:inherit; font-size:.85rem; display:inline-flex; align-items:center; gap:.35rem; height:2.2rem; padding:0 .6rem; border:1px solid var(--hairline-strong); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
button.linksbtn[aria-pressed="true"] { color:var(--bg); background:var(--ink); border-color:var(--ink); }
button.linksbtn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
svg.linksicon { width:1.1rem; height:1rem; fill:currentColor; stroke:currentColor; }
svg.linksicon path { fill:none; stroke-width:1.6; stroke-dasharray:2.4 1.6; }
.plangrid p.linksay { margin:0 0 .45rem; font-size:.82rem; }
svg.plantree .waitline { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:5 3; opacity:.8; }
svg.plantree .waitdot { fill:var(--ink); opacity:.8; }
svg.plantree .waitline.met, svg.plantree .waitdot.met { opacity:.3; }
svg.plantree .waitline.hot { stroke-width:3; opacity:1; }
svg.plantree .waitdot.hot { opacity:1; }
svg.plantree .waitstub { cursor:pointer; }
svg.plantree .waitstub rect { fill:var(--card); stroke:var(--ink); stroke-width:1.2; stroke-dasharray:3 2; }
svg.plantree .waitstub .stubline { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-dasharray:3 2; }
svg.plantree .waitstub text { fill:var(--ink); font-weight:600; }
svg.plantree .waitstub.met { opacity:.5; }
svg.plantree .waitstub.hot rect { stroke-width:2.4; stroke-dasharray:none; }
svg.plantree .waitstub:focus { outline:none; }
svg.plantree .waitstub:focus-visible rect { stroke:var(--focus); stroke-width:3; stroke-dasharray:none; }
svg.plantree .waitcount rect { fill:var(--card); stroke:var(--ink); stroke-width:1.2; }
svg.plantree .waitcount text { fill:var(--ink); font-weight:600; }
/* D129: only the focused node's lines are drawn, the same width on the screen at any zoom; every node with links
   carries a chip with its count, filled while its lines are drawn. */
svg.plantree .waitline { vector-effect:non-scaling-stroke; stroke-width:2; opacity:.9; }
svg.plantree .waitchip { pointer-events:none; }
svg.plantree .waitchip rect { fill:var(--card); stroke:var(--ink); stroke-width:1.2; stroke-dasharray:2.4 1.6; }
svg.plantree .waitchip text { fill:var(--ink); font-weight:600; text-anchor:middle; }
svg.plantree .waitchip.hot rect { fill:var(--ink); stroke-dasharray:none; }
svg.plantree .waitchip.hot text { fill:var(--bg); }
.legend .sw.waitsw { width:1.4rem; height:0; border:0; border-top:2px dashed var(--ink); border-radius:0; position:relative; }
.legend .sw.waitsw::after { content:""; position:absolute; right:-3px; top:-4.5px; width:6px; height:6px; border-radius:50%; background:var(--ink); }
.legend .stubsw { font-weight:600; color:var(--ink); border:1px dashed var(--ink); border-radius:8px; padding:0 .35rem; font-size:.72rem; }
.pathlist { display:inline-flex; flex-wrap:wrap; gap:.2rem .4rem; }
.pathlist code { overflow-wrap:anywhere; }
svg.plantree .node { cursor:pointer; }
svg.plantree .node .body { stroke:var(--pl-edge); stroke-width:2.5; }
svg.plantree .node.unvisited .body { stroke-dasharray:6 4; fill-opacity:.4; }
svg.plantree .node.selected .body { stroke:var(--ink); stroke-width:5; }
svg.plantree .node:focus { outline:none; }
svg.plantree .node:focus-visible .body { stroke:var(--focus); stroke-width:5; stroke-dasharray:none; }
svg.plantree text { font-family:var(--font-body); fill:var(--ink); text-anchor:middle; pointer-events:none; }
svg.plantree text.pct, svg.plantree text.unf { fill:var(--ink-2); font-size:11px; }
svg.plantree text.unf { font-style:italic; }
svg.plantree text.cardtxt, svg.plantree text.start { text-anchor:start; }
svg.plantree text.cardtxt { fill:var(--pl-node-ink); }
svg.plantree text.cardtxt.sub { fill:var(--pl-node-ink); opacity:.8; }
svg.plantree .node.card.selected .body, svg.plantree .node.card:focus-visible .body { stroke-width:3.5; }
/* A card's words are dark on its own light fill in both themes, so the fill never fades: a job not started
   is dashed, an optional or low one is the whole card faded. */
svg.plantree .node.card.unvisited .body, svg.plantree .node.card.optional .body { fill-opacity:1; }
svg.plantree .node.card.optional { opacity:.62; }
svg.plantree .node.card.optional text, svg.plantree .node.card.optional .mark { opacity:1; }
svg.plantree .node.outside .body { fill-opacity:.35; stroke-dasharray:2 3; }
svg.plantree .k-owner .body { fill:var(--pl-owner); }
svg.plantree .k-overseer .body { fill:var(--pl-overseer); }
svg.plantree .k-aioverseer .body { fill:var(--pl-aioverseer); }
svg.plantree .k-domain .body, svg.plantree .k-sub-domain .body { fill:var(--pl-domain); }
svg.plantree .k-job .body { fill:var(--pl-job); }
svg.plantree .k-humanjob .body { fill:var(--pl-humanjob); }
/* The departments (D85, drawing 1): thin coloured outlines, a faint wash of their colour, the words in ink. */
.dept-management { --dp:var(--dp-management); } .dept-product { --dp:var(--dp-product); } .dept-marketing { --dp:var(--dp-marketing); }
.dept-legal { --dp:var(--dp-legal); } .dept-finance { --dp:var(--dp-finance); } .dept-people { --dp:var(--dp-people); }
.dept-support { --dp:var(--dp-support); } .dept-own { --dp:var(--dp-own); }
svg.plantree .k-department .body { fill:var(--dp, var(--pl-domain)); }
svg.plantree.circles .node.dept > .body { fill:var(--dp); fill-opacity:.07; stroke:var(--dp); stroke-width:2; }
svg.plantree.circles .node.dept.centre > .body { stroke-width:2.6; }
svg.plantree.circles .node.topic > .body { fill:var(--dp); fill-opacity:.14; stroke:var(--dp); stroke-width:1.4; }
svg.plantree.circles .node.topic.goal > .body { fill:var(--ink); fill-opacity:.1; stroke:var(--ink); stroke-width:2; }
svg.plantree.circles .node.selected > .body { stroke:var(--ink); stroke-width:3.5; }
svg.plantree.circles .node:focus-visible > .body { stroke:var(--focus); stroke-width:3.5; stroke-dasharray:none; }
svg.plantree.circles .node.unvisited > .body { stroke-dasharray:5 4; }
/* A department with no work yet keeps its place, small and dim (Ofir, 2026-10-18). */
svg.plantree.circles .node.dept.empty { opacity:.6; }
svg.plantree.circles .node.dept.empty > .body { fill-opacity:.03; stroke-width:1.4; }
svg.plantree.circles .node.dept.empty:hover, svg.plantree.circles .node.dept.empty:focus-visible { opacity:.9; }
svg.plantree.circles .node.dept:hover > .body { fill-opacity:.12; }
svg.plantree.circles .node.topic:hover > .body { fill-opacity:.26; }
svg.plantree .dot { fill:var(--s); }
.legend .sw.ring { border:2px solid var(--ink-2); background:transparent; width:1rem; height:1rem; }
.legend .sw.ring.small { width:.7rem; height:.7rem; border-width:1.5px; }
.s-done { --s:var(--pl-done); } .s-in-progress { --s:var(--pl-progress); } .s-blocked { --s:var(--pl-blocked); } .s-not-started { --s:var(--pl-notstarted); }
/* D104, D107 (the review's finding 4): a job closed without being done, and an idea on the shelf, in the not-started grey; a closed card faded. */
.s-closed, .s-shelf { --s:var(--pl-notstarted); }
/* D112 (w6): a wall for later or next waits in grey; only a wall for now is red. */
.s-waiting { --s:var(--pl-notstarted); }
svg.plantree .node.card.closed { opacity:.5; }
svg.plantree .mark circle { fill:var(--s); stroke:var(--bg); stroke-width:2; }
svg.plantree .mark text { fill:#fff; font-weight:700; font-size:12px; }
/* The person mark (Ionicons person-circle-sharp): the node's dark ink on its light fill, in both themes. */
svg.plantree .personicon { fill:var(--pl-node-ink); opacity:.78; pointer-events:none; }
.legend .sw.person { position:relative; width:1.05rem; height:1.05rem; }
.legend .sw.person svg { position:absolute; inset:1px; width:calc(100% - 2px); height:calc(100% - 2px); fill:var(--pl-node-ink); opacity:.78; }
.legend { display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.6rem 0 0; padding:0; list-style:none; font-size:.76rem; color:var(--ink-2); }
.wallwhere { font-size:.74rem; margin:.1rem 0 .2rem; overflow-wrap:anywhere; }
.legend li { display:inline-flex; align-items:center; gap:.3rem; }
.legend .sw { width:.85rem; height:.85rem; border-radius:50%; border:1.5px solid var(--pl-edge); display:inline-block; }
.legend .sw.dash { border-style:dashed; background:transparent; }
.smark { display:inline-grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--s); color:#fff; font-size:.72rem; font-weight:700; vertical-align:middle; margin-right:.25rem; }
dl.fields { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.3rem .8rem; margin:.4rem 0 .8rem; font-size:.88rem; }
dl.fields dt { color:var(--ink-2); }
dl.fields dd { margin:0; overflow-wrap:anywhere; }
.bar { height:.55rem; background:var(--card); border:1px solid var(--hairline-strong); border-radius:999px; overflow:hidden; margin:.3rem 0 .5rem; }
.bar > span { display:block; height:100%; background:var(--pl-done); }
ul.kids, ul.walls { list-style:none; padding:0; margin:.3rem 0 .8rem; font-size:.86rem; }
ul.kids li, ul.walls li { padding:.35rem 0; border-top:1px solid var(--hairline); }
.linkish { font:inherit; color:var(--link); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; text-align:left; }
.detailpanel h3 { font-size:1rem; margin:.2rem 0 .2rem; overflow-wrap:anywhere; }
.wallpanel h3 { font-size:.95rem; margin:.9rem 0 .1rem; }
.wallpanel h3.wallsh { margin-top:1.3rem; padding-top:.7rem; border-top:1px solid var(--hairline-strong); }
.wallpanel details.otherwalls { margin-top:1.1rem; padding-top:.5rem; border-top:1px solid var(--hairline-strong); }
.wallpanel details.otherwalls > summary { cursor:pointer; font-weight:600; font-size:.95rem; padding:.35rem 0; }
.wallpanel h4 { font-size:.88rem; margin:.7rem 0 .1rem; }
.wallpanel h5 { font-size:.82rem; margin:.45rem 0 0; color:var(--ink-2); font-weight:600; }
ul.yourjobs { list-style:none; padding:0; margin:.3rem 0 .6rem; font-size:.86rem; }
ul.yourjobs li { padding:.35rem 0; border-top:1px solid var(--hairline); }
/* D143: the People panel, each person with their AI and their work. */
ul.people { list-style:none; padding:0; margin:.3rem 0 .6rem; font-size:.86rem; }
ul.people li { padding:.45rem 0; border-top:1px solid var(--hairline); overflow-wrap:anywhere; }
ul.people li > .quiet { margin:.1rem 0 0; font-size:.84rem; }
ul.people .peoplejobs { margin-top:.2rem; }
/* The left panel's views (drawing 1: "swapable topics / ai chats / view node"; drawing 2: the summary). */
.tabs.subtabs { margin:.2rem 0 .6rem; }
.tabs.subtabs button { min-height:2rem; padding:.2rem .65rem; }
.summarytext { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; line-height:1.55; margin:.3rem 0 .6rem; }
.summarybox h3 { font-size:1rem; margin:.2rem 0; }
pre.statuspre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:.76rem; border:1px solid var(--hairline); border-radius:6px; padding:.6rem; margin:.4rem 0; }
ul.topiclist { list-style:none; padding:0; margin:.4rem 0 .8rem; font-size:.86rem; }
ul.topiclist > li { padding:.45rem 0; border-top:1px solid var(--hairline); }
ul.topiclist > li > ul { list-style:none; padding:0 0 0 1.5rem; margin:.25rem 0 0; }
ul.topiclist > li > ul > li { padding:.18rem 0; }
.dsw { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; border:2px solid var(--dp, var(--ink-2)); margin-right:.45rem; vertical-align:-1px; }
.agentnow { font-size:.82rem; margin-top:.15rem; }
/* The counts under the percent (D106 ready now, D104 by type and by step): plain lines that wrap at 375 px. */
.countline { font-size:.86rem; line-height:1.45; margin:.45rem 0 .15rem; overflow-wrap:anywhere; }
ul.kids.readylist { margin:.15rem 0 .5rem; }
/* The parked shelf (D107): each idea, then its words, its day and why it waits, wrapping at 375 px. */
.shelfwhy { font-size:.82rem; color:var(--ink-2); margin-top:.15rem; overflow-wrap:anywhere; }
.goalline { font-size:.9rem; margin:.2rem 0 .5rem; overflow-wrap:anywhere; }
/* The bubble (u23): the node's most important details, beside it, never over it. */
.planbubble { position:fixed; left:0; top:0; z-index:30; display:grid; gap:.12rem; max-width:min(19rem, calc(100vw - 16px)); padding:.45rem .65rem .5rem; font-size:.8rem; line-height:1.35; color:var(--ink); background:var(--card); border:1px solid var(--ink-2); border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.22); pointer-events:none; overflow-wrap:anywhere; }
.planbubble[hidden] { display:none; }
.planbubble strong { font-size:.86rem; }
.planbubble span { color:var(--ink-2); }
.wallpanel .holds { color:var(--ink-2); font-size:.8rem; display:block; }
.newtask { border:1px solid var(--hairline-strong); border-radius:var(--radius); padding:.7rem; margin:.6rem 0; background:var(--card); }
.newtask label { display:block; font-size:.8rem; color:var(--ink-2); margin:.4rem 0 .15rem; }
.newtask input, .newtask select, .notesbox { width:100%; font:inherit; font-size:.88rem; padding:.35rem .5rem; border-radius:6px; }
.newtask .row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.notesbox { min-height:9rem; display:block; }
/* u4: changing the room's plan from the page. "Pending" is always the word and a dashed outline, never a
   colour alone: a new job's card is outlined in ink dots, a status on its way rings the card's mark. */
.pendtag { display:inline-block; font-family:var(--font-mono); font-size:.66rem; font-weight:600; font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); border:1.5px dashed var(--ink); border-radius:999px; padding:0 .45rem; margin-left:.3rem; white-space:nowrap; vertical-align:middle; }
svg.plantree .node.card.pending .body { stroke:var(--ink); stroke-width:3; stroke-dasharray:2 4; stroke-linecap:round; }
svg.plantree .mark.pending circle { stroke:var(--ink); stroke-width:2.5; stroke-dasharray:3 2; }
.legend .sw.pend { border:2px dashed var(--ink); }
.editline { font-size:.82rem; border:1.5px dashed var(--hairline-strong); border-radius:6px; padding:.45rem .6rem; margin:.5rem 0; overflow-wrap:anywhere; }
.editline.refused { border-style:solid; border-color:var(--pl-blocked); }
.editline .row, .statusform .row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.4rem; }
.editline .row button.ghostbtn + button.ghostbtn, .statusform .row button.ghostbtn + button.ghostbtn, .newtask .row button.ghostbtn + button.ghostbtn { margin-left:0; }
.statusform { display:grid; gap:.3rem; margin:.4rem 0 .2rem; padding:.6rem; border:1px solid var(--hairline-strong); border-radius:var(--radius); background:var(--card); }
.statusform label { font-size:.8rem; color:var(--ink-2); }
.statusform p:empty, .newtask p:empty { display:none; }
/* The fields above and under an open status form line up as one list. */
dl.fields.split { grid-template-columns:6.4rem minmax(0,1fr); }
.statusform select { font:inherit; font-size:.88rem; padding:.35rem .5rem; border-radius:6px; }
button.ghostbtn.editbtn { min-height:2.2rem; }
dd button.ghostbtn.editbtn { margin-left:.4rem; padding:.15rem .7rem; }
.plannotes { list-style:none; padding:0; margin:.3rem 0 .7rem; font-size:.86rem; }
.plannotes li { padding:.35rem 0; border-top:1px solid var(--hairline); overflow-wrap:anywhere; }
.pendingnote em, .plannotes li.pending em { font-style:italic; }
.notecount.over { color:var(--pl-blocked); font-weight:600; }
.keeperline { margin:.5rem 0 0; }
.aiout pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:.76rem; background:var(--card); border:1px solid var(--hairline); border-radius:6px; padding:.7rem; margin:.5rem 0; }
.askbtns { display:grid; gap:.4rem; margin-top:.8rem; }
.askbtns button.ghostbtn + button.ghostbtn { margin-left:0; }
.plangrid .quiet { color:var(--ink-2); font-size:.8rem; max-width:none; }
/* overflow-wrap: a problem quotes up to 80 characters of a member's words, an id with no break in it among them. */
.plangrid .problems { font-size:.8rem; color:var(--ink-2); overflow-wrap:anywhere; }
.plandata pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.76rem; }
/* D71: the walls as a walkthrough. The steps reuse D54's .steps look (and its reduced-motion rule). */
.wallcard { display:grid; gap:.25rem; }
.wallmeta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.15rem; }
.urg { font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.1rem .5rem; border-radius:999px; border:1px solid var(--hairline-strong); color:var(--ink-2); }
.urg-now { color:#fff; background:var(--pl-blocked); border-color:var(--pl-blocked); }
.urg-next { color:var(--ink); border-color:var(--ink); }
.wallcard .bar { margin:.15rem 0; }
.solverow { margin:.3rem 0 .1rem; }
.solverow .ghostbtn { min-height:2.4rem; }
.wallsteps { margin:.4rem 0 .3rem; }
.wallsteps > li.step { padding:.55rem .6rem; gap:.55rem; }
button.stepno.tick { cursor:pointer; padding:0; background:var(--card); font:inherit; font-family:var(--font-mono); font-size:.85rem; }
button.stepno.tick[aria-pressed="true"] { color:var(--pl-done); border-color:var(--pl-done); font-weight:700; }
.step.now button.stepno.tick { color:var(--bg); background:var(--ink); }
.wallsteps .steptitle { font-size:.88rem; min-height:auto; }
.wallsteps .stepbody > p { margin:.3rem 0 0; }
.stephint { font-size:.8rem; color:var(--ink-2); border-left:2px solid var(--hairline-strong); padding-left:.5rem; }
.floater { position:fixed; right:1rem; bottom:1rem; z-index:20; width:min(22rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow:auto; background:var(--card); color:var(--ink); border:1px solid var(--ink-2); border-radius:var(--radius); box-shadow:0 8px 28px rgba(0,0,0,.18); padding:.6rem .75rem .75rem; }
.floathead { display:flex; align-items:center; gap:.4rem; cursor:move; user-select:none; touch-action:none; border-bottom:1px solid var(--hairline); padding-bottom:.4rem; }
.floattitle { flex:1 1 auto; font-weight:600; font-size:.88rem; }
button.floatbtn { font:inherit; font-size:.78rem; white-space:nowrap; color:var(--ink-2); background:none; border:1px solid var(--hairline-strong); border-radius:6px; padding:.2rem .5rem; min-height:2rem; cursor:pointer; }
.floatstep { margin:.5rem 0; font-size:.92rem; }
.floatacts { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.floatacts button.ghostbtn + button.ghostbtn { margin-left:0; }
.floater .bar { margin:.6rem 0 .2rem; }
.floatcount { margin:.45rem 0 0; font-size:.76rem; color:var(--ink-2); }
.floater .floatcount + .floatstep { margin-top:.15rem; }
.floater .quiet { color:var(--ink-2); font-size:.76rem; margin:.3rem 0; }
.floater .askbox { margin-top:.6rem; border-top:1px solid var(--hairline); padding-top:.5rem; }
/* D112 (w7): the same helper inside its own floating window fills it. */
body.pipbody { margin:0; padding:.6rem .75rem; background:var(--bg); color:var(--ink); font-size:16px; }
.floater.inpip { position:static; width:auto; max-height:none; overflow:visible; border:0; border-radius:0; box-shadow:none; padding:0; background:transparent; }
.floater.inpip .floathead { cursor:default; }
/* D112 (w8): Ask AI: the link that opens a new Claude Code chat, its claude.ai twin, and the lines under them. */
.askbox { display:grid; gap:.2rem; }
.askrow { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; }
a.ghostbtn.askai { color:var(--bg); background:var(--ink); border-color:var(--ink); }
a.ghostbtn.askai:hover { opacity:.88; }
a.askweb { font-size:.8rem; color:var(--link); }
.askline { font-size:.76rem; margin:.1rem 0; overflow-wrap:anywhere; }
.asksaid:empty { display:none; }
textarea.askshown { width:100%; font-family:var(--font-mono); font-size:.72rem; line-height:1.4; padding:.4rem .5rem; border-radius:6px; resize:vertical; }
.askbtns .askbox + .askbox { margin-top:.3rem; }
/* D112 (w5): the card's title in plain words; what the plan's line says of it is folded under it. */
.wallcard button.wallname { font-weight:600; color:var(--ink); text-decoration:none; }
.wallcard button.wallname:hover { text-decoration:underline; }
details.wallplan > summary { cursor:pointer; font-size:.78rem; color:var(--ink-2); padding:.1rem 0; }
details.wallplan[open] { display:grid; gap:.2rem; }
@media (max-width: 680px) {
  .floater { left:0; right:0; bottom:0; top:auto; width:auto; max-height:70vh; border-radius:var(--radius) var(--radius) 0 0; border-width:1px 0 0; padding:.5rem 1rem .6rem; }
  .floathead { cursor:default; }
  .floater.collapsed .floatstep { margin:.3rem 0; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.hasfloater { padding-bottom:9rem; }
}
/* The room page (/aisle/) with a plan: the plan is the room's main part, across the whole width on top,
   and the room's chats and conversation sit under it, as before (Ofir, 2026-10-11: "this need to be part
   of the main room - not a side room that opens"). The page widens to the overseer screen's width. */
body:has(.appgrid.hasplan) .wrap { max-width:1760px; }
.appgrid.hasplan { grid-template-areas:"plan plan" "rail chat"; }
.appgrid.hasplan > .roomplan { grid-area:plan; min-width:0; }
.appgrid.hasplan > .rail { grid-area:rail; }
.appgrid.hasplan > .chatpanel { grid-area:chat; scroll-margin-top:1rem; }
.roomplanhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-bottom:.8rem; }
.roomplantitle { min-width:0; }
main.app .roomplantitle h2 { margin:0; font-size:1.2rem; overflow-wrap:anywhere; }
.roomplangoal { margin:.1rem 0 0; font-size:.85rem; font-weight:300; color:var(--ink-2); overflow-wrap:anywhere; }
.othersplan { margin:.25rem 0 0; font-size:.85rem; color:var(--ink-2); overflow-wrap:anywhere; }
.roomplanlinks { display:flex; gap:.5rem; flex-wrap:wrap; }
.roomplanlinks a.ghostbtn { text-decoration:none; font-size:.85rem; color:var(--ink-2); border:1px solid var(--hairline-strong); border-radius:6px; padding:.32rem .85rem; white-space:nowrap; }
.roomplanlinks a.ghostbtn:hover { color:var(--ink); border-color:var(--ink-2); }
/* Job il4: the room's "Invite someone" in the plan's head too, the head's own button. */
.roomplanlinks button.planinvite { white-space:nowrap; }
@media (max-width:560px) { .roomplanlinks button.planinvite { min-height:2.75rem; } }
.roomplan .plangrid { margin-bottom:0; }
/* How long the plan takes (D115) as small tiles in the head of a room's plan (job e11): beside the links on a wide
   screen, across the width under the plan's name on a phone. Each tile links to the plan page's section. */
.esttilesslot { margin-left:auto; min-width:0; }
.esttilesslot:empty { display:none; }
.esttiles { display:flex; flex-wrap:wrap; align-items:stretch; gap:.4rem; }
.esttile { display:flex; flex-direction:column; min-width:6.4rem; padding:.35rem .65rem .4rem; border:1px solid var(--hairline-strong); border-radius:6px; background:var(--card); color:var(--ink); text-decoration:none; line-height:1.25; }
a.esttile:hover { border-color:var(--ink-2); }
a.esttile:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.esttilehead { display:flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2); }
.esticon { flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.esticon circle { fill:currentColor; stroke:none; }
.esttiledays { margin-top:.15rem; font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.esttilerange, .esttilewho { font-size:.72rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.esttile.pending .esttiledays { color:var(--ink-2); font-weight:400; }
.esttiles .esttilesnote { align-self:center; max-width:10.5rem; margin:0; font-size:.72rem; line-height:1.3; color:var(--ink-2); }
/* Under the tiles, across the row (job f26): D115's terms line beside a count of two accounts or more, and how the
   reader's own setup was counted. */
.esttiles .esttileslines { flex-basis:100%; min-width:0; }
.esttileslines p { max-width:46rem; margin:0; font-size:.72rem; line-height:1.4; color:var(--ink-2); }
.esttileslines p + p { margin-top:.2rem; }
@media (max-width:40rem) {
  .esttilesslot { flex-basis:100%; margin-left:0; }
  .esttile { flex:1 1 0; min-width:0; padding:.35rem .5rem .4rem; }
  .esttiles .esttilesnote { flex-basis:100%; max-width:none; }
}
/* The top of an open room (u26): one card above the room and its plan, for what a newcomer needs first.
   Beside the rail when the room has no plan; across the whole width, above the plan, when it has one. */
.roomtop { display:grid; gap:.45rem; min-width:0; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); padding:.75rem 1rem; }
.roomtop > p { margin:0; overflow-wrap:anywhere; }
/* D129 (room-fast): the fast card, first in the room: Now, Do now with its one button, Next; the rest under More. */
.fastcard { display:grid; gap:.35rem; min-width:0; }
.fastcard .fastline { margin:0; overflow-wrap:anywhere; line-height:1.45; }
.fastcard .fastline strong { color:var(--ink); }
.fastcard .fastnow, .fastcard .fastnext { color:var(--ink-2); font-size:.95rem; }
.fastcard .fastdo { font-size:1.02rem; }
.fastcard .fastact { display:inline-flex; vertical-align:middle; margin-left:.15rem; text-decoration:none; white-space:nowrap; }
.fastcard .fastmore { font-size:.9rem; }
.fastcard .fastmore > summary { cursor:pointer; color:var(--link); width:max-content; max-width:100%; }
.fastcard .fastmore > p { margin:.35rem 0 0; overflow-wrap:anywhere; }
.fastcard + .connectstrip > p:first-child, .fastcard ~ .nomap > p:first-child { display:none; }
.youline { font-size:.92rem; color:var(--ink-2); }
.youline strong { color:var(--ink); }
.youline button.linkbtn { font-size:inherit; color:var(--link); padding:0; }
/* Fix 1: the newcomer's next step, set apart from the lines above it; the connect steps open under it. */
.connectstrip { border-top:1px solid var(--hairline); padding-top:.55rem; display:grid; gap:.4rem; min-width:0; }
.connectstrip > p { margin:0; overflow-wrap:anywhere; }
.connectstrip .stripacts { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.connectstrip .stripacts[hidden] { display:none; }
.connectstrip .stripacts a.ghostbtn { text-decoration:none; }
.connectstrip .keybox { margin-top:.2rem; }
/* Job f19: a room with no plan asks for its map, under the lines above it, with its one step. */
.nomap { border-top:1px solid var(--hairline); padding-top:.55rem; display:grid; gap:.4rem; min-width:0; }
.nomap > p { margin:0; overflow-wrap:anywhere; }
.nomap .stripacts a.ghostbtn { text-decoration:none; }
/* D152 (job f34): what each computer works on, right after the plan's status row (status-row), or at the top of a room
   with no plan. One row per computer, never wrapped: its name, then its items cut with "…" where they do not fit, then
   "+2"; the whole line is the row's title. min-width:0 down the chain, so a long row never widens the page on a phone. */
.workingon { display:grid; gap:.15rem; min-width:0; margin:0; }
.roomtop > .fastcard + .workingon { border-top:1px solid var(--hairline); padding-top:.5rem; }
.workingon .worklabel { margin:0 0 .1rem; font-size:.78rem; font-weight:600; color:var(--ink-2); }
.workingon .workrow { display:flex; align-items:baseline; gap:.4rem; min-width:0; max-width:none; margin:0; font-size:.88rem; line-height:1.45; white-space:nowrap; overflow:hidden; }
.workingon .workname { flex:0 0 auto; max-width:50%; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.workingon .workitems { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2); }
.workingon .workmore { flex:none; color:var(--ink-2); font-variant-numeric:tabular-nums; }
/* Its live files (the file marks), after its jobs: "in <file>", the file in the code face, inline so the row stays one
   line and is cut with the rest. */
.workingon .workfile { font-size:.84em; padding:.02em .3em; overflow-wrap:normal; white-space:nowrap; }
.workingon .workrow.isquiet .workname, .workingon .workrow.isquiet .workitems { font-style:italic; }
/* status-row: a room's plan draws the lines under its row, so the room top's copy shows only while the plan is not on
   screen: a room with no plan, or the Chat tab in one column (below). Never two copies at once. */
.appgrid.hasplan > .roomtop > #roomworking, .appgrid.hasplan > .roomtop:has(> #roomworking:only-child) { display:none; }
/* The card's row is as tall as the card: the rail beside it, taller, grows into the room's row instead. */
.appgrid.hastop.roomopen { grid-template-areas:"rail top" "rail chat"; grid-template-rows:auto 1fr; }
.appgrid.hastop.hasplan { grid-template-areas:"top top" "plan plan" "rail chat"; grid-template-rows:auto auto auto; }
.appgrid.hastop > .roomtop { grid-area:top; }
.appgrid.hastop > .rail { grid-area:rail; }
.appgrid.hastop > .chatpanel { grid-area:chat; }
/* Your assistants as a block of its own, across the whole width under the chats and the room, its parts side by
   side (Ofir, 2026-10-29: "the your assistants panel need to be horizontal and under all the rest - its to long and
   need its own place own block and not a side block ... it will go just under the chats"). The rail's two panels
   join the grid: the chats where the rail was, Your assistants on a row of their own at the end. Two columns only:
   in one column it is already last. The first screen, signed out, keeps its one panel. */
@media (min-width: 57.51rem) {
  .appgrid:not(.start), .appgrid.start.chatopen { grid-template-areas:"list chat" "ai ai"; grid-template-rows:auto auto; }
  .appgrid.hastop.roomopen:not(.start), .appgrid.hastop.roomopen.start.chatopen { grid-template-areas:"list top" "list chat" "ai ai"; grid-template-rows:auto 1fr auto; }
  .appgrid.hasplan:not(.start), .appgrid.hasplan.start.chatopen { grid-template-areas:"plan plan" "list chat" "ai ai"; grid-template-rows:auto auto auto; }
  .appgrid.hastop.hasplan:not(.start), .appgrid.hastop.hasplan.start.chatopen { grid-template-areas:"top top" "plan plan" "list chat" "ai ai"; grid-template-rows:auto auto auto auto; }
  .appgrid:not(.start) > .rail, .appgrid.start.chatopen > .rail { display:contents; }
  .appgrid > .rail > .listpanel { grid-area:list; align-self:start; }
  .appgrid > .rail > .aipanel { grid-area:ai; }
  .aipanel .yoursetup .setupblocks { grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.8rem; }
  .aipanel #assistants { grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr)); }
}
@media (max-width:57.5rem) {
  /* One column: the chats strip first (to change room), then the top card, then the plan, then the
     conversation. */
  .appgrid.hasplan, .appgrid.hastop.roomopen, .appgrid.hastop.hasplan { grid-template-areas:none; grid-template-rows:none; }
  .appgrid.hasplan > .roomplan, .appgrid.hasplan > .chatpanel, .appgrid.hastop > .roomtop, .appgrid.hastop > .chatpanel { grid-area:auto; }
  .appgrid.hasplan .listpanel, .appgrid.hastop .listpanel { order:-3; }
  .appgrid.hastop > .roomtop { order:-2; }
  /* D129: the fast card says what to do now, so it comes before the chats strip too. */
  .appgrid.hastop > .roomtop:has(> .fastcard) { order:-4; }
  .appgrid.hasplan > .roomplan { order:-1; }
  /* Fix 9: Plan | Chat. One of the two parts at a time, the tabs right above it; "Chat ↓" is the Chat tab. */
  .appgrid.hastabs > .roomtabs { display:flex; order:-1; }
  .appgrid.hastabs.tabchat > .roomplan { display:none; }
  /* status-row: on the Chat tab the plan's working-on lines are hidden with it, so the room top says them. */
  .appgrid.hasplan.hastabs.tabchat > .roomtop > #roomworking, .appgrid.hasplan.hastabs.tabchat > .roomtop:has(> #roomworking:only-child) { display:grid; }
  .appgrid.hastabs.tabplan > .chatpanel, .appgrid.hastabs.tabplan .aipanel { display:none; }
  .appgrid.hastabs .roomplanlinks a.tochat { display:none; }
}
/* Two equal halves, the shown one filled, as the plan's own tabs are; beside the rail there are none. */
.roomtabs { display:none; gap:.4rem; min-width:0; }
.roomtabs [role=tab] { flex:1 1 0; min-width:0; min-height:2.75rem; font:inherit; font-size:.95rem; font-weight:600; color:var(--ink-2); background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; cursor:pointer; }
.roomtabs [role=tab][aria-selected="true"] { color:var(--bg); background:var(--ink); border-color:var(--ink); }
.roomtabs [role=tab]:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* The job states (D111 Part 4b, job s22). The strip above the panels: what runs, what is next, the plan's source and
   age, the page's own check of the room's Now: block, and the board's button; one line on a screen, wrapping on a
   phone. Marks are plain characters in the ink (monochrome, per his rule on icons); the layer is said in words. */
/* status-row (Ofir, 2026-10-29: "A LIVE SINGLE ROW"): the strip is one row of five counts and the Board link, never
   wrapped and never cut; a narrow screen says the shorter words (Work, Wait, Held, To do), the numbers and order kept. */
.nowstrip { display:flex; flex-wrap:nowrap; align-items:center; gap:.45rem; margin:0 0 .8rem; padding:.5rem .9rem; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); font-size:.88rem; min-width:0; white-space:nowrap; }
.nowstrip[hidden], .nowboard[hidden], .workingon[hidden] { display:none; }
.nowstrip .srcount { flex:none; color:var(--ink-2); }
.nowstrip .srn { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.nowstrip .srshort { display:none; }
.nowstrip .srsep { flex:none; color:var(--ink-2); }
.nowstrip .srsep.srlast { margin-left:auto; }
.nowstrip button.boardlink { flex:none; padding:0 .15rem; font-size:inherit; white-space:nowrap; }
.nowboard span.boardjob { font-size:.84rem; overflow-wrap:anywhere; min-width:0; }
/* f34's working-on lines, right after the row, in the same card style. */
.planworking { margin:-.35rem 0 .8rem; padding:.45rem .9rem .5rem; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); }
.nowboard .boardsource { margin-top:-.5rem; }
.lmark { display:inline-block; min-width:1em; text-align:center; font-weight:700; }
/* A job's badge, "Queued #2 · 5th overall", and its why-line, at most 110 characters: on the board, the Workbench, the
   wall cards. Both wrap anywhere, so a phone never scrolls sideways. */
.jobbadge { display:inline-flex; align-items:baseline; gap:.15rem; font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; border:1px solid var(--hairline-strong); border-radius:999px; padding:.05rem .55rem .1rem .35rem; overflow-wrap:anywhere; max-width:100%; }
.jobbadge.l-blocked { border-color:var(--ink); }
.whyline { font-size:.8rem; color:var(--ink-2); overflow-wrap:anywhere; }
.jobstateline, .thenline { font-size:.8rem; overflow-wrap:anywhere; }
.thenline { font-style:italic; }
.jobstatebox { display:grid; gap:.2rem; margin:.1rem 0 .6rem; padding:.5rem .65rem; border:1px solid var(--hairline); border-radius:8px; }
.jobstatebox p { margin:0; }
.wallcard .wallstate { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; margin:.15rem 0; min-width:0; }
/* The board: the four layers as four lists in their order, then what comes to a person, the launch word, capacity. */
.nowboard { padding:1rem; margin:0 0 1rem; min-width:0; }
.nowboard > .panelhead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem; }
.nowboard > .panelhead h2 { font-size:1.05rem; margin:0; }
.nowboard .boardcheck { font-size:.82rem; color:var(--ink-2); margin:.3rem 0 .8rem; overflow-wrap:anywhere; }
.nowboard .boardlayers, .nowboard .boardmore { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,17rem),1fr)); gap:1rem; min-width:0; }
.nowboard .boardmore { margin-top:1rem; }
.nowboard .boardpart { min-width:0; }
.nowboard .boardpart h3 { font-size:.92rem; margin:0 0 .4rem; }
.nowboard ol.boardlist { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; min-width:0; }
.nowboard li.boardrow { display:grid; gap:.12rem; padding:.4rem .5rem; border:1px solid var(--hairline); border-radius:8px; min-width:0; }
.nowboard .boardtop { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .45rem; min-width:0; }
.nowboard button.boardjob { font-size:.84rem; overflow-wrap:anywhere; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.nowboard .capacityline { font-size:.84rem; margin:0; overflow-wrap:anywhere; }
@media (min-width: 681px) { .nowboard ol.boardlist { max-height:30rem; overflow-y:auto; overscroll-behavior:contain; padding-right:.2rem; } }
@media (max-width: 1000px) { .plangrid, .plangrid.treemax { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"tree tree" "detail wall"; } }
@media (max-width: 680px) {
  .plangrid, .plangrid.treemax { grid-template-columns:minmax(0,1fr); grid-template-areas:"tree" "detail" "wall"; }
  .treebar .where { flex-basis:100%; }
  .treebar .whosep { display:none; }
  button.crumb { max-width:9rem; }
  svg.plantree, .plangrid.treemax svg.plantree { height:min(62vh,480px); }
  .plangrid > .detailpanel, .plangrid > .wallpanel { max-height:75vh; }
  /* u4 at 375 px: one column, labels above, every edit control a full 44 px tall and easy to hit. */
  .newtask input, .newtask select, .statusform select { font-size:16px; min-height:44px; }
  .notesbox { font-size:16px; }
  button.ghostbtn.editbtn, .newtask .row button, .statusform .row button, .editline .row button { min-height:44px; padding-left:1rem; padding-right:1rem; }
  .newtask .row button, .statusform .row button { flex:1 1 8rem; }
  dd button.ghostbtn.editbtn { display:block; margin:.35rem 0 0; }
  button.maxbtn { display:none; }
  .planbar .projtitle { order:-1; flex-basis:100%; text-align:left; }
  .projgoal { justify-content:flex-start; margin-left:0; }
  /* status-row: still one row, closer together, the Board link 44 px tall. */
  .nowstrip { gap:.3rem; padding:.15rem .45rem; font-size:.78rem; }
  .nowstrip .srsep { display:none; }
  .nowstrip button.boardlink { min-height:44px; padding:0; margin-left:auto; }
  .planworking { padding:.4rem .6rem .45rem; }
}
/* status-row: below about 830 px the five full words no longer fit one row, so the shorter ones. */
@media (max-width: 52rem) {
  .nowstrip .srword { display:none; }
  .nowstrip .srshort { display:inline; }
}
/* How long it takes (D115): the two boxes side by side, stacked on a phone; the steps as a table that scrolls
   sideways inside its own box on a narrow screen, never the page. */
.estpanel { margin:0 0 2rem; padding:1rem; }
.estpanel .panelhead h2 { font-size:1.05rem; }
.estpanel p { max-width:72ch; }
.estpanel h3 { font-size:.95rem; margin:1.1rem 0 .4rem; }
.estboxes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:.6rem 0; }
.estbox { border:1px solid var(--hairline-strong); border-radius:var(--radius); padding:.8rem 1rem; min-width:0; }
.estbox h3 { margin:0 0 .2rem; }
.estbox p { margin:.3rem 0; font-size:.88rem; }
.estbox .estwho, .estbox .estrange { color:var(--ink-2); font-size:.8rem; }
.estbox .estdays { font-size:1.6rem; font-weight:700; margin:.4rem 0 .1rem; }
.estnote { font-size:.85rem; color:var(--ink-2); }
.estcontrols { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; }
.eststepper { display:inline-flex; align-items:center; gap:.35rem; }
.eststepper .estlabel { font-size:.85rem; color:var(--ink-2); min-width:5rem; }
button.estbtn { font:inherit; font-weight:700; min-width:2.4rem; height:2.4rem; border:1px solid var(--hairline-strong); background:var(--card); color:var(--ink); border-radius:6px; cursor:pointer; }
button.estbtn:disabled { opacity:.4; cursor:default; }
button.estbtn:focus-visible, select.estkind:focus-visible, input.estopt:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.estnum { min-width:1.6rem; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
select.estkind { font:inherit; font-size:.85rem; min-height:2.4rem; padding:.2rem .4rem; border-radius:6px; }
.estresult p { font-size:.88rem; margin:.45rem 0; }
.esttablewrap { overflow-x:auto; max-width:100%; }
table.esttable { border-collapse:collapse; font-size:.82rem; font-variant-numeric:tabular-nums; }
table.esttable th, table.esttable td { text-align:left; padding:.35rem .6rem; border-bottom:1px solid var(--hairline); white-space:nowrap; }
table.esttable thead th { color:var(--ink-2); font-weight:600; }
table.esttable tr.knee th, table.esttable tr.knee td { font-weight:700; }
.estpath ol { margin:.3rem 0; padding-left:1.4rem; font-size:.85rem; }
.estpath li.person { font-style:italic; }
.estleft p, .estpanel .estprice, .estpanel .estterms, .estpanel .estcounted { font-size:.82rem; color:var(--ink-2); }
.estoptline { display:flex; align-items:center; gap:.45rem; font-size:.85rem; min-height:2.4rem; }
.eststeps p, .estpath p { font-size:.85rem; }
table.esttable .estsub { color:var(--ink-2); }
@media (max-width: 640px) {
  .estboxes { grid-template-columns:minmax(0,1fr); }
  table.esttable { font-size:.78rem; }
  table.esttable th, table.esttable td { white-space:normal; padding:.3rem .35rem; }
  table.esttable .estsub { display:block; }
}
/* The project map (D117 L, job u31): a map file from the person's own computer, the goal in the middle. */
:root { --mp-tied:#0E7C7B; --mp-untied:#D9D5CC; --mp-plan:#FF9F45; --mp-sym:#6D28D9; --mp-mid:#1F1E1B; --mp-midink:#FAF9F5; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --mp-tied:#2DD4BF; --mp-untied:#4A4640; --mp-plan:#E0842E; --mp-sym:#A78BFA; --mp-mid:#FAF9F5; --mp-midink:#141311; }
}
:root[data-theme="dark"] { --mp-tied:#2DD4BF; --mp-untied:#4A4640; --mp-plan:#E0842E; --mp-sym:#A78BFA; --mp-mid:#FAF9F5; --mp-midink:#141311; }
.mappanel { margin:0 0 2rem; padding:1rem; }
.mappanel .panelhead h2 { font-size:1.05rem; }
.mappanel p { max-width:72ch; }
#mapslot.mapdrop { outline:2px dashed var(--ink-2); outline-offset:4px; border-radius:var(--radius); }
.mapopenrow { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:.6rem 0; }
label.mapopen { position:relative; display:inline-flex; align-items:center; gap:.4rem; height:2.4rem; padding:0 .8rem; border:1px solid var(--ink); background:var(--ink); color:var(--bg); border-radius:6px; font-size:.9rem; font-weight:600; cursor:pointer; }
label.mapopen:focus-within { outline:2px solid var(--focus); outline-offset:2px; }
label.mapopen input.mapfile { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.mapopenicon { font-size:1rem; line-height:1; }
.mapsay { flex:1 1 16rem; min-width:0; margin:0; font-size:.85rem; color:var(--ink-2); overflow-wrap:anywhere; }
.mapsay.bad { color:var(--pl-blocked); font-weight:600; }
.mapbar { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin:.4rem 0 .6rem; }
button.mapback, button.mapcrumb, button.mapitem { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; cursor:pointer; }
button.mapback { font-size:.85rem; height:2.2rem; padding:0 .6rem; flex:none; }
button.mapback:disabled { opacity:.4; cursor:default; }
button.mapback:focus-visible, button.mapcrumb:focus-visible, button.mapitem:focus-visible, input.mapfind:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.mapcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; flex:1 1 14rem; min-width:0; font-size:.8rem; }
.mapcrumbs > * + *::before { content:"›"; margin-right:.25rem; color:var(--muted); }
button.mapcrumb { font-size:.8rem; padding:.15rem .4rem; border-color:transparent; background:none; text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; text-align:left; }
.mapcrumb.here { font-weight:700; overflow-wrap:anywhere; }
.mapfindwrap { position:relative; flex:1 1 14rem; min-width:0; max-width:24rem; }
input.mapfind { width:100%; font:inherit; font-size:.85rem; height:2.2rem; padding:0 .55rem; border:1px solid var(--hairline-strong); border-radius:6px; background:var(--card); color:var(--ink); box-sizing:border-box; }
ul.mapfound { position:absolute; z-index:5; left:0; right:0; top:2.4rem; margin:0; padding:.3rem; list-style:none; background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.18); max-height:22rem; overflow:auto; }
.mapgrid { display:grid; grid-template-columns:minmax(0,720px) minmax(0,1fr); gap:1rem; align-items:start; }
.mapdraw { min-width:0; }
svg.projmap { display:block; max-width:100%; height:auto; }
svg.projmap .mapguide { fill:none; stroke:var(--hairline); stroke-width:1; }
svg.projmap .mapimport { fill:none; stroke:var(--pl-edge); stroke-width:1; opacity:.55; }
svg.projmap .mapnode { cursor:pointer; }
svg.projmap .mapnode .hit { fill:transparent; stroke:none; }
svg.projmap .mapnode .body { fill:var(--card); stroke:var(--ink-2); stroke-width:1.5; }
svg.projmap .mapnode:hover .body { stroke:var(--ink); stroke-width:2.5; }
svg.projmap .mapnode text { font-size:12px; fill:var(--ink); pointer-events:none; }
svg.projmap .k-step .body, svg.projmap .k-department .body, svg.projmap .k-area .body { fill:var(--mp-plan); stroke:var(--mp-plan); }
svg.projmap .k-job .body { fill:var(--pl-job); stroke:var(--pl-notstarted); }
svg.projmap .k-job.s-done .body { stroke:var(--pl-done); fill-opacity:.45; }
svg.projmap .k-job.s-inprogress .body { stroke:var(--pl-progress); stroke-width:2.5; }
svg.projmap .k-job.s-blocked .body { stroke:var(--pl-blocked); stroke-width:2.5; }
svg.projmap .k-top .body, svg.projmap .k-folder .body { fill:var(--card); stroke:none; }
svg.projmap .untiedarc { fill:none; stroke:var(--mp-untied); stroke-width:5; }
svg.projmap .tiedarc { fill:none; stroke:var(--mp-tied); stroke-width:5; }
svg.projmap .k-file.tied .body { fill:var(--mp-tied); stroke:var(--mp-tied); }
svg.projmap .k-file.untied .body { fill:var(--card); stroke:var(--muted); stroke-dasharray:2 2; }
svg.projmap .k-function .body, svg.projmap .k-class .body, svg.projmap .k-method .body, svg.projmap .k-value .body { fill:var(--mp-sym); stroke:var(--mp-sym); }
svg.projmap .k-value .body { fill-opacity:.55; }
svg.projmap .k-decision .body, svg.projmap .k-package .body { fill:var(--bg-2); stroke:var(--ink-2); }
svg.projmap .mapcenterdisc { fill:var(--mp-mid); stroke:none; }
svg.projmap .mapcenter text { paint-order:stroke; stroke:var(--mp-mid); stroke-width:3px; stroke-linejoin:round; }
svg.projmap .mapcenter text { font-size:11px; fill:var(--mp-midink); text-anchor:middle; pointer-events:none; }
svg.projmap .mapcenter text.head { font-size:13px; font-weight:700; letter-spacing:.04em; }
svg.projmap .mapempty { font-size:12px; fill:var(--ink-2); text-anchor:middle; }
.mapside { min-width:0; display:flex; flex-direction:column; gap:.8rem; }
.mapdetails, .mapring { border:1px solid var(--hairline-strong); border-radius:var(--radius); padding:.7rem .8rem; min-width:0; }
h3.mapdetailtitle { font-size:.98rem; margin:0 0 .4rem; overflow-wrap:anywhere; }
.mapkind { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--hairline-strong); border-radius:999px; padding:0 .4rem; vertical-align:middle; }
.mapdetails p { font-size:.85rem; margin:.3rem 0; overflow-wrap:anywhere; }
.mapdetails h4, .mapring h4 { font-size:.8rem; margin:.7rem 0 .3rem; color:var(--ink-2); }
.mapring h4 { margin-top:0; }
.mapdetails ul, .mapring ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.mapring ul { max-height:28rem; overflow:auto; }
button.mapitem { display:flex; flex-direction:column; align-items:flex-start; width:100%; padding:.3rem .5rem; text-align:left; min-height:2.2rem; box-sizing:border-box; }
button.mapitem:hover { border-color:var(--ink); }
.mapitemname { font-size:.82rem; font-weight:600; overflow-wrap:anywhere; }
.mapitemsub { font-size:.72rem; color:var(--ink-2); overflow-wrap:anywhere; }
button.mapitem.k-file.untied .mapitemname { font-weight:400; }
.mapmore { font-size:.75rem; color:var(--ink-2); }
ul.maplegend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; list-style:none; margin:.8rem 0 0; padding:0; font-size:.75rem; color:var(--ink-2); }
ul.maplegend li { display:flex; align-items:center; gap:.35rem; max-width:100%; }
.mapkey { flex:none; display:inline-block; width:.8rem; height:.8rem; border-radius:50%; border:1.5px solid var(--ink-2); box-sizing:border-box; }
.mapkey.k-plan { background:var(--mp-plan); border-color:var(--mp-plan); }
.mapkey.k-job { background:var(--pl-job); border-color:var(--pl-notstarted); }
.mapkey.k-share { border:3px solid var(--mp-untied); border-top-color:var(--mp-tied); border-right-color:var(--mp-tied); }
.mapkey.k-tied { background:var(--mp-tied); border-color:var(--mp-tied); }
.mapkey.k-untied { border-style:dashed; border-color:var(--muted); }
.mapkey.k-sym { background:var(--mp-sym); border-color:var(--mp-sym); }
.mapkey.k-imp { border-radius:0; border:none; border-top:1.5px solid var(--pl-edge); height:0; width:1.2rem; }
@media (max-width: 1000px) {
  .mapgrid { grid-template-columns:minmax(0,1fr); }
  .mapdraw { max-width:720px; margin:0 auto; width:100%; }
}