/* TradeDraft — shared price-list ("My price list") styles.  ONE source of truth, linked by BOTH
   app.html (the in-quote sheet) and dashboard.html (the manage page), mirroring js/library.js.
   Extracted 15 Jun 2026 from app.html's inline <style> (previously duplicated in both pages).
   Relies on the brand tokens both pages define: --navy/--navy-2/--brass/--brass-deep/--chalk/--paper/
   --slate/--steel/--line/--line-strong/--sans/--prose and the radii --r-sm/--r-md.
   Contrast: the 10px micro-labels were darkened (brass #a9863f→#7c5d22, steel→#48597a) to meet WCAG AA. */
/* SURFACE RULE (19 Jul 2026). This sheet is linked by BOTH the app (a chalk sheet) and the portal
   (the manage page). Its cards are WHITE and they sit on a chalk surface, so nothing in here may
   use var(--chalk) as its own background unless it is nested inside a white card:
     · HOVER goes to a faint navy wash, never to chalk. Hovering to chalk made the thing you are
       pointing at fade INTO the page — backwards, and invisible on the app sheet.
     · .lib-editor was chalk on the chalk sheet, so the inline rate editor had no visible panel in
       the app at all. It is white now, i.e. raised, like every other card here.
   .lib-u and .lib-learned keep their chalk: both are nested INSIDE the white .lib-item, so they
   read on any surface. Pinned by library-surface.spec.js. */
.lib-btn{background:#fff;border:1.5px dashed var(--line-strong);color:var(--navy);box-shadow:none;margin-top:8px}
.lib-btn:hover{background:rgba(0,33,71,.035);border-color:var(--brass);transform:none}
.lib-cat{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7c5d22;margin:16px 0 8px}
.lib-cat:first-child{margin-top:0}
/* Head row: "Your items (N)" left, the sort control right — one line instead of three stacked. */
.lib-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px}
.lib-head:first-child{margin-top:0}
.lib-head .lib-cat{margin:0}
.lib-item{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;text-align:left;cursor:pointer;transition:.12s;min-height:48px}
.lib-item:hover{border-color:var(--brass);background:rgba(0,33,71,.035)}
.lib-item.lib-added{border-color:#3f9b50;background:#eafbe7}
.lib-d{flex:1;font-size:15px;font-weight:500;color:var(--navy);font-family:var(--prose);min-width:0}
.lib-r{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--navy);flex-shrink:0;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.lib-u{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#48597a;background:var(--chalk);border-radius:10px;padding:3px 8px;flex-shrink:0;min-width:52px;text-align:center}
.lib-add{font-size:18px;color:var(--brass);font-weight:700;flex-shrink:0}
.lib-empty{font-size:13px;color:var(--steel);line-height:1.5}
/* ── Editable price list ("Your items") ─────────────────────── */
/* "Add" affordance, not an endpoint — a light dashed brass button so it doesn't compete with the
   navy nav bar / navy header (owner note, 4 Jul 2026). 44px tall for the tap target. */
.lib-new{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;margin-bottom:10px;background:#fff;color:var(--navy);border:1px dashed var(--brass);border-radius:var(--r-md);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;min-height:44px;transition:background .12s,border-color .12s}
.lib-new:hover{background:rgba(0,33,71,.035);border-color:var(--brass-deep);border-style:solid}
.lib-sub{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#48597a;margin:14px 0 8px}
.lib-sub::after{content:"";flex:1;height:1px;background:var(--line)}
.lib-row{display:flex;align-items:stretch;gap:6px;margin-bottom:8px}
.lib-row .lib-item{flex:1;margin-bottom:0}
.lib-minus{display:none;flex:0 0 auto;width:22px;height:22px;align-items:center;justify-content:center;border:0;border-radius:50%;background:#d9542f;color:#fff;font-size:14px;font-weight:700;line-height:1;cursor:pointer;align-self:center;padding:0}
#libraryBody.lib-edit-mode .lib-minus{display:inline-flex}
#libraryBody.lib-edit-mode .lib-pick{pointer-events:none;opacity:.92}
#libraryBody.lib-edit-mode .lib-add{visibility:hidden}
.lib-row .lib-item.lib-pressing{background:#faf0ee;border-color:#d9542f}
.lib-tool-btn.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.lib-edit-help{display:none;font-size:12px;color:var(--steel);margin:0 0 12px;line-height:1.45}
#libraryBody.lib-edit-mode .lib-edit-help{display:block}
.lib-acts{display:flex;align-items:center;gap:4px;flex:none}
.lib-act{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--steel);min-width:40px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px;align-self:center}
.lib-act:hover{border-color:var(--brass);color:var(--navy)}
.lib-keep{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.lib-learned{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#48597a;background:var(--chalk);border-radius:8px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.lib-editor{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-md);padding:12px;margin:0 0 14px;
  box-shadow:0 1px 3px rgba(0,33,71,.07)}   /* raised: reads on the app CHALK sheet by fill, on the white portal page by the shadow */
.lib-ed-row{margin-bottom:8px}
.lib-ed-desc{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:16px;background:#fff;color:var(--slate)}
.lib-ed-row2{display:flex;gap:8px;margin-bottom:10px}
.lib-ed-unit{flex:1;min-width:0;padding:10px 9px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:16px;background:#fff;color:var(--slate)}
.lib-ed-rate-wrap{position:relative;flex:0 0 120px}
.lib-ed-curr{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--steel);font-size:13px}
.lib-ed-rate{width:100%;padding:10px 9px 10px 19px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:16px;background:#fff;text-align:right}
.lib-ed-acts{display:flex;gap:8px;justify-content:flex-end}
.lib-ed-cancel{padding:9px 16px;border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-sm);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--slate);cursor:pointer}
.lib-ed-save{padding:9px 18px;border:0;background:var(--navy);color:#fff;border-radius:var(--r-sm);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer}
.lib-ed-save:hover{background:var(--navy-2)}
/* Delete lives in the editor (owner item 1, 14 Jul): sits left, Cancel/Save stay right (margin-right:auto). */
.lib-ed-delete{margin-right:auto;padding:9px 16px;border:1px solid #e0b4ac;background:#fff;border-radius:var(--r-sm);font-family:var(--sans);font-size:13px;font-weight:600;color:var(--red);cursor:pointer}
.lib-ed-delete:hover{background:#fbeeeb;border-color:var(--red)}
.lib-toolbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.lib-search{flex-basis:200px}
.lib-search{flex:1;min-width:0;height:44px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r-md);font-size:16px;background:#fff;color:var(--slate)}
.lib-tool-btn{flex:none;height:44px;padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:#fff;border-radius:var(--r-md);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--navy);cursor:pointer}
.lib-tool-btn:hover{border-color:var(--brass);background:rgba(0,33,71,.035)}
/* Import/Export as compact square icon buttons (mockup, 4 Jul 2026) — gives the search box its width back. */
.lib-icon-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.lib-icon-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Import/Export carry their words (owner, 4 Jul PM — supersedes the icon-only call above: the
   hover tooltip explained nothing on a phone). The toolbar wraps instead of squeezing the search. */
.lib-io-btn{height:44px;display:flex;align-items:center;gap:6px;color:var(--navy)}
.lib-io-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lib-msg{font-size:12.5px;color:var(--steel);margin:0 0 12px;line-height:1.4}
/* Round navy badge (mockup) — navy not brass: white-on-brass failed WCAG AA at this size. */
.lib-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;font-family:var(--sans);font-size:11px;font-weight:700;color:#fff;background:var(--navy);border-radius:50%;margin-left:7px;vertical-align:middle;letter-spacing:.02em}
/* Manage page (portal): tapping a row acts on it (edit your item / adopt a starter), so drop the ＋
   pick-icon and show a quiet "tap me" chevron on every row instead (owner mockup, 4 Jul 2026). */
#libraryBody.lib-manage .lib-add{display:none}
#libraryBody.lib-manage .lib-item{position:relative;padding-right:34px}
#libraryBody.lib-manage .lib-item::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--steel);font-size:20px;line-height:1;font-weight:400}
#libraryBody.lib-edit-mode .lib-item::after{display:none}   /* in edit mode you're removing, not drilling in — hide the chevron */
/* ── Sort control (rendered by the module at the top of "Your items") ── */
.lib-sortbar{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.lib-sortbar label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#48597a}
.lib-sort{flex:0 0 auto;padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--navy);background:#fff;cursor:pointer}

/* ── MANAGE page (dashboard "Price library") — the rate-book redesign, 16 Jul 2026 ──────────────
   Manage-only classes; the builder's pick sheet never renders them. */
/* Unit inside the price string: "£220 each", "£60 / m" — one mono figure, no pill. */
#libraryBody.lib-manage .lib-r{font-family:var(--mono,ui-monospace,monospace);font-size:14.5px;font-weight:500;min-width:0;font-variant-numeric:tabular-nums}
.lib-ru{font-family:var(--sans);font-size:12px;font-weight:400;color:#48597a;letter-spacing:0}
/* Exception tags — supply & fit is the unlabelled default; only Materials-only items carry a tag. */
.lib-tag{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#7c5d22;background:#f3edDF;border-radius:8px;padding:2px 7px;margin-left:8px;vertical-align:1px}
/* Stale-rate nudge: a pinned rate untouched ~6 months. Quiet amber, not an alarm. */
.lib-stale{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:600;color:#8a6d1f;background:#f6edd4;border-radius:8px;padding:2px 7px;margin-left:8px;vertical-align:1px;text-transform:none;letter-spacing:0}
/* Section hint lines (under "New from your recent quotes" / "Trade starters"). */
.lib-hint{font-size:12.5px;color:var(--steel);margin:-2px 0 10px;line-height:1.5}
/* The inbox — auto-learned items awaiting Keep / Remove. Warm parchment tint so it reads as a tray,
   not part of the book. */
.lib-inbox-list{background:#fcfaf4;border:1px solid #e9e2d0;border-radius:var(--r-md);overflow:hidden;margin:0 0 18px}
.lib-row.lib-inbox{display:flex;align-items:center;gap:10px;margin:0;padding:11px 14px;border-bottom:1px solid #efe8d8}
.lib-row.lib-inbox:last-child{border-bottom:none}
/* NEVER truncate an inbox name (owner, 18 Jul). This row asks the trade to commit a rate to their
   book permanently, and it used to ellipsis the name to one line — on a phone two different rates
   both read "Supply and in…" at £12,500 and £5,000, i.e. an irreversible decision with the only
   distinguishing information hidden. The name now wraps to as many lines as it needs at every
   width; these rows are a transient inbox that clears, so height costs nothing. */
.lib-inbox .lib-d{flex:1;font-size:14.5px;font-weight:500;color:var(--navy);font-family:var(--prose);min-width:0;white-space:normal;overflow-wrap:anywhere}
.lib-inbox .lib-r{font-family:var(--mono,ui-monospace,monospace);font-size:13.5px;font-weight:500;color:var(--navy);flex-shrink:0;font-variant-numeric:tabular-nums}
.lib-inbox .lib-keep{min-height:36px;min-width:0;padding:0 14px;background:var(--navy);color:#fff;border:0;border-radius:8px;font-size:12px;letter-spacing:.3px}
.lib-inbox .lib-keep:hover{background:var(--navy-2);color:#fff;border:0}
/* The inbox Remove is a quiet bordered text button — NOT the red edit-mode circle. */
.lib-minus.lib-inbox-rm{display:inline-flex;width:auto;height:36px;background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--steel);font-family:var(--sans);font-size:12px;font-weight:600;padding:0 12px;line-height:1}
.lib-minus.lib-inbox-rm:hover{border-color:#d9542f;color:#d9542f}
/* Phone: give the name the whole width and drop the rate + Keep/Remove onto a second line, rather
   than squeezing four things onto one (owner, 18 Jul). DOM order is name → rate → Keep → Remove, so
   forcing the name to 100% wraps the rest naturally; margin-left:auto on Keep pushes the pair right
   and leaves the rate reading left, under the name it belongs to. */
@media screen and (max-width:640px){
  .lib-row.lib-inbox{flex-wrap:wrap;align-items:center;row-gap:9px}
  .lib-inbox .lib-d{flex:1 1 100%}
  .lib-inbox .lib-keep{margin-left:auto}
}
/* Starters on the manage page: a visible "Set your rate / Add" affordance instead of the hidden ＋. */
.lib-set{flex-shrink:0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--navy);border:1.5px solid var(--navy);border-radius:8px;padding:6px 11px;white-space:nowrap}
#libraryBody.lib-manage .lib-item.lib-sitem::after{display:none}   /* the chip IS the affordance — no chevron too */
/* Starter delete (−) stays reachable on the manage page (no Edit mode there): quiet, hover-emphasised. */
#libraryBody.lib-manage .lib-starter .lib-minus{display:inline-flex;background:none;color:var(--steel);border:1px solid var(--line);font-size:15px}
#libraryBody.lib-manage .lib-starter .lib-minus:hover{color:#d9542f;border-color:#d9542f}