/* ════════════════════════════════════════════════════════════════════
   Admin new look (Admin:NewLook:Enabled)

   Loaded after app.css, on admin pages only (_Layout adds it inside the admin chrome). The client-facing
   pages share app.css and never load this file, so nothing a client sees changes.

   Source: the "Proposals Portal" Claude Design files (Portal.dc.html, Main.dc.html). They are dark-only;
   the dark ramp below is theirs exactly, and the light ramp is derived from the same indigo hues.

   Most of the change is the token remap. Component rules follow only where the design changes a shape
   (pill buttons, 44px targets, sentence-case labels, outlined status pills) or where app.css hard-codes
   a colour that the remap cannot reach.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;

  /* Accent: the design's coral. Text on it is the canvas ink, not white: white on #FF4B40 is 3.4:1,
     the canvas ink is 5.9:1. */
  --accent:#FF4B40; --accent-hover:#FF6A61; --on-accent:#141525;
  --coral:#FF4B40; --coral-deep:#D9342A; --coral-soft:#FFE7E5;

  /* "Blue" is app.css's name for admin links, focus and info-ish emphasis. In this look those take the
     accent, darkened in light mode so link text keeps 4.5:1 on white. */
  --blue:#C42B21; --blue-deep:#A3221A; --blue-soft:#FFE7E5;

  /* The sidebar's brand colour. Still used as text in a few light-surface places (code, copy boxes). */
  --teal:#2B2D52; --teal-soft:#4E5390; --teal-900:#141525;

  --ink:#141525; --ink-body:#2B2D4A; --muted:#575B87; --faint:#6E7299;

  --paper:#F5F5FB; --surface:#FFFFFF; --sunken:#EEEFF8;
  --line:#E1E2F0; --line-strong:#C3C6E4;
  --field:#FFFFFF;

  --good:#1E7A4F; --good-soft:#E3F4EB;
  --bad:#C42B21;  --bad-soft:#FDE8E6; --bad-line:#E9A19B;
  --warn:#9A5B00; --warn-soft:#FBF0DC;
  --info:#3346B8; --info-soft:#E8EBFB;

  /* The sidebar is dark in both themes, as the teal one was. */
  --side-bg:#0F1020; --side-line:#272948; --side-hover:#1D1E35; --side-raised:#343760;
  --side-text:#D0D3EE; --side-muted:#8E92D0; --side-quiet:#B3B7DF;

  --side-w:248px;
  --gutter:clamp(20px, 2.8vw, 40px);
}
/* app.css narrows the sidebar to the icon rail below 1024px through this token; the width above would
   otherwise win, being declared later. */
@media (max-width:1023px){:root{--side-w:64px;}}

[data-theme="dark"]{
  --coral-deep:#FF8A82; --coral-soft:#3B1E2B;
  --blue:#FF8A82; --blue-deep:#FFB0AA; --blue-soft:#3B1E2B;

  --ink:#FFFFFF; --ink-body:#E3E5F6; --muted:#B3B7DF; --faint:#8E92D0;

  --paper:#141525; --surface:#1D1E35; --sunken:#181930;
  --line:#343760; --line-strong:#4E5390;
  --field:#141525;

  --good:#7BE0B0; --good-soft:#163328;
  --bad:#FF9D94;  --bad-soft:#3A1418; --bad-line:#991210;
  --warn:#F5C77E; --warn-soft:#33280F;
  --info:#A9B6FF; --info-soft:#232A55;

  --shadow-sm:0 1px 2px rgba(5,6,16,.5);
  --shadow:0 10px 30px rgba(5,6,16,.6);
  --shadow-pop:0 16px 44px rgba(5,6,16,.7);
}

/* ── Type ──────────────────────────────────────────────────────── */
.wc{font-size:14px;}
.wc h1,.wc h2,.wc h3,.wc h4{font-weight:700;}
.main h1.title{font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-.01em;}
.kicker{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--muted);}
.fld>label,.lbl{font-size:12px;font-weight:600;color:var(--muted);}
.hint{font-size:12px;}

/* ── Shell ─────────────────────────────────────────────────────── */
.main{padding:32px var(--gutter) 48px;}

.side{background:var(--side-bg);padding:20px 14px;gap:16px;}
.side::after{background:var(--side-line);}
.side-brand{padding:4px 8px 4px;}
.side-brand img{width:32px;height:32px;}
.side-brand .brand-name{font-size:15px;font-weight:800;}
.side-toggle{width:32px;height:32px;border-radius:8px;border:1px solid var(--side-raised);background:transparent;color:var(--side-quiet);}
.side-toggle:hover{background:var(--side-hover);color:#fff;}
.side-mini .side-toggle{background:var(--side-bg);border-color:var(--side-raised);}

.side-nav{gap:2px;}
.side-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--side-muted);padding:0 12px;margin:18px 0 6px;}
.side-nav>.side-label:first-child{margin-top:0;}
.nav-i{min-height:40px;padding:0 12px;border-radius:8px;gap:12px;font-size:14px;font-weight:500;color:var(--side-text);}
.nav-i svg{width:18px;height:18px;opacity:1;}
.nav-i:hover{background:var(--side-hover);color:#fff;}
.nav-i.on{background:var(--side-hover);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--accent);}
.side-mini .nav-i{padding:0;}
/* The count on Proposals. Hidden with the labels when the sidebar is a rail; the link's title still carries it. */
.nav-i .nav-count{margin-left:auto;flex:none;font-size:11px;font-weight:700;line-height:1.5;color:#141525;background:var(--side-quiet);border-radius:var(--r-pill);padding:0 8px;}

.side-controls{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--side-line);}

/* Your name is a button: it opens the account pop-out (the theme choice). Sign-out sits beside it. */
.side-user{padding:0;gap:4px;}
.side-user__btn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 4px;border:0;border-radius:10px;background:transparent;color:var(--side-text);font:inherit;text-align:left;cursor:pointer;}
.side-user__btn:hover,.side-user__btn[aria-expanded="true"]{background:var(--side-hover);}
.side-user__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.side-user__id{flex:1;min-width:0;display:grid;}
.side-user__caret{width:16px;height:16px;flex:none;color:var(--side-muted);}
.side-avatar{width:34px;height:34px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:800;}
.side-user .nm{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-user .em{font-size:11px;color:var(--side-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-user__out{flex:none;margin:0;}
.side-user__out .side-signout{width:36px;height:36px;padding:0;justify-content:center;border-radius:8px;color:var(--side-quiet);}
.side-user__out .side-signout:hover{background:var(--side-hover);color:#fff;}
.side-user__out .side-signout svg{width:18px;height:18px;opacity:1;}
/* The icon rail has no room for avatar and sign-out side by side; stack them. */
.side-mini .side-user{flex-direction:column;gap:6px;}
.side-mini .side-user__btn{flex:none;padding:3px;justify-content:center;}
.side-mini .side-user__id,.side-mini .side-user__caret{display:none;}

/* The account pop-out: a native popover in the top layer, placed by _AdminLayout's script (above the
   button, or to its right when the sidebar is a rail). Dark like the sidebar it comes from. */
.side-pop{position:fixed;inset:auto;margin:0;width:236px;max-width:calc(100vw - 16px);padding:12px;border:1px solid var(--side-raised);border-radius:12px;background:var(--side-bg);color:var(--side-text);box-shadow:var(--shadow-pop);}
.side-pop__who{display:grid;gap:2px;padding:0 4px 10px;margin-bottom:12px;border-bottom:1px solid var(--side-line);}
.side-pop__who .nm{font-size:13px;font-weight:700;color:#fff;}
.side-pop__who .em{font-size:11px;color:var(--side-muted);overflow-wrap:anywhere;}
.side-pop__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);margin:0 4px 6px;}
.side .side-pop .theme-seg{display:flex;flex-direction:row;background:var(--side-hover);padding:4px;gap:4px;margin:0;min-width:0;border-radius:var(--r-pill);}
.side .side-pop .theme-seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:34px;padding:0 6px;color:var(--side-quiet);font-size:12px;font-weight:600;}
.side .side-pop .theme-seg button:hover{color:#fff;}
.side .side-pop .theme-seg button[aria-pressed="true"]{background:var(--side-raised);color:#fff;}
.side .side-pop .theme-seg svg{display:block;width:14px;height:14px;flex:none;}
.side .side-pop .theme-seg span{display:inline;}
/* A browser without the popover API shows the pop-out's contents in place instead. */
@supports not selector(:popover-open){
  .side-pop{position:static;width:auto;max-width:none;padding:8px 4px 0;border:0;box-shadow:none;background:none;}
  .side-pop__who{display:none;}
}

/* The app launcher has its own row; the version and when it was updated sit underneath, and open the
   System page. */
.side-launcher{display:grid;gap:2px;padding:0 4px;}
.side-launcher webcoda-switcher{min-width:0;}
.side webcoda-switcher{
  color:var(--side-muted);font-size:12px;font-weight:600;
  --ws-trigger-padding:6px 8px;--ws-trigger-radius:8px;--ws-trigger-gap:8px;
  --ws-hover:var(--side-hover);--ws-fg:#fff;--ws-bg:var(--side-bg);--ws-border:var(--side-raised);
}
.side .side-version{display:block;padding:2px 8px;border-radius:6px;color:var(--side-muted);font-size:11px;text-align:left;text-decoration:none;}
.side .side-version:hover{color:#fff;}
.side .side-version:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.side-mini .side-version{padding:2px 0;text-align:center;font-size:9px;}

.mtopbar{background:var(--side-bg);border-bottom:1px solid var(--side-line);}
.mtopbar .mt-btn{background:var(--side-hover);border-radius:8px;}
.mdrawer .scrim{background:rgba(8,9,22,.6);}
.mdrawer .panel{background:var(--side-bg);}
.mdrawer .panel .nav-i{padding:0 12px;}

@media (max-width:1023px){
  .shell .side{padding:20px 8px;}
  .shell .side .nav-i{padding:0;}
  .shell .side .side-user{flex-direction:column;gap:6px;}
  .shell .side .side-user__btn{flex:none;padding:3px;justify-content:center;}
  .shell .side .side-user__id,.shell .side .side-user__caret{display:none;}
  .shell .side .side-version{padding:2px 0;text-align:center;}
}

/* ── Buttons: pills, 44px targets (36px compact) ───────────────── */
.btn,.btn-primary{min-height:44px;padding:0 20px;border-radius:var(--r-pill);font-family:var(--font-body);font-size:14px;font-weight:600;gap:8px;justify-content:center;}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px;}
.btn-blue,.btn-coral,.btn-primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);}
.btn-blue:hover,.btn-coral:hover,.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-outline:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:var(--muted);}
.btn-ghost{background:transparent;color:var(--muted);padding:0 12px;}
.btn-ghost.btn-sm{padding:0 10px;}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);}
.btn-danger{background:transparent;color:var(--bad);border-color:var(--bad-line);}
.btn-danger:hover{background:var(--bad-soft);filter:none;}
.btn:focus-visible,.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lnk:hover{color:var(--blue-deep);}

/* ── Cards ─────────────────────────────────────────────────────── */
.card-pad{padding:24px;}
.card-h{padding:18px 24px;}
.card-h h3{font-size:16px;}

/* ── Forms: 44px fields on the canvas colour, square-ish corners ── */
.inp,.sel{min-height:44px;padding:0 12px;}
.inp,.sel,.ta{border-radius:4px;border-color:var(--line-strong);background:var(--field);font-size:14px;}
.ta{padding:10px 12px;}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.check input{accent-color:var(--accent);}
.sel-mini{min-height:32px;}

/* ── Status pills: outlined, sentence case, no dot ─────────────── */
.pill{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;padding:3px 10px;background:transparent;border:1px solid color-mix(in srgb,currentColor 42%,transparent);}
.pill .dot{display:none;}
.pill-quiet{font-size:11px;padding:1px 8px;}
/* Outcome pills: app.css colours only On hold; the new look colours the other two as well. */
.pill-won{color:var(--good);}
.pill-lost{color:var(--bad);}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs{overflow-x:auto;scrollbar-width:thin;}
.tab{font-size:14px;padding:11px 14px 13px;white-space:nowrap;}
.tab.on{border-bottom-color:var(--accent);}
.tab.on .cnt{background:var(--coral-soft);color:var(--coral-deep);}

/* ── Stats ─────────────────────────────────────────────────────── */
.stat .k{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--muted);}
.stat .v{font-weight:800;}

/* ── Tables: Montserrat runs wider than Open Sans, so dense tables step down half a point to keep
      dates and names on one line. ── */
.tbl{font-size:13px;}

/* ── Hard-coded colours the token remap cannot reach ───────────── */
.error{border-color:color-mix(in srgb,var(--bad) 35%,transparent);}
.success{border-color:color-mix(in srgb,var(--good) 35%,transparent);}
.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);}
.nextstep{border-color:color-mix(in srgb,var(--good) 35%,transparent);}
.note{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--ink-body);}
.avatar-sm{background:var(--teal-soft);}
/* app.css uses the brand teal as a text colour in a few places. It is a dark colour in both themes,
   so on dark surfaces that text disappears (slug chips, copy boxes, attachment names, contact icons). */
[data-theme="dark"] code,
[data-theme="dark"] .mono,
[data-theme="dark"] .copybox,
[data-theme="dark"] .q-att-name,
[data-theme="dark"] .eic-contact,
[data-theme="dark"] .slugpill code{color:var(--muted);}
[data-theme="dark"] .btn-outline:hover{border-color:var(--muted);}

/* ── Sign-in pages (staff sign-in, forgot password, set password) ── */
.signin-rule{background:var(--accent);}
.signin-brand span{color:var(--ink);font-weight:800;}
[data-theme="dark"] .auth-bg-admin{background:radial-gradient(900px 460px at 22% 0%,rgba(255,75,64,.10),transparent 60%),linear-gradient(135deg,var(--paper),#0F1020);}

/* ════════════════════════════════════════════════════════════════════
   Proposal workspace (Admin:NewLook:ProposalWorkspace) — Main.dc.html
   ════════════════════════════════════════════════════════════════════ */
:root{--danger-zone:#F1C4BF;}
[data-theme="dark"]{--danger-zone:#660605;}

/* Header: identity on the left, the page's actions on the right. */
.pw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;}
.pw-id{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pw-crumb{margin:0;font-size:13px;color:var(--muted);}
.pw-crumb a{color:var(--muted);text-decoration:none;font-weight:600;}
.pw-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.pw-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.pw-titlerow .title{overflow-wrap:anywhere;}
.pw-meta{margin:0;font-size:14px;color:var(--muted);}
.pw-meta--tech{font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.pw-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pw-actions .btn[aria-disabled="true"]{opacity:.55;pointer-events:none;}
.pw-health{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}

/* The client link, kept on screen. */
.pw-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;min-width:0;}
.pw-link__label{font-size:12px;font-weight:600;color:var(--muted);}
.pw-link__url{flex:1;min-width:12ch;}
.pw-link__hint{font-size:12px;color:var(--muted);margin:6px 0 0;}

/* Deal snapshot strip. */
.pw-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px;overflow:hidden;}
.pw-kpi{padding:20px 24px;border-right:1px solid var(--line);min-width:0;}
.pw-kpi:last-child{border-right:0;}
.pw-kpi .lbl{margin:0 0 6px;}
.pw-kpi__v{margin:0;font-size:20px;font-weight:700;color:var(--ink);line-height:1.25;overflow-wrap:anywhere;}
.pw-kpi__v--lg{font-size:26px;font-weight:800;}
.pw-kpi__s{margin:4px 0 0;font-size:12px;color:var(--muted);}
.pw-kpi__s.is-due{color:var(--coral-deep);}
.pw-kpi__s.is-late{color:var(--bad);font-weight:600;}
.pw-kpi--form{padding:16px 24px;}
.pw-outcome{display:grid;gap:8px;}
.pw-outcome .lbl{margin:0;}
.pw-outcome__row{display:flex;gap:8px;align-items:center;}
.pw-outcome__row .sel{flex:1;min-width:0;}
.pw-outcome .inp[hidden]{display:none;}

/* Two columns: the client on the left, settings on the right. */
.pw-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:start;}
.pw-col{display:flex;flex-direction:column;gap:24px;min-width:0;}
.pw-card{padding:24px;display:flex;flex-direction:column;gap:20px;}
.pw-card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.wc .pw-h{font-size:16px;font-weight:700;color:var(--ink);margin:0;}
.pw-sub{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:8px;font-family:var(--font-body);}
.pw-count{font-size:11px;font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:0 8px;}
.pw-muted{color:var(--muted);font-weight:400;}

.pw-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.pw-tile{background:var(--paper);border-radius:8px;padding:14px 16px;min-width:0;}
.pw-tile .lbl{margin:0 0 6px;}
.pw-tile__v{margin:0;font-size:22px;font-weight:700;color:var(--ink);}
.pw-tile__u{font-size:13px;font-weight:500;color:var(--muted);}
/* The Client engagement card leads to the Engagement and Comments panels (no tabs for them in the
   workspace): its heading and three tiles are links, and each panel has a way back. */
.pw-h__link{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;}
.pw-h__link svg{color:var(--muted);transition:transform .12s var(--ease);}
.pw-h__link:hover{color:var(--accent);}
.pw-h__link:hover svg{color:var(--accent);transform:translateX(2px);}
.pw-tile--link{display:block;color:inherit;text-decoration:none;border:1px solid transparent;transition:border-color .12s var(--ease),background .12s var(--ease);}
.pw-tile--link:hover{border-color:var(--line-strong);background:var(--surface);}
.pw-tile--link:hover .lbl{color:var(--accent);}
.pw-h__link:focus-visible,.pw-tile--link:focus-visible,.pw-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pw-panel-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;flex-wrap:wrap;}
/* With no tab row, the panels are opened from the Overview: AI & Knowledge is the last row of the
   Portal settings card. */
.pw-entry{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);color:inherit;text-decoration:none;}
.pw-entry__x{flex:1;min-width:0;display:grid;gap:2px;}
.pw-entry__t{font-size:14px;font-weight:700;color:var(--ink);}
.pw-entry .hint{margin:0;}
.pw-entry svg{flex:none;color:var(--muted);transition:transform .12s var(--ease);}
.pw-entry:hover .pw-entry__t,.pw-entry:hover svg{color:var(--accent);}
.pw-entry:hover svg{transform:translateX(2px);}
.pw-entry:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
.pw-sub .pw-h__link{gap:6px;}
.pw-back{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;}
.pw-back:hover{color:var(--ink);}

.pw-empty{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px dashed var(--line-strong);border-radius:8px;padding:16px 20px;color:var(--muted);}
.pw-empty__x{flex:1;min-width:200px;}
.pw-empty__t{margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.pw-empty__d{margin:2px 0 0;font-size:13px;color:var(--muted);}

.pw-list{list-style:none;margin:0;padding:0;}
.pw-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.pw-list li:last-child{border-bottom:0;}
.pw-list__main{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pw-list__name{display:block;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;}

.pw-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 24px;margin:0;}
.pw-facts dt{margin:0 0 6px;}
.pw-facts dd{margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.pw-inline-form{display:grid;gap:6px;}
.pw-inline-form[hidden]{display:none;}
.pw-inline-form .lbl{margin:0;}
.pw-inline-form__row{display:flex;gap:8px;align-items:center;}
.pw-inline-form__row .sel{flex:1;min-width:0;}
.pw-reveal{display:grid;gap:12px;justify-items:start;}
.pw-reveal .pw-inline-form{justify-self:stretch;}
/* The HubSpot card: the deal leads, the company is one quiet line beneath it. The shared deal panel
   takes its compact layout here (HubSpotDealPanelVm.Compact). */
.pw-deal{border-top:0;padding-top:0;}
.pw-deal #hs-deal-name{font-size:15px;}
.pw-deal .hs-deal-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 10px;}
.pw-deal .hs-deal-facts[hidden],.pw-deal .hs-deal-facts>div[hidden]{display:none;}
.pw-deal .hs-deal-facts>div{background:var(--paper);border-radius:8px;padding:12px 14px;min-width:0;}
.pw-deal .hs-deal-facts dt{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);}
.pw-deal .hs-deal-facts dd{margin:4px 0 0;font-size:18px;font-weight:700;color:var(--ink);max-width:none;white-space:normal;overflow-wrap:anywhere;}
/* Stage, amount and owner are the tiles; close date and pipeline support them in a quieter row. */
.pw-deal .hs-deal-facts>div:nth-child(n+4){background:transparent;padding:0 2px;}
.pw-deal .hs-deal-facts>div:nth-child(n+4) dd{font-size:14px;font-weight:600;}
.pw-deal #hs-deal-freshness{font-size:11px !important;}
.hs-deal-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.pw-deal .hs-deal-choices ~ form{margin-top:14px;}
.hs-deal-choices .btn.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);}

.pw-company{display:grid;gap:4px;}
.pw-company--below{border-top:1px solid var(--line);padding-top:14px;}
.pw-company__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:14px;}
.pw-company__label{font-size:12px;font-weight:600;color:var(--muted);}
.pw-company__name{font-weight:600;color:var(--ink);}
.pw-company__sync{margin:0;font-size:12px;color:var(--muted);}
.pw-company .pw-inline-form{margin-top:8px;}
.pw-textbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;text-decoration:none;}
.pw-textbtn:hover{text-decoration:underline;text-underline-offset:2px;}
.pw-textbtn[hidden]{display:none;}
@media (max-width:719px){
  .pw-deal .hs-deal-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.pw-owner{display:flex;align-items:center;gap:12px;}
.pw-avatar{width:36px;height:36px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:800;display:grid;place-items:center;flex:none;}
.pw-owner__x{flex:1;min-width:0;}
.pw-owner__n{margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.pw-owner__r{margin:0;font-size:12px;color:var(--muted);}
.pw-card .hint{margin:0;}
.pw-switch-form{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px;}
.pw-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink);cursor:pointer;}
.pw-switch input{width:20px;height:20px;accent-color:var(--accent);flex:none;cursor:pointer;}

.pw-split{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px;justify-items:start;}
.pw-split__t{margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.pw-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);}
.pw-details summary:hover{color:var(--ink);}
.pw-details pre{white-space:pre-wrap;word-break:break-word;margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);max-height:320px;overflow:auto;}

.pw-danger{border:1px solid var(--danger-zone);border-radius:12px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pw-danger--done{border-color:var(--line);}
.wc .pw-danger__t{margin:0;font-size:14px;font-weight:600;color:var(--ink);font-family:var(--font-body);}

@media (max-width:1100px){
  .pw-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pw-kpi{border-bottom:1px solid var(--line);}
  .pw-kpi:nth-child(2n){border-right:0;}
  .pw-kpi--form{grid-column:1/-1;border-bottom:0;}
  .pw-grid{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:719px){
  .pw-head{align-items:flex-start;}
  .pw-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pw-kpi,.pw-kpi--form{padding:16px;}
  .pw-card,.pw-upload{padding:18px;}
}
@media (max-width:480px){
  .pw-kpis{grid-template-columns:minmax(0,1fr);}
  .pw-kpi{border-right:0;}
}
.pw-sync-error{display:inline;margin-left:8px;margin-top:0;font-size:12px;font-weight:600;color:var(--warn);}

/* Proposal files on the Overview, and the setup guide as a help panel (the old Proposal upload and
   Checklist tabs, folded into the workspace). */
.pw-upload__title{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.pw-upload .hint{margin:4px 0 12px;}
.pw-upload form{margin-top:12px;}
.pw-help-btn{flex:none;width:28px;height:28px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;
  color:var(--muted);font:inherit;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:grid;place-items:center;}
.pw-help-btn:hover{color:var(--ink);border-color:var(--muted);}
.pw-help-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pw-version .pw-details summary{display:flex;align-items:center;gap:8px;}
.pw-version .tbl{margin-top:10px;}
/* In the right column four table columns don't fit: each file is its path, then its type and size,
   with its serving rule on the right (wrapping below when there is no room). One column under 1100px
   gives the table its full width back, and under 720px app.css stacks it. */
@media (min-width:1101px){
  .pw-version .tbl-stack thead{display:none;}
  .pw-version .tbl-stack,.pw-version .tbl-stack tbody{display:block;}
  .pw-version .tbl-stack tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);}
  .pw-version .tbl-stack tbody tr:last-child{border-bottom:0;}
  .pw-version .tbl-stack tbody tr:hover{background:transparent;}
  .pw-version .tbl-stack tbody td{display:block;padding:0;border:0;text-align:left;}
  .pw-version .tbl-stack tbody td[data-th="Path"]{flex:1 0 100%;min-width:0;}
  .pw-version .tbl-stack tbody td[data-th="Path"] code{overflow-wrap:anywhere;}
  .pw-version .tbl-stack tbody td[data-th="Visibility"]{margin-left:auto;}
}
/* The Quote tab on the Overview: every linked quote with its Unlink, then the link/create actions and
   the quote settings behind summaries. */
.pw-quotes{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.pw-quotes li{display:flex;align-items:center;gap:12px;}
.pw-quotes li>.ent{flex:1;min-width:0;}
.pw-quotes__others{display:grid;gap:8px;margin-top:10px;}
.pw-textbtn--muted{color:var(--muted);font-weight:500;}
.pw-textbtn--muted:hover{color:var(--ink);}
.pw-quote__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pw-quote__actions form{margin:0;}
.pw-quote__legacy{display:grid;gap:14px;margin-top:10px;}
.pw-quote__legacy .hint{margin:0;}
.pw-quote .pw-details .pw-inline-form{margin-top:10px;}
.pw-quote .pw-details .tbl{margin-top:10px;}
.pw-history__row{flex-wrap:wrap;}
.pw-history__row .pw-list__main{white-space:normal;overflow:visible;}
.pw-history__files{display:inline-flex;gap:10px;align-items:baseline;margin-left:auto;}

.pw-help{width:min(1080px,94vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink-body);box-shadow:var(--shadow-pop);overflow:auto;}
.pw-help::backdrop{background:rgba(8,9,22,.55);}
.pw-help__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--line);}
.wc .pw-help__head h2,.pw-help__head h2{margin:0;font-size:18px;font-weight:800;color:var(--ink);font-family:var(--font-display);}
.pw-help__close{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);
  display:grid;place-items:center;cursor:pointer;}
.pw-help__close:hover{color:var(--ink);border-color:var(--line-strong);}
.pw-help__figure{margin:0 24px 24px;max-width:640px;display:grid;gap:8px;}
.pw-help__figure img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);}
.pw-help__figure figcaption{font-size:12px;color:var(--muted);}
.pw-help > .layout-rail{padding:20px 24px;}

/* ── Admin redesign, step 3: the decluttered proposal page (Admin:NewLook:ProposalDeclutter) ───────
   One header with a state-driven primary action and two menus, one summary strip, the relationship
   chain with per-node menus, client engagement, one Files & versions card, and a settings drawer and
   dialogs for the rest. */
.pd-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.pd-inline{display:contents;}
.pd-iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;flex:none;}
.pd-iconbtn:hover{color:var(--ink);border-color:var(--line);background:var(--surface);}
.pd-iconbtn:focus-visible,.pd-node__more:focus-visible,.pd-menu__list [role="menuitem"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Dev-only state switcher. */
.pd-devstates{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 12px;padding:6px 10px;border:1px dashed var(--line-strong);border-radius:8px;font-size:12px;color:var(--muted);}
.pd-devstates span{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;}
.pd-devstates a{color:var(--muted);text-decoration:none;padding:2px 8px;border-radius:var(--r-pill);}
.pd-devstates a:hover{color:var(--ink);background:var(--sunken);}
.pd-devstates a[aria-current="true"]{background:var(--ink);color:var(--surface);}
.pd-devstates a.is-real::after{content:" •";}

/* Header: title block and the action bar. */
.pd-head .pw-titlerow{align-items:center;}
.pd-actions{align-items:center;}
.pd-menu{position:relative;display:inline-flex;}
.pd-more{width:44px;padding:0;justify-content:center;}
.pd-menu__list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:240px;max-width:min(380px,92vw);padding:6px;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);}
.pd-menu__list--end,.pd-actions .pd-menu__list{left:auto;right:0;}
.pd-menu__list[hidden]{display:none;}
.pd-menu__list [role="menuitem"]{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;}
.pd-menu__list [role="menuitem"]:hover,.pd-menu__list [role="menuitem"]:focus{background:var(--sunken);}
.pd-menu__list [role="menuitem"][aria-disabled="true"]{color:var(--faint);cursor:default;background:transparent;}
.pd-menu__copy{flex-direction:column;align-items:flex-start !important;gap:4px !important;}
.pd-menu__copy-t{display:inline-flex;align-items:center;gap:8px;}
.pd-menu__url{display:block;max-width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:500;color:var(--muted);overflow-wrap:anywhere;}
.pd-menu__note{margin:4px 12px 6px;font-size:12px;color:var(--muted);line-height:1.45;}
.pd-menu__head{margin:4px 12px 8px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.4;}
.pd-menu__sub{display:block;font-size:12px;font-weight:500;color:var(--muted);}
.pd-menu__sep{height:1px;margin:6px 4px;background:var(--line);}
.pd-menu__list [role="menuitem"].pd-menu__danger{color:var(--bad);}
.pd-menu__list [role="menuitem"].pd-menu__danger:hover{background:var(--bad-soft);}

.pd-banner{margin:14px 0 0;padding:12px 16px;border:1px solid var(--line-strong);border-radius:10px;background:var(--sunken);font-size:13.5px;color:var(--ink-body);}

/* Summary strip: value, stage, close date, outcome. */
.pd-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
.pd-kpis .pw-kpi{position:relative;}
.pd-tax{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0;white-space:nowrap;}
.pd-warn{position:absolute;top:18px;right:18px;color:var(--warn);cursor:help;display:inline-grid;}
.pd-warn[hidden]{display:none;}
.pd-warn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.pw-kpi__s.is-soon{color:var(--warn);font-weight:600;}
.pw-kpi__s.is-urgent{color:var(--bad);font-weight:600;}
.pd-kpis .pw-outcome{display:grid;gap:8px;}
.pd-kpis .pw-outcome.is-saving{opacity:.7;}
.pd-sync{margin:8px 2px 0;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.pd-sync .pw-textbtn{font-size:12px;}

/* The chain wraps rather than scrolls, so node menus aren't clipped. */
.pd-chain{overflow:visible;flex-wrap:wrap;row-gap:6px;margin-top:16px;}
.pd-node{position:relative;display:inline-flex;align-items:center;flex:none;}
.pd-node__x{min-width:0;display:block;}
.pd-node__more{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:-2px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--faint);cursor:pointer;opacity:.55;transition:opacity .12s var(--ease);}
.pd-node:hover .pd-node__more,.pd-node__more[aria-expanded="true"],.pd-node__more:focus-visible{opacity:1;color:var(--ink);background:var(--sunken);}
.pd-node .pd-menu__list{top:calc(100% + 4px);}
button.jnode{border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;}
.jnode.pd-node--placeholder{border:1.5px dashed var(--line-strong);color:var(--muted);}
.jnode.pd-node--placeholder .jt{color:var(--blue);}
.jnode.pd-node--placeholder:hover{border-color:var(--blue);background:var(--surface);}
.jnode.pd-node--placeholder .jic{background:transparent;border:1.5px dashed var(--line-strong);}
.pd-node.picker .picker-pop{top:calc(100% + 4px);left:0;}

/* Overview: no content yet. */
.pd-start{gap:18px;}
.pd-start__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.pd-start__t{font-size:20px;}
.pd-kicker{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);}
.pd-start__head .hint{margin:6px 0 0;max-width:62ch;}
.pd-steps{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14px;color:var(--ink-body);}
.pd-steps li::marker{font-weight:700;color:var(--muted);}
.pd-steps__actions{display:grid;gap:8px;justify-items:start;margin-top:8px;}
.pd-drop{display:grid;gap:12px;}
.pd-drop__zone{padding:36px 20px;}
.pd-drop__t{font-size:14px;font-weight:600;color:var(--ink);margin-top:8px;}
.pd-drop input[type="file"]{margin-top:10px;}

/* Overview: client engagement, one empty state. */
.pd-empty{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);}
.pd-empty__t{margin:0;font-size:14px;font-weight:600;color:var(--ink);}
.pd-empty__actions{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;}
.pd-users summary{display:flex;align-items:center;gap:8px;}
.pd-users .pw-list{margin:10px 0;}

/* Overview: Files & versions. */
.pd-files__line{margin:0;font-size:13px;color:var(--ink-body);}
.pd-files p{margin:0;}
.pd-history summary{display:flex;align-items:center;gap:8px;}
.pd-history .pw-list{margin-top:10px;}

/* Toast. */
.pd-toast{position:fixed;z-index:80;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(520px,92vw);padding:11px 18px;border-radius:10px;
  background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-pop);}
.pd-toast.is-error{background:var(--bad);color:#fff;}
.pd-toast[hidden]{display:none;}

/* Dialogs and the settings drawer. */
.pd-dialog{width:min(560px,94vw);max-height:90vh;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink-body);box-shadow:var(--shadow-pop);overflow:auto;}
.pd-dialog::backdrop{background:rgba(8,9,22,.5);}
.pd-dialog__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:16px 20px;background:var(--paper);border-bottom:1px solid var(--line);}
.pd-dialog__head .pw-h{flex:1;}
.pd-dialog__body{padding:18px 20px 22px;display:grid;gap:14px;}
.pd-drawer{margin:0 0 0 auto;width:min(460px,100vw);height:100vh;max-height:100vh;border-radius:0;border-width:0 0 0 1px;}
.pd-drawer__body{padding:4px 20px 28px;}
.pd-section{display:grid;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.pd-section:last-child{border-bottom:0;}
.pd-section h3{margin:0;font-size:14px;font-weight:700;color:var(--ink);}
.pd-section h3:focus{outline:none;}
.pd-section .hint{margin:0;}
.pd-field{display:grid;gap:6px;}
.pd-field.is-saving{opacity:.7;}
.pd-field__row{display:flex;gap:10px;align-items:center;}
.pd-slug{font-size:12.5px;}
.pd-drawer .pw-quotes li{gap:8px;}
/* Client access (privacy and people) is part of the Overview: below its cards, and hidden with it. */
.pd-access{margin-top:24px;}
.pd-access .card{max-width:none !important;}   /* line up with the Overview's cards above */
#tab-overview[hidden] ~ .pd-access{display:none;}
/* In the deal dialog the chain already opens the deal and unlinks it; the dialog is for changing it. */
#deal-dialog .hs-deal-actions,#deal-dialog #hs-deal-live,#deal-dialog .kicker,#deal-dialog #hs-deal-freshness{display:none !important;}

@media (max-width:719px){
  .pd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pd-actions{width:100%;}
  .pd-actions > .btn,.pd-actions > form .btn{flex:1;}
  .pd-empty{grid-template-columns:1fr;}
  .pd-empty > svg{display:none;}
  .pd-empty__actions{grid-column:1;}
  .pd-drawer{width:100vw;border-left:0;}
}

/* ── Dashboard: one list ("Your work") ──────────────────────────────
   The Needs your attention, Recent quotes, Proposals and Project trackers cards as one list. Rows share
   the list's columns (subgrid) so values, statuses and dates line up; what needs you carries an accent
   and its reason. Each row's title link covers the row; its action button sits above that. */
.wl{overflow:hidden;}
.wl-head{flex-wrap:wrap;}
.wl-filters{display:flex;flex-wrap:wrap;gap:6px;}
.wl-filters[hidden]{display:none;}
.wl-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.wl-chip:hover{color:var(--ink);border-color:var(--muted);}
.wl-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.wl-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.wl-n{font-size:11px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums;}
.wl-chip--attention .wl-n{color:var(--warn);opacity:1;}
.wl-chip--attention[aria-pressed="true"] .wl-n{color:inherit;}
.wl-status-filter{display:inline-flex;}
.wl-status-filter select{min-height:32px;padding:0 32px 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.wl-status-filter select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* The outer 4px columns plus the gap give the rows their 20px side padding: padding on a subgridded row
   would come out of its first and last columns instead. */
.wl-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:4px 34px minmax(0,1fr) auto auto auto auto 4px;column-gap:16px;}
.wl-row{position:relative;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:12px 0;border-top:1px solid var(--line);}
.wl-row > .eic{grid-column:2;}
.wl-list > li:first-child{border-top:0;}
.wl-row:hover{background:var(--sunken);}
.wl-row--attention{box-shadow:inset 3px 0 0 var(--warn);}
.wl-row[hidden],.wl-note[hidden]{display:none;}
.wl .eic-proposal{background:var(--info-soft);color:var(--info);}
.wl-main{min-width:0;}
.wl-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;}
.wl-title::after{content:"";position:absolute;inset:0;}
.wl-title:focus-visible{outline:none;}
.wl-row:has(.wl-title:focus-visible){outline:2px solid var(--accent);outline-offset:-2px;}
.wl-code{margin-right:8px;color:var(--muted);font-variant-numeric:tabular-nums;}
.wl-sub{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;}
.wl-why{display:flex;align-items:flex-start;gap:6px;margin-top:5px;color:var(--warn);font-size:12px;font-weight:600;}
.wl-why svg{width:14px;height:14px;flex:none;margin-top:1px;}
.wl-meta{display:contents;}
.wl-val{color:var(--ink);font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wl-when{color:var(--muted);font-size:12px;white-space:nowrap;text-align:right;}
.wl-end{display:flex;justify-content:flex-end;}
.wl-end .btn{position:relative;z-index:1;}   /* above the row's link */
.wl-end .btn svg{width:15px;height:15px;}
.wl-arrow{width:16px;height:16px;color:var(--faint);}
.wl-note{grid-column:1/-1;padding:14px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;}
.wl-foot{display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;}

/* Narrow screens: one column per row, with the value, status and date on a line under the title. */
@media (max-width:899px){
  .wl-list{display:block;}
  .wl-row{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"icon main end" "icon meta end";column-gap:12px;row-gap:6px;padding:12px 16px;}
  .wl-row > .eic{grid-area:icon;align-self:start;}
  .wl-main{grid-area:main;}
  .wl-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
  .wl-val{order:2;}
  .wl-status{order:1;}
  .wl-when{order:3;}
  .wl-val:empty,.wl-when:empty{display:none;}
  .wl-end{grid-area:end;}
  /* A row with an action gives the button its own line rather than squeezing the title. */
  .wl-row:has(.wl-end .btn){grid-template-areas:"icon main main" "icon meta meta" "icon end end";}
  .wl-row:has(.wl-end .btn) .wl-end{justify-content:flex-start;}
  .wl-note{padding:14px 16px;}
  .wl-foot{padding:12px 16px;}
}

/* Quote workspace action menu. Mirrors the public quote's admin Actions dropdown while
   keeping lifecycle controls above the fold and the information rail free of action fragments. */
.quote-actions-menu{position:relative;flex:0 0 auto}
.quote-actions-toggle{list-style:none;cursor:pointer;gap:8px}
.quote-actions-toggle::-webkit-details-marker{display:none}
.quote-actions-caret{flex:none;transition:transform .15s ease}
.quote-actions-menu[open]>.quote-actions-toggle .quote-actions-caret,
.quote-actions-submenu[open]>.quote-actions-item .quote-actions-caret{transform:rotate(180deg)}
.quote-actions-menu[open]>.quote-actions-toggle{border-color:var(--ink);background:var(--sunken)}
.quote-actions-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(340px,calc(100vw - 32px));
  max-height:calc(100vh - 96px);overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);box-shadow:var(--shadow)}
.page-head .quote-actions-form{display:block;margin:0}
.quote-actions-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0;padding:10px 12px;
  border:0;border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;text-align:left;text-decoration:none;cursor:pointer}
.quote-actions-item:hover,.quote-actions-submenu[open]>.quote-actions-item{background:var(--sunken)}
.quote-actions-item:focus-visible,.quote-actions-toggle:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.quote-actions-item-danger{color:var(--bad)}
.quote-actions-item-danger:hover{background:var(--bad-soft)}
.quote-actions-divider{height:1px;margin:6px 4px;background:var(--line)}
.quote-actions-submenu>summary{list-style:none}
.quote-actions-submenu>summary::-webkit-details-marker{display:none}
.page-head .quote-actions-template-form{display:grid;gap:8px;margin:2px 4px 6px;padding:10px 8px 8px;border-top:1px dashed var(--line)}
.page-head .quote-actions-template-form label{font-size:11px;font-weight:700;color:var(--muted)}
.page-head .quote-actions-template-form .btn{justify-self:start}
@media(max-width:700px){
  .quote-actions-panel{position:fixed;right:16px;left:16px;top:72px;width:auto;max-height:70vh}
}