/* The first screen inside a company: the first-steps panel for a company that has nothing yet, and (branch claude/dashboard) the dashboard cards */

/* ---------- first steps: a new company sees three steps instead of a page of zeros ---------- */
.firststeps h2{ margin:0 0 4px; font-size:calc(22px * var(--dt-cap,1)); letter-spacing:-.01em }
.firststeps > .pbody > p.muted{ margin:0 0 14px }
.fs-step{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line-soft) }
.fs-n{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--nile-tint); color:var(--nile-ink); font-weight:700; font-size:calc(15px * var(--dt,1)); display:flex; align-items:center; justify-content:center }
.fs-step.done .fs-n{ background:var(--nile); color:#fff }
.fs-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px } .fs-t b{ font-size:calc(15.5px * var(--dt,1)) } .fs-t small{ color:var(--muted); font-size:calc(13px * var(--dt,1)); line-height:1.45 }
.fs-step .btn{ flex:none } .fs-step .tag{ flex:none }
.fs-foot{ margin:14px 0 0; font-size:calc(13px * var(--dt,1)); line-height:1.6 }
@media(max-width:600px){ .fs-step{ flex-wrap:wrap } .fs-t{ flex:1 1 calc(100% - 50px) } .fs-step .btn{ margin-inline-start:50px; flex:1 1 100%; min-height:calc(44px * var(--dt,1)) } .fs-step .tag{ margin-inline-start:auto } }
html.native-ios .fs-step{ border-top:.5px solid var(--line) }

/* ---------- the dashboard (branch claude/dashboard): five cards, money chart, due soon, waiting for you, properties, gauge ---------- */
.dash{ --dp:#0A2540; --dpf:#fff; --da:#00A990; --dai:#00A990 }
.dcur{ font-size:calc(15px * var(--dt,1)); margin:18px 0 10px; font-weight:700 }
.dcards{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px }
@media(max-width:1180px){ .dcards{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:900px){ .dcards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .dcard.hero{ grid-column:1 / -1 } }
.dcard{ position:relative; text-align:start; background:var(--card); border:0; border-radius:20px; padding:16px 16px 14px; box-shadow:var(--sh-1); color:var(--ink); min-height:122px; display:flex; flex-direction:column; gap:3px; cursor:pointer; font:inherit; transition:transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease }
.dcard:hover{ box-shadow:var(--sh-2) } .dcard:active{ transform:scale(.98) }
.dcard .dk{ font-size:calc(13.5px * var(--dt,1)); font-weight:600; color:var(--muted); padding-inline-end:40px }
.dcard .dv{ font-size:calc(30px * var(--dt-cap,1)); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin-top:auto; color:var(--ink) }
.dcard .dv .num{ font-size:inherit } .dcard .dv .dcur{ font-size:.5em; font-weight:700; margin-inline-start:5px; opacity:.75 }
@media(max-width:900px){ .dcard .dv{ font-size:calc(26px * var(--dt-cap,1)) } }
.dcard .ds{ font-size:calc(12.5px * var(--dt,1)); color:var(--muted) }
.dcard .darrow{ position:absolute; top:12px; inset-inline-end:12px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink) }
.dcard .darrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
html[dir=rtl] .dcard .darrow svg{ transform:scaleX(-1) }
.dcard.hero{ background:var(--dp); color:var(--dpf) } .dcard.hero .dk,.dcard.hero .ds,.dcard.hero .dv{ color:inherit } .dcard.hero .dk,.dcard.hero .ds{ opacity:.82 }
.dcard.hero .darrow{ background:rgba(255,255,255,.92); color:#0A2540; border:0 }
.dcard.bad .dv{ color:var(--clay-ink) } .dcard.good .dv{ color:var(--nile-ink) }
.dgrid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start }
.dcol{ display:flex; flex-direction:column; gap:16px; min-width:0 } .dcol > .panel{ margin-bottom:0 }
@media(max-width:900px){ .dgrid{ grid-template-columns:1fr; gap:14px } .dcol{ gap:14px } }
.panel > h3 .dseg{ margin-inline-start:auto; padding:2px; background:var(--line-soft) } .dseg button{ padding:4px 12px; font-size:calc(12.5px * var(--dt,1)); min-height:calc(44px * var(--dt,1)) }
.panel > h3:has(.dseg){ padding-block:6px }   /* the 44 pt segments sit in the title row without making the panel taller than its neighbours */
/* the charts' text is in SVG units: the viewBox scales it to the panel (about 1.4 to 1.9 times at 375 px), so 12 is the floor in the chart's own units and the labels are not tied to --dt (a wider label would run into its neighbour) */
.dchart .pbody{ padding:8px 14px 12px } .dchart-svg{ width:100%; height:auto; display:block; max-height:190px } .dchart-svg text{ fill:var(--muted); font-size:12px } .dchart-svg .dval{ fill:var(--ink); font-weight:700; font-size:12px }
.dchart-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 4px 0; font-size:calc(13px * var(--dt,1)); color:var(--muted) } .dchart-foot b{ color:var(--ink) }
.dlist{ display:flex; flex-direction:column }
.ditem,.dprop{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 18px; border:0; border-top:1px solid var(--line-soft); background:none; color:var(--ink); font:inherit; text-align:start; cursor:pointer; min-height:calc(56px * var(--dt,1)) }
.ditem:first-child,.dprop:first-child{ border-top:0 } .ditem:hover,.dprop:hover{ background:var(--line-soft) }
.ditem .dic{ flex:none; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--nile-tint); color:var(--nile-ink) }
.ditem .dic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ditem .dic.warn{ background:var(--brass-tint); color:var(--brass-ink) } .ditem .dic.bad{ background:var(--clay-tint); color:var(--clay-ink) }
.ditem .dt,.dprop .dp-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px } .ditem .dt b,.dprop .dp-t b{ font-size:calc(14.5px * var(--dt,1)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .ditem .dt small,.dprop .dp-t small{ color:var(--muted); font-size:calc(12.5px * var(--dt,1)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ditem .dwhen{ flex:none; font-size:calc(12.5px * var(--dt,1)); color:var(--muted); text-align:end; white-space:nowrap } .ditem .dwhen.warn{ color:var(--brass-ink); font-weight:600 } .ditem .dwhen.bad{ color:var(--clay-ink); font-weight:600 }
.dprop .mdot{ flex:none; width:10px; height:10px; border-radius:50% }
.dprop .dp-bar{ flex:0 0 72px; height:7px; border-radius:7px; background:var(--line-soft); overflow:hidden } .dprop .dp-bar i{ display:block; height:100%; border-radius:7px }
.dprop .dp-pct{ flex:0 0 40px; text-align:end; font-size:calc(13px * var(--dt,1)); font-weight:600 }
@media(max-width:420px){ .dprop .dp-bar{ display:none } }
.dmore{ display:block; width:100%; padding:11px 18px 13px; border:0; border-top:1px solid var(--line-soft); background:none; color:var(--nile-ink); font:inherit; font-size:calc(13.5px * var(--dt,1)); font-weight:600; text-align:start; cursor:pointer; min-height:calc(44px * var(--dt,1)) }
.dgauge .pbody{ text-align:center; padding-top:4px } .dgauge svg{ width:min(100%,250px); height:auto; display:block; margin:0 auto } .dgauge .dpct{ font-size:28px; font-weight:800; fill:var(--ink) } .dgauge .dlbl{ font-size:12px; fill:var(--muted) }
.dlegend{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 14px; font-size:calc(12.5px * var(--dt,1)); color:var(--muted); margin-top:6px } .dlegend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-inline-end:6px; vertical-align:-1px }
html.native-ios .dcard{ border-radius:22px } html.native-ios .ditem,html.native-ios .dprop,html.native-ios .dmore{ border-top-color:var(--line) } html.native-ios .ditem:hover,html.native-ios .dprop:hover{ background:none } html.native-ios .ditem:active,html.native-ios .dprop:active{ background:var(--fill) }
.dmore:active{ background:var(--line-soft) } html.native-ios .dmore:active{ background:var(--fill) }   /* "See all" and the lead tiles press like their neighbours */
html[data-company-dark="true"] .dcard{ background:var(--card) } html[data-company-dark="true"] .dcard .darrow{ border-color:var(--btn-edge,#8d8e8a) }
@media(prefers-reduced-motion:reduce){ .dcard, .dstage{ transition:none } }

/* ---------- the dashboard's fast paths (branch claude/usability): still owed, quick actions, inline decisions ---------- */
/* still owed: a row is a div acting as a button so the Call link can sit inside it; the amount in the warning ink, the call capsule under it on narrow screens */
.dowed .ditem{ cursor:pointer } .dowed .ditem:focus-visible{ outline:2px solid var(--nile); outline-offset:-2px }
.dowed .damt{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:end }
.dowed .damt b{ font-size:calc(14.5px * var(--dt,1)); font-weight:700; color:var(--clay-ink); white-space:nowrap }
.dowed .damt .callbtn{ min-height:calc(44px * var(--dt,1)); padding:4px 12px 4px 10px; margin-inline-end:0 } .dowed .damt .callbtn .num{ display:none }   /* flush with the amount above it (design.css gives the capsule a trailing margin for the collection card) */
@media(min-width:901px){ .dowed .damt{ flex-direction:row; align-items:center; gap:12px } }
.dowed > h3 small{ margin-inline-start:8px; color:var(--muted); font-weight:500 }
/* waiting for you: Approve and Reject on the row, 44 pt; they wrap under the text on a phone */
.ditem .dact{ flex:none; display:flex; gap:6px } .ditem .dact .btn{ min-height:calc(44px * var(--dt,1)); padding:0 14px }
.dwait-row{ flex-wrap:wrap } .dwait-row:focus-visible{ outline:2px solid var(--nile); outline-offset:-2px }
@media(max-width:600px){ .dwait-row .dact{ flex:1 1 100%; margin-inline-start:50px } .dwait-row .dact .btn{ flex:1 } }
/* quick actions: one row of 44 pt capsules that scrolls sideways (mirrored in Arabic by the page direction), no scrollbar */
.qstrip{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; margin:0 0 14px; padding:2px 0 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity }
.qstrip::-webkit-scrollbar{ display:none }
.qa{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:calc(44px * var(--dt,1)); padding:0 18px; border:1px solid var(--line); border-radius:100px; background:var(--card); color:var(--ink); font:inherit; font-size:calc(14px * var(--dt,1)); font-weight:600; white-space:nowrap; cursor:pointer; box-shadow:var(--sh-1); scroll-snap-align:start; transition:transform .14s cubic-bezier(.2,.8,.2,1) }
.qa:active{ transform:scale(.97) } .qa.primary{ background:var(--nile-tint); border-color:transparent; color:var(--nile-ink) }   /* the readable pair, never white on the raw company accent */
html.native-ios .qa{ border:0; background:var(--fill); box-shadow:none } html.native-ios .qa.primary{ background:var(--nile-tint); color:var(--nile-ink) }   /* the native pair that reads in light and dark */
/* the country chips above it (views.js: countryStrip, owner round 5) are the same kind of row: one line that scrolls sideways, 8 pt apart, 44 pt capsules */
.chips.cstrip{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden; margin:0 0 14px; padding:2px 0 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity }
.chips.cstrip::-webkit-scrollbar{ display:none }
.chips.cstrip .chip{ flex:none; min-height:calc(44px * var(--dt,1)); white-space:nowrap; scroll-snap-align:start }
/* both rows share one inset (--strip-in, the page's side padding): they reach the screen edges, their padding puts the first capsule on the cards' leading edge
   (the right edge in Arabic), the scroll padding keeps it there after a snap (without it the snap pulled the first capsule under the screen edge), and the
   trailing padding lets the last capsule scroll fully into view */
.qstrip, .chips.cstrip{ --strip-in:0px; margin-inline:calc(-1 * var(--strip-in)); padding-inline:var(--strip-in); scroll-padding-inline:var(--strip-in) }
@media(max-width:900px){ .qstrip, .chips.cstrip{ --strip-in:14px } }
@media(max-width:900px){ html.native-ios .qstrip, html.native-ios .chips.cstrip{ --strip-in:16px } }
@media(prefers-reduced-motion:reduce){ .qa{ transition:none } }

/* ---------- CRM foundations (branch claude/crm-foundations): the leads board, the inbox, the rule book ---------- */
.crm-help{ font-size:calc(13.5px * var(--dt,1)); margin:0 0 14px; line-height:1.6 } .crm-hint{ font-size:calc(12.5px * var(--dt,1)); margin:6px 0 0; line-height:1.5 }
.lboard{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:start }
.lboard .panel{ margin-bottom:0 } .lstage > h3 small{ margin-inline-start:6px }
@media(max-width:1100px){ .lboard{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:700px){ .lboard{ grid-template-columns:1fr } }
.lcol{ display:flex; flex-direction:column; gap:10px; padding:12px }
.lcard,.ecard{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:12px 14px; box-shadow:var(--sh-1) }
.lc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px } .lc-top b{ font-size:calc(15.5px * var(--dt,1)); line-height:1.35 } .lc-top .tag{ flex:none }
.lc-sub{ font-size:calc(13px * var(--dt,1)); color:var(--ink-soft); margin:3px 0 2px } .lc-meta{ font-size:calc(12.5px * var(--dt,1)); color:var(--muted) } .lc-note{ font-size:calc(13.5px * var(--dt,1)); margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere }
.lc-line{ margin-top:8px } .lc-act{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.ethread{ margin-top:10px; border-top:1px solid var(--line-soft); padding-top:8px; display:flex; flex-direction:column; gap:8px }
.ereply{ background:var(--paper); border-radius:12px; padding:9px 12px } .ereply-body{ font-size:calc(13.5px * var(--dt,1)); white-space:pre-wrap; overflow-wrap:anywhere } .ereply-meta{ font-size:calc(12px * var(--dt,1)); color:var(--muted); margin-top:4px }
.setrow.tpl{ align-items:flex-start } .setrow.tpl .k{ color:var(--ink) } .setrow.tpl .tpl-body{ display:block; font-size:calc(13px * var(--dt,1)); color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; margin-top:4px; max-height:5.4em; overflow:hidden } .setrow.tpl.archived .k{ opacity:.6 }
textarea#rbPrices,textarea#rbTone,textarea#rbNever,textarea#ldNote,textarea#eqMsg,textarea#rpBody,textarea#tpBody,textarea#ldWhy{ width:100%; box-sizing:border-box; resize:vertical; font:inherit }
.dstages{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 14px 14px }
.dstage{ background:var(--paper); border:0; border-radius:14px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink); font:inherit; cursor:pointer; min-height:calc(62px * var(--dt,1)); transition:transform .14s cubic-bezier(.2,.8,.2,1) }
.dstage:active{ transform:scale(.96) }
.dstage b{ font-size:calc(20px * var(--dt-cap,1)); font-weight:800 } .dstage span{ font-size:calc(12px * var(--dt,1)); color:var(--muted); text-align:center; line-height:1.2 }
html.native-ios .lcard,html.native-ios .ecard{ border:0 } html.native-ios .ereply,html.native-ios .dstage{ background:var(--fill) }
html[data-company-dark="true"] .ereply,html[data-company-dark="true"] .dstage{ background:var(--paper) }
/* ---- cashflow (cashflow.js): the dashboard card, the screen's cards, chart, type bars and expense cards; money in is nile, money out is clay ---- */
.cfcard{ cursor:pointer } .cfcard:focus-visible{ outline:2px solid var(--nile); outline-offset:-2px }
.cfline{ padding:0 16px 12px } .cfline + .cfline{ border-top:1px solid var(--line-soft); padding-top:10px }
.cfcur{ font-size:calc(12.5px * var(--dt,1)); font-weight:700; color:var(--muted); margin-bottom:4px }
.cfline-body{ display:flex; align-items:center; gap:14px } .cfmini{ flex:0 0 176px; min-width:0 } .cfmini .cfsvg{ max-height:70px } .cfmini .dchart-svg text{ font-size:16px }   /* the small chart is drawn at 176 px for a 234-unit viewBox (0.75), so 16 units are 12 px on screen; under 640 px (below) it is full width */
.cfrow{ display:flex; gap:12px; flex:1; min-width:0 } .cftile{ flex:1; min-width:0 }
.cftile small{ display:block; font-size:calc(12px * var(--dt,1)); color:var(--muted) } .cftile b{ display:block; font-size:calc(15px * var(--dt,1)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cftile.in b{ color:var(--nile-ink) } .cftile.out b,.cftile.neg b{ color:var(--clay-ink) }
.cfcards{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px } .cfcards .panel.cftile{ flex:1; min-width:104px; margin:0; padding:12px 14px }
.cftile.big b{ font-size:calc(19px * var(--dt-cap,1)) }
/* the screen's three figures: on a phone the currency drops under the number instead of the amount being cut with an ellipsis */
@media (max-width:640px){ .cfcards .panel.cftile{ padding:10px 12px } .cfcards .cftile b{ white-space:normal; overflow:visible; text-overflow:clip; font-size:calc(17px * var(--dt,1)); line-height:1.2 } .cfcards .cftile b .num{ white-space:nowrap } }
.cfnote{ font-size:calc(12.5px * var(--dt,1)); margin:4px 2px 12px; line-height:1.5 }
.cfmonth{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 10px } .cfmonth b{ min-width:9em; text-align:center; font-size:calc(15.5px * var(--dt,1)) }
.cfarrow{ min-width:44px; min-height:calc(44px * var(--dt,1)); display:inline-flex; align-items:center; justify-content:center } .cfarrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
html[dir="rtl"] .cfarrow svg{ transform:scaleX(-1) }
.cfchips{ margin:0 0 10px }
.cftype{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:6px 0 } .cftype-k{ font-size:calc(14px * var(--dt,1)) } .cftype-v{ font-size:calc(13.5px * var(--dt,1)); font-weight:700 }
.cfbar{ grid-column:1 / -1; height:6px; border-radius:4px; background:var(--line-soft) } .cfbar i{ display:block; height:6px; border-radius:4px; background:var(--clay) }
td.cfneg{ color:var(--clay-ink) } td.cfpos{ color:var(--nile-ink) }
.cfent{ display:flex; gap:12px; align-items:flex-start } .cfent-main{ flex:1; min-width:0 }
.cfthumb{ flex:none; width:52px; height:52px; padding:0; border:1px solid var(--line-soft); border-radius:10px; overflow:hidden; background:var(--line-soft); cursor:pointer }
.cfthumb img{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:640px){ .cfline-body{ flex-direction:column; align-items:stretch; gap:6px } .cfmini{ flex:none } .cfmini .dchart-svg text{ font-size:12px } .cftile b{ font-size:calc(14px * var(--dt,1)) } .cfline{ padding:0 14px 10px } }