/* colours sampled from the artist's board, 18 Sep 2026: floor, canopy, leaf, lime. paper and rust are ours.
   red is for what needs a person; lime is for what is proven; nothing else is coloured. */
:root { --floor:#16241a; --canopy:#34482f; --leaf:#4b613f; --lime:#b7d082; --paper:#eef3e2; --rust:#e07a5f; --sage:#a3b58e;
        --panel:#1c2e21; --panel-2:#22372a; --edge:rgba(183,208,130,.16);
        --head:"Nunito", "Varela Round", ui-rounded, "Segoe UI", system-ui, sans-serif; --body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
        --mono:ui-monospace, Consolas, monospace; }
html,body { background:var(--floor); color:var(--paper); margin:0; }
body { font:17px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
#canopy { position:absolute; top:0; left:0; width:100%; height:120px; z-index:0; pointer-events:none; display:block; }
header { position:sticky; top:0; z-index:5; }
header.stuck { background:rgba(28,46,33,.94); backdrop-filter:blur(6px); box-shadow:0 1px 0 var(--edge); }
nav { display:flex; gap:6px 20px; padding:16px 24px; align-items:center; flex-wrap:wrap; max-width:1280px; margin:0 auto; box-sizing:border-box; position:relative; z-index:1; }
nav b { font:800 22px/1 var(--head); color:var(--lime); letter-spacing:-.01em; margin-right:14px; }
nav a[data-tab] { color:var(--paper); opacity:.72; font:600 16px var(--head); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent; }
nav a[data-tab]:hover { opacity:1; }
nav a[data-tab].on { opacity:1; color:var(--lime); border-bottom-color:var(--lime); }
/* logged out, the nav holds nothing but the name; the login screen is one column, a phone's width */
body.out nav .count { display:none; }
form.login { max-width:420px; margin-bottom:22px; } form.login .msg { margin-top:10px; }
input[type=tel], input[type=email] { font:inherit; }
/* agency home's queue: each hand a row that opens into its card; hands of one name for one business together */
.qgroup { margin-bottom:10px; } .qgroup > .row { margin:0 0 6px; }
details.qitem { border-bottom:1px solid var(--edge); padding:4px 0; } details.qitem > summary { cursor:pointer; padding:10px 2px; min-height:24px; list-style:none; }
details.qitem > summary::-webkit-details-marker { display:none; } details.qitem[open] > summary { color:var(--lime); }
details.qitem .card { margin:6px 0 12px; }
nav .count { color:var(--floor); background:var(--rust); font:800 13px var(--head); margin-left:auto; padding:4px 10px; border-radius:999px; }
nav .count:empty { display:none; }
nav .count.none { background:none; color:var(--sage); font-weight:600; padding:0; }
nav #by { width:170px; padding:6px 12px; border-radius:999px; font:600 14px var(--head); background:rgba(22,36,26,.6); }
#toast { padding:6px 24px 10px; font-size:15px; max-width:1280px; margin:0 auto; box-sizing:border-box; position:relative; z-index:1; }
#toast.green { color:var(--lime); } #toast.red { color:var(--rust); } #toast:empty { display:none; }
main { padding:48px 24px 80px; max-width:1280px; margin:0 auto; position:relative; z-index:1; }
[hidden] { display:none !important; }
a { color:var(--lime); }
h1 { font:800 30px/1.2 var(--head); margin:0 0 18px; letter-spacing:-.01em; }
h1 .k { font:600 15px var(--head); margin-left:10px; }
h2 { font:700 15px var(--head); color:var(--sage); margin:22px 0 10px; }
h2:first-child { margin-top:0; }
.card { background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:20px 22px; margin-bottom:16px; }
.card.needs { box-shadow:inset 4px 0 0 var(--rust); }
.card .head { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px; }
.card .head b { font:700 19px var(--head); } .card .head .k { margin-left:auto; }
.k { color:var(--sage); font-size:14px; }
textarea, input[type=text], input[type=number], input[type=date], input[type=file], select { width:100%; box-sizing:border-box; background:var(--floor); color:var(--paper); border:1px solid rgba(183,208,130,.28); border-radius:12px; padding:12px 14px; font:inherit; }
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(183,208,130,.18); }
::placeholder { color:var(--sage); opacity:.75; }
textarea { min-height:84px; resize:vertical; }
select { width:auto; } input.short { width:190px; } input[type=checkbox] { accent-color:var(--lime); width:18px; height:18px; }
input[type=date] { color-scheme:dark; width:auto; } input[type=number] { width:160px; }
input[type=datetime-local] { color-scheme:dark; background:var(--floor); color:var(--paper); border:1px solid rgba(183,208,130,.28); border-radius:12px; padding:12px 14px; font:inherit; max-width:100%; box-sizing:border-box; }
input[type=file] { padding:9px 14px; } input[type=file]::file-selector-button { background:none; border:1px solid rgba(183,208,130,.32); color:var(--paper); border-radius:8px; padding:5px 12px; font:700 14px var(--head); margin-right:10px; cursor:pointer; }
.row { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; align-items:center; }
button.act { background:var(--lime); color:var(--floor); border:1px solid var(--lime); border-radius:12px; padding:11px 20px; font:800 15px var(--head); cursor:pointer; white-space:nowrap; }
button.act:hover { filter:brightness(1.06); }
button.act.no { background:none; color:var(--rust); border-color:var(--rust); }
button.act.ghost { background:none; border-color:rgba(183,208,130,.32); color:var(--paper); }
button.act.ghost:hover { border-color:var(--lime); color:var(--lime); filter:none; }
button.act:focus-visible, nav a:focus-visible, .bcard:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.draft { font-size:18px; white-space:pre-wrap; margin:6px 0 12px; }
.note { color:var(--sage); font-size:15px; margin-top:12px; }
.empty { color:var(--sage); padding:14px 0; }
pre { white-space:pre-wrap; font:14px/1.5 var(--mono); margin:0; background:var(--floor); border:1px solid var(--edge); border-radius:12px; padding:12px; max-height:520px; overflow:auto; }
.mono { font:13px var(--mono); color:var(--sage); word-break:break-all; }
input.mono { font:13px var(--mono); color:var(--paper); }
.tbl { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 8px; border-bottom:1px solid var(--edge); vertical-align:top; font-size:16px; }
th { color:var(--sage); font:600 13px var(--head); white-space:nowrap; }
td.nowrap { white-space:nowrap; }
tr.pick { cursor:pointer; } tr.pick:hover td { background:rgba(183,208,130,.06); }
.st { font-weight:700; } .st.red { color:var(--rust); } .st.green { color:var(--lime); } .st.dim { color:var(--sage); font-weight:500; }
.red { color:var(--rust); font-weight:700; } .b { white-space:nowrap; }
.msg { font-size:15px; } .msg.red { color:var(--rust); } .msg.green { color:var(--lime); } .msg:empty { display:none; }
.chip { font:600 12px var(--head); padding:2px 8px; border-radius:999px; background:rgba(183,208,130,.12); color:var(--lime); }
.chip.off { background:none; border:1px solid var(--edge); color:var(--sage); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
/* clients: a grid three across; each card its lanes */
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.bcard { display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--edge); border-radius:14px; padding:16px; color:var(--paper); text-decoration:none; min-height:120px; }
.bcard:hover { border-color:rgba(183,208,130,.4); }
.bcard b { font:700 18px/1.25 var(--head); }
.lanes { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:6px; }
.lane { display:flex; flex-direction:column; gap:1px; padding:6px 0; border-top:1px solid var(--edge); }
.lane .k { font:600 12px var(--head); text-transform:uppercase; letter-spacing:.04em; }
.lane .n { font-size:15px; } .lane.none { grid-column:1 / -1; } .lane.none .n { color:var(--sage); }
.bcard .foot { margin-top:auto; padding-top:8px; font-size:14px; color:var(--sage); }
/* a workflow's state, at the right edge of its row: lime ready, rust blocked with why on hover, sage ran */
.ev .state { margin-left:auto; font:700 12px var(--head); text-transform:uppercase; letter-spacing:.04em; }
.state.ready { color:var(--lime); } .state.blocked { color:var(--rust); cursor:help; text-decoration:underline dotted; text-underline-offset:3px; } .state.done { color:var(--sage); }
/* the client: two columns */
.biz { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:22px; align-items:start; }
.fact { display:grid; grid-template-columns:14px minmax(110px, 32%) minmax(0, 1fr); gap:2px 10px; padding:7px 0; border-bottom:1px solid var(--edge); font-size:15px; align-items:baseline; }
.fact > span { min-width:0; overflow-wrap:anywhere; } .fact .key { font:600 14px var(--mono); color:var(--sage); } .fact .key i { font-style:normal; opacity:.55; } .fact .by { color:var(--sage); font-size:13px; margin-left:6px; }
.fact .m { color:var(--sage); font-size:12px; text-align:center; }
/* a family folds: the summary is a fact line whose mark is the chevron and whose value names what is inside */
details.family > summary { cursor:pointer; list-style:none; } details.family > summary::-webkit-details-marker { display:none; }
details.family > summary .key { color:var(--paper); } details.family > summary .m::before { content:"▸"; } details.family[open] > summary .m::before { content:"▾"; }
details.family[open] > summary { border-bottom-style:dashed; } details.family > .fact:last-child { border-bottom:1px solid var(--edge); }
.ev { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--edge); font-size:15px; align-items:baseline; flex-wrap:wrap; }
.ev .id { font:13px var(--mono); color:var(--sage); }
/* a workflow: what it is, its contract as rows, then the form built from its schema */
.about { margin:6px 0 12px; font-size:17px; } .hand-row { padding:4px 0; } .hand-row + .hand-row { border-top:1px solid var(--edge); margin-top:4px; } .hand-row i { font-style:normal; opacity:.6; } .rline .chips { display:inline-flex; }
/* a workflow's form, built from its schema */
.form .field > .k i { font-style:normal; opacity:.7; margin-left:6px; } .form input[type=week], .form input[type=month] { color-scheme:dark; width:auto; }
.form details { margin-top:14px; } .form summary { cursor:pointer; color:var(--sage); font:700 14px var(--head); } .form details textarea { margin-top:8px; font:14px/1.5 var(--mono); }
/* hands: every field a control */
.hand { margin-bottom:16px; }
.field { margin-top:14px; } .field > .k { display:block; margin-bottom:4px; } .field > .k i { font-style:normal; opacity:.7; margin-left:6px; }
.field ol, .field ul { margin:4px 0 0 20px; padding:0; } .field li { margin:3px 0; } .field li .k { margin-left:8px; }
.md p { margin:6px 0; } .md h1, .md h2, .md h3 { font:700 18px var(--head); color:var(--paper); margin:12px 0 4px; } .md ul { margin:4px 0 4px 20px; padding:0; }
.file { display:flex; gap:12px; align-items:center; background:var(--floor); border:1px dashed rgba(183,208,130,.3); border-radius:12px; padding:12px 14px; }
.file .kind { font:700 12px var(--head); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
figure { margin:0; } figure img { display:block; max-width:100%; max-height:360px; border-radius:12px; border:1px solid var(--edge); background:var(--floor); }
figure figcaption { font:13px var(--mono); color:var(--sage); margin-top:4px; }
iframe.page { width:100%; height:320px; border:1px solid var(--edge); border-radius:12px; background:#fff; }
.diff { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.diff pre { max-height:280px; } .diff .k { display:block; margin-bottom:4px; }
.opts { display:flex; flex-direction:column; gap:6px; } .opts label { display:flex; gap:10px; align-items:center; cursor:pointer; }
label.tick { display:inline-flex; gap:10px; align-items:center; padding:7px 0; cursor:pointer; }
.hand .actions { margin-top:18px; padding-top:14px; border-top:1px solid var(--edge); }
.hand .reason { margin-top:10px; }
iframe.live { width:100%; height:calc(100vh - 220px); min-height:480px; border:1px solid var(--edge); border-radius:16px; background:#fff; }
/* runs */
.rline { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:2px 12px; padding:8px 0; border-bottom:1px solid var(--edge); font-size:15px; }
.rline .k { font:600 13px var(--head); }
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.filters select, .filters input { width:auto; }
@media (max-width:900px) {
  .biz { grid-template-columns:1fr; } .grid3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  main { padding:36px 16px 64px; } nav { padding:12px 16px; gap:4px 14px; } nav b { width:100%; margin-bottom:2px; } #toast { padding:8px 16px; }
  input.short { width:100%; } #canopy { height:96px; } .diff { grid-template-columns:1fr; } .rline { grid-template-columns:1fr; gap:0; }
}
/* a table whose rows carry a sentence stacks into blocks on a phone, so the sentence is never off the right edge */
@media (max-width:700px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:auto; }
  table.stack tr:first-child { display:none; }
  table.stack tr { border-bottom:1px solid var(--edge); padding:10px 0; }
  table.stack td { border:0; padding:2px 0; }
}
@media (max-width:560px) { .grid3 { grid-template-columns:1fr; } h1 { font-size:26px; } nav #by { width:100%; } }
/* ---------------------------------------------------------------- the desk: the client's own page
   rust is the client's action, lime is done or waiting on them, paper is planned. nothing else is coloured. */
.deskonly { display:none !important; }
body.on-desk nav > b:not(.deskonly), body.on-desk nav a[data-tab], body.on-desk nav .count, body.on-desk nav #by, body.on-desk nav a.back { display:none !important; }
body.on-desk #desk-name { display:block !important; font:800 22px/1.2 var(--head); color:var(--lime); margin:0; width:auto; }
body.on-desk #desk-who { display:block !important; margin-left:auto; color:var(--sage); font:600 14px var(--head); }
body.on-desk #desk-who a { color:var(--sage); display:inline-block; padding:13px 4px; line-height:18px; } body.on-desk #desk-who a:hover { color:var(--lime); }
body.on-desk #desk-banner { display:block !important; max-width:1280px; margin:0 auto; padding:0 24px 6px; box-sizing:border-box; position:relative; z-index:1; color:var(--sage); font:600 13px var(--head); }
body.on-desk main { padding-top:28px; }
.desk { display:grid; grid-template-columns:minmax(300px, 360px) minmax(0, 1fr); grid-template-rows:auto 1fr; grid-template-areas:"stats main" "acts main"; gap:16px 22px; align-items:start; }
.desk > .dstats { grid-area:stats; margin:0; } .desk > .dacts { grid-area:acts; margin:0; } .desk > .dmain { grid-area:main; min-width:0; }
.desk h2 { margin-top:0; }
.desk .act { min-height:44px; box-sizing:border-box; }
a.act { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; background:var(--lime); color:var(--floor); border:1px solid var(--lime); border-radius:12px; padding:11px 20px; font:800 15px var(--head); }
a.act.ghost { background:none; border-color:rgba(183,208,130,.32); color:var(--paper); } a.act.ghost:hover { border-color:var(--lime); color:var(--lime); }
button.act:disabled { opacity:.5; cursor:wait; }
.none { color:var(--sage); font-style:italic; opacity:.8; }
.rust { color:var(--rust); }
.shead { display:flex; align-items:center; gap:10px; margin-bottom:12px; } .shead h2 { margin:0; color:var(--paper); font-size:18px; }
a.arrow { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; border-radius:12px; border:1px solid rgba(183,208,130,.32); color:var(--paper); text-decoration:none; font:700 22px/1 var(--head); flex:none; }
a.arrow:hover { border-color:var(--lime); color:var(--lime); }
/* statistics: tiles two across; one that opens something looks like it can be pressed, one that does not, does not */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; background:var(--panel-2); border:1px solid var(--edge); color:var(--paper); text-decoration:none; min-height:44px; }
a.tile { cursor:pointer; } a.tile:hover { border-color:var(--lime); } a.tile:hover .l { color:var(--lime); }
.tile.still { cursor:default; }
.tile .n { font:800 26px/1.1 var(--head); } .tile .l { font:600 13px var(--head); color:var(--sage); }
.alist { display:flex; flex-direction:column; gap:8px; } .alist .act { width:100%; text-align:left; justify-content:flex-start; }
/* the graph */
.gtotal { display:flex; flex-direction:column; margin-bottom:10px; } .gtotal .n { font:800 30px/1.1 var(--head); color:var(--lime); }
.seg { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.seg button { min-height:44px; min-width:44px; padding:0 14px; border-radius:12px; border:1px solid rgba(183,208,130,.32); background:none; color:var(--paper); font:700 14px var(--head); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.seg button.on { background:var(--lime); color:var(--floor); border-color:var(--lime); }
.cal { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .cal label { display:flex; flex-direction:column; font:600 13px var(--head); color:var(--sage); gap:4px; }
svg.graph { width:100%; height:auto; display:block; }
svg.graph text { fill:var(--sage); font:11px var(--body); } svg.graph .grid { stroke:rgba(238,243,226,.08); } svg.graph .axis { stroke:rgba(238,243,226,.35); }
svg.graph .bar { fill:var(--lime); } svg.graph .line { fill:none; stroke:var(--lime); stroke-width:2.5; stroke-linejoin:round; } svg.graph .area { fill:rgba(183,208,130,.14); } svg.graph .dot { fill:var(--lime); }
/* lead cards: red waiting on us, green waiting on them */
.lcards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.lcard { display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:14px; background:var(--panel); border:2px solid var(--lime); color:var(--paper); text-decoration:none; min-width:0; }
.lcard.us { border-color:var(--rust); } .lcard:hover { background:var(--panel-2); }
.lcard .top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .lcard .top b { font:700 18px var(--head); min-width:0; overflow-wrap:anywhere; }
.lcard .ago, .nitem .ago { font:800 14px var(--head); color:var(--paper); white-space:nowrap; }
.lcard .em { overflow-wrap:break-word; } .lcard .wline { color:var(--rust); font:600 14px var(--head); margin-top:4px; } .lcard .k { margin-top:6px; }
/* the crm */
input[type=search], input[type=tel], input[type=email] { width:100%; box-sizing:border-box; background:var(--floor); color:var(--paper); border:1px solid rgba(183,208,130,.28); border-radius:12px; padding:12px 14px; font:inherit; min-height:44px; }
#crm-q { margin-bottom:12px; }
.crm { display:flex; flex-direction:column; }
.crow { display:grid; grid-template-columns:1.4fr 1.1fr 1fr .9fr 1.4fr .6fr; gap:10px; padding:11px 12px; border-bottom:1px solid var(--edge); color:var(--paper); text-decoration:none; align-items:baseline; border-left:3px solid transparent; font-size:15px; }
.crow > span { min-width:0; overflow-wrap:anywhere; }
.crow.head { color:var(--sage); font:600 13px var(--head); } a.crow:hover { background:rgba(183,208,130,.06); }
.crow.us { border-left-color:var(--rust); } .crow.them { border-left-color:var(--lime); }
/* posts: two across; green published, paper scheduled, red flagged */
.pgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.post { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:14px; background:var(--panel); border:2px solid var(--paper); min-width:0; }
.post.published { border-color:var(--lime); } .post.flagged { border-color:var(--rust); }
.post .top { display:flex; justify-content:space-between; gap:8px; align-items:center; font:600 14px var(--head); color:var(--sage); }
.post b { font:700 17px var(--head); } .post .row { margin-top:auto; padding-top:8px; }
.pimg { width:100%; max-height:220px; object-fit:cover; border-radius:10px; }
.icons { display:inline-flex; gap:6px; } .pico { display:inline-flex; width:22px; height:22px; color:var(--paper); } .pico svg { width:100%; height:100%; }
.why { color:var(--rust); font-size:15px; display:block; }
.copy { white-space:pre-wrap; font-size:17px; }
/* blog: rows; green published, no border scheduled, red flagged */
.blist { display:flex; flex-direction:column; gap:8px; }
.brow { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 2fr) 150px 96px 76px 100px; gap:12px; padding:12px 14px; border-radius:12px; border:2px solid transparent; background:var(--panel); align-items:center; }
.brow.head { background:none; color:var(--sage); font:600 13px var(--head); padding-top:0; padding-bottom:0; }
.brow.published { border-color:var(--lime); } .brow.flagged { border-color:var(--rust); }
.brow .slug { font:13px var(--mono); overflow-wrap:anywhere; } .nowrap { white-space:nowrap; }
/* todos */
.tlist { display:flex; flex-direction:column; }
.trow { display:grid; grid-template-columns:44px minmax(0, 1fr) 170px 150px; gap:10px; padding:8px 0; border-bottom:1px solid var(--edge); align-items:center; }
.trow.head { color:var(--sage); font:600 13px var(--head); }
.trow .msg { grid-column:2 / -1; }
.trow .ttext { padding:10px 12px; min-height:44px; height:44px; resize:none; overflow:hidden; line-height:1.4; } .trow textarea.ttext:not(:focus) { background:transparent; border-color:transparent; } .trow textarea.ttext:hover { border-color:rgba(183,208,130,.28); }
.ttext.struck { text-decoration:line-through; color:var(--sage); }
input.saved, textarea.saved, button.saved { border-color:var(--lime) !important; }
.done { display:flex; align-items:center; justify-content:center; min-height:44px; cursor:pointer; } .done input { width:22px; height:22px; }
.tdelim { display:flex; align-items:center; gap:10px; margin:14px 0 4px; color:var(--sage); font:600 13px var(--head); }
.tdelim::before, .tdelim::after { content:""; flex:1; border-top:2px solid var(--paper); opacity:.6; }
.tdone { margin-top:18px; } .tdone summary { cursor:pointer; color:var(--sage); font:700 14px var(--head); min-height:44px; display:flex; align-items:center; }
/* a lead: details, the enrollment, the thread */
.drows { display:flex; flex-direction:column; }
.drow { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:4px 10px; padding:4px 0; border-bottom:1px solid var(--edge); align-items:center; }
.drow .msg { grid-column:2; }
.drow .val { text-align:left; background:none; border:1px solid transparent; border-radius:8px; color:var(--paper); font:inherit; padding:8px 8px; min-height:44px; overflow-wrap:break-word; min-width:0; white-space:pre-wrap; box-sizing:border-box; }
.drow span.val { display:flex; align-items:center; }
.drow button.val { cursor:text; } .drow button.val:hover { border-color:rgba(183,208,130,.28); }
.drow .vedit { padding:8px; min-height:44px; } .drow textarea.vedit { min-height:90px; }
.enr .ehead { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; } .enr .ehead h2 { color:var(--paper); font-size:20px; margin:0; }
.ladder { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 18px; flex-wrap:wrap; }
.ladder li { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid var(--edge); color:var(--sage); font:600 14px var(--head); }
.ladder .mark { display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; border:1px solid currentColor; font-size:12px; }
.ladder li.done { color:var(--lime); } .ladder li.done .mark { background:var(--lime); color:var(--floor); border-color:var(--lime); }
.ladder li.now { color:var(--paper); border:2px solid var(--paper); background:var(--panel-2); }
.needs { margin-bottom:14px; } .nrow { display:grid; grid-template-columns:minmax(120px, 40%) minmax(0, 1fr); gap:10px; padding:6px 0; border-bottom:1px solid var(--edge); font-size:15px; } .nrow > span { overflow-wrap:anywhere; }
.wait { color:var(--lime); font:700 15px var(--head); }
.handbox { border:2px solid var(--rust); border-radius:14px; padding:14px 16px; margin:16px 0; }
.handbox h2 { color:var(--rust); } .handbox .card { margin:0; padding:0; background:none; border:0; box-shadow:none; }
.handbox .head a, .handbox .card > .mono { display:none; }
.thread { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.bub { max-width:78%; padding:10px 14px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; }
.bub.them { align-self:flex-start; background:var(--panel-2); border-bottom-left-radius:4px; }
.bub.us { align-self:flex-end; background:var(--canopy); border-bottom-right-radius:4px; }
.bub .meta { display:block; margin-top:4px; font-size:12px; color:var(--sage); } .bub .dry { display:block; color:var(--paper); font-weight:700; }
.bub.call { border:1px dashed rgba(183,208,130,.4); white-space:normal; } .bub.call summary { cursor:pointer; color:var(--sage); font-size:14px; } .bub.call .tr { margin-top:6px; white-space:pre-wrap; }
.compose textarea { min-height:70px; }
/* the whole conversation scrolls in its own box, so the page never slides the lead's name under the header */
.enr [data-thread] .thread { max-height:60vh; overflow-y:auto; padding-right:4px; overscroll-behavior:contain; }
/* on the desk the header holds only a name, so it scrolls away rather than sitting over the page */
body.on-desk header { position:relative; }
.eitem { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) auto; gap:10px; padding:12px; border-bottom:1px solid var(--edge); color:var(--paper); text-decoration:none; align-items:baseline; }
.eitem.open { border-left:3px solid var(--paper); } a.eitem:hover { background:rgba(183,208,130,.06); }
/* the dialog */
dialog.dlg { background:var(--panel); color:var(--paper); border:1px solid var(--edge); border-radius:16px; padding:18px 20px; width:min(480px, calc(100vw - 32px)); box-sizing:border-box; max-height:calc(100vh - 32px); }
dialog.dlg.wide { width:min(640px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background:rgba(10,18,12,.7); }
.dlg .dh { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; } .dlg .dh b { font:800 20px var(--head); }
.dlg .x { background:none; border:0; color:var(--paper); font-size:28px; width:44px; height:44px; cursor:pointer; border-radius:12px; flex:none; } .dlg .x:hover { color:var(--lime); }
.dlg .fl { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font:600 14px var(--head); color:var(--sage); } .dlg .fl select { width:100%; min-height:44px; }
.dlg .opts label { min-height:44px; }
.dlg .act { min-height:44px; }
.nlist { display:flex; flex-direction:column; } .nitem { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; padding:12px 4px; border-bottom:1px solid var(--edge); color:var(--paper); text-decoration:none; min-height:44px; }
.nitem .k { grid-column:1; } .nitem .ago { grid-column:2; grid-row:1; } a.nitem:hover b { color:var(--lime); }
.timer { font:800 44px/1 var(--head); color:var(--paper); font-variant-numeric:tabular-nums; }
/* clients: the desk beside each card */
.bwrap { display:flex; flex-direction:column; gap:6px; } .bwrap .bcard { flex:1; }
a.todesk { font:700 14px var(--head); padding:8px 4px; text-decoration:none; } a.todesk:hover { text-decoration:underline; }
@media (max-width:900px) {
  .desk { grid-template-columns:1fr; grid-template-areas:"stats" "acts" "main"; }
  .lcards, .pgrid { grid-template-columns:1fr; }
  body.on-desk #desk-banner { padding:0 16px 6px; }
  body.on-desk #desk-name { width:auto; font-size:20px; margin-bottom:0; }
  .crow { grid-template-columns:1fr 1fr; } .crow.head { display:none; }
  .brow { grid-template-columns:1fr; gap:6px; } .brow.head { display:none; }
  .trow { grid-template-columns:44px minmax(0, 1fr); } .trow.head { display:none; } .trow .tw { grid-column:2; font-size:14px; color:var(--sage); } .trow .tw.rust { color:var(--rust); }
  .eitem { grid-template-columns:1fr; gap:2px; }
  .bub { max-width:90%; }
}
/* a control whose form is long, folded under its name until opened */
details.control > summary { cursor:pointer; font:700 15px var(--head); color:var(--sage); margin:22px 0 10px; }
details.control[open] > summary { color:var(--lime); }