:root {
  /* The Tiny Traders brand (V3 tokens from Figma DS 9NEaug2MiU4q1ECt0xvbX2) */
  --cream: #f3ece2;      /* surface-default, warm cream ground */
  --forest: #3a412b;     /* action-primary / text-primary, olive (was Bambinos green) */
  --forest-2: #2c3220;   /* darker olive for hover */
  --ink: #3a412b;        /* primary text, olive-black */
  --muted: #6b6a5b;      /* text-secondary */
  --line: #e3dccc;       /* border-subtle */
  --card: #fbf9f3;       /* surface-raised */
  --red: #b0472e;        /* error / skip, kept warm to sit with terracotta */
  --amber: #b07d2e;      /* warnings, warm gold-brown for contrast */
  --blue: #6b7d8e;       /* incidental */
  --grey: #8a8778;
  --terracotta: #bd724c; /* action-secondary / accent */
  --gold: #c69249;       /* accent-gold */
  --sand: #d1b291;
  --sage: #ada98e;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; font-family: var(--font-body);
  background: var(--cream); color: var(--ink); font-size: 15px;
}
/* Brand display type: Fredoka on headings, nav, buttons and emphasis */
h1, h2, h3, h4, #appTitle, .navitem, button, .cat-tab, .plan-tab, .subtab,
.cstat-n, .task-colhead, .cat-price, .vend-name, .sb-brand, .login-card h1,
.itile-n, .tt-tile .n, .promo-dates strong { font-family: var(--font-display); font-weight: 600; }
.navitem, .cat-tab, .plan-tab, .subtab, button { letter-spacing: .1px; }
.hidden { display: none !important; }

/* Login */
#login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px; width: 100%; max-width: 380px; box-shadow: 0 8px 30px rgba(58,65,43,.08);
}
.login-card h1 { color: var(--forest); font-size: 20px; margin: 0 0 4px; }
.login-card p { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.login-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 380px; }
.brand-logo { width: 300px; max-width: 88%; height: auto; display: block; margin: 8px auto 14px; }
.detective { width: 148px; height: auto; display: block; margin: 0 auto 14px; }
.login-card h1, .login-card p { text-align: center; }
.powered { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.powered img { height: 15px; width: auto; opacity: .75; }
.app-powered { margin-top: 30px; padding: 22px 24px; border-top: 1px solid var(--line); }
input, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
/* All dropdowns share the same rounded, custom-chevron look as the catalogue filters */
select {
  font-family: inherit; font-size: 16px; color: var(--ink); max-width: 100%;
  padding: 9px 34px 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background-color: #fff; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6a5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12);
}
label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; font-weight: 500; }
button {
  font-family: inherit; font-weight: 600; cursor: pointer; border: none;
  border-radius: 9px; padding: 10px 16px; background: var(--forest); color: #fff; font-size: 14px;
}
button:hover { background: var(--forest-2); }
button.ghost { background: transparent; color: var(--forest); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }
.err { color: var(--red); font-size: 13px; margin-top: 12px; min-height: 18px; }
.linkbtn { background: none; border: none; color: var(--forest); font-size: 13px; padding: 0; cursor: pointer; text-decoration: underline; font-weight: 500; }
.modal { position: fixed; inset: 0; background: rgba(30,40,35,.4); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-card { background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-card h2 { margin: 0 0 12px; font-size: 17px; color: var(--forest); }

/* App shell: sidebar + main area */
#app { display: flex; min-height: 100vh; align-items: stretch; }
button.small { padding: 6px 12px; font-size: 13px; }

#sidebar {
  width: 236px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 20px 16px; gap: 20px; z-index: 60;
}
.sb-brand { display: flex; justify-content: center; padding: 8px 4px 16px; border-bottom: 1px solid var(--line); }
.sb-brand .sb-logo { width: 204px; max-width: 100%; height: auto; }
.sb-nav { display: flex; flex-direction: column; gap: 6px; }
.navitem {
  width: 100%; text-align: left; background: transparent; color: var(--ink);
  border: none; border-radius: 9px; padding: 11px 14px; font-size: 14px; font-weight: 600;
}
.navitem:hover { background: #f2ede3; }
.navitem.active { background: var(--forest); color: #fff; }
.navitem.active:hover { background: var(--forest-2); }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sb-foot .who { font-size: 12px; color: var(--muted); word-break: break-all; }
.sb-foot button { width: 100%; text-align: center; }
.sb-foot .powered { margin-top: 8px; justify-content: flex-start; }

.main-area { flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.mtopbar {
  position: sticky; top: 0; z-index: 5; background: var(--cream);
  border-bottom: 1px solid var(--line); padding: 14px 24px;
  display: flex; align-items: center; gap: 12px;
}
.mtopbar h1 { color: var(--forest); font-size: 18px; margin: 0; }
.hamb { display: none; background: transparent; color: var(--forest); border: 1px solid var(--line); padding: 6px 11px; font-size: 18px; line-height: 1; }
.sb-overlay { position: fixed; inset: 0; background: rgba(30,40,35,.4); z-index: 55; }

/* Mobile: sidebar becomes a slide-out drawer */
@media (max-width: 860px) {
  #sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  #sidebar.open { transform: translateX(0); }
  .hamb { display: inline-flex; align-items: center; }
  /* tighter gutters on phones so nothing crowds the edges */
  .mtopbar, .counts, .toolbar, .ordersearch, main { padding-left: 16px; padding-right: 16px; }
  .ordersearch input { max-width: none; }
  #testBanner { width: calc(100% - 32px); }
}

.ordersearch { max-width: 1100px; margin: 0 auto; width: 100%; padding: 18px 24px 0; }
.ordersearch input { max-width: 440px; }
.counts { display: flex; gap: 12px; flex-wrap: wrap; padding: 18px 24px 0; max-width: 1100px; margin: 0 auto; width: 100%; }
.pill { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); background: #fff; cursor: pointer; user-select: none; }
.pill:hover { border-color: var(--muted); }
.pill.active { box-shadow: inset 0 0 0 2px currentColor; }
.pill .n { font-weight: 700; }
.counts.categories { padding-top: 8px; }
.counts.assignees { padding-top: 8px; }
/* Promos: grouped, labelled filter bar, each group on its own line - Paul 14AUG */
.promo-filters { position: relative; display: flex; flex-direction: column; gap: 9px; max-width: 1100px; margin: 0 auto; padding: 18px 24px 0; width: 100%; }
.promo-filters .fgroup { display: flex; align-items: flex-start; gap: 10px; }
.promo-filters .flabel { flex: 0 0 auto; min-width: 46px; padding-top: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.promo-filters .counts { max-width: none; margin: 0; padding: 0; width: auto; gap: 6px; }
.promo-filters #fg-status { padding-right: 150px; }
.promo-filters .sortwrap { position: absolute; top: 14px; right: 24px; }
.pill.soon-start { color: var(--blue); border-color: #cfe0ec; }
.pill.soon-end { color: var(--amber); border-color: #eeddc0; }
/* Ad billing watch */
#view-adbilling { max-width: 1100px; margin: 0 auto; padding: 18px 24px 40px; width: 100%; }
.ab-callout { display: flex; gap: 12px; align-items: flex-start; background: #fbe9df; border: 1px solid #f0c9b5; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; color: #7a3b1e; font-size: 13.5px; line-height: 1.5; }
.ab-callout-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #d9663f; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; }
.ab-callout strong { color: #7a3b1e; }
.ab-intro { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; max-width: 760px; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ab-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px 22px; }
.ab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ab-name { font-size: 15px; font-weight: 700; color: var(--text); }
.ab-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ab-status.ok { color: var(--forest); background: #eef6f0; }
.ab-status.warn { color: #9a3b1e; background: #fbe9df; }
.ab-rate { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; }
.ab-big { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.ab-unit { font-size: 13px; color: var(--muted); }
.ab-metrics { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ab-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ab-l { font-size: 12px; color: var(--muted); }
.ab-v { font-size: 14px; font-weight: 600; color: var(--text); }
.ab-thresh { margin-top: 14px; font-size: 11px; color: var(--muted); font-style: italic; line-height: 1.4; }
.ab-perf { margin-top: 26px; }
.ab-perf-h { font-size: 15px; font-weight: 700; color: var(--text); }
.ab-perf-note { font-size: 11px; color: var(--muted); font-style: italic; margin: 2px 0 12px; }
.ap-block { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 4px 16px 10px; margin-bottom: 14px; }
.ap-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 0 4px; }
.ap-row { display: grid; grid-template-columns: 1.6fr 96px 108px 60px 1.5fr; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ap-head { border-top: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding-bottom: 4px; }
.ap-name { font-weight: 600; color: var(--text); display: flex; flex-direction: column; }
.ap-kind { font-size: 11px; font-weight: 600; color: var(--muted); }
.ap-num { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.ap-roas { font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-roas.hi { color: #1f7a4d; }
.ap-roas.mid { color: #9a6a1e; }
.ap-roas.lo { color: #b23a2e; }
.ap-roas.neu { color: var(--muted); }
.ap-note { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .ap-row { grid-template-columns: 1fr auto 56px; }
  .ap-row > :nth-child(3), .ap-row > :nth-child(5) { display: none; }
}
@media (max-width: 700px) { .promo-filters #fg-status { padding-right: 0; } .promo-filters .sortwrap { position: static; align-self: flex-start; } }
.pill.assignee-pill { color: var(--forest); border-color: #d7d9c3; background: #edf0e4; }
.pill.muted-pill { color: var(--muted); }
.pill.b21 { color: var(--red); border-color: #eccac5; }
.pill.b14 { color: var(--amber); border-color: #eeddc0; }
.pill.b7 { color: var(--blue); border-color: #cfe0ec; }
.pill.recent { color: var(--grey); }
.spacer { flex: 1; }
.who { font-size: 12px; color: var(--muted); }

/* Board */
main { padding: 20px 24px 60px; max-width: 1100px; margin: 0 auto; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.section-title h2 { font-size: 15px; margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.b21 { background: var(--red); } .dot.b14 { background: var(--amber); }
.dot.b7 { background: var(--blue); } .dot.recent { background: var(--grey); }
.dot.stale { background: #b9a06a; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
.card .top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.onum { font-weight: 700; color: var(--forest); }
.age { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f2ede3; }
.age.b21 { background: #f7e3e0; color: var(--red); }
.age.b14 { background: #f8ecd6; color: var(--amber); }
.age.b7 { background: #dcebf4; color: var(--blue); }
.meta { color: var(--muted); font-size: 13px; }
.ordered { font-size: 13px; font-weight: 600; color: var(--forest); margin-left: auto; }
.assignee { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #e6efe9; color: var(--forest); }
.assignee.none { background: #f2ede3; color: var(--muted); font-weight: 500; }
.assign-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.assign-row label { margin: 0; font-size: 13px; font-weight: 600; color: var(--forest); }
.assign-row select { width: auto; min-width: 150px; }
ul.items { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
ul.items li { margin: 2px 0; }
ul.items li.more { list-style: none; margin-left: -18px; font-style: italic; color: var(--muted); }
.last {
  margin-top: 10px; padding: 9px 11px; background: #f6f8f6; border-left: 3px solid var(--forest);
  border-radius: 6px; font-size: 13px;
}
.last .when { color: var(--muted); font-size: 11px; }
.actions { margin-top: 10px; }
.editor { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.check input { width: auto; }
.sendrow { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.sendrow .msg { font-size: 13px; }
.msg.ok { color: var(--forest); } .msg.bad { color: var(--red); }
.banner { background: #fff6e6; border: 1px solid #eeddc0; color: #7a5c12; padding: 8px 14px; border-radius: 9px; font-size: 12px; }
#testBanner { margin: 12px auto 0; max-width: 1100px; width: calc(100% - 48px); text-align: center; }
details.stale-wrap { margin-top: 30px; }
details.stale-wrap summary { cursor: pointer; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } }

/* Tabs */
.tabs { display: flex; gap: 6px; }
.tab { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tab.active { background: var(--forest); color: #fff; border-color: var(--forest); }

/* Toolbar: update-status filter + sort */
.toolbar { max-width: 1100px; margin: 0 auto; padding: 16px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.updfilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.updfilters .flabel { font-size: 12px; color: var(--muted); margin-right: 2px; }
.sortwrap { display: flex; align-items: center; gap: 6px; }
.sortwrap label { font-size: 12px; color: var(--muted); margin: 0; }
.sortwrap select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 13px; background: #fff; }
.chip { cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.chip:hover { border-color: var(--muted); }
.chip.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.never { margin-top: 8px; font-size: 12px; color: var(--amber); font-weight: 600; }

/* Sell Your Pram */
.status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f2ede3; }
.status.s-new { background: #efe7f7; color: #6b4f9e; }
.status.s-under-review { background: #f8ecd6; color: var(--amber); }
.status.s-quoted { background: #dcebf4; color: var(--blue); }
.status.s-accepted { background: #dceee4; color: var(--forest); }
.status.s-declined { background: #f7e3e0; color: var(--red); }
.status.s-loaded-on-shopify { background: #dceee4; color: var(--forest); }
.pill.s-loaded-on-shopify { color: var(--forest); border-color: #d7d9c3; }
.dl { display: inline-flex; align-items: center; gap: 6px; margin: 6px 8px 0 0; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--forest); text-decoration: none; }
.dl:hover { border-color: var(--forest); }
.promo-body { font-size: 13px; color: var(--muted); white-space: pre-wrap; margin: 8px 0; max-height: 160px; overflow: auto; line-height: 1.5; }
.loaded-when { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 10px; }
.pf { font-size: 13px; }
.pf span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.card.pram select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; background: #fff; }

/* Password show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 60px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; color: var(--forest); border: none; padding: 4px 8px;
  font-size: 12px; font-weight: 600;
}
.pw-toggle:hover { background: transparent; text-decoration: underline; }

/* Fulfilment internal-only flag (never emailed) */
.hold-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #f8ecd6; color: var(--amber); }
.stagefilters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 1100px; margin: 14px auto 0; padding: 0 24px; width: 100%; }
.stagefilters .flabel { font-size: 12px; color: var(--muted); margin-right: 2px; }
.chip .cn { font-weight: 700; opacity: 0.7; margin-left: 3px; }
.stage-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #e4efe9; color: var(--forest); }

/* Stale banner (Team actions) */
.stalebanner { max-width: 1100px; margin: 14px auto 0; padding: 0 24px; width: 100%; }
.stale-banner { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #f6efdd; border: 1px solid #e6d3a8; color: var(--ink); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.stale-banner:hover { background: #f1e7cf; }
.stale-banner.active { background: #eadfbf; border-color: #d9c48c; }
.stale-banner .sb-n { font-weight: 800; font-size: 16px; color: #8a6d1f; background: #fff; border-radius: 999px; padding: 1px 11px; }
.stale-banner .sb-l { font-size: 13px; color: #6b5a2e; }
.stale-banner .sb-back { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--forest); }

/* Pager + inline sub-headers */
.pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 14px 0; }
.pg-btn { background: #fff; color: var(--forest); border: 1px solid var(--line); border-radius: 9px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.pg-btn:hover { border-color: var(--muted); }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-info { font-size: 12px; color: var(--muted); }
.subsection-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 18px 0 8px; }

/* To order (supplier buy list) - same 1100 centered column as #sub-insights */
#sub-toorder { max-width: 1100px; width: 100%; margin: 0 auto; padding: 8px 24px 48px; box-sizing: border-box; }
#orderbookboard { max-width: none; margin: 0; padding: 0; }
.ob-layout { display: flex; gap: 20px; align-items: flex-start; }
.ob-rail { flex: 0 0 250px; position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 120px); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ob-search { margin: 0; width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 11px 14px; font-size: 13px; }
.ob-search:focus { outline: none; box-shadow: none; }
.ob-vlist { overflow-y: auto; }
.ob-vitem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: transparent; color: var(--ink); border: none; border-bottom: 1px solid #f0ebe0; border-radius: 0; padding: 10px 14px; cursor: pointer; }
.ob-vitem:last-child { border-bottom: none; }
.ob-vitem:hover { background: #f6f2ea; }
.ob-vitem.active { background: var(--forest); }
.ob-vitem.active .ob-vname, .ob-vitem.active .ob-vsub { color: #fff; }
.ob-vname { font-size: 13px; font-weight: 600; text-transform: capitalize; }
.ob-vsub { font-size: 11px; color: var(--muted); }
.ob-main { flex: 1 1 auto; min-width: 0; }
.ob-vendor { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ob-vendor:last-child { margin-bottom: 0; }
.ob-vhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: #f4efe4; border-bottom: 1px solid var(--line); }
.ob-vhead h3 { margin: 0; font-size: 16px; color: var(--forest); text-transform: capitalize; }
.ob-vmeta { font-size: 12px; color: var(--muted); margin-left: auto; }
.ob-tablewrap { overflow-x: auto; }
.ob-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ob-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ob-table th.num, .ob-table td.num { text-align: right; white-space: nowrap; }
.ob-table td { padding: 12px 14px; border-bottom: 1px solid #f0ebe0; vertical-align: top; }
.ob-table tr:last-child td { border-bottom: none; }
.ob-table tbody tr:hover { background: #faf7f0; }
.ob-table tr.prio { background: #fbf3ef; }
.ob-table tr.prio:hover { background: #f7ece7; }
.ob-table .qty { font-weight: 700; color: var(--forest); }
.ob-table .sku { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.ob-table .orders { color: var(--muted); font-size: 12px; line-height: 1.5; }
.ob-table .prod { min-width: 240px; line-height: 1.4; }
.tb { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.tb.prio { background: #f3d9d0; color: #a2432b; }
.tb.pay { background: #f8ecd6; color: var(--amber); }
@media (max-width: 860px) {
  #sub-toorder { padding-left: 16px; padding-right: 16px; }
  .ob-layout { flex-direction: column; }
  .ob-rail { flex-basis: auto; width: 100%; position: static; max-height: 320px; }
}
.internal { margin-top: 10px; padding: 9px 11px; background: #fbf4e6; border-left: 3px solid var(--amber); border-radius: 6px; font-size: 13px; }
.internal .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--amber); font-weight: 700; display: block; margin-bottom: 2px; }
.internal .when { color: var(--muted); font-size: 11px; margin-top: 3px; }
.card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hold-select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 14px; background: #fff; width: 100%; }

@media (max-width: 640px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- The Tiny Traders tab ---------- */
.tt-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tt-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tt-tile.attention { border-color: #eeddc0; background: #fdf9f0; }
.tt-num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.tt-label { font-size: 13px; font-weight: 600; margin-top: 2px; }
.tt-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tt-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.tt-card h3 { margin: 0 0 10px; font-size: 14px; }
.tt-progress { height: 10px; border-radius: 999px; background: #eee7da; overflow: hidden; }
.tt-bar { height: 100%; background: var(--forest); border-radius: 999px; }
.tt-progress-label { font-size: 13px; margin: 8px 0 0; }
.tt-note { font-size: 12px; color: var(--amber, #a86b00); margin: 6px 0 0; }
.tt-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.tt-row:last-child { border-bottom: none; }
.tt-title { font-weight: 600; }
.tt-state { font-size: 11px; color: var(--muted); }
.tt-state.amber { color: var(--amber, #a86b00); font-weight: 600; }
.tt-free { font-size: 11px; color: var(--forest); font-weight: 600; }
.tt-date { font-size: 12px; color: var(--muted); }
.tt-price { font-weight: 700; }
@media (max-width: 700px) { .tt-row { grid-template-columns: 1fr auto; } .tt-state, .tt-free, .tt-date { display: none; } }

/* Order insights (Fulfilment sub-tab) */
.subtabs { display:flex; gap:6px; margin:0 auto 16px; max-width:1100px; width:100%; padding:0 24px; box-sizing:border-box; border-bottom:1px solid var(--line); }
#sub-insights { max-width:1100px; width:100%; margin:0 auto; padding:8px 24px 48px; box-sizing:border-box; }
#insightsboard { max-width:none; margin:0; padding:0; }
.subtab { background:transparent; color:var(--muted); border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 14px; font-size:14px; font-weight:600; }
.subtab:hover { background:transparent; color:var(--forest); }
.subtab.active { color:var(--forest); border-bottom-color:var(--forest); }
.insights-note { background:#f4efe4; border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:var(--muted); font-size:13px; margin:0 0 16px; }
.isummary { display:flex; flex-wrap:wrap; align-items:baseline; gap:24px; margin-bottom:8px; }
.ibig { display:flex; flex-direction:column; }
.ibig strong { color:var(--forest); font-size:26px; line-height:1.1; }
.ibig span { color:var(--muted); font-size:12px; }
.isummary .imeta { color:var(--grey); font-size:12px; margin-left:auto; }
.ihead { color:var(--ink); font-size:15px; font-weight:600; margin:22px 0 10px; }
.ihead .ihint { color:var(--grey); font-size:12px; font-weight:400; }
.itiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.itiles.flow { grid-template-columns:repeat(auto-fill, minmax(165px,1fr)); }
.itile { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; }
.itile-flow { position:absolute; top:10px; right:12px; width:20px; height:20px; border-radius:50%; background:var(--forest); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; }
.itile-n { color:var(--forest); font-size:24px; font-weight:700; line-height:1; }
.itile-l { color:var(--ink); font-size:13px; margin-top:4px; }
.itile-v { color:var(--muted); font-size:12px; margin-top:6px; }
.itile.warn .itile-n { color:var(--amber); }
.itile.prio .itile-n { color:var(--blue); }
.slist { display:flex; flex-direction:column; gap:8px; }
.srow { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px; }
.srow .sname { font-size:13px; font-weight:600; color:var(--ink); text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srow .sbar { background:#efe9dd; border-radius:6px; height:10px; overflow:hidden; }
.srow .sbar span { display:block; height:100%; background:var(--forest); }
.srow .smeta { font-size:12px; color:var(--muted); white-space:nowrap; }
@media (max-width:640px){
  .srow { grid-template-columns:1fr auto; }
  .srow .sbar { display:none; }
  .isummary .imeta { margin-left:0; width:100%; }
}

/* Tiny Traders: approve pending listings */
.tt-row.pending { display:grid; grid-template-columns: 1fr auto auto auto; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.tt-row.pending .tt-title { font-weight:600; color:var(--ink); }
.tt-approve { padding:7px 16px; font-size:13px; border-radius:8px; white-space:nowrap; }
.tt-approve:disabled { opacity:.6; cursor:default; }
@media (max-width:640px){
  .subtabs, #sub-insights { padding-left:16px; padding-right:16px; }
  .tt-row.pending { grid-template-columns: 1fr auto; }
  .tt-row.pending .tt-date { display:none; }
}

/* Supplier-update categories (Promos tab) */
.cat { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:#eef1ef; color:var(--forest); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.cat-promo { background:#e7f1ec; color:#3a412b; }
.cat-price-update { background:#fbeee0; color:#8a5a12; }
.cat-stock { background:#e3eef7; color:#2e6f9e; }
.cat-product-details { background:#efeafa; color:#5b4b9e; }
.cat-other-product { background:#eef1ef; color:#54606b; }
.cat-uncategorised { background:#f2ede3; color:#8a8f8c; }
.meta.cls { font-size:12px; color:var(--muted); margin-top:2px; }
/* Promo card = main column + right-hand info rail (dates + downloads), Paul 14AUG */
.card.promo .promo-grid { display:flex; gap:18px; align-items:flex-start; }
.card.promo .promo-main { flex:1 1 auto; min-width:0; }
.card.promo .promo-aside { flex:0 0 186px; display:flex; flex-direction:column; gap:10px; }
.pa-dates { border:1px solid var(--line,#e6ddcd); border-radius:10px; background:var(--chip-bg,#f7f2e9); padding:10px 12px; display:flex; flex-direction:column; gap:7px; }
.pa-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pa-l { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pa-v { font-size:13px; font-weight:600; color:var(--text); text-align:right; white-space:nowrap; }
.pa-note { font-size:10px; color:var(--muted); font-style:italic; line-height:1.35; }
.pa-files { display:flex; flex-direction:column; gap:6px; }
.pa-fl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pa-files.empty { font-size:11px; color:var(--muted); }
.card.promo .pa-files .dl { word-break:break-word; }
@media (max-width:640px) { .card.promo .promo-grid { flex-direction:column-reverse; } .card.promo .promo-aside { flex-basis:auto; } }
.promo-group { margin-top:6px; }
.promo-group .ihead { margin:18px 0 8px; }
.promo-group .ihead.muted { color:var(--grey); }
.card.dimmed { opacity:.62; }

/* Collapsed "Filtered out" section on the Promos board */
.filtered-toggle { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent; color:var(--grey); border:none; border-top:1px solid var(--line); border-radius:0; padding:14px 4px; margin-top:12px; font-size:14px; font-weight:600; }
.filtered-toggle:hover { background:transparent; color:var(--muted); }
.filtered-toggle .caret { font-size:11px; }
.filtered-toggle .ihint { font-weight:400; }
.filtered-body { margin-top:8px; }

/* ---- Raise-a-ticket FAB + toast + ticket cards ---- */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px 12px 12px; border-radius: 999px;
  background: var(--forest); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 24px rgba(58,65,43,.35);
}
.fab:hover { background: var(--forest-2); }
.fab svg { flex: 0 0 auto; }
/* Rainbow bauble icon inside the ticket FAB */
.fab-bauble { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--card);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fab-bauble img { width: 22px; height: auto; display: block; }

.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(10px);
  background: #1f2a25; color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; z-index: 70; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tk-sub { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
.card.ticket .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-kind { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e4efe9; color: var(--forest); }
.tk-kind.bug { background: #fbe4e2; color: #b23b2e; }
.tk-kind.feature { background: #e7ecff; color: #3a4db2; }
.tk-kind.idea { background: #f8ecd6; color: #9a6b12; }
.tk-status-badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eee; color: #555; }
.tk-status-badge.st-new { background:#edf0e4; color:var(--forest); }
.tk-status-badge.st-looking-at-it { background:#e7ecff; color:#3a4db2; }
.tk-status-badge.st-planned { background:#f8ecd6; color:#9a6b12; }
.tk-status-badge.st-done { background:#e2f3e6; color:#2e8b45; }
.tk-status-badge.st-won-t-do { background:#f1e9e9; color:#8a6d6d; }
.tk-title { font-weight: 600; margin: 8px 0 2px; }
.tk-body { color: var(--ink); font-size: 14px; white-space: pre-wrap; }
.tk-resp { margin-top: 10px; padding: 10px 12px; background: #edf0e4; border-radius: 10px; font-size: 14px; }
.tk-resp .tag { display:inline-block; font-size:11px; font-weight:700; color:var(--forest); margin-right:6px; }
.tk-resp .when { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tk-admin { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tk-admin .tk-status { max-width: 220px; }

@media (max-width: 860px) {
  .fab { right: 14px; bottom: 14px; padding: 11px 15px; }
}

/* ===== Investor view (restricted) ===== */
.subitem { padding: 9px 14px 9px 34px !important; font-size: 13px; opacity: .92; }
.subitem::before { content: "\2514"; opacity: .5; margin-right: 8px; display: inline-block; }
.subitem.active { opacity: 1; }
.inv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--forest); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.inv-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.inv-card.warncard { border-color: #e8c9a8; background: #fdf7ef; }
.inv-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7770; margin-bottom: 6px; }
.inv-v { font-size: 26px; font-weight: 700; color: var(--forest); }
.inv-s { font-size: 12.5px; color: #6b7770; margin-top: 6px; line-height: 1.45; }
.inv-ask { background: var(--forest); color: #fff; border-radius: 14px; padding: 18px 20px; margin-top: 14px; }
.inv-ask .inv-l { color: #cfe3db; }
.inv-ask .inv-v { color: #fff; font-size: 30px; }
.inv-ask .inv-s { color: #cfe3db; }
.inv-callout { background: #edf0e4; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }
.inv-callout.warn { background: #fdf3e7; border-color: #e8c9a8; }
.inv-vrow { display: grid; grid-template-columns: 1.4fr .9fr 1.2fr .8fr 1fr .9fr; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 6px; font-size: 13.5px; }
.inv-vhead { background: transparent; border: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #6b7770; margin-bottom: 2px; }
.inv-vname { font-weight: 600; }
.inv-num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-covcell { display: flex; align-items: center; gap: 8px; }
.inv-bar { flex: 1; height: 8px; background: #edeae2; border-radius: 999px; overflow: hidden; }
.inv-bar-fill { height: 100%; background: var(--forest); border-radius: 999px; }
.inv-cov { font-size: 12px; color: #6b7770; min-width: 34px; }
.inv-costconfirm.on { color: #1d7a43; border-color: #bfe0cd; background: #ecf7f1; }
.inv-order { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.inv-order.blocked { border-color: #e0b4b4; }
.inv-ohead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inv-badge { background: #fbe9df; color: #9a3b1e; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.inv-omoney { font-size: 13px; color: #444; margin-top: 6px; }
.inv-olines { margin: 8px 0 10px; padding-left: 18px; font-size: 13px; color: #555; }
.inv-oactions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12.5px; }
.inv-oactions label { display: flex; align-items: center; gap: 6px; color: #6b7770; }
.inv-onote { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.inv-pager { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.inv-q { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.inv-q.done { background: #f4f9f6; }
.inv-qq { font-weight: 600; margin-bottom: 4px; }
.inv-qa { margin-top: 8px; font-size: 13.5px; }
.inv-qform { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.inv-qform textarea { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.inv-note-ic { cursor: help; color: #6b7770; font-size: 12px; }
@media (max-width: 760px) {
  .inv-vrow { grid-template-columns: 1fr 1fr; }
  .inv-vhead { display: none; }
}
.inv-tag { background: #e7f1ec; color: #3a412b; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.ab-thresh .ab-tline { display: flex; justify-content: space-between; font-size: 12.5px; color: #555; margin-bottom: 5px; }
.ab-hot { color: #9a3b1e; font-weight: 700; }
.ab-tbar { height: 8px; background: #edeae2; border-radius: 999px; overflow: hidden; }
.ab-tfill { height: 100%; background: #3a412b; border-radius: 999px; }
.ab-tfill.hot { background: #c25a2a; }
.ab-soon { margin-top: 7px; font-size: 12.5px; color: #9a3b1e; background: #fbe9df; border-radius: 8px; padding: 7px 10px; }
.ab-cfg { margin-top: 10px; font-size: 12.5px; }
.ab-cfg summary { cursor: pointer; color: #3a412b; }
.ab-cfgrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0 6px; }
.ab-cfgrow label { display: flex; flex-direction: column; gap: 4px; color: #6b7770; }
.ab-in { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 13px; max-width: 150px; }

/* ===== Deposit balances ===== */
.dep-summary { display: flex; gap: 14px; margin: 4px 0 16px; }
.dep-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; min-width: 130px; }
.dep-n { display: block; font-size: 22px; font-weight: 700; color: #295f51; }
.dep-l { color: #6b7770; font-size: 13px; }
.dep-testnote { background: #fff6ec; border: 1px solid #ffd9b8; color: #8a5a2b; border-radius: 10px; padding: 9px 13px; font-size: 13px; margin-bottom: 14px; }
.dep-list { display: flex; flex-direction: column; gap: 10px; }
.dep-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dep-row.isdone { opacity: 0.6; }
.dep-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dep-cust { color: #31433d; }
.dep-meta { color: #6b7770; font-size: 13px; margin-top: 4px; }
.dep-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dep-badge.chan.online { background: #e5f0ec; color: #295f51; }
.dep-badge.chan.instore { background: #e9587e1a; color: #c23a63; }
.dep-badge.pay { background: #ff9f7f22; color: #b4552f; }
.dep-stop { background: #295f51; color: #fff; border: 0; border-radius: 9px; padding: 9px 15px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dep-stop:hover { background: #2c3220; }
.dep-stop:disabled { opacity: 0.6; cursor: default; }
.dep-done { color: #295f51; font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .dep-row { flex-direction: column; align-items: stretch; } .dep-act { text-align: right; } }

/* Deposit balances: controls, notes, two-action buttons */
.dep-controls { display: flex; gap: 18px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.dep-controls label { display: flex; gap: 7px; align-items: center; color: #6b7770; font-size: 14px; }
.dep-check { cursor: pointer; }
.dep-note { width: 100%; margin-top: 9px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: #31433d; }
.dep-note:focus { outline: none; border-color: #80baa9; }
.dep-act { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.dep-btn { border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dep-btn.paid { background: #295f51; color: #fff; }
.dep-btn.paid:hover { background: #2c3220; }
.dep-btn.clear { background: #fff; color: #6b7770; border: 1px solid var(--line); }
.dep-btn.clear:hover { background: #f4f2ee; }
.dep-btn:disabled { opacity: 0.6; cursor: default; }
.dep-reopen { background: none; border: 0; color: #80867f; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px; }
@media (max-width: 640px) { .dep-act { align-items: stretch; } }

/* ===== Investor: simple story view ===== */
.inv-viewtoggle { display: flex; gap: 8px; align-items: center; color: #6b7770; font-size: 14px; margin: 2px 0 14px; }
.inv-story { max-width: 860px; }
.inv-story-h { font-weight: 800; color: #295f51; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; margin: 22px 0 10px; }
.inv-story-h:first-child { margin-top: 4px; }
.inv-step { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.inv-step + .inv-step { margin-top: 10px; }
.inv-step.muted { background: #fbfaf7; }
.inv-step.warnrow { background: #fff6ec; border-color: #ffd9b8; margin-top: 10px; }
.inv-step-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #295f51; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.inv-step.muted .inv-step-n { background: #9db3ab; }
.inv-step.warnrow .inv-step-n { background: #d98a3d; }
.inv-step-t { flex: 1; line-height: 1.45; }
.inv-step-s { color: #6b7770; font-size: 14px; }
.inv-step-flag { display: inline-block; background: #fff3cc; color: #7a5c12; border-radius: 8px; padding: 4px 10px; font-size: 13px; margin-top: 8px; }
.inv-step-v { font-size: 24px; font-weight: 800; color: #295f51; white-space: nowrap; align-self: center; }
.inv-step-v.muted { color: #9db3ab; }
.inv-step-v.in { color: #2e7d32; }
.inv-step-v.in::before { content: "− "; }
.inv-op { text-align: center; font-size: 22px; font-weight: 800; color: #9db3ab; margin: 4px 0; }
.inv-total { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: #295f51; color: #fff; border-radius: 14px; padding: 18px 20px; margin-top: 12px; }
.inv-total .inv-step-s { color: #cfe0da; }
.inv-total-v { font-size: 30px; font-weight: 800; white-space: nowrap; }
@media (max-width: 640px) { .inv-step { flex-wrap: wrap; } .inv-step-v { align-self: flex-end; } }

/* Investor simple view: bridge/waterfall additions */
.inv-whole { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: #fff; border: 2px solid #295f51; border-radius: 14px; padding: 18px 20px; }
.inv-chip { flex: 0 0 auto; align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; min-width: 118px; text-align: center; }
.inv-chip.proven { background: #295f51; color: #fff; }
.inv-chip.gate { background: #fff3cc; color: #7a5c12; }
.inv-chip.owned { background: #e3e8e6; color: #4c5a55; }
.inv-chip.in { background: #dcefdc; color: #2e7d32; }
.inv-step.proven { border-color: #295f51; }
.inv-step-v.muted2 { color: #6f8a81; }
.inv-step.in .inv-step-v { color: #2e7d32; }
.inv-pdfbtn { margin-left: auto; background: #295f51; color: #fff; border-color: #295f51; }

/* ===== Strategy & Feedback thread ===== */
.strat-post { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.strat-postrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.strat-postrow select { width: auto; }
.strat-postrow button { flex: 0 0 auto; }
.strat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.strat-card.st-wrap-closed { opacity: .68; }
.strat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.strat-head:hover { background: #fcfaf6; }
.strat-title { font-size: 15px; margin: 0; color: var(--ink); font-weight: 600; flex: 1 1 auto; min-width: 0; }
.strat-toggle { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; background: var(--cream); color: var(--forest); border: 1px solid var(--line); font-size: 18px; line-height: 1; }
.strat-toggle:hover { background: #efe9df; }
.strat-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.strat-detail { color: var(--ink); margin: 12px 0 6px; font-size: 14px; }
.strat-replies { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.strat-reply { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.strat-reply-body { font-size: 14px; white-space: pre-wrap; }
.strat-body .when { color: var(--muted); font-size: 12px; margin-top: 4px; }
.strat-replyrow { margin-top: 10px; }
.strat-replybox { font-size: 14px; }
.strat-statusbtns { display: inline-flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.chip.cat-strategy, .chip.cat-technical, .chip.cat-legal, .chip.cat-other, .chip.st-open, .chip.st-answered, .chip.st-closed { cursor: default; }
.chip.cat-strategy { color: var(--forest); }
.chip.cat-technical { color: var(--blue); }
.chip.cat-legal { color: var(--amber); }
.chip.st-open { color: var(--amber); border-color: var(--amber); }
.chip.st-answered { color: var(--forest); border-color: var(--forest); }
.chip.st-closed { color: var(--grey); }

/* Order cost pill: subtle, sits next to total */
.cost-pill { color: var(--muted); font-weight: 500; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); white-space: nowrap; }

/* Per-line stock badge on the order card items list */
.stock-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; vertical-align: middle; }
.stock-badge.in { color: var(--forest); border-color: var(--forest); background: #ecf5f1; }
.stock-badge.low { color: var(--amber); border-color: var(--amber); background: #fff5e6; }
.stock-badge.out { color: var(--red); border-color: var(--red); background: #fdecea; }
.stock-badge.unk { color: var(--muted); background: var(--cream); }

/* Holding-stock tile row on the actions view */
.holding-stock { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.holding-stock.hidden { display: none; }
.hs-title { font-size: 13px; font-weight: 600; color: var(--forest); margin-bottom: 10px; }
.hs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .hs-row { grid-template-columns: 1fr; } }
.hs-tile { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.hs-tile.free { background: #ecf5f1; border-color: var(--forest); }
.hs-big { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.hs-tile.free .hs-big { color: var(--forest); }
.hs-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hs-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.hs-note { margin-top: 10px; font-size: 12px; }
.hs-loading { padding: 6px 0; font-size: 13px; }

/* Collapsible Fulfilment nav group */
.nav-group { display: flex; flex-direction: column; }
.nav-group .nav-row { display: flex; align-items: stretch; }
.nav-group .nav-row .navitem { flex: 1 1 auto; }
.nav-toggle { flex: 0 0 auto; width: 32px; padding: 0; background: transparent; color: var(--muted); border: none; font-size: 12px; cursor: pointer; border-radius: 8px; transition: transform 160ms ease; }
.nav-toggle:hover { color: var(--forest); background: rgba(58,65,43,0.06); }
.nav-group.collapsed .nav-toggle { transform: rotate(-90deg); }
.nav-group.collapsed .nav-children { display: none; }
.nav-children { display: flex; flex-direction: column; }

/* Fuller holding-stock tile layout (used inside the dedicated view) */
.hs-tile .hs-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.hs-tile .hs-second { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.hs-tile.free .hs-second { color: var(--forest); }

/* Sub-menu breathing room + right-align to match parent width.
   The parent Fulfilment button sits inside .nav-row alongside a 32px
   chevron, so its right edge stops 32px short of the sidebar's inside
   padding. Mirror that on the sub-menu so highlighted sub-items don't
   look wider than their parent. */
.nav-children { gap: 4px; padding: 4px 32px 2px 0; }
.hc-wrap { margin-top: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.hc-wrap .hs-title { margin-bottom: 10px; }
/* Scroll container: table always renders at its natural width; the wrapper
   allows horizontal scroll on phones so nothing gets clipped (the page body
   has overflow-x: hidden, so we can't rely on page-level scroll here). */
.hc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.hc-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
@media (max-width: 720px) {
  .hc-table { font-size: 12px; }
  .hc-table th, .hc-table td { padding: 7px 8px; }
  /* subtle fade on the right edge so it's obvious there's more to scroll */
  .hc-scroll { position: relative; }
  .hc-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px; background: linear-gradient(to right, rgba(255,255,255,0), var(--card)); pointer-events: none; }
}
.hc-table th, .hc-table td { padding: 8px 10px; text-align: left; }
.hc-table thead th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--line); }
.hc-table thead tr:first-child th { padding-bottom: 2px; }
.hc-table thead tr:first-child th.hc-group { text-align: center; color: var(--forest); font-size: 12px; padding-top: 0; }
.hc-table tbody tr + tr td { border-top: 1px solid var(--line); }
.hc-table .hc-label { font-weight: 600; color: var(--ink); }
.hc-table .hc-num { text-align: right; font-variant-numeric: tabular-nums; }
.hc-table .hc-ex_display .hc-label { color: var(--amber); }
.hc-table .hc-pre_loved .hc-label { color: var(--forest); }

/* ================= Product catalogue ================= */
#view-catalogue .cat-stats,
#view-catalogue .cat-toolbar,
#view-catalogue .cat-chips,
#view-catalogue .cat-pager { max-width: 1100px; margin: 0 auto; width: 100%; }
#view-catalogue .cat-stats { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 24px 0; }
.cstat { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--sage); border-radius: 12px; padding: 10px 16px; min-width: 96px; }
.cstat-n { display: block; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cstat-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cstat.yes .cstat-n { color: var(--forest); }
.cstat.no .cstat-n { color: var(--terracotta); }
/* A warm sweep of brand colour across the stat row */
.cat-stats .cstat:nth-child(1) { border-top-color: var(--forest); }
.cat-stats .cstat:nth-child(2) { border-top-color: var(--sage); }
.cat-stats .cstat:nth-child(3) { border-top-color: var(--terracotta); }
.cat-stats .cstat:nth-child(4) { border-top-color: var(--gold); }
.cat-stats .cstat:nth-child(5) { border-top-color: var(--sand); }

/* Filter bar: a single cohesive row, styled to match the dashboard cards */
.cat-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 16px 24px 0; }
.cat-search { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.cat-search svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.cat-search input[type="search"] { width: 100%; height: 42px; padding: 0 14px 0 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
.cat-search input[type="search"]:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); }
.cat-field { display: flex; flex-direction: column; gap: 4px; }
.cat-field > span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-left: 2px; }
.cat-field select { height: 42px; width: auto; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px; background-color: #fff; font-size: 16px; color: var(--ink); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
.cat-field select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); }

.cat-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 24px 0; }
.cat-chips .flabel { font-size: 12px; color: var(--muted); font-weight: 600; }
.cat-chips .chip-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* Vendors tab: a clean list Claire can toggle dropship on */
#cat-vendors-tab .cat-toolbar { align-items: center; }
.cat-vend-summary { font-size: 13px; color: var(--muted); }
#catVendorList { max-width: 1100px; margin: 0 auto; width: 100%; padding: 14px 24px 40px; }
.vend-list { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vend-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #f0ebe0; }
.vend-row:last-child { border-bottom: none; }
.vend-row.on { background: #edf0e4; }
.vend-info { min-width: 0; }
.vend-name { font-size: 14px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.vend-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
/* Toggle switch */
.vend-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; user-select: none; }
.vend-switch .sw { position: relative; width: 42px; height: 24px; background: #d8d2c6; border-radius: 999px; transition: background .15s; flex: 0 0 auto; }
.vend-switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.vend-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vend-switch input:checked + .sw { background: var(--forest); }
.vend-switch input:checked + .sw::after { transform: translateX(18px); }
.vend-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--forest); color: #fff; font-size: 11px; font-weight: 700; text-transform: none; vertical-align: middle; }

#catGrid { max-width: 1100px; margin: 0 auto; width: 100%; padding: 16px 24px 32px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.cat-thumb { position: relative; height: 200px; background: #f4f0e8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cat-thumb.noimg::after { content: "No image"; color: var(--muted); font-size: 12px; }
.cat-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--muted); }
.cat-badge.active { color: var(--forest); }
.cat-badge.draft { color: var(--amber); }
.cat-badge.archived { color: var(--red); }
.cat-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat-vendor { font-size: 11px; color: var(--muted); text-transform: capitalize; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cat-drop { background: #edf0e4; color: var(--forest); border: 1px solid #d7d9c3; border-radius: 999px; padding: 1px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.cat-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.cat-metrics { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.cat-price { font-weight: 700; color: var(--ink); font-size: 14px; }
.cat-costwrap { color: var(--muted); }
.cat-nocost { color: var(--amber); font-style: italic; }
.cat-margin { margin-left: auto; font-weight: 700; color: var(--forest); background: #edf0e4; border-radius: 999px; padding: 1px 8px; }
.cat-margin.warn { color: #8a6d1f; background: #f6efdd; }
.cat-margin.none { color: var(--muted); background: #f2f0ea; }
.cat-stock { font-size: 12px; color: var(--muted); }
.cat-stock.in strong { color: var(--forest); }
.cat-stock.out strong { color: var(--red); }
.cat-stock.unk strong { color: var(--muted); }
.cat-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.cat-dbtn { padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.cat-dbtn.stock:hover { border-color: var(--forest); color: var(--forest); }
.cat-dbtn.skip:hover { border-color: var(--red); color: var(--red); }
.cat-dbtn.stock.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.cat-dbtn.skip.on { background: var(--red); border-color: var(--red); color: #fff; }
.cat-dbtn:disabled { opacity: .5; cursor: default; }
.cat-note { font-size: 14px !important; padding: 7px 10px; border-radius: 8px; }
.cat-note.saved { border-color: var(--forest); box-shadow: 0 0 0 2px #d7d9c3; }

.cat-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 4px 24px 40px; }
.cat-pageinfo { font-size: 13px; color: var(--muted); }
.cat-pgnums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cat-pgnum { min-width: 32px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--forest); font-size: 13px; font-weight: 600; cursor: pointer; }
.cat-pgnum:hover { border-color: var(--muted); }
.cat-pgnum.on { background: var(--forest); border-color: var(--forest); color: #fff; cursor: default; }
.cat-pgellipsis { color: var(--muted); padding: 0 2px; font-size: 13px; }

@media (max-width: 520px) {
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .cat-thumb { height: 150px; }
  .cat-title { font-size: 12px; }
  #view-catalogue .cat-stats, .cat-toolbar, .cat-chips, #catGrid, #catVendorList, .cat-pager { padding-left: 16px; padding-right: 16px; }
  .cat-field { flex: 1 1 100%; }
  .cat-field select { width: 100%; }
}

/* Catalogue New / Pre-loved toggle (styled like the app's subtabs, own class so it
   doesn't trigger the Fulfilment subtab handler) */
.cat-tab { background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.cat-tab:hover { color: var(--forest); }
.cat-tab.active { color: var(--forest); border-bottom-color: var(--forest); }

/* Planning sub-tabs (Tasks / Tickets) - same look as the catalogue toggle */
.plan-tab { background: transparent; color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.plan-tab:hover { color: var(--forest); }
.plan-tab.active { color: var(--forest); border-bottom-color: var(--forest); }

/* ================= Planning tasks board ================= */
#plan-tasks .task-add { max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.task-addrow { display: flex; gap: 8px; }
.task-addrow input#taskTitle { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.task-addrow input#taskTitle:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); }
.task-addrow #taskAdd { height: 44px; flex: 0 0 auto; border-radius: 12px; padding: 0 20px; }
.task-addopts { display: flex; flex-wrap: wrap; gap: 8px; }
#plan-tasks input, #plan-tasks select, #plan-tasks textarea { font-size: 16px; }  /* stop iOS focus-zoom */
#plan-tasks #taskMsg { display: block; max-width: 1100px; margin: 6px auto 0; padding: 0 24px; }

/* pills: segmented choice groups */
.pillset { display: flex; gap: 4px; padding: 3px; background: #efe8da; border-radius: 999px; }
.pillset .pill { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pillset .pill.on { background: #fff; color: var(--forest); box-shadow: 0 1px 2px rgba(58,65,43,.18); }
.pill-count { font-size: 11px; background: rgba(58,65,43,.1); border-radius: 999px; padding: 0 7px; }
.task-filter { display: none; margin-bottom: 12px; }
.task-addopts .pillset { flex: 0 1 auto; }

.task-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.task-col { background: #f6f2ea; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.task-colhead { font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.task-count { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; padding: 1px 8px; color: var(--muted); font-weight: 700; }
.task-cards { display: flex; flex-direction: column; gap: 10px; }
.task-empty { color: var(--muted); font-size: 13px; padding: 6px 4px; margin: 0; }

.task-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.task-title { margin: 0; width: auto; font-weight: 700; font-size: 15px; line-height: 1.3; padding: 2px 4px; margin: 0 -4px; border: 1px solid transparent; border-radius: 8px; background: transparent; resize: none; overflow: hidden; color: var(--ink); font-family: inherit; box-sizing: content-box; }
.task-title:focus, .task-detail:focus { outline: none; background: #fff; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); }
.st-done .task-title { text-decoration: line-through; color: var(--muted); }
.task-detail-view { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: text; }
.task-adddetail { align-self: flex-start; background: transparent; border: 0; padding: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.task-detail { width: 100%; resize: vertical; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); min-height: 64px; font-family: inherit; }
.task-title.saved, .task-detail.saved { border-color: var(--forest); }
.task-status.pillset { background: #f3ece2; }

.task-chips { display: flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.chip-prio[data-v="high"] { background: #f7e4de; border-color: #e6bfb2; color: var(--red); }
.chip-prio[data-v="high"] .dot { background: var(--red); }
.chip-prio[data-v="normal"] .dot { background: var(--forest); }
.chip-asg[data-v=""] { color: var(--muted); }
.chip-asg[data-v="Paul"], .chip-asg[data-v="Claire"] { background: #e8ead6; border-color: #cfd3b0; }
.task-meta { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.task-del { background: transparent; color: var(--muted); border: 0; padding: 4px; display: inline-flex; border-radius: 8px; cursor: pointer; }
.task-del:hover { color: var(--red); background: #f7e4de; }

@media (max-width: 760px) {
  .task-board { grid-template-columns: 1fr; }
  .task-filter { display: flex; }
  .task-colhead { display: none; }
  .task-col { display: none; background: transparent; border: 0; padding: 0; }
  .task-col.show { display: block; }
  #plan-tasks .task-add, #plansboard, #plan-tasks #taskMsg { padding-left: 16px; padding-right: 16px; }
  .task-addopts .pillset { flex: 1 1 auto; }
}
}

/* clickable cards */
.task-card { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.task-card:hover { border-color: #cfc6b0; box-shadow: 0 2px 10px rgba(58,65,43,.08); }
.task-title { cursor: pointer; padding: 0; border: 0; overflow-wrap: anywhere; }
.task-detail-view { cursor: pointer; }

/* full task view: right drawer on desktop, bottom sheet on phone */
body.tp-open { overflow: hidden; }
.tp { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.tp-backdrop { position: absolute; inset: 0; background: rgba(44,50,32,.45); }
.tp-sheet { position: relative; width: min(520px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.18); animation: tp-in .2s ease-out; }
@keyframes tp-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tp-saved { font-size: 12px; font-weight: 600; color: var(--forest); }
.tp-x { background: transparent; border: 0; color: var(--muted); padding: 6px; border-radius: 10px; display: inline-flex; cursor: pointer; }
.tp-x:hover { background: #f3ece2; color: var(--ink); }
.tp-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.tp-title { width: 100%; font-family: inherit; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); border: 1px solid transparent; border-radius: 10px; padding: 4px 6px; margin: 0 -6px; background: transparent; resize: none; overflow: hidden; box-sizing: border-box; width: calc(100% + 12px); }
.tp-title:focus, .tp-detail:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); background: #fff; }
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tp-detail { width: 100%; min-height: 160px; resize: vertical; font-family: inherit; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); box-sizing: border-box; }
.tp-info { margin: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.tp-info div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.tp-info dt { color: var(--muted); }
.tp-info dd { margin: 0; color: var(--ink); text-align: right; }
.tp-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.tp-delete { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.tp-delete:hover { border-color: var(--red); color: var(--red); background: #f7e4de; }
@media (max-width: 760px) {
  .tp { align-items: flex-end; }
  .tp-sheet { width: 100%; height: 92%; border-radius: 18px 18px 0 0; animation: tp-up .22s ease-out; }
  @keyframes tp-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.tp-body > * { flex-shrink: 0; }

/* ================= Planning > Launch plan (20OCT2026) ================= */
#plan-launch { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; width: 100%; box-sizing: border-box; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.lp-day { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.lp-day .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lp-day .v { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.lp-day .s { font-size: 12px; color: var(--muted); }
.lp-day button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--forest); background: #fff; color: var(--forest); font-size: 13px; cursor: pointer; }
.lp-views { display: flex; gap: 6px; }
.lp-views .chip { padding: 7px 14px; font-size: 13px; }
.lp-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.lp-stats .cstat.warn { border-top-color: var(--terracotta); }
.lp-stats .cstat.warn .cstat-n { color: var(--terracotta); }
.lp-stats .cstat.ok { border-top-color: var(--forest); }

/* Gates */
.lp-gates { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 22px; }
.lp-gates h3 { margin: 0 0 4px; font-size: 16px; }
.lp-gates p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.lp-gatelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lp-gate { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.lp-gate .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--terracotta); }
.lp-gate.done .dot { background: var(--forest); }
.lp-gate.part .dot { background: var(--gold); }
.lp-gate .t { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; }
.lp-gate .l { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Timeline */
.lp-phase { margin: 0 0 22px; }
.lp-phasehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 0 8px; border-bottom: 2px solid var(--ink); margin: 0 0 4px; }
.lp-phasehead h3 { margin: 0; font-size: 18px; }
.lp-phasehead .when { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lp-phasehead .goal { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.lp-week { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lp-week:last-child { border-bottom: 0; }
.lp-wk .n { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); display: block; }
.lp-wk .d { font-size: 12px; color: var(--muted); }
.lp-items { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.lp-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 10px; padding: 8px 11px; min-width: 210px; max-width: 290px; flex: 1 1 210px; }
.lp-card .top { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; flex-wrap: wrap; }
.lp-card .ttl { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.lp-card .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.lp-card.lp-task { border-left-color: var(--grey); background: #faf8f2; }
.lp-card.lp-ckpt { border-left-color: var(--ink); background: #f4efe4; }
.lp-card.th-drop { border-left-color: var(--terracotta); }
.lp-card.th-price { border-left-color: var(--gold); }
.lp-card.th-check { border-left-color: var(--forest); }
.lp-card.th-seller { border-left-color: var(--sand); }
.lp-card.th-how { border-left-color: var(--blue); }
.lp-card.th-intro { border-left-color: var(--ink); }
.tg { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: #f4efe4; color: var(--muted); }
.tg.st-idea { background: #f1eee6; color: var(--grey); }
.tg.st-draft { background: #f6ead9; color: var(--amber); }
.tg.st-approved { background: #e8ecdc; color: var(--forest); }
.tg.st-scheduled { background: #e6ebef; color: var(--blue); }
.tg.st-done { background: var(--forest); color: #fff; }
.tg.blocked { background: #f5e1da; color: var(--red); }
.tg.ch { background: transparent; border: 1px solid var(--line); }

/* Legend */
.lp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.lp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

/* Calendar */
.lp-cal { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lp-calhead { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lp-calhead h3 { margin: 0; font-size: 16px; }
.lp-calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lp-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f4efe4; }
.lp-dayc { min-height: 118px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; background: #fff; min-width: 0; }
.lp-dayc:nth-child(7n) { border-right: 0; }
.lp-dayc .num { font-size: 12px; color: var(--muted); font-weight: 700; }
.lp-dayc.launch { background: #f6ead9; }
.lp-dayc.launch .num { color: var(--terracotta); }
.lp-ev { font-size: 11px; line-height: 1.3; border-radius: 6px; padding: 4px 6px; margin-top: 4px; background: #f4efe4; border-left: 3px solid var(--sage); color: var(--ink); overflow: hidden; }
.lp-ev.th-drop { border-left-color: var(--terracotta); }
.lp-ev.th-price { border-left-color: var(--gold); }
.lp-ev.th-check { border-left-color: var(--forest); }
.lp-ev.th-seller { border-left-color: var(--sand); }
.lp-ev.th-intro { border-left-color: var(--ink); }
.lp-ev.th-how { border-left-color: var(--blue); }
.lp-ev b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; }

/* Ideas */
.lp-ideaadd { display: flex; gap: 8px; margin: 0 0 14px; }
.lp-ideaadd input { flex: 1; }
.lp-ideaadd button { padding: 10px 18px; border-radius: 10px; background: var(--forest); color: #fff; border: 0; }
.lp-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lp-theme { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--sage); border-radius: 12px; padding: 12px 14px; }
.lp-theme.th-drop { border-top-color: var(--terracotta); }
.lp-theme.th-price { border-top-color: var(--gold); }
.lp-theme.th-check { border-top-color: var(--forest); }
.lp-theme.th-seller { border-top-color: var(--sand); }
.lp-theme.th-how { border-top-color: var(--blue); }
.lp-theme h4 { margin: 0 0 2px; font-size: 15px; }
.lp-theme .why { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.lp-idea { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.lp-idea .who { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lp-idea .plan { font-size: 11px; color: var(--forest); font-weight: 700; white-space: nowrap; }

@media (max-width: 700px) {
  .lp-week { grid-template-columns: 1fr; gap: 8px; }
  .lp-card { max-width: none; }
  .lp-calgrid { display: block; }
  .lp-dow { display: none; }
  .lp-dayc { min-height: 0; border-right: 0; }
  .lp-dayc.empty { display: none; }
}

/* interactive bits */
.lp-card, .lp-gate, .lp-ev, .lp-idea { font: inherit; text-align: left; cursor: pointer; color: inherit; }
.lp-card { display: flex; flex-direction: column; align-items: stretch; }
.lp-card .ttl, .lp-card .meta { display: block; }
.lp-card:hover, .lp-gate:hover, .lp-idea:hover { border-color: var(--muted); }
.lp-ev { display: block; width: 100%; border: 0; }
.lp-idea { width: 100%; }
.lp-add { align-self: center; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.lp-add:hover { border-color: var(--forest); color: var(--forest); }
.lp-day input[type=date] { width: auto; font-size: 16px; padding: 7px 10px; }
.lp-ideaadd select { width: auto; }
.lp-row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-row2 > * { flex: 1 1 160px; min-width: 0; }
.lp-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 3px 0; cursor: pointer; }
.lp-rule input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; accent-color: var(--forest); }
.lp-checks { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.lp-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.lp-links a { font-size: 13px; color: var(--forest); }
/* keep the global button:hover (dark green) off the launch plan's clickable cards */
.lp-card:hover, .lp-gate:hover, .lp-idea:hover { background: #fff; }
.lp-card.lp-task:hover { background: #faf8f2; }
.lp-card.lp-ckpt:hover { background: #f4efe4; }
.lp-ev:hover { background: #ece4d6; }
.lp-add:hover { background: transparent; }

/* ================= In-app dialogs and date picker (no browser defaults) ================= */
.ui-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.ui-modal-back { position: absolute; inset: 0; background: rgba(44,50,32,.45); }
.ui-modal-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; width: min(420px, 100%); box-shadow: 0 18px 50px rgba(44,50,32,.25); animation: ui-pop .14s ease-out; }
@keyframes ui-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.ui-modal-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.ui-modal-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-btn { border-radius: 999px; padding: 9px 18px; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.ui-btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.ui-btn.ghost:hover { background: #f4efe4; }
.ui-btn.primary { background: var(--forest); color: #fff; }
.ui-btn.primary:hover { background: var(--forest-2); }
.ui-btn.danger { background: var(--red); color: #fff; }
.ui-btn.danger:hover { background: #963b26; }
.ui-date { position: absolute; z-index: 95; width: 292px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(44,50,32,.18); padding: 12px; }
.ui-date-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.ui-date-head span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.ui-nav { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--ink); border: 1px solid var(--line); font-size: 18px; line-height: 1; padding: 0; cursor: pointer; }
.ui-nav:hover { background: #f4efe4; }
.ui-dow, .ui-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.ui-day { height: 36px; border-radius: 10px; background: transparent; color: var(--ink); border: 0; font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 0; cursor: pointer; }
.ui-day:hover { background: #f4efe4; }
.ui-day.out { color: #b9b4a3; }
.ui-day.today { box-shadow: inset 0 0 0 1.5px var(--sage); }
.ui-day.on, .ui-day.on:hover { background: var(--forest); color: #fff; }
.ui-date-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ui-link { background: transparent; border: 0; color: var(--forest); font-size: 13px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.ui-link:hover { background: #f4efe4; }
.ui-datebtn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; }
.ui-datebtn:hover { background: #fff; border-color: var(--muted); }
.ui-datebtn svg { color: var(--muted); }
.ui-menu { position: absolute; z-index: 95; max-height: 320px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(44,50,32,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ui-opt { text-align: left; background: transparent; color: var(--ink); border: 0; border-radius: 8px; padding: 9px 12px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ui-opt:hover { background: #f4efe4; }
.ui-opt.on, .ui-opt.on:hover { background: var(--forest); color: #fff; }
.ui-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: var(--font-body); font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; }
.ui-select:hover { background: #fff; border-color: var(--muted); }
.ui-select::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex: 0 0 8px; }
.lp-ideaadd .ui-select { width: auto; min-width: 180px; }

/* ================= Rich text editor ================= */
.rt { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.rt:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,65,43,.12); }
.rt-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: #faf7f0; }
.rt-bar button { width: 32px; height: 30px; border-radius: 8px; background: transparent; color: var(--muted); border: 0; padding: 0; display: inline-grid; place-items: center; font-size: 15px; cursor: pointer; }
.rt-bar button:hover { background: #efe8da; color: var(--ink); }
.rt-bar button.on { background: var(--forest); color: #fff; }
.rt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rt-edit { min-height: 140px; padding: 10px 12px; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink); outline: none; overflow-wrap: anywhere; }
.rt.empty .rt-edit::before { content: attr(data-placeholder); color: #a7a291; pointer-events: none; float: left; }
.rt-edit p { margin: 0 0 8px; }
.rt-edit ul, .rt-edit ol, .rt-view ul, .rt-view ol { margin: 4px 0 8px; padding-left: 22px; }
.rt-edit li, .rt-view li { margin: 2px 0; }
.rt-edit a, .rt-view a { color: var(--forest); text-decoration: underline; }
.rt-linkpop { position: absolute; z-index: 96; display: flex; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 14px 40px rgba(44,50,32,.18); width: min(380px, calc(100vw - 16px)); }
.rt-linkpop input { flex: 1; min-width: 0; }
.rt-linkpop .ui-btn { white-space: nowrap; }

/* brand focus ring instead of the browser's blue outline */
button:focus, .pill:focus, .chip:focus { outline: none; }
button:focus-visible, .pill:focus-visible, .chip:focus-visible, a:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.task-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-filters .tf-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-left: 4px; }
.task-filters .pillset + .tf-label { margin-left: 10px; }
.task-detail-view { white-space: pre-line; -webkit-line-clamp: 3; }

/* ================= Blog posts (review) ================= */
#view-blog { width: 100%; }
.bp-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 24px 60px; }
.bp-tools { margin: 0 0 10px; }
.bp-tools input { max-width: 420px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.bp-list { display: flex; flex-direction: column; gap: 8px; }
.bp-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; cursor: pointer; }
.bp-row:hover { background: #fff; border-color: var(--muted); }
.bp-row img, .bp-noimg { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 72px; background: #f4efe4; }
.bp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bp-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.bp-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-st { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; background: #f1eee6; color: var(--grey); }
.bp-st.st-ready { background: #f6ead9; color: var(--amber); }
.bp-st.st-changes { background: #f5e1da; color: var(--red); }
.bp-st.st-approved { background: #e8ecdc; color: var(--forest); }
.bp-st.st-published { background: var(--forest); color: #fff; }
.lp-stats .bp-t-ready { border-top-color: var(--gold); }
.lp-stats .bp-t-changes { border-top-color: var(--red); }
.lp-stats .bp-t-approved, .lp-stats .bp-t-published { border-top-color: var(--forest); }
.bp-sheet { width: min(880px, 100%); }
.bp-tabs { display: flex; gap: 4px; }
.bp-tabs .plan-tab { padding: 6px 10px; font-size: 14px; }
.bp-empty { background: #f6ead9; border: 1px solid #eeddc0; color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.bp-count { float: right; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.bp-count.over { color: var(--red); }
.bp-seod { min-height: 0; }
.bp-note { min-height: 0; }
.bp-stset { flex-wrap: wrap; }
.bp-foot { justify-content: flex-end; gap: 8px; }
.bp-article h1 { font-size: 26px; line-height: 1.25; margin: 4px 0 12px; }
.bp-kicker { font-size: 12px; color: var(--muted); margin: 0; }
.bp-seo { background: #f4efe4; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 14px; }
.bp-hero { width: 100%; border-radius: 12px; margin: 0 0 14px; }
.rt-view { font-size: 15px; line-height: 1.6; color: var(--ink); }
.rt-view h2 { font-size: 21px; margin: 22px 0 8px; }
.rt-view h3 { font-size: 17px; margin: 18px 0 6px; }
.rt-view img, .rt-edit img { max-width: 100%; height: auto; border-radius: 10px; }
.rt-view blockquote, .rt-edit blockquote { border-left: 3px solid var(--sage); margin: 10px 0; padding: 4px 12px; color: var(--muted); }
.rt-edit h2 { font-size: 20px; margin: 16px 0 6px; } .rt-edit h3 { font-size: 17px; margin: 14px 0 6px; }
.rt-bar button[data-rt="h2"], .rt-bar button[data-rt="h3"], .rt-bar button[data-rt="p"] { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
@media (max-width: 700px) { .bp-row { flex-wrap: wrap; } .bp-meta { white-space: normal; } .bp-tabs .plan-tab { font-size: 13px; padding: 6px 6px; } }