/* Pier - My Wix Designer's studio app (concept). Layout: dark sidebar + paper workspace on desktop,
   bottom tab bar on phones. Brand: Raveo, mint on forest and paper, tight corners, sentence case. */

@font-face { font-family: "Raveo"; src: url("fonts/raveo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raveo"; src: url("fonts/raveo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Raveo"; src: url("fonts/raveo-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Raveo Display"; src: url("fonts/raveo-display-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #0f1512; --forest: #121c16; --forest-2: #1a2820; --forest-3: #23362b;
  --paper: #f4f4f1; --paper-2: #e9eae5; --card: #ffffff;
  --mint: #82f485; --mint-deep: #2f9e4c; --mint-wash: #d9f8d6;
  --gold: #f2c879;  --gold-deep: #94650f;  --gold-wash: #fbf0d8;
  --sky: #9cc9f5;   --sky-deep: #2b67a3;   --sky-wash: #e4f0fc;
  --lilac: #c7a4f2; --lilac-deep: #6b43b0; --lilac-wash: #f0e8fc;
  --coral: #f59e82; --coral-deep: #b4472a; --coral-wash: #fde8e0;
  --ink-80: rgba(15,21,18,.8); --ink-64: rgba(15,21,18,.64); --ink-48: rgba(15,21,18,.52);
  --ink-24: rgba(15,21,18,.24); --ink-12: rgba(15,21,18,.12); --ink-08: rgba(15,21,18,.08); --ink-04: rgba(15,21,18,.04);
  --paper-80: rgba(244,244,241,.8); --paper-64: rgba(244,244,241,.66); --paper-40: rgba(244,244,241,.4); --paper-12: rgba(244,244,241,.12); --paper-06: rgba(244,244,241,.06);
  --f-display: "Raveo Display", "Raveo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Raveo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --ease: cubic-bezier(.2,.75,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --side: 248px; --top: 68px;
  --shadow-1: 0 1px 2px rgba(15,21,18,.06), 0 2px 8px -4px rgba(15,21,18,.12);
  --shadow-2: 0 2px 4px rgba(15,21,18,.06), 0 18px 36px -18px rgba(15,21,18,.35);
}
/* a client's colours, for the white-label demo */
:root.theme-client {
  --mint: #ffb38a; --mint-deep: #c4561f; --mint-wash: #ffe9dc;
  --forest: #14243a; --forest-2: #1c3150; --forest-3: #274063; --ink: #0f1a2a;
}
:root, body, .side, .card, .btn { transition: background-color .6s var(--ease), color .6s var(--ease); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--f-text); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; border-radius: var(--r-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-size: .8125em; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-64); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- boot screen ---------- */
.boot { position: fixed; inset: 0; z-index: 100; background: var(--forest); color: var(--paper); display: grid; place-items: center; overflow: hidden; }
.boot__in { width: min(420px, 82vw); display: grid; gap: 22px; justify-items: start; }
.boot__mark { display: flex; align-items: center; gap: 14px; }
.boot__name { font: 500 64px/1 var(--f-display); letter-spacing: -.04em; display: flex; }
.boot__name span { display: inline-block; opacity: 0; transform: translateY(40%); animation: rise .7s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i) * .07s); }
.boot__wm { width: 220px; color: var(--paper-64); clip-path: inset(0 100% 0 0); animation: wipe 1s var(--ease-out) .7s forwards; }
.boot__bar { width: 100%; height: 3px; background: var(--paper-12); border-radius: 2px; overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--mint); box-shadow: 0 0 14px var(--mint); transition: width .5s var(--ease); }
.boot__quip { font-size: 14px; color: var(--paper-64); min-height: 21px; }
.boot__quip span { display: inline-block; animation: fadeup .35s var(--ease-out); }
.boot__waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; opacity: .8; }
.boot.out { animation: bootout .8s var(--ease-out) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }
@keyframes bootout { to { clip-path: inset(0 0 100% 0); } }

.pmark { width: 44px; height: 44px; border-radius: var(--r); background: var(--mint); color: var(--ink); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 0 rgba(130,244,133,.5); }
.pmark svg { width: 62%; height: 62%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.pmark .wave { animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 50% { transform: translateX(-2px); } }
.boot .pmark { width: 64px; height: 64px; animation: pop .6s var(--spring) .1s backwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; background: var(--forest); color: var(--paper); display: flex; flex-direction: column; padding: 18px 14px 14px; gap: 18px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 6px; text-decoration: none; }
.brand .pmark { width: 38px; height: 38px; }
.brand__t { display: grid; gap: 3px; }
.brand__t b { font: 500 26px/1 var(--f-display); letter-spacing: -.035em; }
.brand__t svg { width: 104px; height: 13px; color: var(--paper-40); }
.nav { position: relative; display: grid; gap: 2px; }
.nav__ind { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: var(--r); background: var(--paper-06); box-shadow: inset 2px 0 0 var(--mint); transition: transform .45s var(--ease-out), height .3s; pointer-events: none; }
.nav__a { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px 0 12px; border-radius: var(--r); color: var(--paper-64); font-weight: 500; text-align: left; transition: color .25s; }
.nav__a:hover { color: var(--paper); }
.nav__a[aria-current="page"] { color: var(--paper); }
.nav__a[aria-current="page"] svg { color: var(--mint); }
.nav__a .n { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--paper-12); color: var(--paper); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.nav__a .n.hot { background: var(--mint); color: var(--ink); }
.nav__a .n.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.35); } }
.nav__sec { font-size: 12px; color: var(--paper-40); padding: 10px 12px 4px; }
.side__foot { margin-top: auto; display: grid; gap: 10px; }
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--paper-06); border-radius: var(--r); position: relative; }
.who__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: var(--r-sm); background: var(--paper-12); transition: transform .4s var(--ease-out); }
.who[data-who="dixit"] .who__ind { transform: translateX(calc(100% + 4px)); }
.who button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: var(--r-sm); color: var(--paper-64); font-weight: 600; font-size: 14px; }
.who button[aria-pressed="true"] { color: var(--paper); }
.side__note { font-size: 12px; color: var(--paper-40); padding: 0 6px; display: flex; gap: 8px; align-items: center; }
.side__note i { width: 8px; height: 8px; border-radius: 2px; background: var(--gold); flex: none; }

.av { width: 30px; height: 30px; border-radius: var(--r-sm); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink); flex: none; letter-spacing: 0; }
.av--sm { width: 22px; height: 22px; font-size: 10px; }
.av--gold { background: var(--gold); } .av--sky { background: var(--sky); } .av--lilac { background: var(--lilac); } .av--coral { background: var(--coral); }
.av--claude { background: var(--ink); color: var(--mint); }
.av--claude svg { width: 60%; height: 60%; fill: currentColor; stroke: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(244,244,241,.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ink-08); }
.top__title { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; min-width: 0; }
.top__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__mob { display: none; }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; height: 40px; width: min(340px, 34vw); padding: 0 8px 0 12px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); color: var(--ink-48); transition: box-shadow .25s; }
.search:hover { box-shadow: inset 0 0 0 1px var(--ink-24), var(--shadow-1); }
.search kbd { margin-left: auto; font: 600 11px/1 var(--f-text); padding: 5px 6px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-64); }
.clocks { display: flex; gap: 6px; }
.clock { display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); min-width: 82px; }
.clock small { font-size: 11px; color: var(--ink-48); line-height: 1.2; }
.clock b { font-size: 14px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.iconbtn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); transition: transform .25s var(--ease-out), box-shadow .25s; }
.iconbtn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ink-24), var(--shadow-1); }
.iconbtn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--coral-deep); box-shadow: 0 0 0 2px var(--card); }
.iconbtn.ringing svg { animation: ring .8s var(--ease) 2; transform-origin: 50% 10%; }
@keyframes ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

.view { padding: 28px 28px 80px; max-width: 1440px; width: 100%; margin: 0 auto; min-width: 0; }
.rv { animation: rv .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rv { from { opacity: 0; transform: translateY(14px); } }

/* ---------- type ---------- */
.h1 { font: 500 clamp(30px, 2.2vw + 14px, 46px)/1.04 var(--f-display); letter-spacing: -.04em; margin: 0; }
.h2 { font: 500 22px/1.15 var(--f-display); letter-spacing: -.03em; margin: 0; }
.h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; margin: 0; line-height: 1.3; }
.lead { font-size: 17px; color: var(--ink-64); margin: 8px 0 0; }
.sec { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 34px 0 14px; flex-wrap: wrap; }
.sec p { margin: 4px 0 0; color: var(--ink-64); font-size: 14px; }
.word { display: inline-block; opacity: 0; transform: translateY(.4em); animation: rise .7s var(--ease-out) forwards; animation-delay: calc(var(--i) * 60ms); }

/* ---------- tags, chips, buttons ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--paper-2); color: var(--ink); }
.tag svg { width: 13px; height: 13px; }
.tag--mint { background: var(--mint); } .tag--mintw { background: var(--mint-wash); color: #16602c; }
.tag--gold { background: var(--gold-wash); color: var(--gold-deep); } .tag--sky { background: var(--sky-wash); color: var(--sky-deep); }
.tag--lilac { background: var(--lilac-wash); color: var(--lilac-deep); } .tag--coral { background: var(--coral-wash); color: var(--coral-deep); }
.tag--ink { background: var(--ink); color: var(--paper); }
.tag--line { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-12); color: var(--ink-64); }
.tag--live svg { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn { --bg: var(--ink); --fg: var(--paper); --k-bg: var(--mint); --k-fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 16px; border-radius: var(--r); background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; isolation: isolate;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 2px rgba(15,21,18,.22), 0 8px 18px -10px rgba(15,21,18,.55);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), var(--glow, rgba(130,244,133,.42)), transparent 70%); }
.btn:hover::before { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn--mint { --bg: var(--mint); --fg: var(--ink); --k-bg: var(--ink); --k-fg: var(--mint); --glow: rgba(255,255,255,.6); }
.btn--ghost { --bg: var(--card); --fg: var(--ink); --k-bg: var(--paper-2); --k-fg: var(--ink); background-image: none; box-shadow: inset 0 0 0 1px var(--ink-12); --glow: rgba(130,244,133,.25); }
.btn--sm { height: 36px; font-size: 14px; padding: 0 5px 0 12px; gap: 10px; }
.btn--plain { padding: 0 14px; }
.btn .k { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--k-bg); color: var(--k-fg); display: grid; place-items: center; overflow: hidden; position: relative; transition: transform .45s var(--ease-out); }
.btn--sm .k { width: 26px; height: 26px; }
.btn .k svg { width: 15px; height: 15px; position: absolute; transition: transform .5s var(--ease-out); }
.btn .k svg + svg { transform: translateX(-180%); }
.btn:hover .k svg:first-child { transform: translateX(180%); }
.btn:hover .k svg + svg { transform: translateX(0); }
.btn .roll { position: relative; display: block; height: 1.5em; line-height: 1.5; overflow: hidden; }
.btn .roll > span { display: block; transition: transform .5s var(--ease-out); }
.btn .roll > span::after { content: attr(data-t); display: block; }
.btn:hover .roll > span { transform: translateY(-50%); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .25; transform: scale(0); animation: ripple .7s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.lnk svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.lnk:hover svg { transform: translateX(3px); }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* hold to confirm */
.hold { --p: 0; position: relative; }
.hold .k { background: conic-gradient(var(--k-fg) calc(var(--p) * 1turn), var(--k-bg) 0); }
.hold .k svg { color: var(--k-fg); mix-blend-mode: difference; }
.hold.done .k { background: var(--k-bg); }
.holdw { display: inline-grid; gap: 6px; justify-items: center; }
.holdw small { font-size: 11.5px; color: var(--ink-48); font-weight: 500; white-space: nowrap; transition: color .3s; }
.holdw:has(.hold:active) small { color: var(--mint-deep); }
.dk__r .holdw { justify-items: stretch; text-align: center; }

/* ---------- cards ---------- */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--ink-08), var(--shadow-1); position: relative; }
.card--pad { padding: 20px; }
.card--lift { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.card--lift:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ink-12), var(--shadow-2); }
.card--dark { background: var(--forest); color: var(--paper); box-shadow: none; }
.card--dark .muted { color: var(--paper-64); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ---------- today ---------- */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.hello__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.need { display: grid; gap: 14px; padding: 16px; text-align: left; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08), var(--shadow-1); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); position: relative; overflow: hidden; }
.need::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--acc, var(--mint)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.need:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ink-12), var(--shadow-2); }
.need:hover::after { transform: scaleX(1); }
.need__top { display: flex; align-items: center; justify-content: space-between; }
.need__ic { width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc-w, var(--mint-wash)); color: var(--acc-d, var(--mint-deep)); }
.need__n { font: 500 40px/1 var(--f-display); letter-spacing: -.04em; }
.need__l { font-weight: 600; letter-spacing: -.015em; }
.need__s { font-size: 13px; color: var(--ink-64); margin-top: 2px; }
.stat { display: grid; gap: 6px; }
.stat b { font: 500 34px/1 var(--f-display); letter-spacing: -.04em; }
.stat .d { font-size: 13px; font-weight: 600; color: var(--mint-deep); display: inline-flex; gap: 4px; align-items: center; }
.stat .d.down { color: var(--coral-deep); }
.spark { width: 100%; height: 44px; overflow: visible; }
.spark path.l { fill: none; stroke: var(--mint-deep); stroke-width: 2; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s var(--ease-out) .2s forwards; }
.spark path.a { fill: var(--mint-wash); opacity: 0; animation: fadein .8s .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: .8; } }

.feed { display: grid; }
.feed__i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ink-08); }
.feed__i:first-child { border-top: 0; }
.feed__i.new { animation: feednew .8s var(--ease-out); }
@keyframes feednew { from { opacity: 0; transform: translateX(-10px); background: var(--mint-wash); } }
.feed__t { font-size: 14px; } .feed__t b { font-weight: 600; }
.feed__w { font-size: 12px; color: var(--ink-48); white-space: nowrap; }

.streak { display: grid; gap: 14px; }
.streak__n { display: flex; align-items: end; gap: 10px; }
.streak__n b { font: 500 72px/.9 var(--f-display); letter-spacing: -.05em; color: var(--mint); }
.streak__bars { display: flex; gap: 5px; align-items: end; height: 48px; }
.streak__bars i { flex: 1; border-radius: 2px; background: var(--mint); height: var(--h); transform-origin: bottom; animation: grow .8s var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms); }
.streak__bars i.fix { background: var(--gold); }
@keyframes grow { from { transform: scaleY(0); } }
.flame { width: 34px; height: 34px; color: var(--gold); animation: flick 1.4s ease-in-out infinite; transform-origin: bottom; }
@keyframes flick { 50% { transform: scale(1.06, .96) rotate(-2deg); } }

/* ---------- shipyard ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r); background: var(--paper-2); }
.seg button { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--ink-64); transition: background-color .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.board { display: grid; grid-template-columns: repeat(5, minmax(208px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.col { background: var(--paper-2); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 10px; align-content: start; min-height: 240px; scroll-snap-align: start; transition: background-color .25s, box-shadow .25s; }
.col.over { background: var(--mint-wash); box-shadow: inset 0 0 0 2px var(--mint-deep); }
.col.nope { background: var(--coral-wash); box-shadow: inset 0 0 0 2px var(--coral-deep); }
.col__h { display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; font-weight: 600; font-size: 14px; }
.col__h .c { margin-left: auto; font-size: 12px; color: var(--ink-48); }
.col__h i { width: 10px; height: 10px; border-radius: 2px; background: var(--acc); }
.col__hint { font-size: 12px; color: var(--ink-48); padding: 0 4px; margin-top: -6px; }
.tk { display: grid; gap: 10px; padding: 12px; background: var(--card); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--ink-08), var(--shadow-1); cursor: pointer; text-align: left; width: 100%; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), opacity .3s; position: relative; overflow: hidden; }
.tk:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-12), var(--shadow-2); }
.tk.drag { opacity: .4; transform: rotate(-2deg) scale(.98); }
.tk.land { animation: land .6s var(--spring); }
@keyframes land { from { transform: scale(.92); box-shadow: 0 0 0 4px var(--mint); } }
.tk__top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tk__ref { font-family: var(--f-mono); font-size: 11px; color: var(--ink-48); }
.tk__t { font-weight: 600; font-size: 14px; letter-spacing: -.015em; line-height: 1.35; }
.tk__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, transparent); }
.tk__scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(130,244,133,.28), transparent); transform: translateX(-100%); animation: scan 1.6s var(--ease) infinite; }
@keyframes scan { to { transform: translateX(100%); } }
.tk__prog { height: 3px; border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.tk__prog i { display: block; height: 100%; width: var(--w, 0%); background: var(--mint-deep); transition: width .6s var(--ease); }

/* drawer */
.scrim { position: fixed; inset: 0; z-index: 46; background: rgba(15,21,18,.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadein2 .3s; }
@keyframes fadein2 { from { opacity: 0; } }
.drawer { position: fixed; z-index: 47; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--paper); box-shadow: -30px 0 60px -30px rgba(15,21,18,.5); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: slidein .5s var(--ease-out); }
.drawer.closing { animation: slideout .3s var(--ease) forwards; }
@keyframes slidein { from { transform: translateX(100%); } }
@keyframes slideout { to { transform: translateX(100%); } }
.drawer__h { padding: 18px 22px 16px; border-bottom: 1px solid var(--ink-08); display: grid; gap: 10px; background: var(--card); }
.drawer__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawer__x { margin-left: auto; }
.drawer__b { overflow-y: auto; padding: 20px 22px 28px; display: grid; gap: 22px; align-content: start; grid-auto-rows: max-content; }
.drawer__f { padding: 14px 22px 26px; border-top: 1px solid var(--ink-08); background: var(--card); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drawer__f .muted { font-size: 13px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps div { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-48); }
.steps div i { height: 4px; border-radius: 2px; background: var(--paper-2); position: relative; overflow: hidden; }
.steps div.on { color: var(--ink); } .steps div.on i { background: var(--mint-deep); }
.steps div.now i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: scan 1.4s infinite; }
.blk { display: grid; gap: 10px; }
.blk__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.ol li { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.ol li::before { content: counter(s); width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--paper-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.checks { display: grid; gap: 2px; }
.ck { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--r); font-size: 14px; transition: background-color .4s; }
.ck__b { width: 22px; height: 22px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1.5px var(--ink-24); display: grid; place-items: center; transition: background-color .3s, box-shadow .3s; }
.ck__b svg { width: 14px; height: 14px; stroke: var(--ink); stroke-width: 2.6; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ck.ok { background: var(--mint-wash); } .ck.ok .ck__b { background: var(--mint); box-shadow: none; } .ck.ok .ck__b svg { animation: dash .4s var(--ease-out) forwards; }
.ck.bad { background: var(--coral-wash); } .ck.bad .ck__b { background: var(--coral); box-shadow: none; } .ck.bad .ck__b svg { animation: dash .4s var(--ease-out) forwards; }
.ck.now { background: var(--card); box-shadow: inset 0 0 0 1px var(--mint-deep); }
.ck.now .ck__b { animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--mint-deep), 0 0 0 4px rgba(47,158,76,.18); } }
@keyframes dash { to { stroke-dashoffset: 0; } }
.ck__ev { display: block; font-size: 12px; color: var(--ink-64); margin-top: 2px; }
.ck__ev .mono { color: var(--ink-80); }

.drop { border-radius: var(--r-lg); border: 1.5px dashed var(--ink-24); background: var(--card); padding: 18px; display: grid; justify-items: center; gap: 6px; text-align: center; transition: border-color .25s, background-color .25s, transform .3s var(--ease-out); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--mint-deep); background: var(--mint-wash); }
.drop.over { transform: scale(1.01); }
.drop b { font-weight: 600; } .drop span { font-size: 13px; color: var(--ink-64); }
.ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ev__i { border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); overflow: hidden; display: grid; animation: pop .45s var(--spring); position: relative; }
.ev__th { height: 76px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; color: var(--ink-48); }
.ev__th img { width: 100%; height: 100%; object-fit: cover; }
.ev__n { font-size: 11px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ev__i.scanning::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: scanv 1.2s linear infinite; }
@keyframes scanv { from { top: 0; } to { top: 100%; } }
.mini { width: 100%; height: 100%; display: grid; grid-template-rows: 10px 1fr; background: #fff; }
.mini i { background: var(--forest); }
.mini b { margin: 8px; border-radius: 2px; background: linear-gradient(var(--paper-2) 0 30%, transparent 30% 40%, var(--paper-2) 40% 52%, transparent 52% 62%, var(--mint-wash) 62%); }
.csv { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csv th, .csv td { padding: 7px 8px; border-top: 1px solid var(--ink-08); text-align: left; vertical-align: top; }
.csv th { font-size: 11px; color: var(--ink-48); font-weight: 600; border-top: 0; }
.csv td:first-child { font-family: var(--f-mono); font-size: 11.5px; }
.csv .st { font-weight: 700; }
.csv tr.hl { animation: hlrow 1s; }
@keyframes hlrow { from { background: var(--mint-wash); } }
textarea.in, input.in { width: 100%; border: 0; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); padding: 10px 12px; font-size: 14px; resize: vertical; transition: box-shadow .25s; }
textarea.in:focus, input.in:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--mint-deep); }

.verdict { border-radius: var(--r-lg); padding: 18px; display: grid; gap: 12px; animation: stamp .6s var(--spring); position: relative; overflow: hidden; }
.verdict--pass { background: var(--forest); color: var(--paper); }
.verdict--fix { background: var(--gold-wash); }
.verdict--ryan { background: var(--coral-wash); }
@keyframes stamp { from { transform: scale(1.08) rotate(-1.5deg); opacity: 0; } }
.verdict__h { display: flex; align-items: center; gap: 10px; }
.verdict__h b { font: 500 26px/1 var(--f-display); letter-spacing: -.03em; }
.conf { display: grid; gap: 6px; font-size: 13px; }
.conf__bar { height: 6px; border-radius: 3px; background: var(--paper-12); overflow: hidden; }
.verdict--fix .conf__bar, .verdict--ryan .conf__bar { background: rgba(15,21,18,.1); }
.conf__bar i { display: block; height: 100%; width: 0; background: var(--mint); transition: width 1.2s var(--ease-out); }
.verdict--fix .conf__bar i { background: var(--gold-deep); }
.thinking { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--forest); color: var(--paper); }
.thinking__l { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.thinking__l .av { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(130,244,133,.15); } }
.thinking__s { font-size: 13px; color: var(--paper-64); min-height: 20px; }
.thinking__s span { animation: fadeup .3s var(--ease-out); display: inline-block; }
.dots i { display: inline-block; width: 4px; height: 4px; margin-left: 2px; border-radius: 1px; background: var(--mint); animation: dots 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { opacity: .2; transform: translateY(-3px); } }
.chain { display: grid; gap: 0; }
.chain__i { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.chain__i::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--ink-12); }
.chain__i:last-child::before { display: none; }
.chain__d { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--paper-2); display: grid; place-items: center; }
.chain__d svg { width: 13px; height: 13px; }
.chain__i.cur .chain__d { background: var(--mint); }
.chain__i.old .chain__d { background: var(--gold-wash); color: var(--gold-deep); }
.chain__t { font-size: 14px; } .chain__t b { font-weight: 600; } .chain__t span { display: block; font-size: 12.5px; color: var(--ink-64); }
.callout { border-radius: var(--r-lg); padding: 14px 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); display: grid; gap: 8px; font-size: 14px; }
.callout--warn { background: var(--gold-wash); box-shadow: none; }
.callout--bad { background: var(--coral-wash); box-shadow: none; }

/* ---------- desk ---------- */
.dk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; padding: 20px; }
.dk__l { display: grid; gap: 10px; align-content: start; }
.serp { border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); padding: 14px 16px; display: grid; gap: 3px; font-family: Arial, sans-serif; }
.serp__u { font-size: 12px; color: #202124; } .serp__t { font-size: 18px; color: #1a0dab; line-height: 1.3; } .serp__d { font-size: 13px; color: #4d5156; line-height: 1.5; }
.serp__k { font-family: var(--f-text); font-size: 11px; font-weight: 600; color: var(--ink-48); margin-bottom: 4px; }
.dk__r { display: grid; gap: 10px; align-content: start; justify-items: stretch; padding-left: 18px; border-left: 1px solid var(--ink-08); }
.dk.gone { animation: gone .6s var(--ease) forwards; }
@keyframes gone { to { opacity: 0; transform: translateX(40px) scale(.98); } }
.state { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }

/* ---------- clients ---------- */
.cl { padding: 18px; display: grid; gap: 14px; text-align: left; width: 100%; }
.cl__top { display: flex; gap: 12px; align-items: center; }
.cl__logo { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; font: 500 18px/1 var(--f-display); letter-spacing: -.03em; background: var(--acc-w); color: var(--acc-d); flex: none; }
.cl__n { font-weight: 600; letter-spacing: -.015em; } .cl__s { font-size: 13px; color: var(--ink-64); }
.ring { width: 56px; height: 56px; margin-left: auto; flex: none; position: relative; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .bg { stroke: var(--paper-2); }
.ring .fg { stroke: var(--mint-deep); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; transition: stroke-dashoffset 1.4s var(--ease-out); }
.ring b { font-size: 15px; font-weight: 700; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kv div { padding: 8px 10px; border-radius: var(--r); background: var(--paper); }
.kv small { display: block; font-size: 11px; color: var(--ink-48); } .kv b { font-size: 14px; font-weight: 600; }

/* ---------- snags ---------- */
.sn { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.shot { position: relative; height: 130px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--ink-08); overflow: hidden; }
.shot__bar { height: 12px; background: var(--acc-d, var(--forest)); }
.shot__c { position: absolute; inset: 12px 0 0; padding: 10px; display: grid; gap: 6px; align-content: start; }
.shot__c i { display: block; height: 7px; border-radius: 2px; background: var(--paper-2); }
.shot__c i:nth-child(2) { width: 70%; } .shot__c i:nth-child(3) { width: 82%; } .shot__c i.btnm { width: 42%; height: 14px; background: var(--acc, var(--mint)); }
.pin { position: absolute; left: var(--x); top: var(--y); width: 24px; height: 24px; margin: -12px; border-radius: 50% 50% 50% 2px; background: var(--coral-deep); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; transform: rotate(-45deg); box-shadow: 0 4px 10px -2px rgba(180,71,42,.6); animation: pinbounce 2s var(--ease) infinite; }
.pin span { transform: rotate(45deg); }
@keyframes pinbounce { 0%, 70%, 100% { margin-top: -12px; } 80% { margin-top: -18px; } }
.fly { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: var(--r-sm); background: var(--mint); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-2); transition: transform .8s var(--ease-out), opacity .8s; }

/* ---------- leads ---------- */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.ld { padding: 12px; display: grid; gap: 8px; }
.ld__v { font: 500 22px/1 var(--f-display); letter-spacing: -.03em; }
.meter { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); background: var(--acc, var(--mint-deep)); border-radius: 3px; animation: growx 1.2s var(--ease-out) backwards; transform-origin: left; }
@keyframes growx { from { transform: scaleX(0); } }

/* ---------- pulse ---------- */
.chart { width: 100%; height: 260px; overflow: visible; }
.chart .gl { stroke: var(--ink-08); }
.chart .ax { font-size: 11px; fill: var(--ink-48); font-family: var(--f-text); }
.chart .act { fill: none; stroke: var(--mint-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.6s var(--ease-out) .2s forwards; }
.chart .proj { fill: none; stroke: var(--mint-deep); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0; animation: fadein 1s 1.6s forwards; }
.chart .tgt { stroke: var(--gold-deep); stroke-width: 1.5; stroke-dasharray: 2 4; }
.chart .area { fill: var(--mint-wash); opacity: 0; animation: fadein 1s 1s forwards; }
.chart .dotp { fill: var(--mint-deep); stroke: var(--card); stroke-width: 2; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-64); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 0; border-top: 2.5px solid var(--mint-deep); }
.legend i.p { border-top-style: dashed; } .legend i.t { border-top: 2px dotted var(--gold-deep); }
.kw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ink-08); font-size: 14px; }
.kw:first-child { border-top: 0; }
.mv { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.mv.up { color: var(--mint-deep); } .mv.dn { color: var(--coral-deep); }

/* ---------- blueprint ---------- */
.phase { display: grid; gap: 12px; }
.phase__h { display: flex; align-items: center; gap: 10px; }
.phase__h .num { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--ink); color: var(--mint); display: grid; place-items: center; font-weight: 700; }
.mod { padding: 18px; display: grid; gap: 12px; align-content: start; }
.mod__ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--acc-w); color: var(--acc-d); }
.mod ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-80); display: grid; gap: 4px; }
.mod details { font-size: 13.5px; }
.mod summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.mod summary::-webkit-details-marker { display: none; }
.mod summary svg { transition: transform .3s var(--ease-out); width: 14px; height: 14px; }
.mod details[open] summary svg { transform: rotate(90deg); }
.mod details p { margin: 8px 0 0; color: var(--ink-64); }
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 2px 10px; }
.flow__n { flex: 1 0 128px; display: grid; gap: 4px; padding: 12px; border-radius: var(--r); background: var(--forest-2); color: var(--paper); font-size: 13px; }
.flow__n b { font-size: 14px; } .flow__n span { color: var(--paper-64); font-size: 12px; }
.flow__a { flex: 0 0 28px; display: grid; place-items: center; color: var(--mint); }
.flow__a svg { width: 16px; height: 16px; }
.ideas { display: grid; gap: 10px; }
.idea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); animation: pop .45s var(--spring); }
.idea p { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea small { display: block; font-size: 12px; color: var(--ink-48); margin-top: 2px; }
.idea__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }

/* ---------- command palette ---------- */
.cmd { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 12vh; background: rgba(15,21,18,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein2 .2s; }
.cmd__box { width: min(620px, 92vw); background: var(--card); border-radius: var(--r-lg); box-shadow: 0 40px 80px -30px rgba(15,21,18,.6); overflow: hidden; animation: cmdin .35s var(--ease-out); }
@keyframes cmdin { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.cmd__in { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--ink-08); }
.cmd__in input { flex: 1; height: 58px; border: 0; outline: 0; background: none; font-size: 17px; }
.cmd__list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd__g { font-size: 12px; color: var(--ink-48); padding: 10px 10px 4px; }
.cmd__i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: var(--r); text-align: left; font-size: 14px; font-weight: 500; }
.cmd__i svg { color: var(--ink-48); }
.cmd__i[aria-selected="true"] { background: var(--mint-wash); }
.cmd__i[aria-selected="true"] svg { color: var(--mint-deep); }
.cmd__i kbd { margin-left: auto; font: 600 11px/1 var(--f-text); color: var(--ink-48); }
.cmd__empty { padding: 26px; text-align: center; color: var(--ink-64); font-size: 14px; }

/* ---------- toasts, confetti, skeleton ---------- */
.toasts { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(400px, calc(100vw - 40px)); padding: 12px 14px; border-radius: var(--r-lg); background: var(--forest); color: var(--paper); box-shadow: 0 20px 40px -20px rgba(15,21,18,.7); font-size: 14px; position: relative; overflow: hidden; animation: toastin .5s var(--spring); }
.toast.out { animation: toastout .35s var(--ease) forwards; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--mint); transform-origin: left; animation: toastbar var(--d, 4s) linear forwards; }
.toast .ti { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--mint); color: var(--ink); flex: none; }
.toast .ti svg { width: 15px; height: 15px; }
.toast b { font-weight: 600; }
@keyframes toastin { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateX(30px); } }
@keyframes toastbar { to { transform: scaleX(0); } }
.confetti { position: fixed; z-index: 95; width: 8px; height: 8px; border-radius: 1.5px; pointer-events: none; will-change: transform; }
.sk { border-radius: var(--r); background: linear-gradient(90deg, var(--paper-2) 0 40%, #f0f1ec 50%, var(--paper-2) 60%) 0 0 / 300% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel { display: grid; gap: 16px; }
.empty { padding: 24px; text-align: center; color: var(--ink-64); font-size: 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--ink-12); }

/* notifications panel */
.pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(360px, 92vw); background: var(--card); border-radius: var(--r-lg); box-shadow: 0 30px 60px -24px rgba(15,21,18,.5), inset 0 0 0 1px var(--ink-08); padding: 8px; animation: cmdin .3s var(--ease-out); }
.pop__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: var(--r); font-size: 13.5px; text-align: left; width: 100%; }
.pop__i:hover { background: var(--paper); }
.pop__i small { display: block; color: var(--ink-48); font-size: 12px; }

/* ---------- mobile ---------- */
.tabbar { display: none; }
.more { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--forest); color: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); display: grid; gap: 10px; animation: sheetin .4s var(--ease-out); }
@keyframes sheetin { from { transform: translateY(100%); } }
.more .nav__a { height: 48px; }

@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clocks { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .dk { grid-template-columns: minmax(0, 1fr); }
  .dk__r { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-08); padding-top: 14px; }
}
@media (max-width: 860px) {
  :root { --top: 60px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .top { padding: 0 16px; gap: 10px; }
  .top__mob { display: grid; }
  .top__mob .pmark { width: 34px; height: 34px; }
  .top__title { font-size: 20px; }
  .search { width: 40px; padding: 0; justify-content: center; }
  .search span, .search kbd { display: none; }
  .view { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .g4.keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hello { grid-template-columns: minmax(0, 1fr); }
  .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(5, 82vw); }
  .pipe { grid-template-columns: repeat(4, 78vw); }
  .sn { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { gap: 4px; } .steps div { font-size: 11px; }
  .drawer__h, .drawer__b, .drawer__f { padding-left: 16px; padding-right: 16px; }
  .drawer__f { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .toasts { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); justify-items: stretch; }
  .toast { max-width: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: calc(68px + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); background: rgba(18,28,22,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .tabbar button { display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--paper-64); font-size: 11px; font-weight: 600; border-radius: var(--r); position: relative; }
  .tabbar button[aria-current="page"] { color: var(--paper); }
  .tabbar button[aria-current="page"] svg { color: var(--mint); }
  .tabbar button[aria-current="page"]::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 2px 2px; background: var(--mint); }
  .tabbar .n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px; background: var(--mint); color: var(--ink); font-size: 10px; display: grid; place-items: center; }
  .pop { right: -48px; }
}
@media (max-width: 420px) {
  .needs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .need { padding: 12px; }
  .need__n { font-size: 32px; }
  .h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* =====================================================================
   Pier's additions to the studio's styles. Everything above this line is the
   studio app's own stylesheet, unchanged: it is the master design.
   ===================================================================== */

/* links that look like the studio's cards */
a.tk, a.feed__i, a.pop__i, a.cl, a.tag, a.evt { text-decoration: none; color: inherit; }
a.feed__i:hover .feed__t b, a.pop__i:hover b { text-decoration: underline; text-underline-offset: 2px; }

/* nav: month and phase tags on sections that are previews */
.nav__a .soon, .more .soon { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-sm); color: var(--paper-40); box-shadow: inset 0 0 0 1px var(--paper-12); white-space: nowrap; }
.nav__a > span:not(.n):not(.soon) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__ind { transition: transform .45s var(--ease-out), opacity .3s; }

/* who is signed in */
.acct { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r); background: var(--paper-06); }
.acct__logo { width: 36px; height: 36px; border-radius: var(--r-sm); background: #fff; object-fit: contain; padding: 4px; flex: none; }
.acct__logo--txt { display: grid; place-items: center; padding: 0; background: var(--mint); color: var(--ink); font-weight: 700; font-size: 13px; }
.acct__t { display: grid; min-width: 0; flex: 1; }
.acct__t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__t small { font-size: 12px; color: var(--paper-40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn--dark { background: transparent; box-shadow: inset 0 0 0 1px var(--paper-12); color: var(--paper-64); width: 34px; height: 34px; }
.iconbtn--dark:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-40); }
.side__foot > .nav__a { color: var(--paper-64); }

/* View as */
.viewas { position: sticky; top: var(--top); z-index: 19; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 28px; background: var(--gold-wash); color: var(--gold-deep); border-bottom: 1px solid var(--ink-08); font-size: 14px; }
.viewas > span { flex: 1 1 260px; }
.viewas b { font-weight: 600; }

/* the gold strip on screens that still use sample data */
.ribbon { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--gold-wash); color: var(--gold-deep); font-size: 13.5px; margin-bottom: 22px; }
.ribbon .tag { background: var(--card); }
.ribbon__sw { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sec + .ribbon { margin-top: -2px; }

/* job cards (the studio's ticket cards, holding Pier's changes) */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.board.b4 { grid-template-columns: repeat(4, minmax(230px, 1fr)); }
.av--you { background: var(--mint-wash); color: var(--mint-deep); font-size: 8.5px; letter-spacing: 0; }
.lnk.back { margin-bottom: 10px; color: var(--ink-64); }
.lnk.back svg { transform: rotate(180deg); }
.lnk.back:hover svg { transform: rotate(180deg) translateX(3px); }

/* the weekly hour */
.hour { display: grid; gap: 14px; }
.hour__big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hour__big b { font: 500 52px/1 var(--f-display); letter-spacing: -.045em; }
.hourbar { height: 12px; border-radius: 6px; background: var(--paper-2); display: flex; overflow: hidden; }
.hourbar i { display: block; height: 100%; width: var(--w); transform-origin: left; animation: growx 1.2s var(--ease-out) backwards; }
.hourbar i.u { background: var(--mint-deep); }
.hourbar i.b { background: var(--mint); animation-delay: .25s; }
.hour .legend i { width: 10px; height: 10px; border: 0; border-radius: 2px; }
.hour .legend i.lu { background: var(--mint-deep); } .hour .legend i.lb { background: var(--mint); } .hour .legend i.ll { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-12); }

/* Everything in Pier */
.evg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.evt { padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; text-align: left; width: 100%; }
.evt__ic { width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; background: var(--mint-wash); color: var(--mint-deep); }
.evt__t { display: grid; min-width: 0; }
.evt__t small { font-size: 11.5px; color: var(--ink-48); }
.evt__t b { font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.evt .tag { grid-column: 1 / -1; justify-self: start; }

/* forms */
.fld { display: grid; gap: 6px; }
.fld > span { font-weight: 600; font-size: 13.5px; }
.fld small { display: block; font-weight: 500; color: var(--ink-48); font-size: 12px; }
select.in { width: 100%; height: 42px; border: 0; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); padding: 0 12px; font-size: 14px; }
select.in:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--mint-deep); }
input.in { height: 42px; }
input.in.code { font: 500 26px/1 var(--f-display); letter-spacing: .3em; text-align: center; height: 56px; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.formgrid .err { grid-column: 1 / -1; }
.err { margin: 0; color: var(--coral-deep); font-size: 13.5px; font-weight: 600; }
.err:empty { display: none; }
.keep, .radio { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.keep { font-weight: 600; font-size: 13.5px; white-space: nowrap; align-items: center; }
.keep input, .radio input { accent-color: var(--mint-deep); margin-top: 3px; }
.keep input { margin-top: 0; }

/* what we understood */
.understood { display: grid; gap: 10px; }
.u-item { display: grid; gap: 10px; padding: 14px; transition: opacity .3s; }
.u-item.off { opacity: .5; }
.u-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.u-item .over { gap: 8px; }

/* tables */
.tw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { font-size: 12px; color: var(--ink-48); font-weight: 600; text-align: left; padding: 14px 16px 10px; white-space: nowrap; }
.tbl td { padding: 12px 16px; border-top: 1px solid var(--ink-08); vertical-align: middle; }
.tbl a { text-decoration: none; }
.tbl a:hover b { text-decoration: underline; }
.keybox { background: var(--forest); color: var(--paper); padding: 12px 14px; border-radius: var(--r); overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.6; }
#out { display: grid; gap: 10px; }
#out:empty { display: none; }

/* set-up checks: the studio's check rows, with a gold "worth a look" */
.ck.warn { background: var(--gold-wash); } .ck.warn .ck__b { background: var(--gold); box-shadow: none; } .ck.warn .ck__b svg { animation: dash .4s var(--ease-out) forwards; }
.ck.ok .ck__b svg, .ck.bad .ck__b svg { animation: dash .4s var(--ease-out) forwards; }

/* the bell, empty */
.pop__empty { padding: 18px; text-align: center; color: var(--ink-64); font-size: 14px; }

/* client logos */
.cl__logo--img { object-fit: contain; background: #fff; padding: 6px; box-shadow: inset 0 0 0 1px var(--ink-08); }
.kv > span { display: block; padding: 8px 10px; border-radius: var(--r); background: var(--paper); min-width: 0; }
.kv > span b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the Pier button, drawn */
.fabdemo { position: absolute; right: 10px; bottom: 10px; }
.fabdemo .pmark { width: 34px; height: 34px; box-shadow: 0 6px 16px -6px rgba(15,21,18,.5); animation: pop .6s var(--spring) .4s backwards; }

/* signing in */
.gate { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.gate__art { position: relative; overflow: hidden; background: var(--forest); color: var(--paper); padding: 40px 44px; display: flex; flex-direction: column; gap: 26px; }
.gate__art .brand__t svg { color: var(--paper-40); }
.gate__h { font: 500 clamp(36px, 3vw + 14px, 60px)/1.02 var(--f-display); letter-spacing: -.04em; margin: 0; max-width: 11ch; }
.gate__p { color: var(--paper-64); font-size: 17px; max-width: 40ch; margin: 0; }
.gate__peek { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.gate__peek div { border: 1px solid var(--paper-12); background: var(--forest-2); border-radius: var(--r-lg); padding: 14px; display: grid; gap: 4px; min-width: 0; }
.gate__peek b { font: 500 26px/1 var(--f-display); letter-spacing: -.03em; color: var(--mint); }
.gate__peek span { font-size: 12.5px; color: var(--paper-64); }
.gate__peek i { display: block; height: 4px; border-radius: 2px; background: var(--paper-12); overflow: hidden; margin-top: 6px; }
.gate__peek i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--mint); animation: growx 1.2s var(--ease-out) .6s backwards; transform-origin: left; }
.gate__side { display: grid; place-items: center; padding: 40px 24px; }
.gate__box { width: min(400px, 100%); display: grid; gap: 16px; }
.gate__mini { display: none; align-items: center; gap: 10px; font: 500 24px/1 var(--f-display); letter-spacing: -.03em; }
.gate__mini .pmark { width: 38px; height: 38px; }

/* the previews from the prototype, inside the studio's frame */
.pv.pv-frame, .pv.pv-overlays { height: auto; min-height: 0; background: none; }
.pv.pv-overlays { height: 0; }
.pv-frame > #pvview { padding: 0; max-width: none; margin: 0; }
:root.theme-client .pv { --mint: inherit; --mint-deep: inherit; --mint-wash: inherit; --forest: inherit; --forest-2: inherit; }

/* client colours */
.theme-client .tag--mintw { color: var(--mint-deep); }

@media (max-width: 860px) {
  .tabbar { background: color-mix(in srgb, var(--forest) 95%, transparent); }
  .board.b4 { grid-template-columns: repeat(4, 82vw); }
  .viewas { position: static; padding: 10px 16px; }
  .formgrid { grid-template-columns: minmax(0, 1fr); }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate__art { display: none; }
  .gate__mini { display: flex; }
  .gate__side { align-items: start; padding-top: 12vh; }
  .hour__big b { font-size: 44px; }
  .tbl th, .tbl td { padding-left: 12px; padding-right: 12px; }
  .more { max-height: 82vh; overflow-y: auto; }
}

/* Inbox: a client's waiting changes, approved as one batch */
.batches { display: grid; gap: 8px; margin: 18px 0 4px; }
.batch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08), var(--shadow-1); }
.batch .need__ic { width: 38px; height: 38px; }
.batch__t { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.batch__t .muted { font-size: 13px; }
.bitems { display: grid; gap: 6px; }
.bitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); cursor: pointer; }
.bitem input { accent-color: var(--mint-deep); width: 16px; height: 16px; }
.bitem > span { display: grid; gap: 1px; min-width: 0; font-size: 14px; }
.bitem .muted { font-size: 12px; }
.bitem:has(input:not(:checked)) { opacity: .55; }
@media (max-width: 560px) { .batch { grid-template-columns: auto minmax(0, 1fr); } .batch .btn { grid-column: 1 / -1; justify-self: start; } }
.bjform { display: grid; gap: 14px; }
.bjform .blk { margin: 0; }

/* =====================================================================
   Pages and content: the view switch, the Table and the Form (62-cms.js),
   and the "Built on Wix" badge in the sidebar.
   ===================================================================== */

/* ---------- the three ways in ---------- */
.vsw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.vsw__b { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); color: var(--ink); transition: box-shadow .25s, transform .35s var(--ease-out), background-color .25s; }
.vsw__b:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-12), var(--shadow-1); }
.vsw__b > svg { width: 22px; height: 22px; flex: none; padding: 9px; box-sizing: content-box; border-radius: var(--r); background: var(--paper-2); color: var(--ink-64); transition: background-color .25s, color .25s; }
.vsw__b span { display: grid; gap: 2px; min-width: 0; }
.vsw__b b { font: 500 17px/1.1 var(--f-display); letter-spacing: -.01em; }
.vsw__b small { font-size: 12.5px; color: var(--ink-48); }
.vsw__b[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mint); background: var(--mint-wash); }
.vsw__b[aria-pressed="true"] > svg { background: var(--mint); color: #fff; }

.cmsbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px 10px 16px; border-radius: var(--r-lg); background: var(--gold-wash); color: var(--gold-deep); font-size: 14px; }
.cmsbar > span:nth-child(2) { flex: 1; min-width: 200px; }
.cmsbar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--gold); animation: cmspulse 2s infinite; flex: none; }
@keyframes cmspulse { 70% { box-shadow: 0 0 0 8px transparent; } }
.cmsbar--ok { background: var(--paper-2); color: var(--ink-64); padding: 10px 16px; }
.cmsbar--ok svg { width: 16px; height: 16px; color: var(--mint-deep); }

.ctabs { display: flex; gap: 6px; margin: 22px 0 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ctabs::-webkit-scrollbar { display: none; }
.ctab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-64); text-decoration: none; white-space: nowrap; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); transition: background-color .25s, color .25s; }
.ctab svg { width: 16px; height: 16px; }
.ctab i { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink-64); }
.ctab em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--ink-48); }
.ctab[aria-selected="true"] { background: var(--forest); color: #fff; box-shadow: none; }
.ctab[aria-selected="true"] i { background: rgba(255,255,255,.16); color: #fff; }
.ctab[aria-selected="true"] em { color: rgba(255,255,255,.7); }
.ctools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ctools__n { font-size: 13px; margin-right: auto; }
.cnote { grid-template-columns: 20px minmax(0, 1fr); align-items: start; margin-bottom: 12px; background: var(--sky-wash); box-shadow: none; }
.cnote > svg { width: 18px; height: 18px; color: var(--sky-deep); margin-top: 2px; }
.cnote > span { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-80); }

/* ---------- the table ---------- */
.ctbl-wrap { overflow: auto; max-height: calc(100vh - var(--top) - 120px); border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08), var(--shadow-1); overscroll-behavior-x: contain; }
.ctbl { border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 100%; }
.ctbl th, .ctbl td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--ink-08); border-right: 1px solid var(--ink-04); }
.ctbl thead th { position: sticky; top: 0; z-index: 2; background: var(--paper-2); font-size: 12.5px; font-weight: 600; color: var(--ink-64); white-space: nowrap; padding: 0; }
.ctbl__h > button, .ctbl__h > span { display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 12px; text-align: left; font: inherit; color: inherit; }
.ctbl__h > button:hover { color: var(--ink); }
.ctbl__h svg { width: 13px; height: 13px; color: var(--ink-48); }
.ctbl__ar svg { transform: rotate(90deg); color: var(--ink); }
.ctbl__ar.up svg { transform: rotate(-90deg); }
.ctbl__ar { display: inline-flex; }
.ctbl__c { padding: 10px 12px; min-width: 140px; max-width: 320px; position: relative; background: var(--card); transition: background-color .2s; }
.ctbl__c--para, .ctbl__c--rich { min-width: 260px; }
.ctbl__c--image, .ctbl__c--photo, .ctbl__c--bool, .ctbl__c--number, .ctbl__c--state { min-width: 0; }
.ctbl__c--number { text-align: right; }
.ctbl__v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.ctbl__c--bool .ctbl__v, .ctbl__c--select .ctbl__v { display: flex; align-items: center; gap: 8px; -webkit-line-clamp: unset; }
.ctbl__c.is-ed { cursor: text; }
.ctbl__c--bool.is-ed, .ctbl__c--image.is-ed, .ctbl__c--rich.is-ed { cursor: pointer; }
.ctbl__c.is-ed:hover { background: var(--mint-wash); }
.ctbl__c.is-ed:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.ctbl__c.is-locked { color: var(--ink-64); cursor: help; }
.ctbl__c.is-draft { background: var(--gold-wash); }
.ctbl__c.is-draft::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.ctbl__e { color: var(--ink-24); font-style: italic; }
.ctbl__first { position: sticky; left: 0; z-index: 1; min-width: 240px; max-width: 300px; box-shadow: 1px 0 0 var(--ink-08), 6px 0 12px -10px rgba(15,21,18,.35); font-weight: 600; }
.ctbl thead th.ctbl__first { z-index: 3; }
th.ctbl__c.ctbl__first { padding-right: 8px; }
.ctbl__fi { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.ctbl__n { color: var(--ink-48); font-weight: 500; font-size: 12px; padding-top: 1px; }
.ctbl__open { opacity: 0; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--forest); color: #fff; text-decoration: none; transition: opacity .2s; white-space: nowrap; }
tr:hover .ctbl__open, .ctbl__open:focus-visible { opacity: 1; }
@media (hover: none) { .ctbl__open { opacity: 1; background: var(--paper-2); color: var(--ink); } }
tr.is-removed .ctbl__c { text-decoration: line-through; color: var(--ink-48); background: var(--coral-wash); }
tr.is-added .ctbl__first .ctbl__v::after { content: " · new"; color: var(--gold-deep); font-weight: 500; }
.ctbl__sel { font: inherit; font-size: 13px; padding: 4px 24px 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--ink-12); background: var(--card); color: var(--ink); max-width: 100%; }
.cthumb { display: block; width: 64px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--paper-2); }
.cthumb--none { background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 6px, var(--card) 6px, var(--card) 12px); }
.cphotos { display: flex; gap: 4px; } .cphotos img { width: 40px; height: 28px; border-radius: 4px; object-fit: cover; background: var(--paper-2); }
.ctbl__edit { position: absolute; left: -1px; top: -1px; z-index: 5; width: max(100% + 2px, 300px); background: var(--card); border-radius: var(--r); box-shadow: 0 0 0 2px var(--mint), var(--shadow-2); padding: 6px; display: grid; gap: 6px; }
.ctbl__c.is-editing { z-index: 6; }
.ctbl__edit textarea { resize: vertical; min-height: 38px; font-size: 14px; }
.ctbl__hint { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-48); }
.lenl--over { color: var(--coral-deep); } .lenl--short { color: var(--gold-deep); } .lenl--ok { color: var(--mint-deep); }
.ctip { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 2px 0; }
.ctip svg { width: 14px; height: 14px; }
.ccols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ccols__i { white-space: normal; font-weight: 500; }
.ccols__i svg { width: 13px; height: 13px; color: var(--ink-48); }

/* a switch (on and off) */
.sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--ink-24); flex: none; transition: background-color .25s; }
.sw i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .3s var(--spring); }
.sw[aria-checked="true"] { background: var(--mint-deep); }
.sw[aria-checked="true"] i { transform: translateX(16px); }
.sw:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ---------- the form ---------- */
.cform { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.cform__list { position: sticky; top: calc(var(--top) + 16px); padding: 10px; display: grid; gap: 8px; max-height: calc(100vh - var(--top) - 32px); grid-template-rows: auto minmax(0, 1fr); }
.cform__list .pgsearch { width: 100%; }
.cform__items { overflow-y: auto; display: grid; gap: 2px; align-content: start; margin: 0 -4px; padding: 0 4px; }
.cform__it { position: relative; display: grid; gap: 1px; padding: 8px 26px 8px 10px; border-radius: var(--r); text-decoration: none; color: var(--ink); transition: background-color .2s; }
.cform__it b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cform__it span { font-size: 12px; color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cform__it:hover { background: var(--paper-2); }
.cform__it.is-on { background: var(--mint-wash); box-shadow: inset 3px 0 0 var(--mint); }
.cform__it.is-removed b { text-decoration: line-through; color: var(--ink-48); }
.cform__dot { position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold); }
.cform__card { padding: 22px 24px 24px; display: grid; gap: 16px; min-width: 0; }
.cform__h { display: grid; gap: 6px; }
.cform__crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-48); }
.cform__crumb svg { width: 12px; height: 12px; }
.cform__crumb a { color: var(--ink-64); text-decoration: none; font-weight: 600; }
.cform__crumb a:hover { color: var(--ink); }
.cform__crumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.cform__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cform__top .h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cform__nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cform__nav .iconbtn { width: 36px; height: 36px; }
.cform__nav a.btn { text-decoration: none; }
.cform__prev svg { transform: rotate(180deg); }
.cform__nav .is-off { opacity: .3; pointer-events: none; }
.cform__pick { display: none; }
.cform__k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-48); padding-bottom: 8px; border-bottom: 1px solid var(--ink-08); }
.cform__fields { display: grid; gap: 4px; }
.cform__foot { font-size: 12.5px; display: flex; align-items: center; gap: 6px; margin: 0; }
.cform__foot svg { width: 14px; height: 14px; color: var(--mint-deep); }

.cf { display: grid; gap: 7px; padding: 12px 12px 14px; margin: 0 -12px; border-radius: var(--r); transition: background-color .3s; }
.cf.is-draft { background: linear-gradient(90deg, var(--gold-wash), transparent 70%); box-shadow: inset 3px 0 0 var(--gold); }
.cf__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf__h label { font-size: 13.5px; font-weight: 600; color: var(--ink-80); }
.cf__lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-48); padding: 2px 8px; border-radius: 999px; background: var(--paper-2); }
.cf__lock svg { width: 11px; height: 11px; }
.cf__back { margin-left: auto; font-size: 12.5px; color: var(--gold-deep); }
.cf__back svg { width: 13px; height: 13px; }
.cf textarea.in { resize: vertical; min-height: 64px; line-height: 1.5; overflow: hidden; }
.cf__cnt { font-size: 12px; color: var(--ink-48); }
.cf__was { font-size: 12.5px; color: var(--ink-48); text-decoration: line-through; text-decoration-color: var(--ink-24); }
.cf__was span { text-decoration: none; display: inline-block; font-weight: 600; margin-right: 4px; }
.cf__tip { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-64); }
.cf__tip svg { width: 14px; height: 14px; flex: none; color: var(--gold-deep); margin-top: 1px; }
.cf__ro { padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); font-size: 14px; color: var(--ink-80); min-height: 20px; overflow-wrap: anywhere; }
.cf__ro a { color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.cf__ro a svg { width: 13px; height: 13px; }
.cf__ro--long { max-height: 220px; overflow-y: auto; line-height: 1.55; font-size: 13.5px; }
.cf__why { font-size: 12px; color: var(--ink-48); }
.cf--lock .cf__h label { color: var(--ink-64); }
.cf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf__chips .tag { white-space: normal; height: auto; padding-top: 4px; padding-bottom: 4px; }
.cf__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.cf__photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.cf__sw { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.cf__img { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cf__shot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); background-size: cover; background-color: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-08); overflow: hidden; }
.cf__shot--none { background-blend-mode: luminosity; opacity: .75; }
.cf__none { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 3px 9px; border-radius: 999px; }
.cf__imgb { display: grid; gap: 8px; justify-items: start; }
.cf__imgb .mono { font-size: 11.5px; color: var(--ink-48); word-break: break-all; }
.cf__focus { touch-action: none; }
.cf__qs { display: grid; gap: 4px; }
.cf__qs a { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--r); background: var(--paper-2); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: background-color .2s; }
.cf__qs a:hover { background: var(--mint-wash); }
.cf__qs svg { width: 15px; height: 15px; color: var(--ink-48); }
.cf__why a { color: var(--ink); font-weight: 600; }

/* the page content field: Wix's rich text, in Pier's look */
.cf__rich { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--ink-12); background: var(--card); overflow: hidden; }
.cf__rich:focus-within { box-shadow: inset 0 0 0 2px var(--mint); }
.cf__rbar { position: sticky; top: var(--top); z-index: 2; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--paper-2); border-bottom: 1px solid var(--ink-08); }
.cf__rbar button { min-width: 32px; height: 30px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--ink-80); }
.cf__rbar button:hover { background: var(--card); color: var(--ink); }
.cf__rbar svg { width: 15px; height: 15px; }
.cf__rbar .rbar__link { display: flex; gap: 6px; width: 100%; }
.cf__rbar .rbar__link input { flex: 1; min-width: 0; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--ink-12); padding: 0 10px; font: inherit; font-size: 13px; background: var(--card); color: var(--ink); }
.fr-rich { padding: 14px 16px; max-height: 560px; overflow-y: auto; font-size: 14.5px; line-height: 1.6; color: var(--ink-80); outline: none; }
.fr-rich > :first-child { margin-top: 0; }
.fr-rich h2 { font: 500 21px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); margin: 22px 0 8px; padding-top: 14px; border-top: 1px dashed var(--ink-12); }
.fr-rich h2:first-child { border-top: 0; padding-top: 0; }
.fr-rich h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.fr-rich p { margin: 0 0 10px; }
.fr-rich ul, .fr-rich ol { margin: 0 0 10px; padding-left: 22px; }
.fr-rich a { color: var(--mint-deep); }
.fr-rich table { border-collapse: collapse; margin: 6px 0 12px; font-size: 13.5px; width: 100%; }
.fr-rich th, .fr-rich td { border: 1px solid var(--ink-12); padding: 6px 9px; text-align: left; }
.fr-rich th { background: var(--paper-2); }

/* publishing several items at once */
.pubg { display: grid; gap: 8px; margin-bottom: 16px; }
.pubg__h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pubg__h svg { width: 16px; height: 16px; color: var(--ink-48); }
.pubg__h .muted { font-size: 12px; margin-left: auto; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .vsw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vsw__b { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .vsw__b > svg { padding: 7px; width: 18px; height: 18px; }
  .vsw__b small { display: none; }
  .vsw__b b { font-size: 15px; }
  .cform { grid-template-columns: minmax(0, 1fr); }
  .cform__list { display: none; }
  .cform__pick { display: block; }
  .cform__card { padding: 16px; }
  .cf__img { grid-template-columns: minmax(0, 1fr); }
  .ctbl-wrap { max-height: 70vh; margin: 0 -2px; }
  .ctbl__first { min-width: 170px; max-width: 200px; }
  .ctbl__fi { grid-template-columns: 20px minmax(0, 1fr); }
  .ctbl__fi .ctbl__open { grid-column: 2; justify-self: start; }
  .ctbl__c { min-width: 120px; }
  .ctbl__c--para, .ctbl__c--rich { min-width: 200px; }
  .ctbl__edit { width: min(300px, 86vw); }
  .ctools .pgsearch { width: 100%; }
  .ed__vw { display: none; }
}

/* ---------- Built on Wix: the badge in the sidebar ---------- */
.wixb { display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 10px; align-items: center; width: 100%; padding: 11px 12px; border-radius: var(--r); text-align: left; color: #fff; background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background-color .25s, box-shadow .25s, transform .35s var(--ease-out); margin-bottom: 10px; }
.wixb:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transform: translateY(-1px); }
.wixb__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.wixb__ic svg { width: 18px; height: 18px; }
.wixb__t { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.wixb__k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-40); }
.wixb__n { font-size: 15px; color: #fff; letter-spacing: -.01em; }
.wixb__n b { font-weight: 800; }
.wixb__s { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--paper-64); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wixb__s i { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 3px rgba(62,207,142,.18); flex: none; }
.wixb > svg { width: 14px; height: 14px; color: var(--paper-40); }
.more .wixb { margin: 12px 0 4px; background: var(--forest); }
.wixfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wixfact { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--r-lg); background: var(--paper-2); }
.wixfact svg { width: 20px; height: 20px; color: var(--mint-deep); }
.wixfact b { font-size: 14px; }
.wixfact span { font-size: 13px; color: var(--ink-64); line-height: 1.45; }
.wixhero { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: var(--forest); color: #fff; }
.wixhero .wixb__k { color: rgba(255,255,255,.6); }
.wixhero p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.wixhero b.n { font: 500 26px/1.1 var(--f-display); letter-spacing: -.02em; }
@media (max-width: 560px) { .wixfacts { grid-template-columns: minmax(0, 1fr); } }

a.btn { text-decoration: none; }
.cform__k--lock { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cform__k--lock svg { width: 13px; height: 13px; }
.cform__fields--ro { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.cform__fields--ro .cf[data-k="summary"], .cform__fields--ro .cf[data-k="features"], .cform__fields--ro .cf[data-k="imageUrls"], .cform__fields--ro .cf[data-k="title"] { grid-column: 1 / -1; }
.cf--quiet { padding-top: 8px; padding-bottom: 8px; gap: 5px; }
.cf--quiet .cf__h label { font-size: 12.5px; color: var(--ink-48); }
@media (max-width: 860px) { .cform__fields--ro { grid-template-columns: minmax(0, 1fr); } }
.boot__wix { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 2px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; color: var(--paper-80); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); opacity: 0; transform: translateY(6px); animation: wixin .7s var(--ease-out) 1.1s forwards; }
@keyframes wixin { to { opacity: 1; transform: none; } }
.boot__wix > svg { width: 15px; height: 15px; color: #3ecf8e; }
.gate__wix { justify-self: start; width: fit-content; margin-top: 4px; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .boot__wix { animation: none; opacity: 1; transform: none; } }

/* the official Wix logo next to "Headless": the logo sits on the text's baseline at cap height */
.wixhl { display: inline-flex; align-items: baseline; gap: .28em; white-space: nowrap; }
.wixlogo { height: .74em; width: auto; flex: none; align-self: baseline; transform: translateY(.02em); }
.wixhl > span { font-weight: 400; letter-spacing: -.01em; }
.wixb__n .wixhl { font-size: 16px; color: #fff; }
.boot__wix .wixhl { color: #fff; font-size: 14px; }
.wixhl--big { font: 500 28px/1.1 var(--f-display); color: #fff; }
.gate__by { margin: -6px 0 0; font: 500 22px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--mint); }
.gate__minitag, .gate__wix--mini { display: none; }
@media (max-width: 860px) {
  .gate__minitag { display: block; margin: -4px 0 4px; font: 500 17px/1.3 var(--f-display); color: var(--mint-deep); }
  .gate__wix--mini { display: inline-flex; margin-top: 8px; color: var(--ink-64); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-08); }
  .gate__wix--mini .wixhl { color: var(--ink); }
}


/* =====================================================================
   Pages and content: the visual editor (Pier's frame) and the client's
   site look inside it (.ts = the site canvas, here Trent's).
   ===================================================================== */
@font-face { font-family: "Quinlee Sans"; src: url("fonts/QuinleeSans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

/* ---------- the pages list ---------- */
.pgsearch { position: relative; display: block; width: min(320px, 100%); }
.pgsearch svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-48); }
.pgsearch .in { padding-left: 38px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pgc { display: grid; overflow: hidden; text-decoration: none; color: inherit; }
.pgc__shot { position: relative; aspect-ratio: 16 / 9; background: #012b41; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.pgc__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.pgc:hover .pgc__shot img { transform: scale(1.05); }
.pgc__ov { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,43,65,.9), rgba(1,43,65,.35)); }
.pgc__t { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; font: 400 22px/1.1 "Quinlee Sans", Georgia, serif; }
.pgc__b { padding: 12px 14px 14px; display: grid; gap: 8px; }
.pgc__u { font-size: 11.5px; color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the editor frame ---------- */
.view.view--editor { max-width: none; padding: 0; }
.ed { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
.ed__bar { position: sticky; top: var(--top); z-index: 15; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--ink-08); flex-wrap: wrap; }
.ed__bar > .iconbtn:first-child svg { transform: rotate(180deg); }
.ed__t { display: grid; min-width: 0; line-height: 1.2; }
.ed__t b { font: 500 18px/1.15 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.ed__t .mono { font-size: 11.5px; color: var(--ink-48); }
.ed__saved { font-size: 12.5px; color: var(--ink-48); white-space: nowrap; }
.ed__saved.pulse { animation: savedp 1.2s var(--ease-out); }
@keyframes savedp { 0% { color: var(--mint-deep); } }
.ed__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed__tools .iconbtn { width: 36px; height: 36px; }
.ed__tools .iconbtn[disabled] { opacity: .35; pointer-events: none; }
.ed__redo svg { transform: scaleX(-1); }
.ed__main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.ed__stage { padding: 28px; background: var(--paper-2); background-image: radial-gradient(var(--ink-08) 1px, transparent 1px); background-size: 18px 18px; min-width: 0; }
.ed__frame { margin: 0 auto; max-width: 1120px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 2px 4px rgba(15,21,18,.06), 0 30px 60px -30px rgba(15,21,18,.45); overflow: hidden; transition: max-width .55s var(--ease-out), border-radius .4s, border-width .4s; border: 0 solid #0f1512; }
.ed[data-device="phone"] .ed__frame { max-width: 400px; border-radius: 34px; border-width: 10px; }
.ed__side { position: sticky; top: calc(var(--top) + 57px); height: calc(100vh - var(--top) - 57px); overflow-y: auto; border-left: 1px solid var(--ink-08); background: var(--paper); padding: 16px; display: grid; gap: 14px; align-content: start; }
.ed__grab { display: none; }
.ed__tabs { width: 100%; }
.ed__tabs button { flex: 1; }
.edp { display: grid; gap: 12px; animation: fadeup .3s var(--ease-out); }
.edp > .tag { justify-self: start; }
.edp--start .need__ic { width: 42px; height: 42px; }
.edhow { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 13.5px; }
.edhow li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.edhow svg { color: var(--mint-deep); margin-top: 2px; }
.edtip { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 10px 12px; border-radius: var(--r); background: var(--gold-wash); color: var(--gold-deep); }
.edtip svg { flex: none; margin-top: 1px; width: 16px; height: 16px; }
.edcount { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-64); }
.edcount__bar { height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.edcount__bar i { display: block; height: 100%; background: var(--mint-deep); border-radius: 3px; transition: width .3s var(--ease-out), background-color .3s; }
.edcount--over .edcount__bar i { background: var(--coral-deep); } .edcount--over { color: var(--coral-deep); }
.edcount--short .edcount__bar i { background: var(--gold); }
.edold { text-decoration: line-through; color: var(--ink-48); font-size: 13px; }
.edimg { display: grid; gap: 6px; }
.edimg img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--ink-08); background: var(--paper-2); transition: object-position .2s; }
.edimg .mono { font-size: 11px; color: var(--ink-48); overflow-wrap: anywhere; }
.edh { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.edlib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.edlib__i { aspect-ratio: 3 / 2; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ink-08); transition: transform .25s var(--ease-out), box-shadow .25s; background: var(--paper-2); }
.edlib__i:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--mint-deep); }
.edlib__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edlocked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); font-size: 13px; color: var(--ink-64); overflow-wrap: anywhere; }
.edlocked svg { flex: none; width: 15px; height: 15px; }
.edtoggle { white-space: normal; }
.edkinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.edkind { padding: 14px; display: grid; gap: 4px; text-align: left; }
.edkind b { font-size: 14.5px; } .edkind span { font-size: 13px; }

/* the publish review */
.pubs { display: grid; gap: 8px; }
.pub { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); font-size: 13.5px; }
.pub__h { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pub__h .lnk { font-size: 12.5px; }
.pub__from { padding: 6px 8px; border-radius: var(--r-sm); background: var(--coral-wash); color: var(--coral-deep); text-decoration: line-through; text-decoration-color: rgba(180,71,42,.45); }
.pub__to { padding: 6px 8px; border-radius: var(--r-sm); background: var(--mint-wash); color: var(--ink); }
.pubopt { padding: 12px; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-08); }
.pubopt > span { display: grid; gap: 2px; } .pubopt .muted { font-size: 13px; }
.pubopt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--mint-deep); }

/* the toolbar over selected words */
.rbar { position: fixed; z-index: 70; display: flex; gap: 2px; padding: 4px; border-radius: var(--r); background: var(--forest); box-shadow: 0 16px 30px -12px rgba(15,21,18,.6); animation: cmdin .2s var(--ease-out); }
.rbar[hidden] { display: none; }
.rbar button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-sm); color: var(--paper); font-size: 13.5px; font-weight: 600; display: grid; place-items: center; }
.rbar button:hover { background: var(--paper-12); color: var(--mint); }
.rbar button svg { width: 15px; height: 15px; }
.rbar__sep { width: 1px; margin: 4px 2px; background: var(--paper-12); }
.rbar__link { display: flex; gap: 4px; align-items: center; }
.rbar__link input { height: 32px; width: 220px; border: 0; border-radius: var(--r-sm); padding: 0 8px; font-size: 13px; background: var(--paper); color: var(--ink); }

/* ---------- the client's site, as it really looks (Trent) ---------- */
.ts { --tn: #012b41; --to: #fa8300; --tr: #22a3c1; --tst: #d0ceba; --tsa: #ededE5; container-type: inline-size; background: #fff; color: var(--tn); font: 400 16px/1.6 "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.ts * { box-sizing: border-box; }
.ts-blk { position: relative; }
.ts-h1, .ts-h2 { font-family: "Quinlee Sans", Georgia, "Times New Roman", serif; font-weight: 400; margin: 0; letter-spacing: -.005em; }
.ts-h1 { font-size: clamp(32px, 5cqw, 52px); line-height: 1.05; color: #fff; }
.ts-h2 { font-size: clamp(24px, 3.2cqw, 32px); line-height: 1.15; margin: 34px 0 12px; }
.ts-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--to); color: #0f1a24; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.ts-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.ts-btn--line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
.ts-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--to); }
.ts-head { display: flex; align-items: center; gap: 22px; padding: 14px 5%; background: var(--tn); color: #fff; font-size: 14px; }
.ts-logo { height: 30px; width: auto; display: block; }
.ts-head nav { display: flex; gap: 18px; margin-left: auto; opacity: .9; }
.ts-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--tn); }
.ts-hero__img { position: absolute; inset: 0; background-size: cover, cover; background-repeat: no-repeat; transition: background-position .15s; }
.ts-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,43,65,.94) 0%, rgba(1,43,65,.72) 45%, rgba(1,43,65,.25) 100%); pointer-events: none; }
.ts-hero__in { position: relative; z-index: 1; padding: 64px 5% 52px; max-width: 760px; display: grid; gap: 16px; color: #fff; pointer-events: none; }
.ts-hero__in > * { pointer-events: auto; }
.ts-crumb { font-size: 13.5px; color: rgba(255,255,255,.8); }
.ts-crumb span:first-child { color: var(--to); font-weight: 700; }
.ts-lead { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.92); white-space: pre-wrap; }
.ts-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ts-wrap { max-width: 860px; margin: 0 auto; padding: 34px 5% 10px; }
.ts-brief { padding: 18px 20px; border-radius: 12px; background: var(--tsa); border-left: 4px solid var(--to); display: grid; gap: 4px; }
.ts-brief b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--to); }
.ts-brief p { margin: 0; }
.ts-body .ts-sec:first-child .ts-h2 { margin-top: 0; }
.ts-sec { position: relative; }
.ts-rich { font-size: 16px; line-height: 1.7; color: #193e52; }
.ts-rich p { margin: 0 0 14px; }
.ts-rich h3 { font: 700 18px/1.3 "Plus Jakarta Sans", Arial, sans-serif; margin: 20px 0 8px; color: var(--tn); }
.ts-rich ul, .ts-rich ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.ts-rich ul li::marker { color: var(--to); }
.ts-rich ol li::marker { color: var(--to); font-weight: 700; }
.ts-rich a { color: var(--tn); text-decoration: underline; text-decoration-color: var(--to); text-underline-offset: 3px; }
.ts-rich strong { color: var(--tn); }
.ts-rich table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; display: block; overflow-x: auto; }
.ts-rich th { background: var(--tn); color: #fff; text-align: left; font-weight: 700; padding: 10px 12px; }
.ts-rich td { padding: 10px 12px; border-bottom: 1px solid var(--tst); vertical-align: top; }
.ts-rich tbody tr:nth-child(even) td { background: #f8f7f2; }
.ts-form { padding: 28px; border-radius: 16px; background: var(--tn); color: #fff; display: grid; gap: 12px; justify-items: start; }
.ts-form .ts-h2 { margin: 0; color: #fff; }
.ts-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.ts-field { height: 46px; border-radius: 8px; background: rgba(255,255,255,.1); padding: 0 14px; display: flex; align-items: center; font-size: 14px; color: rgba(255,255,255,.7); }
.ts-field:last-child { grid-column: 1 / -1; height: 90px; align-items: flex-start; padding-top: 12px; }
.ts-faqs { border-top: 1px solid var(--tst); }
.ts-faq { position: relative; padding: 16px 0; border-bottom: 1px solid var(--tst); display: grid; gap: 6px; }
.ts-q { font-weight: 700; font-size: 16.5px; padding-right: 30px; }
.ts:not(.ts--edit) .ts-q::after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--to); font-size: 22px; font-weight: 400; }
.ts-a { font-size: 15px; color: #315567; line-height: 1.65; }
.ts:not(.ts--edit) .ts-faq:not(:first-child) .ts-a { display: none; }
.ts-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ts-card { padding: 16px; border-radius: 12px; background: #f8f7f2; border: 1px solid var(--tst); display: grid; gap: 6px; font-size: 14px; }
.ts-card b { font-size: 15px; }
.ts-card span { color: #4f6b79; }
.ts-cta { position: relative; margin-top: 40px; min-height: 280px; display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--tn); }
.ts-cta__img { position: absolute; inset: 0; background-size: cover, cover; }
.ts-cta__img::after { content: ""; position: absolute; inset: 0; background: rgba(1,43,65,.78); pointer-events: none; }
.ts-cta__in { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: center; padding: 48px 6%; color: #fff; pointer-events: none; }
.ts-cta__in > * { pointer-events: auto; }
.ts-cta__in .ts-h2 { margin: 0; color: #fff; }
.ts-foot { background: var(--tn); color: rgba(255,255,255,.85); padding: 34px 5% 30px; display: grid; gap: 10px; font-size: 14px; }
.ts-foot p { margin: 0; max-width: 70ch; }
.ts-small { font-size: 12.5px; opacity: .75; }
@container (max-width: 560px) {
  .ts-head nav { display: none; }
  .ts-head .ts-btn { margin-left: auto; }
  .ts-hero { min-height: 520px; }
  .ts-hero__img::after { background: linear-gradient(0deg, rgba(1,43,65,.96) 0%, rgba(1,43,65,.8) 55%, rgba(1,43,65,.35) 100%); }
  .ts-hero__in { padding: 120px 6% 34px; }
  .ts-lead { font-size: 15.5px; }
  .ts-fields { grid-template-columns: minmax(0, 1fr); }
  .ts-wrap { padding: 28px 6% 6px; }
}

/* ---------- editing on the page ---------- */
.ts--edit [data-b] { position: relative; outline: 1.5px dashed transparent; outline-offset: 4px; border-radius: 4px; transition: outline-color .2s; cursor: text; }
.ts--edit .ts-hero__img[data-b], .ts--edit .ts-cta__img[data-b] { position: absolute; cursor: pointer; outline-offset: -6px; }
.ts--edit [data-b]:hover { outline-color: color-mix(in srgb, var(--mint-deep) 70%, transparent); }
.ts--edit [data-b]:focus, .ts--edit .is-sel { outline: 2px solid var(--mint-deep); outline-offset: 4px; }
.ts--edit .ts-hero__img.is-sel, .ts--edit .ts-cta__img.is-sel { outline-offset: -6px; }
.ts--edit [data-b]:focus { background: color-mix(in srgb, var(--mint) 10%, transparent); }
.ts--edit [data-b]::before { content: attr(data-l); position: absolute; left: -4px; top: -27px; z-index: 4; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--mint-deep); color: #fff; font: 600 11px/20px var(--f-text); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s; pointer-events: none; }
.ts--edit .ts-hero__img[data-b]::before, .ts--edit .ts-cta__img[data-b]::before { left: 12px; top: 12px; }
.ts--edit [data-b]:hover::before, .ts--edit [data-b]:focus::before, .ts--edit .is-sel::before { opacity: 1; transform: none; }
.ts--edit [data-ph]:empty::after { content: attr(data-ph); opacity: .45; font-style: italic; }
.ts--edit .ts-empty { opacity: .75; }
.ts-note { padding: 14px 0; font-size: 14px; color: #6b8592; }
.ts--edit [data-lock] { cursor: help; }
.ts--edit [data-lock]:hover { outline: 1.5px dotted rgba(1,43,65,.35); outline-offset: 3px; }
.ts--edit .ts-head[data-lock]:hover, .ts--edit .ts-foot[data-lock]:hover, .ts--edit [data-blk][data-lock]:hover { outline-offset: -4px; }
.ts-tab { position: absolute; z-index: 5; left: 10px; top: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 4px; background: rgba(15,21,18,.82); color: #fff; font: 600 11px/22px var(--f-text); letter-spacing: 0; text-transform: none; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ts-tab svg { width: 11px; height: 11px; }
.ts--edit .ts-blk:hover > .ts-tab { opacity: 1; }
.ts-wrap > .ts-tab { left: 5%; top: 6px; }
.ts-focus { position: absolute; z-index: 3; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: color-mix(in srgb, var(--mint) 70%, transparent); box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.45); cursor: grab; touch-action: none; transition: transform .2s var(--spring); }
.ts-focus:hover, .ts-focus.drag { transform: scale(1.2); cursor: grabbing; }
.ts-focus:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ts-focus::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.ts-imgbtn { position: absolute; z-index: 3; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(15,21,18,.78); color: #fff; font: 600 12px/30px var(--f-text); pointer-events: none; }
.ts-imgbtn svg { width: 14px; height: 14px; }
.ts-sectools { position: absolute; z-index: 4; right: 0; top: -6px; display: flex; gap: 2px; padding: 3px; border-radius: 6px; background: rgba(15,21,18,.86); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.ts-sec:hover > .ts-sectools, .ts-sec:focus-within > .ts-sectools, .ts-faq:hover > .ts-sectools, .ts-faq:focus-within > .ts-sectools { opacity: 1; transform: none; }
.ts-sectools button { width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; color: #fff; }
.ts-sectools button:hover { background: rgba(255,255,255,.16); color: var(--mint); }
.ts-sectools button[disabled] { opacity: .3; pointer-events: none; }
.ts-sectools button svg { width: 15px; height: 15px; }
.ts-sectools button:first-child svg { transform: rotate(-90deg); }
.ts-sectools button:nth-child(2) svg { transform: rotate(90deg); }
.ts-faq .ts-sectools { top: 8px; }
.ts-add { padding: 14px 0 4px; }
.ts-addbtn { width: 100%; height: 48px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--mint-deep) 55%, transparent); color: var(--mint-deep); font: 600 14px var(--f-text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .2s, border-color .2s; }
.ts-addbtn:hover { background: color-mix(in srgb, var(--mint) 12%, transparent); border-color: var(--mint-deep); }
.ts-addbtn svg { width: 16px; height: 16px; }
.flash { animation: flash 1s var(--ease-out); }
@keyframes flash { from { background: color-mix(in srgb, var(--mint) 35%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--mint) 35%, transparent); } }
@media (hover: none) { .ts-sectools { opacity: .92; transform: none; } .ts--edit .ts-blk > .ts-tab { opacity: .85; } }

@media (max-width: 1180px) {
  .ed__main { grid-template-columns: minmax(0, 1fr) 320px; }
  .ed__stage { padding: 18px; }
}
@media (max-width: 860px) {
  .view.view--editor { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .ed__bar { top: var(--top); padding: 8px 12px; gap: 8px; }
  .ed__saved, .ed__dev { display: none; }
  .ed__t b { font-size: 16px; max-width: 18ch; }
  .ed__t { flex: 1; }
  .ed__pub { order: 2; }
  .ed__tools { order: 3; width: 100%; margin-left: 0; }
  .ed__main { grid-template-columns: minmax(0, 1fr); }
  .ed__stage { padding: 0; background: #fff; }
  .ed__frame, .ed[data-device="phone"] .ed__frame { max-width: none; border-radius: 0; border-width: 0; box-shadow: none; }
  .ed__side { position: fixed; z-index: 30; left: 0; right: 0; top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); height: auto; max-height: 48vh; border-left: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 40px -20px rgba(15,21,18,.45); padding: 12px 14px 16px; transition: transform .35s var(--ease-out); }
  .ed:not([data-sheet="open"]) .ed__side { transform: translateY(calc(100% - 58px)); }
  .ed__grab { display: block; justify-self: center; width: 60px; height: 14px; margin: -4px 0 -6px; position: relative; }
  .ed__grab::after { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 4px; border-radius: 2px; background: var(--ink-24); }
  .edlib { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .edkinds { grid-template-columns: minmax(0, 1fr); }
  .ts--edit [data-b]::before { top: -24px; }
}

/* =====================================================================
   Proposals (57-proposals.js): the builder, the document in MWD's look,
   and the client's view with accept.
   ===================================================================== */

.ld__prop { font-size: 13px; }
.ld__prop .tag { margin-left: 2px; }

/* ---------- the builder ---------- */
.view.view--pb { max-width: 1480px; }
.pb { display: grid; gap: 16px; margin-top: 18px; }
.pb__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; top: var(--top); z-index: 12; padding: 10px 0; background: var(--paper); }
.pb__back svg { transform: rotate(180deg); }
.pb__t { display: grid; gap: 4px; min-width: 0; margin-right: auto; }
.pb__t b { font: 500 22px/1.15 var(--f-display); letter-spacing: -.02em; }
.pb__t > span { display: flex; gap: 8px; align-items: center; }
.pb__acts { display: flex; gap: 8px; align-items: center; }
.pb__tabs { display: none; }
.pb__main { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.pb__ctx { position: sticky; top: calc(var(--top) + 70px); max-height: calc(100vh - var(--top) - 86px); overflow-y: auto; padding: 18px; display: grid; gap: 14px; }
.pb__h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ink-08); }
.pb__h > span:last-child { display: grid; gap: 2px; font-size: 14px; }
.pb__h .muted { font-size: 12.5px; }
.pb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb__ctx .fld textarea { resize: vertical; }
.pb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-64); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-12); transition: background-color .2s, color .2s, box-shadow .2s; }
.chip[aria-pressed="true"] { background: var(--mint-wash); color: var(--ink); box-shadow: inset 0 0 0 2px var(--mint); }
.pb__mon { display: grid; gap: 8px; }
.pb__mon .keep { white-space: normal; font-weight: 600; }
.pb__mon .muted { font-weight: 500; font-size: 12.5px; }
.pb__go { display: grid; gap: 8px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--ink-08); }

/* ---------- the proposal, in My Wix Designer's look ---------- */
.pdocw { min-width: 0; }
.pdoc { --pd-ink: #121c16; --pd-soft: #4d5751; --pd-line: #e3e6e1; --pd-acc: #2f9e4c; --pd-forest: #121c16;
  background: #fff; color: var(--pd-ink); border-radius: var(--r-lg); box-shadow: 0 2px 4px rgba(15,21,18,.06), 0 30px 60px -30px rgba(15,21,18,.4); max-width: 860px; margin: 0 auto; overflow: hidden; font-size: 15.5px; line-height: 1.65; }
.pdoc--empty { padding: 48px 32px; display: grid; gap: 14px; justify-items: center; text-align: center; color: var(--ink); background: var(--card); }
.pdoc--empty p { max-width: 46ch; margin: 0; }
.pdoc--empty .thinking { width: min(420px, 100%); text-align: left; }
.pdoc__cover { background: var(--pd-forest); color: #fff; padding: 44px 48px 36px; display: grid; gap: 10px; }
.pdoc__mwd { width: 190px; color: rgba(255,255,255,.7); display: block; margin-bottom: 18px; }
.pdoc__mwd svg { width: 100%; height: auto; display: block; }
.pdoc__t { margin: 0; font: 500 clamp(32px, 5vw, 48px)/1.05 var(--f-display); letter-spacing: -.03em; }
.pdoc__s { margin: 0; font-size: 18px; color: #7ff28f; font-weight: 600; }
.pdoc__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.pdoc__meta dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pdoc__meta dd { margin: 4px 0 0; font-size: 14px; }
.pdoc__sec { padding: 30px 48px 6px; }
.pdoc__sec h2 { margin: 0 0 12px; display: flex; gap: 12px; align-items: baseline; font: 500 25px/1.2 var(--f-display); letter-spacing: -.02em; color: var(--pd-ink); }
.pdoc__sec h2 i { font-style: normal; font: 600 13px/1 var(--f-mono, monospace); color: var(--pd-acc); padding: 4px 7px; border-radius: 6px; background: #e7f8ea; flex: none; transform: translateY(-3px); }
.pdoc__b p { margin: 0 0 12px; color: var(--pd-soft); }
.pdoc__b p b { color: var(--pd-ink); }
.pdoc__b ul, .pdoc__b ol { margin: 0 0 12px; padding-left: 22px; color: var(--pd-soft); }
.pdoc__b li { margin: 4px 0; }
.pdoc__b blockquote { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--pd-acc); background: #f4f7f3; border-radius: 0 10px 10px 0; color: var(--pd-ink); font-style: italic; }
.pdoc__nav { font-weight: 700; color: var(--pd-ink) !important; letter-spacing: .01em; }
.pdoc--edit [contenteditable]:hover { box-shadow: 0 0 0 2px #cfeed6; border-radius: 6px; }
.pdoc--edit [contenteditable]:focus { outline: none; box-shadow: 0 0 0 2px var(--pd-acc); border-radius: 6px; }
.pdoc__cover [contenteditable]:hover, .pdoc__cover [contenteditable]:focus { box-shadow: 0 0 0 2px rgba(127,242,143,.6); }
.pdoc__inv { padding-bottom: 20px; }
.pdoc__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.popt { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 14px; border: 1px solid var(--pd-line); background: #fafbf9; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.popt input { position: absolute; right: 16px; top: 18px; accent-color: var(--pd-acc); width: 18px; height: 18px; }
.popt[data-pick] { cursor: pointer; }
.popt.is-on { border-color: var(--pd-acc); box-shadow: 0 0 0 2px var(--pd-acc); background: #fff; }
.popt__k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-soft); }
.popt__n { font: 500 22px/1.2 var(--f-display); }
.popt__p { font: 600 26px/1.2 var(--f-display); letter-spacing: -.02em; }
.popt__p small { font-size: 13px; font-weight: 600; color: var(--pd-soft); }
.popt__d { font-size: 13.5px; color: var(--pd-soft); }
.popt ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--pd-soft); }
.pdoc__mon { margin-top: 14px; display: grid; gap: 2px; border-radius: 14px; border: 1px solid var(--pd-line); padding: 14px 18px; }
.pdoc__mon > b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-soft); margin-bottom: 4px; }
.pdoc__mon > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--pd-line); font-size: 14px; }
.pdoc__mon > div:first-of-type { border-top: 0; }
.pdoc__mon > div > span:first-child { display: grid; gap: 1px; }
.pdoc__mon > div > span:first-child span { color: var(--pd-soft); font-size: 13px; }
.pdoc__mon .tnum { font-weight: 700; white-space: nowrap; }
.pdoc__mon small { font-weight: 600; color: var(--pd-soft); }
.pdoc__vat { font-size: 12.5px; color: var(--pd-soft); margin: 10px 0 0; }
.pdoc__sign { padding: 24px 48px 40px; border-top: 1px solid var(--pd-line); margin-top: 20px; display: grid; gap: 8px; color: var(--pd-soft); font-size: 14.5px; }
.pdoc__sign p { margin: 0; }
.pdoc__sign p:first-child { font: 500 20px/1.3 var(--f-display); color: var(--pd-ink); }

/* ---------- the client's view ---------- */
.pclient { position: fixed; inset: 0; z-index: 60; background: #e9ece8; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: fadein .3s var(--ease-out); }
@keyframes fadein { from { opacity: 0; } }
.pclient__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--forest); color: var(--paper); }
.pclient__k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--paper-80); }
.pclient__k svg { width: 16px; height: 16px; }
.pclient__bar .iconbtn { color: var(--paper); background: rgba(255,255,255,.08); }
.pclient__in { overflow-y: auto; padding: 24px 16px 40px; }
.pclient__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px max(16px, calc((100vw - 860px) / 2)); background: #fff; box-shadow: 0 -10px 30px -18px rgba(15,21,18,.5); }
.pclient__sum { display: grid; gap: 2px; }
.pclient__sum b { font-size: 16px; }
.pclient__sum .muted { font-size: 13px; }
.pclient__acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pclient__done { display: flex; gap: 12px; align-items: center; }
.pclient__done > svg { width: 26px; height: 26px; color: #fff; background: var(--mint-deep); border-radius: 50%; padding: 5px; flex: none; }
.pclient__done > span { display: grid; gap: 2px; }

/* ---------- phones ---------- */
@media (max-width: 960px) {
  .pb__main { grid-template-columns: minmax(0, 1fr); }
  .pb__tabs { display: inline-flex; }
  .pb__ctx { position: static; max-height: none; }
  .pb[data-tab="details"] .pdocw, .pb[data-tab="doc"] .pb__ctx { display: none; }
  .pb__acts { width: 100%; }
  .pb__acts .btn { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {
  .pdoc { font-size: 15px; border-radius: 14px; }
  .pdoc__cover { padding: 28px 22px 24px; }
  .pdoc__meta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pdoc__sec { padding: 24px 22px 4px; }
  .pdoc__sign { padding: 20px 22px 30px; }
  .pb__grid { grid-template-columns: minmax(0, 1fr); }
  .pclient__in { padding: 12px 8px 24px; }
  .pclient__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pclient__acts { width: 100%; }
  .pdoc__mon > div { flex-direction: column; gap: 4px; }
}