/* =============================================================================
   VITAMIC One — design system (structure). Colour lives in theme.css.
   Forked from the FFP hub; the layout language is deliberately unchanged.
   Server-rendered HTML + progressive vanilla JS; no build step.
   ========================================================================== */


/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
input,button,select,textarea{font:inherit}

body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg-app);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Icons ---------------------------------------------------------------- */
.icon{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.icon--sm{width:16px;height:16px}

/* --- App shell ------------------------------------------------------------ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}
.app[data-sidebar="collapsed"]{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.app__main{display:flex;flex-direction:column;min-width:0}

/* --- Sidebar -------------------------------------------------------------- */
.sidebar{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg-surface);
  color:var(--text);
  border-right:1px solid var(--border);
  overflow:hidden;
  z-index:40;
}
.sidebar__brand{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 16px;
  border-bottom:1px solid var(--border-2);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__mark{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--chrome);color:var(--accent);
  font-weight:700;font-size:16px;letter-spacing:.02em;
}
.brand__name{font-weight:600;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NOTE: these toggles are also .icon-btn, which sets display:inline-grid later
   in this file at equal specificity — and a media query adds NO specificity. So
   these rules must out-specify .icon-btn or they simply lose. */
.icon-btn.sidebar__collapse{display:none}
@media(min-width:961px){ .icon-btn.sidebar__collapse{display:inline-grid} }

.sidebar__nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:9px;
  color:var(--text-2);font-weight:500;
  white-space:nowrap;
  transition:background .12s ease,color .12s ease;
}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.is-active{background:var(--accent-wash);color:var(--accent)}
.nav-item.is-active .nav-item__icon{color:var(--accent)}
.nav-item__icon{color:var(--text-faint);display:inline-flex}
.nav-item__label{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-item__count{
  font-size:11px;font-weight:600;color:var(--text-muted);
  background:var(--bg-app);border:1px solid var(--border-2);
  border-radius:20px;padding:1px 8px;
}
/* Section heading + divider between grouped nav items. */
.nav-section{
  display:block;margin:14px 10px 4px;padding-top:12px;
  border-top:1px solid var(--border-2);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);
}
.nav-section:first-child{border-top:none;padding-top:0;margin-top:2px}
/* The collapse toggle lives here (not in the brand row) so the brand keeps the
   full width — at 72px collapsed there simply isn't room for both. */
.sidebar__foot{
  padding:10px 12px;border-top:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.sidebar__version{font-size:11px;color:var(--text-faint);letter-spacing:.02em;padding-left:6px}
.app[data-sidebar="collapsed"] .sidebar__foot{justify-content:center}
.app[data-sidebar="collapsed"] .sidebar__collapse .icon{transform:rotate(180deg)}

/* collapsed: show icons only */
.app[data-sidebar="collapsed"] .brand__name,
.app[data-sidebar="collapsed"] .nav-item__label,
.app[data-sidebar="collapsed"] .nav-item__count,
.app[data-sidebar="collapsed"] .sidebar__version{display:none}
/* Collapsed: drop the section wording, keep a thin divider for grouping */
.app[data-sidebar="collapsed"] .nav-section{font-size:0;margin:8px 14px 4px;padding-top:8px;letter-spacing:0}
.app[data-sidebar="collapsed"] .nav-item{justify-content:center;padding:9px}
.app[data-sidebar="collapsed"] .brand{justify-content:center}
.app[data-sidebar="collapsed"] .sidebar__brand{padding:0 8px;justify-content:center}
/* A wordmark can't stay legible at 72px — shrink it to fit rather than overflow. */
.app[data-sidebar="collapsed"] .brand__logo{max-width:48px;max-height:30px}

/* --- Sidebar section groups (always open, non-collapsible) ---------------- */
.nav-group{position:relative;margin-top:8px}
.nav-group__head{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:6px 12px 4px;
  color:var(--text-faint);font-weight:600;font-size:11.5px;letter-spacing:.03em;
  white-space:nowrap;
}
.nav-group__head .nav-item__icon{color:var(--text-faint)}
.nav-group__label{flex:1;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.nav-group__items{
  display:flex;flex-direction:column;gap:2px;
  margin:2px 0 4px 19px;padding-left:12px;
  border-left:1px solid var(--border-2);
}
.nav-group__items .nav-item{padding:7px 12px;font-size:13px}

/* Flyout (icon-rail hover). Positioned by JS (fixed) so it escapes the sidebar's
   overflow:hidden. Hidden by default; JS sets display:flex on hover when collapsed. */
.nav-flyout{
  display:none;position:fixed;z-index:60;min-width:190px;
  flex-direction:column;gap:2px;padding:8px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);
}
/* Invisible hover bridge so moving from the icon rail into the flyout never
   crosses a dead gap that would dismiss it. */
.nav-flyout::before{content:"";position:absolute;top:0;left:-12px;width:12px;height:100%}
.nav-flyout__title{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);padding:4px 8px 6px;
}
.nav-flyout__link{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--text-2);font-weight:500;font-size:13px;white-space:nowrap;
}
.nav-flyout__link:hover{background:var(--hover);color:var(--text)}
.nav-flyout__link.is-active{background:var(--accent-wash);color:var(--accent-hover)}
.nav-flyout__link .nav-item__icon{color:var(--text-faint)}

/* Collapsed rail: only the group icon shows; items fold into the hover flyout. */
.app[data-sidebar="collapsed"] .nav-group__label,
.app[data-sidebar="collapsed"] .nav-group__chevron,
.app[data-sidebar="collapsed"] .nav-group__items,
.app[data-sidebar="collapsed"] .nav-customize-btn__label{display:none}
.app[data-sidebar="collapsed"] .nav-group__head{justify-content:center;padding:9px}

/* Customize button in the foot */
.sidebar__foot{flex-wrap:wrap}
.nav-customize-btn{
  display:inline-flex;align-items:center;gap:8px;flex:1 0 auto;
  padding:8px 10px;border-radius:9px;border:1px solid var(--border-2);
  background:none;cursor:pointer;color:var(--text-2);font-weight:600;font-size:12.5px;font-family:inherit;
}
.nav-customize-btn:hover{background:var(--hover);color:var(--text)}

/* --- Customize your navigation panel ------------------------------------- */
.navcust[hidden]{display:none}
.navcust{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.navcust__backdrop{position:absolute;inset:0;background:var(--scrim)}
.navcust__dialog{
  position:relative;width:min(440px,100%);max-height:88vh;overflow:auto;
  background:var(--bg-surface);border-radius:16px;box-shadow:var(--shadow-lg);
}
.navcust__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-2)}
.navcust__head h3{font-size:15px;font-weight:700;margin:0}
.navcust__body{padding:16px 20px}
.navcust__hint{font-size:12px;color:var(--text-muted);margin:0 0 8px}
.navcust-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.navcust-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--bg-app);border:1px solid var(--border-2);border-radius:10px;
}
.navcust-row.is-dragging{opacity:.5}
.navcust-row.is-hidden{opacity:.55}
.navcust-row__grip{color:var(--text-faint);cursor:grab;display:inline-flex}
.navcust-row__icon{color:var(--text-2);display:inline-flex}
.navcust-row__label{flex:1;font-weight:600;font-size:13px}
.navcust-row__toggle{position:relative;display:inline-flex;cursor:pointer}
.navcust-row__toggle input{position:absolute;opacity:0;width:0;height:0}
.navcust-row__toggleui{width:36px;height:20px;border-radius:20px;background:var(--border);transition:background .15s ease;display:inline-block;position:relative}
.navcust-row__toggleui::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--bg-surface);transition:transform .15s ease;box-shadow:var(--shadow-sm)}
.navcust-row__toggle input:checked + .navcust-row__toggleui{background:var(--accent)}
.navcust-row__toggle input:checked + .navcust-row__toggleui::after{transform:translateX(16px)}
.navcust-accents{display:flex;flex-wrap:wrap;gap:10px}
.navcust-accent{cursor:pointer;display:inline-flex;padding:3px;border-radius:50%;border:2px solid transparent}
.navcust-accent.is-selected{border-color:var(--accent-hover)}
.navcust-accent input{position:absolute;opacity:0;width:0;height:0}
.navcust-accent__dot{width:22px;height:22px;border-radius:50%;display:inline-block}
/* Colour-wheel swatch in the accent picker: these hues ARE the content (a
   spectrum preview), not theme colour. The only literal hexes in this file. */
.navcust-accent__dot--none{background:conic-gradient(#e11d48,#e8590c,#0d9f6e,#2d7ff9,#635bff,#e11d48)}
.navcust__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* --- Pinned group + per-item pin star ------------------------------------ */
.nav-pinned{margin:2px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--border-2)}
.nav-pinned__head{
  display:flex;align-items:center;gap:8px;padding:6px 12px 4px;
  color:var(--text-faint);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
}
.nav-pinned__head .nav-item__icon{color:var(--warn)}
.app[data-sidebar="collapsed"] .nav-pinned__label{display:none}
.app[data-sidebar="collapsed"] .nav-pinned__head{justify-content:center;padding:8px}

/* Each nav link sits in a row that carries a hover "pin to top" star. */
.nav-item-row{position:relative;display:flex;align-items:center}
.nav-item-row .nav-item{flex:1;min-width:0;padding-right:30px}
.nav-pin{position:absolute;right:7px;top:50%;transform:translateY(-50%);margin:0;line-height:0}
.nav-pin__btn{
  display:inline-grid;place-items:center;width:24px;height:24px;padding:0;
  border:0;border-radius:6px;background:transparent;color:var(--text-faint);
  opacity:0;transition:opacity .12s ease,color .12s ease,background .12s ease;
}
.nav-item-row:hover .nav-pin__btn,.nav-item-row:focus-within .nav-pin__btn{opacity:.65}
.nav-pin__btn:hover{opacity:1;color:var(--warn);background:var(--hover)}
.nav-pin__btn[aria-pressed="true"]{opacity:1;color:var(--warn)}
/* No room for the star in the collapsed icon rail. */
.app[data-sidebar="collapsed"] .nav-pin{display:none}
.app[data-sidebar="collapsed"] .nav-item-row .nav-item{padding-right:9px}

/* --- Sidebar drag-to-resize handle -------------------------------------- */
.sidebar__resize{
  position:absolute;top:var(--topbar-h);right:0;width:7px;height:calc(100% - var(--topbar-h));
  cursor:col-resize;z-index:50;touch-action:none;
}
.sidebar__resize::after{
  content:"";position:absolute;top:0;right:0;width:2px;height:100%;
  background:transparent;transition:background .12s ease;
}
.sidebar__resize:hover::after,.app.is-resizing .sidebar__resize::after{background:var(--accent)}
.app.is-resizing{transition:none;cursor:col-resize;user-select:none}
.app.is-resizing .app__main{pointer-events:none}
@media(max-width:960px){ .sidebar__resize{display:none} }
.app[data-sidebar="collapsed"] .sidebar__resize{display:none}

/* --- Breadcrumb + Back bar (content eyebrow zone) ----------------------- */
.crumbbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.crumbbar__back{
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px 5px 8px;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-surface);
  color:var(--text-2);font-weight:600;font-size:13px;box-shadow:var(--shadow-sm);
}
.crumbbar__back:hover{color:var(--text);background:var(--hover)}
.crumbbar__back .icon{color:var(--text-faint)}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;font-size:12.5px}
.crumbs__item{display:inline-flex;align-items:center;gap:2px}
.crumbs__link{color:var(--text-muted);font-weight:500;padding:2px 4px;border-radius:6px}
.crumbs__link:hover{color:var(--accent-hover);background:var(--accent-wash)}
.crumbs__cur{color:var(--text);font-weight:600;padding:2px 4px}
.crumbs__sep{display:inline-flex;color:var(--text-faint)}
.crumbs__sep .icon{width:14px;height:14px}

/* --- Email notifications editor (Settings → Email → Notifications) -------- */
.nlist__group{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:12px 16px 4px}
.nlist__row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--border-2);color:var(--text)}
.nlist__row:first-of-type{border-top:none}
.nlist__row:hover{background:var(--hover)}
.nlist__row.is-active{background:var(--accent-wash)}
.nlist__row.is-active .nlist__label{color:var(--accent-hover)}
.nlist__dot{width:9px;height:9px;border-radius:50%;flex:none}
.nlist__dot.is-on{background:var(--ok)}
.nlist__dot.is-off{background:var(--border)}
.nlist__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nlist__label{font-weight:600;font-size:13.5px}
.nlist__trigger{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-legend{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.tag-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 9px;border-radius:20px;border:1px solid var(--border-2);background:var(--bg-app);
  font-family:inherit;font-size:12px;color:var(--text-2);
}
.tag-chip:hover{background:var(--accent-wash);border-color:var(--accent)}
.tag-chip code{font-size:12px;color:var(--accent-hover);background:none;padding:0}
.field.is-muted{opacity:.55}

/* App footer (version lives here, moved out of the sidebar) */
.app-footer{padding:14px 24px;margin-top:auto;color:var(--text-faint);font-size:12px;text-align:right;border-top:1px solid var(--border-2)}

/* Active-country selector (top bar) */
.country-switch{position:relative}
.country-switch__btn{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg-surface);
  color:var(--text);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;
}
.country-switch__btn:hover:not([disabled]){background:var(--hover)}
.country-switch__btn[disabled]{cursor:default;color:var(--text-2)}
.country-switch__btn .icon:first-child{color:var(--accent)}
.country-switch__label{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.dropdown__item.is-active{color:var(--accent-hover);font-weight:600}
/* Display-language switch — deliberately compact + distinct from the country selector. */
.lang-switch{position:relative}
.lang-switch__btn{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg-surface);
  color:var(--text);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;
}
.lang-switch__btn:hover{background:var(--hover)}
.lang-switch__btn .icon:first-child{color:var(--text-2)}
.lang-switch__label{letter-spacing:.02em}

/* --- Top-bar right cluster: keep the selectors + action icons from crowding.
   The country/language selectors carry text, so on tighter viewports we shed
   the labels (icon + chevron remain) before hiding the user's name. This keeps
   the header airy instead of "very tight". --------------------------------- */
@media(max-width:1240px){ .country-switch__label{display:none} .country-switch__btn{padding:0 9px} }
@media(max-width:1080px){ .lang-switch__label{display:none} .lang-switch__btn{padding:0 9px} }

/* First-load country picker (blocking) */
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-surface);
  color:var(--text);font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s;
}

/* Wipe-all-data lists (removed / kept) */
.wipe-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wipe-list li{position:relative;padding-left:18px;font-size:13.5px;color:var(--text-2);line-height:1.4}
.wipe-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--border)}

/* --- Top bar -------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:30;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;
  padding:0 24px;
  background:var(--bg-surface);
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.topbar__left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.topbar__title{font-size:17px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__center{flex:1;display:flex;justify-content:center;max-width:520px;margin:0 auto}
.topbar__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar__sep{width:1px;height:22px;flex:none;background:var(--border);margin:0 3px}
@media(max-width:600px){ .topbar__sep{display:none} }
/* Mobile-only drawer trigger. Must out-specify .icon-btn (see note above),
   otherwise it stays visible on desktop where there is no drawer to open. */
.icon-btn.topbar__menu{display:inline-grid}
@media(min-width:961px){ .icon-btn.topbar__menu{display:none} }

.search{
  position:relative;display:flex;align-items:center;width:100%;max-width:440px;
}
.search__icon{position:absolute;left:12px;color:var(--text-faint);pointer-events:none;display:inline-flex}
.search__input{
  width:100%;padding:9px 12px 9px 36px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--bg-app);color:var(--text);
  transition:border-color .12s,box-shadow .12s,background .12s;
}
.search__input:focus{outline:none;background:var(--bg-surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.search__input::placeholder{color:var(--text-faint)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:9px;
  font-weight:600;font-size:13.5px;line-height:1;
  transition:background .12s,border-color .12s,box-shadow .12s,color .12s;
  white-space:nowrap;
  /* The base used to set neither background nor colour, leaving a plain
     `class="btn"` button with the browser's own light-grey chrome and near
     black-on-grey text — effectively blank on this theme. The base is now a
     complete, legible secondary button; the variants below still override it. */
  background:var(--bg-raised);color:var(--text);border:1px solid var(--border);
  cursor:pointer;
}
.btn:hover{background:var(--hover-strong);border-color:var(--border-firm)}
.btn--primary{background:var(--accent);color:var(--on-solid);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:var(--bg-surface);border-color:var(--border);color:var(--text-2)}
.btn--ghost:hover{border-color:var(--text-faint);color:var(--text)}
.btn--danger{background:var(--danger);color:var(--on-solid)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}

.icon-btn{
  width:38px;height:38px;flex:none;
  display:inline-grid;place-items:center;
  border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--text-muted);
  position:relative;
  transition:background .12s,color .12s;
}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}
.badge-dot{
  position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg-surface);
}

/* --- User menu ------------------------------------------------------------ */
.user-menu__btn{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px 5px 6px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--text-2);
}
.user-menu__btn:hover{background:var(--hover)}
.user-menu__name{font-weight:500;font-size:13px}
@media(max-width:600px){ .user-menu__name{display:none} }
.avatar{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--accent-wash);color:var(--accent-hover);
  font-weight:600;font-size:12px;
}
.avatar__img{width:100%;height:100%;object-fit:cover;display:block}
.avatar--lg{width:76px;height:76px;font-size:24px}
.avatar-edit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.avatar-edit__controls{display:flex;flex-direction:column;gap:6px;min-width:240px;flex:1}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* --- Content -------------------------------------------------------------- */
.content{
  /* Full-width content with a slight, consistent margin all round. Individual
     cards/forms still cap their own reading width where it matters, so this
     spreads dense views (boards, tables) horizontally and cuts vertical scroll. */
  padding:24px 24px 36px;
  max-width:none;width:100%;margin:0;
  display:flex;flex-direction:column;gap:20px;
}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head__actions{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.page-title{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-top:2px}
.page-sub{color:var(--text-muted);margin-top:4px}

/* --- Cards ---------------------------------------------------------------- */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  padding:20px;
}
/* On phones the 20px inset eats into narrow cards — ease it so panel content
   (stats, lists, forms) has room to breathe instead of feeling crammed. */
@media(max-width:560px){ .card{padding:16px} }
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card__title{font-size:15px;font-weight:600;color:var(--text)}

.grid{display:grid;gap:16px}
.grid--stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1600px){ .grid--stats{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(max-width:1100px){ .grid--stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:760px){ .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:480px){ .grid--stats{grid-template-columns:1fr} }

.stat{display:flex;align-items:center;gap:14px}
.stat__icon{
  width:44px;height:44px;flex:none;border-radius:10px;
  display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-hover);
}
.stat__body{display:flex;flex-direction:column;min-width:0}
.stat__value{font-size:20px;font-weight:700;color:var(--text);line-height:1.2}
.stat__label{font-size:13px;font-weight:500;color:var(--text-2)}
.stat__note{font-size:12px;color:var(--text-faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- Chips & checklist ---------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:20px;
  font-size:12px;font-weight:600;
  background:var(--bg-app);color:var(--text-2);border:1px solid var(--border-2);
}
.chip--ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}
.chip--warn{background:var(--warn-wash);color:var(--warn);border-color:transparent}
.chip--danger{background:var(--danger-wash);color:var(--danger);border-color:transparent}

.checklist{display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:flex-start;gap:10px;color:var(--text-2)}
.checklist li .icon{color:var(--ok);margin-top:1px}
.checklist code{background:var(--bg-app);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;font-size:12.5px}

/* --- Note & empty states -------------------------------------------------- */
.note-card{display:flex;align-items:flex-start;gap:14px;background:var(--warn-wash);border-color:transparent}
.note-card__icon{color:var(--warn);flex:none}
.note-card p{color:var(--warn-ink)}

.empty-state{
  text-align:center;padding:56px 24px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);
}
.empty-state__icon{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent);margin-bottom:4px;
}
.empty-state__icon .icon{width:28px;height:28px}
.empty-state__title{font-size:19px;font-weight:700;color:var(--text)}
.empty-state__sub{color:var(--text-muted);max-width:440px}
.empty-state code{background:var(--bg-app);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px}

/* --- Toasts --------------------------------------------------------------- */
.toast-host{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(440px,92vw);
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;border-radius:10px;
  background:var(--text);color:var(--on-solid);box-shadow:var(--shadow-lg);
  transform:translateY(-10px);opacity:0;pointer-events:auto;
  transition:transform .2s ease,opacity .2s ease;
}
.toast.is-shown{transform:translateY(0);opacity:1}
.toast--ok,.toast--success{background:var(--ok)}
.toast--danger,.toast--error{background:var(--danger)}
.toast--warn,.toast--warning{background:var(--warn)}
.toast__msg{font-size:13.5px;font-weight:500}

/* --- Mobile sidebar drawer ------------------------------------------------ */
.sidebar-backdrop{
  position:fixed;inset:0;background:var(--scrim);z-index:35;
  opacity:0;transition:opacity .2s ease;
}
@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .app[data-sidebar]{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;width:var(--sidebar-w);
    /* Use the dynamic viewport height so the footer isn't hidden behind the
       mobile browser's address/toolbar (100vh includes that chrome). */
    height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
  }
  .app.is-drawer-open .sidebar{transform:translateX(0)}
  .app.is-drawer-open .sidebar-backdrop{display:block}
  .app.is-drawer-open .sidebar-backdrop:not([hidden]){opacity:1}
  .content{padding:16px 16px 28px}

  /* Stack the drawer footer and keep it clear of the on-screen browser bar /
     home indicator, so language, country, settings + customize stay reachable. */
  .sidebar__foot{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}

  /* The top bar is tight on phones: country + language + settings all move into
     the drawer footer, leaving room for search. Drop them (and the divider). */
  .topbar .lang-switch,
  .topbar .country-switch,
  .topbar__settings,
  .topbar__sep{display:none}

  /* Keep the remaining flyouts (notifications, user menu) within the viewport. */
  .topbar__right .dropdown__menu{background:var(--bg-raised);max-width:calc(100vw - 24px)}
}

/* Freeze the page behind the mobile drawer so it can't scroll underneath. */
body.is-drawer-locked{overflow:hidden}

/* Language / country switchers + settings in the sidebar drawer footer
   (mobile only — these move out of the top bar on phones; see topbar). */
.sidebar-lang{display:none}
.sidebar-foot-settings{display:none}
@media(max-width:960px){
  .sidebar-lang{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%}
  .sidebar-lang__label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-muted)}
  .sidebar-lang__label .icon{color:var(--text-2)}
  .sidebar-lang__opts{display:flex;flex-wrap:wrap;gap:4px}
  .sidebar-lang__opt{
    min-width:38px;text-align:center;padding:6px 10px;border-radius:8px;
    border:1px solid var(--border);background:var(--bg-surface);
    color:var(--text-2);font-size:12.5px;font-weight:600;letter-spacing:.02em;
    text-decoration:none;font-family:inherit;line-height:1.3;cursor:pointer;
  }
  .sidebar-lang__opt:hover{background:var(--hover);color:var(--text)}
  .sidebar-lang__opt.is-active{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-hover)}
  /* Country names are longer than EN/ES — stack label over the wrapping pills. */
  .sidebar-ctry{flex-direction:column;align-items:stretch;gap:8px}
  .sidebar-ctry__form{display:inline-flex;margin:0}
  /* Settings link matches the "Customize" footer button. */
  .sidebar-foot-settings{display:inline-flex;text-decoration:none}
}

/* --- Motion preference ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* --- Focus visibility ----------------------------------------------------- */
a:focus-visible,.nav-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}

/* =============================================================================
   Phase 1 — forms, wizard/auth, tables, dropdown, alerts
   ========================================================================== */

/* --- Buttons (extras) ----------------------------------------------------- */
.btn--block{width:100%;justify-content:center;margin-top:4px}
.btn--sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
/* Native colour wells stretch to fill a flex row and render their swatch with
   a thick UA border. Size them like a swatch and let the colour show. */
input[type="color"].input{width:44px;min-width:44px;flex:none;padding:3px;height:34px;cursor:pointer}
input[type="color"].input::-webkit-color-swatch-wrapper{padding:0}
input[type="color"].input::-webkit-color-swatch{border:none;border-radius:5px}
.btn--danger-ghost{color:var(--danger)}
.btn--danger-ghost:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-wash)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.inline{display:inline}

/* --- Forms ---------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-weight:600;font-size:13px;color:var(--text)}
.field__hint{font-weight:400;color:var(--text-faint);font-size:12px}
.field__note{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;line-height:1.45}
.field__note .icon{color:var(--text-faint);flex:none}
.input{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);border-radius:9px;
  background:var(--bg-surface);color:var(--text);
  transition:border-color .12s,box-shadow .12s;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.input:disabled{background:var(--bg-app);color:var(--text-muted);cursor:not-allowed}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){ .form-row{grid-template-columns:1fr} }

/* Consistent vertical rhythm between stacked field rows placed directly inside a
   .card. Many settings/forms lay .field / .grid rows straight into a card, which
   (unlike .form) has no flex gap — without this they render cramped/uneven.
   Stats grids are excluded so dashboards are untouched. */
.card > .field + .field,
.card > .field + .grid:not(.grid--stats),
.card > .grid:not(.grid--stats) + .field,
.card > .grid:not(.grid--stats) + .grid:not(.grid--stats){margin-top:16px}
.checkbox{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--text-2)}
.checkbox input{width:16px;height:16px;accent-color:var(--accent)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* --- Alerts --------------------------------------------------------------- */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:10px;margin-bottom:16px;
  font-size:13.5px;font-weight:500;
}
.alert .icon{flex:none;margin-top:1px}
.alert--error{background:var(--danger-wash);color:var(--danger-ink)}
.alert--success{background:var(--ok-wash);color:var(--ok-ink)}
.alert--info{background:var(--accent-wash);color:var(--accent-hover)}
.alert--warning{background:var(--warn-wash);color:var(--warn)}

/* --- Centered pages (wizard / auth) --------------------------------------- */
.centered-body{
  min-height:100vh;background:var(--bg-app);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;
}
.wizard,.auth{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:20px}
.auth{max-width:400px}
.wizard__brand,.auth__brand{display:flex;align-items:center;gap:12px;padding-top:8px}
.brand__mark--lg{width:44px;height:44px;font-size:14px;border-radius:11px}
.wizard__brand-name,.auth__name{font-size:18px;font-weight:700;color:var(--text)}
.wizard__brand-sub{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-wash);padding:2px 8px;border-radius:20px}
.wizard__card{
  width:100%;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-md);padding:28px;
}
.wizard__title{font-size:20px;font-weight:700;color:var(--text)}
.wizard__lead,.auth__lead{color:var(--text-muted);margin:8px 0 20px;line-height:1.5}
.auth__title{font-size:22px;font-weight:700;color:var(--text)}
.auth__lead{margin:6px 0 22px}
.wizard__foot{font-size:12px;color:var(--text-faint)}
.wizard__actions{display:flex;justify-content:space-between;gap:10px;margin-top:24px;align-items:center}
.wizard__actions--center{justify-content:center}
.wizard__actions form{display:contents}

/* Stepper */
.stepper{display:flex;flex-wrap:wrap;gap:6px 4px;justify-content:center;width:100%}
.stepper__item{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:20px;font-size:12px;font-weight:600;color:var(--text-faint)}
.stepper__dot{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--border-2);color:var(--text-muted);font-size:11px;flex:none;
}
.stepper__item.is-active{color:var(--accent-hover)}
.stepper__item.is-active .stepper__dot{background:var(--accent);color:var(--on-solid)}
.stepper__item.is-done{color:var(--ok)}
.stepper__item.is-done .stepper__dot{background:var(--ok-wash);color:var(--ok)}
@media(max-width:560px){ .stepper__label{display:none} }

/* Requirement list */
.req-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.req{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:10px;border:1px solid var(--border-2);background:var(--bg-surface)}
.req__icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.req.is-ok .req__icon{background:var(--ok-wash);color:var(--ok)}
.req.is-fail{border-color:var(--danger-line);background:var(--danger-wash)}
.req.is-fail .req__icon{background:var(--danger-wash-2);color:var(--danger)}
.req.is-warn .req__icon{background:var(--warn-wash);color:var(--warn)}
.req__body{display:flex;flex-direction:column;gap:2px}
.req__label{font-weight:600;font-size:13.5px;color:var(--text)}
.req__tag{font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-app);border:1px solid var(--border-2);border-radius:12px;padding:0 7px;margin-left:6px}
.req__hint{font-size:12.5px;color:var(--text-2)}

/* Info list */
.info-list{display:flex;flex-direction:column;gap:9px;margin:4px 0 8px;padding:14px;background:var(--bg-app);border-radius:10px}
.info-list__row{display:flex;align-items:center;gap:9px;color:var(--text-2);font-size:13.5px}
.info-list__row .icon{color:var(--ok);flex:none}
.info-list code{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;font-size:12.5px}

/* Success */
.wizard__success{text-align:center;display:flex;flex-direction:column;align-items:center}
.wizard__success .info-list{text-align:left;width:100%}
.success-badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--ok-wash);color:var(--ok);margin-bottom:8px}
.success-badge .icon{width:30px;height:30px}
.success-badge--text-muted{background:var(--accent-wash);color:var(--accent)}

/* --- Tables --------------------------------------------------------------- */
.card--flush{padding:0;overflow:hidden}
/* A titled flush card (header + edge-to-edge table/list): give the header its own
   padding + divider so the title isn't jammed into the padding:0 corner. */
.card--flush > .card__head{padding:14px 16px;margin-bottom:0;border-bottom:1px solid var(--border-2)}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead th{
  text-align:left;font-weight:600;color:var(--text-muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-app);
}
.table tbody td{padding:12px 16px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--hover)}
.table .muted{color:var(--text-muted)}
.table__actions{white-space:nowrap;text-align:right}
/* Action cells: uniform icon+label buttons, right-aligned with even spacing. */
td.table__actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap}
.table__actions form{display:inline-flex;margin:0}
.table__actions .btn{margin:0}
/* Kebab: JS packs row actions into a single 3-dot menu (see FFP.kebab). The cell
   collapses to just the dots (centred under the "Actions" header), giving tables
   more room for data. */
/* Narrow, centred column so the ⋮ dots line up directly under the "Actions"
   heading (high specificity to beat `.table thead th`'s left-align). */
.table th.table__actions,.table td.table__actions{width:64px;text-align:center;padding-left:6px;padding-right:10px}
td.table__actions{justify-content:center}
/* Anti-FOUC: when JS is on, hide the raw inline actions until FFP.kebab moves
   them into the (hidden) menu — otherwise they flash as an open list on load.
   Without JS (.js absent) the inline buttons show normally. */
.js td.table__actions > a,.js td.table__actions > form,.js td.table__actions > button{display:none}
.kebab{display:inline-flex}
.kebab__btn{width:30px;height:30px;color:var(--text-faint)}
.kebab__btn:hover{color:var(--text)}
.kebab__menu{min-width:168px}
/* Only lay the menu out when it's actually open — [hidden] must still hide it. */
.kebab__menu:not([hidden]){display:flex;flex-direction:column;gap:2px}
.kebab__menu form{display:block;margin:0;width:100%}
.kebab__menu .btn{width:100%;justify-content:flex-start;gap:9px;height:auto;padding:9px 10px;border:none;background:none;box-shadow:none;border-radius:8px;font-weight:500;white-space:normal;text-align:left}
.kebab__menu .btn:hover{background:var(--hover)}
.kebab__menu .btn--danger-ghost,.kebab__menu .btn--danger-ghost:hover{color:var(--danger)}
/* Table tools: search + column filters + page size + pager (FFP.tableTools). */
.tt-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tt-bar .tt-search{min-width:200px;flex:0 1 260px}
.tt-bar .tt-filter{width:auto}
.tt-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.tt-size-label{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:12.5px;white-space:nowrap}
.tt-size-label .tt-size{width:auto}
.tt-count{font-size:12.5px;white-space:nowrap}
.tt-pager{display:flex;gap:4px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.tt-page{
  min-width:32px;height:32px;padding:0 9px;border:1px solid var(--border);
  background:var(--bg-surface);color:var(--text-2);border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.tt-page:hover:not(:disabled):not(.is-active){background:var(--hover);border-color:var(--text-muted)}
.tt-page.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-solid);cursor:default}
.tt-page:disabled{opacity:.4;cursor:not-allowed}
.tt-gap{padding:0 4px;color:var(--text-muted);font-size:13px}
/* In flush cards the table sits edge-to-edge; give the tools some breathing room. */
.card--flush .tt-bar,.card--flush .tt-pager{padding-left:16px;padding-right:16px}
.card--flush .tt-bar{padding-top:14px}
/* Bulk actions: checkbox column + action controls (FFP.bulk). */
.table th.bulk-col,.table td.bulk-col{width:34px;text-align:center;padding-left:12px;padding-right:6px}
.bulk-col input[type=checkbox]{width:15px;height:15px;cursor:pointer;vertical-align:middle}
/* Integrated into the table-tools bar (same style as the rest of the toolbar). */
.tt-bulk{display:flex;align-items:center;gap:10px}
.tt-bulk[hidden]{display:none}
.tt-bulk__count{font-size:13px;font-weight:600;white-space:nowrap;color:var(--text)}
.tt-bulk__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulkbar{
  display:flex;align-items:center;gap:14px;margin-bottom:10px;padding:9px 14px;
  background:var(--text);color:var(--on-solid);border-radius:10px;box-shadow:var(--shadow-md);
}
.bulkbar__count{font-size:13px;font-weight:600;white-space:nowrap}
.bulkbar__actions{display:flex;align-items:center;gap:8px}
.bulkbar__actions .btn--ghost{background:var(--on-solid-tint);border-color:transparent;color:var(--on-solid)}
.bulkbar__actions .btn--ghost:hover{background:var(--on-solid-tint-hover)}
/* Sitewide notice banner — advert-style strip at the very top. */
.noticebar{display:flex;align-items:stretch;flex-wrap:wrap;gap:1px;margin-bottom:16px;border-radius:var(--r,12px);overflow:hidden;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover));box-shadow:var(--shadow-md)}
.noticebar__item{display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--on-solid);flex:1 1 260px;min-width:0}
.noticebar__icon{display:inline-flex;flex:none;opacity:.95}
.noticebar__body{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.noticebar__title{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noticebar__text{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noticebar__actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.noticebar__link{color:var(--on-solid);font-weight:700;font-size:12px;text-decoration:underline;white-space:nowrap}
.noticebar__x{background:var(--on-solid-tint);border:none;color:var(--on-solid);width:22px;height:22px;border-radius:6px;font-size:16px;line-height:1;cursor:pointer;padding:0}
.noticebar__x:hover{background:var(--on-solid-tint-hover)}
.noticebar__more{display:flex;align-items:center;padding:0 14px;color:var(--on-solid);font-weight:700;font-size:12px;background:var(--on-solid-tint)}
/* Persistent task banner (top of every page) + task rows. */
.taskbar{margin-bottom:16px}
.taskbar__d{border:1px solid var(--accent);border-radius:var(--r,12px);background:var(--accent-wash);overflow:hidden}
.taskbar__sum{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.taskbar__sum::-webkit-details-marker{display:none}
.taskbar__badge{background:var(--danger);color:var(--on-solid);font-size:12px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.taskbar__title{font-weight:650;color:var(--text);display:inline-flex;align-items:center;gap:6px}
.taskbar__chev{margin-left:auto;color:var(--accent);transition:transform .15s}
.taskbar__d[open] .taskbar__chev{transform:rotate(180deg)}
.taskbar__list{padding:2px 12px 12px;display:flex;flex-direction:column;gap:6px}
.taskrow{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.taskrow.is-unread{border-left:3px solid var(--accent)}
.taskrow__pri{width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-muted)}
.taskrow__pri--high{background:var(--danger)}
.taskrow__pri--normal{background:var(--warn)}
.taskrow__pri--low{background:var(--text-muted)}
.taskrow__body{display:flex;flex-direction:column;min-width:0;flex:1}
.taskrow__title{font-weight:600;color:var(--text);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taskrow__due{color:var(--text-muted);font-size:12px}
.taskrow__actions{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.taskbar__more{font-size:12.5px;color:var(--accent);font-weight:600;padding:4px 2px}
/* Mobile: give the task title the full width and drop the buttons onto their own
   row below it (otherwise the title is squeezed to an ellipsis). */
@media(max-width:640px){
  .taskrow{flex-wrap:wrap}
  .taskrow__body{flex:1 1 auto}
  .taskrow__title{white-space:normal}
  .taskrow__actions{flex:1 1 100%;justify-content:flex-start;margin-top:8px}
  .taskrow__actions .btn{flex:1 1 auto;justify-content:center}
}
.task-people{max-height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.taskrow__repeat{display:inline-flex;vertical-align:middle;color:var(--accent);margin-left:4px}
/* Manage-tasks HubSpot-style tabs + recurrence controls. */
.task-tabs{margin-bottom:14px;flex-wrap:wrap}
.task-tabs__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--bg-app);color:var(--text-muted);font-size:11px;font-weight:700}
.segmented__btn.is-active .task-tabs__count{background:var(--accent-wash);color:var(--accent-hover)}
.repeat-opts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;padding:10px 12px;background:var(--bg-app);border:1px solid var(--border-2);border-radius:10px;font-size:13.5px}
.repeat-opts__until{display:inline-flex;align-items:center;gap:6px}
/* Notice board (feed page). */
.notice-feed{display:flex;flex-direction:column;gap:12px}
.notice-item.is-unread{border-left:3px solid var(--accent)}
.notice-item__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.notice-item__title{font-size:15px;font-weight:650;color:var(--text);margin:0}
.notice-item__meta{margin-left:auto;color:var(--text-muted);font-size:12px;white-space:nowrap}
.notice-item__pin{color:var(--accent);display:inline-flex}
.notice-item__body{color:var(--text-2);font-size:13.5px;line-height:1.55}
.notice-item__body p{margin:0 0 8px}
.notice-item__foot{margin-top:10px}
.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.cell-user{display:flex;align-items:center;gap:10px}
.cell-user__text{display:flex;flex-direction:column;line-height:1.3}
.cell-user__name{font-weight:600;color:var(--text)}
.cell-user__mail{color:var(--text-muted);font-size:12.5px}
.avatar--sm{width:32px;height:32px;font-size:11px}
.crumb{color:var(--accent);font-weight:600}

/* Status pill */
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.status__dot{width:7px;height:7px;border-radius:50%}
.status--on{color:var(--ok)}
.status--on .status__dot{background:var(--ok)}
.status--off{color:var(--text-muted)}
.status--off .status__dot{background:var(--text-faint)}
.chip--sm{padding:2px 8px;font-size:11px}

/* Stat as link */
.stat--link{transition:border-color .12s,box-shadow .12s,transform .12s}
.stat--link:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}

/* --- Dropdown ------------------------------------------------------------- */
.dropdown{position:relative}
.dropdown__menu{background:var(--bg-raised);
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:230px;background:var(--bg-surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:6px;z-index:50;
}
.dropdown__head{padding:10px 10px 12px;border-bottom:1px solid var(--border-2);margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.dropdown__name{font-weight:600;color:var(--text)}
.dropdown__mail{font-size:12.5px;color:var(--text-muted)}
.dropdown__head .chip{align-self:flex-start;margin-top:4px}
.dropdown__form{display:block}
.dropdown__item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 10px;border-radius:8px;border:none;background:transparent;
  color:var(--text-2);font-weight:500;font-size:13.5px;text-align:left;
}
.dropdown__item:hover{background:var(--hover);color:var(--text)}
.dropdown__item .icon{color:var(--text-faint)}
.dropdown__item--danger{color:var(--danger)}
.dropdown__item--danger:hover{background:var(--danger-wash);color:var(--danger)}
.dropdown__item--danger .icon{color:var(--danger)}

/* =============================================================================
   Phase 2 — settings tabs, toolbars, key/value, code, pager
   ========================================================================== */

/* Tab bar — a clean segmented control (pills in a rounded track). Styles both
   `.tab` (current markup) and the legacy `.tabbar__tab`. */
.tabbar{
  display:inline-flex;gap:3px;max-width:100%;overflow-x:auto;
  padding:4px;margin:2px 0 18px;
  background:var(--bg-app);border:1px solid var(--border-2);border-radius:11px;
}
.tabbar::-webkit-scrollbar{height:0}
.tab,.tabbar__tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;
  border:none;background:transparent;cursor:pointer;
  transition:background .12s,color .12s,box-shadow .12s;
}
.tab .icon,.tabbar__tab .icon{color:currentColor;opacity:.85}
.tab:hover,.tabbar__tab:hover{color:var(--text);background:var(--bg-surface)}
.tab.is-active,.tabbar__tab.is-active{background:var(--bg-surface);color:var(--accent-hover);box-shadow:var(--shadow-sm)}
.tab.is-active .icon,.tabbar__tab.is-active .icon{opacity:1}

/* Section toolbar (filter/actions row above a table) */
.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-toolbar__hint{color:var(--text-muted);font-size:13.5px}
.section-toolbar__actions{display:flex;gap:8px;align-items:center}
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input--sm{padding:7px 10px;font-size:13px;border-radius:8px;width:auto}
.input-row{display:flex;gap:8px;align-items:center}
.input-row .input{flex:1}

/* Key/value list */
.kv{display:flex;flex-direction:column;gap:0}
.kv__row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--border-2)}
.kv__row:last-child{border-bottom:none}
.kv__k{color:var(--text-muted);font-weight:500;flex:none}
.kv__v{color:var(--text);font-weight:500;text-align:right;word-break:break-word}
.kv__v .muted{color:var(--text-faint);font-weight:400}

.divider{height:1px;background:var(--border-2);margin:18px 0}

/* Code / trace block */
.codeblock{
  background:var(--chrome);color:var(--text-on-dark);padding:14px 16px;border-radius:10px;
  overflow-x:auto;font-size:12.5px;line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;margin:0;
}

/* Clamp long cell text */
.clamp{display:block;max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:720px){ .clamp{max-width:28ch} }

/* Clickable table rows */
.row-link{cursor:pointer}
.row-link:hover{background:var(--hover)}

/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0}
.pager__info{color:var(--text-muted);font-size:13px}
.btn.is-disabled{opacity:.45;pointer-events:none}

/* =============================================================================
   Phase 3 — Documents module
   ========================================================================== */

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin-bottom:-4px}
.breadcrumb a{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-weight:500}
.breadcrumb a:hover{color:var(--accent-hover)}
.breadcrumb__sep{color:var(--text-faint)}
.breadcrumb__here{color:var(--text);font-weight:600}
.page-title__icon{display:inline-flex;vertical-align:-4px;color:var(--accent)}
.page-title__icon .icon{width:22px;height:22px}

/* Section cards */
.section-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.section-card{display:flex;flex-direction:column;gap:12px;transition:border-color .12s,box-shadow .12s,transform .12s}
.section-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.section-card__icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-hover)}
.section-card__name{font-weight:600;font-size:15px;color:var(--text)}
.section-card__desc{display:block;color:var(--text-muted);font-size:13px;margin-top:2px}
.section-card__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
/* Board tiles: the whole card is a link, so the delete control is layered over
   it rather than nested inside. Revealed on hover/focus so the grid stays calm. */
.section-card-wrap{position:relative;display:flex}
.section-card-wrap > .section-card{flex:1}
.section-card__del{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .12s}
.section-card-wrap:hover .section-card__del,
.section-card__del:focus-within{opacity:1}
.icon-btn--sm{width:30px;height:30px;border-radius:7px}
.icon-btn--sm:hover{background:var(--hover-strong);color:var(--danger)}

/* Document grid */
.doc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.doc-card{
  display:flex;flex-direction:column;gap:10px;padding:16px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);
  cursor:pointer;transition:border-color .12s,box-shadow .12s;
}
.doc-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.doc-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}
.doc-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.doc-card__name{font-weight:600;color:var(--text);line-height:1.35}
.doc-card__meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--text-muted)}
.doc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:4px}
.doc-card__hint{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-faint)}
.doc-card__actions{display:flex;gap:6px;flex-wrap:wrap}

/* File-type badge */
.filetype{
  display:inline-grid;place-items:center;min-width:42px;height:24px;padding:0 8px;
  background:var(--text);color:var(--on-solid);border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
}
.filetype--sm{min-width:36px;height:22px;font-size:10px}
.tag{display:inline-block;background:var(--bg-app);border:1px solid var(--border-2);border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;color:var(--text-2)}

/* Document list cell */
.cell-doc{display:flex;align-items:center;gap:10px}
.cell-doc__name{font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Segmented control (grid/list toggle) */
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--bg-surface)}
.segmented__btn{display:grid;place-items:center;width:38px;height:36px;color:var(--text-muted);border-right:1px solid var(--border)}
.segmented__btn:last-child{border-right:none}
.segmented__btn:hover{background:var(--hover);color:var(--text)}
.segmented__btn.is-active{background:var(--accent-wash);color:var(--accent-hover)}
/* Text-label variant (e.g. Month / Quarter / Year) — size to content, not the 38px icon width. */
.segmented--text .segmented__btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;height:34px;padding:0 14px;font-size:13px;font-weight:600;white-space:nowrap}

/* Detail layout */
.detail-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){ .detail-grid{grid-template-columns:1.4fr 1fr;align-items:start} }
@media(min-width:860px){ .detail-grid--wide{grid-template-columns:3fr 1fr} }
/* Even 50/50 split (responsive) — e.g. onboarding profile + checklist. */
@media(min-width:860px){ .detail-grid.detail-grid--even{grid-template-columns:1fr 1fr} }
/* Three equal columns (responsive) — e.g. the Sales Force member overview. */
@media(min-width:760px){ .detail-grid.detail-grid--3{grid-template-columns:1fr 1fr} }
@media(min-width:1120px){ .detail-grid.detail-grid--3{grid-template-columns:1fr 1fr 1fr} }

/* --- ROI attrition schedule editor --------------------------------------- */
/* The month boxes auto-fill as many columns as the (now wide) card allows, so
   the labels are no longer crammed into a fixed 10-across grid. */
.roi-attr{margin-top:12px}
.roi-attr__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-bottom:14px}
.roi-attr__months{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.roi-attr__months .input{width:84px;text-align:center}
.roi-attr__head .field__note{margin:0;flex:1 1 260px;min-width:220px}
.roi-attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.roi-attr-cell{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-muted)}
.roi-attr-cell .input{width:100%;text-align:center;padding-left:6px;padding-right:2px}
.roi-attr-cell.is-hidden{display:none}

/* Version timeline */
/* Version-history timeline (own namespace — a second .timeline exists for the
   activity log further down and would otherwise clobber this layout). */
.vtimeline{position:relative;margin:0;padding:0 0 0 22px;list-style:none}
.vtimeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--border)}
.vtimeline__item{position:relative;padding:0 0 18px}
.vtimeline__item:last-child{padding-bottom:0}
.vtimeline__dot{position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--border);border:2px solid var(--bg-surface);box-shadow:0 0 0 2px var(--border)}
.vtimeline__item.is-current .vtimeline__dot{background:var(--ok);box-shadow:0 0 0 2px var(--ok-wash)}
.vtimeline__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vtimeline__ver{font-weight:700;color:var(--text)}
.vtimeline__dl{margin-left:auto}
.vtimeline__note{margin:6px 0 4px;color:var(--text-2);font-size:13.5px}
.vtimeline__meta{font-size:12px;color:var(--text-faint)}

/* Radios & pickers */
.radio-row{display:flex;gap:18px;flex-wrap:wrap}
.radio{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--text-2)}
.radio input{width:16px;height:16px;accent-color:var(--accent)}
.role-picker{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;padding:12px;background:var(--bg-app);border-radius:9px}
/* A wide, scrollable grid — the set is long enough that a flex-wrap row would
   push the rest of the form off the screen. */
.icon-picker{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;
  max-height:270px;overflow-y:auto;
  padding:10px;background:var(--bg-app);
  border:1px solid var(--border-2);border-radius:10px;
}
.icon-picker__opt{
  position:relative;aspect-ratio:1;display:grid;place-items:center;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;
  cursor:pointer;color:var(--text-muted);
  transition:border-color .12s,color .12s,background .12s,transform .12s;
}
.icon-picker__opt:hover{color:var(--text);border-color:var(--text-faint);transform:translateY(-1px)}
.icon-picker__opt:focus-within{outline:none;box-shadow:0 0 0 3px var(--accent-wash);border-color:var(--accent)}
/* .is-active is server-rendered; :has() moves the highlight the moment you
   click, and the JS in app.js keeps the class in step for older browsers. */
.icon-picker__opt.is-active,
.icon-picker__opt:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--accent-hover)}
.icon-picker__opt input{position:absolute;opacity:0;width:0;height:0}

/* Slide-over panel */
.panel-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:60;animation:fade .15s ease}
.panel{
  position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;z-index:70;
  background:var(--bg-surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;
}
.panel.is-open{transform:translateX(0)}
.panel__content{background:var(--bg-surface);display:flex;flex-direction:column;height:100%;overflow:hidden}
.panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 14px;border-bottom:1px solid var(--border-2)}
.panel__eyebrow{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
.panel__title{font-size:17px;font-weight:700;color:var(--text);margin-top:2px}
.panel__sub{font-size:13px;color:var(--text-muted);margin:3px 0 0}
.panel__body{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
/* Tighten default gaps inside a preview panel so kv/dividers own their spacing. */
.panel__body>.divider{margin:6px 0}
.panel__body .kv{gap:0}
.panel__body .panel__eyebrow{margin-bottom:-4px}
.panel__loading{padding:40px;text-align:center;color:var(--text-muted)}
.panel__actions{display:flex;gap:8px;align-items:stretch}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){ .panel{transition:none} }

/* =============================================================================
   Phase 5 — Reviews module
   ========================================================================== */
.review-card{display:flex;flex-direction:column;gap:12px}
.review-card__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review-card__swatch{width:26px;height:26px;border-radius:8px;flex:none;box-shadow:inset 0 0 0 1px var(--border)}
.review-card__client{font-weight:700;font-size:15px;color:var(--text)}
.review-card__title{font-size:13px;color:var(--text-muted);margin-top:2px}
.review-card__link{display:flex;align-items:center;gap:8px;background:var(--bg-app);border:1px solid var(--border-2);border-radius:9px;padding:7px 8px 7px 10px}
.review-card__link code{flex:1;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-card__foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.review-card__date{margin-left:auto;font-size:11.5px;color:var(--text-faint)}

/* =============================================================================
   Modal — custom confirm / prompt / unsaved-changes (replaces window.confirm)
   ========================================================================== */
.modal-host{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.modal-host[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:var(--scrim);animation:fade .12s ease}
.modal{
  position:relative;z-index:1;width:100%;max-width:460px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-lg);padding:24px;
  animation:pop .14s cubic-bezier(.2,.9,.3,1.2);
}
.modal__title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px}
.modal__msg{color:var(--text-2);line-height:1.55;font-size:14px}
.modal__field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
/* Actions sit on ONE line (never stacked). They wrap only as a last resort on
   very narrow screens, and even then stay horizontal (grow to share the row). */
.modal__actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:20px;flex-wrap:nowrap}
.modal__actions .btn{white-space:nowrap}
body.has-modal{overflow:hidden}

/* Deal associations (many contacts/clients) ================================= */
.assoc{display:flex;flex-direction:column;gap:8px}
.assoc__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
.assoc__chips{display:flex;flex-wrap:wrap;gap:6px}
.assoc__chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:var(--bg-surface)}
.assoc__x{border:0;background:none;cursor:pointer;color:var(--text-2);padding:0;display:inline-flex;align-items:center}
.assoc__x:hover{color:var(--danger)}
.assoc__add{display:flex;gap:6px;align-items:center}
.assoc__add .ss{flex:1}

/* Deal board cards — labelled data view (Phase UI) ========================== */
.kard--deal{gap:8px}
.kard--deal .kard__title{font-weight:700;color:var(--accent-hover,var(--text))}
.kard-kv{margin:0;display:flex;flex-direction:column;gap:3px}
.kard-kv__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.kard-kv__row dt{color:var(--text-2);margin:0}
.kard-kv__row dd{margin:0;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.kard-kv__amount{font-weight:700}
.kard-kv__row dd.is-overdue{color:var(--danger)}
.kard__client{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);border-top:1px solid var(--border);padding-top:6px;margin-top:2px}

/* Overflow fixes: version-history row keeps its Download in-bounds =========== */
.timeline__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.timeline__dl{margin-left:auto}
/* Campaign-reviews card: let the link + action rows wrap instead of clipping */
.review-card__foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.review-card__link{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.review-card__link code{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Searchable select (typeahead) ============================================= */
.ss{position:relative}
.ss__field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;cursor:pointer}
.ss__field::after{content:"";width:8px;height:8px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(45deg);margin-top:-3px;flex:0 0 auto}
.ss__pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:8px;display:flex;flex-direction:column;gap:6px;max-height:280px}
.ss__pop[hidden]{display:none}
.ss__list{list-style:none;margin:0;padding:0;overflow:auto}
.ss__opt{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:14px}
.ss__opt:hover{background:var(--hover)}
.ss__opt.is-selected{background:var(--accent-wash);color:var(--accent-hover);font-weight:600}
.ss__empty{padding:8px 10px;color:var(--text-2);font-size:13px}

/* Overlays (trigger-opened modals) ========================================== */
.overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.overlay[hidden]{display:none}
.overlay__backdrop{position:fixed;inset:0;background:var(--scrim)}
.overlay__panel{position:relative;z-index:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:22px;width:100%;max-width:720px;max-height:90vh;overflow:auto}
.overlay__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.overlay__head .card__title{display:flex;align-items:center;gap:8px}

/* Calendar month/quarter/year views ========================================= */
.cal-multi{display:grid;gap:16px}
.cal-multi--quarter{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cal-multi--year{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cal-range{display:inline-flex;align-items:center;gap:8px}
.cal-range__label{font-weight:600;min-width:130px;text-align:center}
.cal--mini .cal__head{display:flex;margin-bottom:6px;justify-content:center}
.cal--mini .cal__title{font-size:13px;font-weight:600}
.cal--mini .cal__cell{min-height:34px;padding:3px 4px}
.cal--mini .cal__num{font-size:11px}
.cal--mini .cal__dow{font-size:10px}
.cal__minidots{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.cal__minidot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Calendar drag-to-reschedule =============================================== */
.cal__grid[data-new] .cal__cell:not(.cal__cell--pad){cursor:pointer}
.cal__grid[data-new] .cal__cell:not(.cal__cell--pad):hover{background:var(--accent-wash)}
.cal__event[draggable="true"]{cursor:grab}
.cal__event.is-dragging{opacity:.4}
.cal__cell--over{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* Sortable tables (Phase H) ================================================= */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--text)}
.th-sort::after{content:"\2195";opacity:.35;margin-left:6px;font-size:11px}
.th-sort.is-sorted[data-dir="asc"]::after{content:"\2191";opacity:.9}
.th-sort.is-sorted[data-dir="desc"]::after{content:"\2193";opacity:.9}

/* File preview lightbox (Phase G) =========================================== */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.lightbox__backdrop{position:fixed;inset:0;background:var(--scrim)}
.lightbox__panel{position:relative;z-index:1;background:var(--bg-surface);border-radius:12px;box-shadow:var(--shadow-lg);max-width:min(1000px,95vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.lightbox__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.lightbox__name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lightbox__img{max-width:100%;max-height:82vh;object-fit:contain;display:block;margin:auto;background:var(--scrim)}
.lightbox__frame{width:min(90vw,1000px);height:82vh;border:0;background:var(--bg-surface)}

/* To-do redesign (Phase F) ================================================== */
.todo-layout{display:grid;grid-template-columns:3fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.todo-layout{grid-template-columns:1fr}}
.todo-layout__side .card{position:sticky;top:16px}
.todo-list[draggable="true"]{cursor:default}
.todo-list.is-dragging{opacity:.5}
.todo-list__title{display:flex;align-items:center;gap:8px}
.todo-list__grip{cursor:grab;color:var(--text-2);letter-spacing:-2px;user-select:none;font-size:14px}
.mini-edit__form--wide{min-width:300px}
.mini-edit__form--wide .input{width:100%}

/* Project logos + progress (Phase E) ======================================== */
.section-card__icon--img{padding:0;overflow:hidden;background:var(--bg-sunken)}
.section-card__icon--img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.project-logo{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.project-logo--lg{width:64px;height:64px}
.cell-project{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.cell-project .section-card__icon{width:34px;height:34px;flex:0 0 34px}
.cell-project__name{font-weight:600}
.progress-cell{display:flex;align-items:center;gap:8px;min-width:120px}
.progress{position:relative;height:7px;border-radius:999px;background:var(--border);flex:1;overflow:hidden}
.progress__bar{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;background:var(--ok);min-width:3px}
.progress__label{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}

/* Configurable dashboard (Phase D) ========================================== */
.dash-customize{margin-bottom:18px}
.dash-customize__summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;list-style:none}
.dash-customize__summary::-webkit-details-marker{display:none}
.dash-customize__body{margin-top:14px}
.dash-customize__cols{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
@media(max-width:720px){.dash-customize__cols{grid-template-columns:1fr}}
.dash-cust__list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dash-cust__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--border);background:var(--bg-surface)}
.dash-cust__item:first-child{border-top:none}
.dash-cust__item.is-dragging{opacity:.5}
.dash-cust__grip{cursor:grab;color:var(--text-2);letter-spacing:-2px;user-select:none}
.dash-cust__item .checkbox{margin:0}
.dash-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media(max-width:900px){ .dash-panels{grid-template-columns:1fr} }
.dash-tpl-list{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.dash-tpl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;font-size:14px}

/* Hill chart: numeric % control ============================================= */
.scope-pct{max-width:66px;text-align:right}
.scope-row__set{display:inline-flex;align-items:center;gap:5px;margin-left:auto}
.scope-pct__sign{color:var(--text-2);font-size:12px}

/* User edit: 2-column layout + role legend ================================== */
.user-edit{max-width:560px}
.user-edit--split{max-width:1200px;display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);gap:18px;align-items:start}
@media(max-width:900px){.user-edit--split{grid-template-columns:1fr;max-width:560px}}
.role-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-2)}
.role-legend strong{color:var(--text)}

/* Per-user permission editor (Users › Edit) ================================= */
.perm-group{margin:10px 0 4px}
.perm-group__title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);margin:14px 0 6px}
.perm-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--border);flex-wrap:wrap}
.perm-row:first-child{border-top:none}
.perm-row__label{display:flex;flex-direction:column;min-width:180px}
.perm-row__cap{font-weight:600;font-size:14px;color:var(--text)}
.perm-row__key{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.perm-row__choices{display:flex;gap:6px;flex-wrap:wrap}
.perm-choice{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;cursor:pointer;user-select:none}
.perm-choice em{font-style:normal}
.perm-choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.perm-choice--allow:has(input:checked){border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.perm-choice--deny:has(input:checked){border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.perm-choice input{margin:0}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){
  .modal__actions{flex-wrap:wrap}
  .modal__actions .btn{flex:1 1 auto;justify-content:center}
}

/* =============================================================================
   Notification bell
   ========================================================================== */
.bell-count{
  position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:20px;
  background:var(--accent);color:var(--on-solid);font-size:10.5px;font-weight:700;
  border:2px solid var(--bg-surface);
}
/* Task badge: same pill as the bell, read as "needs attention" rather than
   "something new happened", so it takes the danger tone instead of the accent.
   The border colour matches the chrome the topbar scopes --bg-surface to. */
.bell-count--warn{ background:var(--danger); }
.topbar__tasks{ text-decoration:none; }
.topbar__tasks:hover{ background:var(--hover); color:var(--text); }
.dropdown__menu--wide{min-width:340px;max-width:380px;padding:0;overflow:hidden}
.notif__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-2)}
.notif__title{font-weight:600;font-size:13.5px;color:var(--text)}
.notif__readall{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;padding:0}
.notif__readall:hover{text-decoration:underline}
.notif__list{max-height:380px;overflow-y:auto}
.notif__item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-2);transition:background .12s}
.notif__item:last-child{border-bottom:none}
.notif__item:hover{background:var(--hover)}
.notif__item.is-unread{background:var(--accent-wash)}
.notif__item.is-unread:hover{background:var(--accent-wash)}
.notif__icon{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--bg-surface);border:1px solid var(--border-2);color:var(--text-muted)}
.notif__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.notif__text{font-size:13px;font-weight:600;color:var(--text);line-height:1.35}
.notif__sub{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif__when{font-size:11px;color:var(--text-faint);margin-top:2px}
.notif__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.notif__empty{padding:28px 20px;text-align:center;color:var(--text-muted);font-size:13px}
.notif__empty .icon{color:var(--text-faint);margin-bottom:6px}
@media(max-width:480px){ .dropdown__menu--wide{min-width:280px;max-width:calc(100vw - 32px)} }

/* =============================================================================
   Date picker — always DD/MM/YYYY (a native date input follows browser locale)
   ========================================================================== */
.datefield{position:relative;display:flex;align-items:center}
.datefield__text{padding-right:40px}
.datefield.is-invalid .datefield__text{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-wash)}
.datefield__btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:none;border-radius:7px;color:var(--text-muted);
}
.datefield__btn:hover{background:var(--hover);color:var(--text)}
.datefield__pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;width:266px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:12px;
}
.dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp__title{font-weight:600;font-size:13.5px;color:var(--text)}
.dp__nav{
  width:28px;height:28px;border:1px solid var(--border);border-radius:7px;
  background:var(--bg-surface);color:var(--text-2);font-size:16px;line-height:1;
}
.dp__nav:hover{border-color:var(--text-faint);color:var(--text)}
.dp__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp__dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--text-faint);text-transform:uppercase}
.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp__pad{height:32px}
.dp__day{
  height:32px;border:none;border-radius:7px;background:transparent;
  color:var(--text-2);font-size:12.5px;font-weight:500;
}
.dp__day:hover{background:var(--hover);color:var(--text)}
.dp__day.is-today{box-shadow:inset 0 0 0 1px var(--border);font-weight:700;color:var(--text)}
.dp__day.is-selected{background:var(--accent);color:var(--on-solid);font-weight:600}
.dp__day.is-selected:hover{background:var(--accent-hover);color:var(--on-solid)}
.dp__foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-2)}
.dp__link{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:600;padding:0}
.dp__link:hover{text-decoration:underline}

/* Brand logo */
.brand__logo{max-width:100%;height:var(--brand-logo-h,34px);width:auto;object-fit:contain;display:block}
.auth__logo{max-width:220px;height:calc(var(--brand-logo-h,34px) * 1.7);width:auto;object-fit:contain;display:block}

/* =============================================================================
   Projects module (Basecamp-equivalent collaboration)
   ========================================================================== */
/* Tool tiles on the project home */
.tool-tile{display:flex;align-items:center;gap:14px;transition:border-color .12s,box-shadow .12s}
.tool-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.tool-tile__icon{width:44px;height:44px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-hover)}
.tool-tile__name{display:block;font-weight:600;color:var(--text)}
.tool-tile__count{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}

/* Activity feed */
.feed{display:flex;flex-direction:column;gap:2px;margin:0}
.feed__item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-2)}
.feed__item:last-child{border-bottom:none}
.feed__icon{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--bg-app);border:1px solid var(--border-2);color:var(--text-muted)}
.feed__text{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.4}
.feed__text a{color:var(--accent-hover);font-weight:500}
.feed__when{font-size:11.5px;color:var(--text-faint)}

/* Members */
.member-list{display:flex;flex-direction:column;gap:10px}
.member{display:flex;align-items:center;gap:10px}
.member__text{display:flex;flex-direction:column;line-height:1.3}
.member__name{font-weight:600;color:var(--text);font-size:13.5px}
.member__role{font-size:11.5px;color:var(--text-muted)}
.avatar--xs{width:24px;height:24px;font-size:9.5px}

/* Message board */
.msg-list{display:flex;flex-direction:column;gap:10px}
.msg-row{display:flex;align-items:center;gap:12px;padding:14px 16px}
.msg-row:hover{border-color:var(--accent)}
.msg-row__body{flex:1;min-width:0}
.msg-row__title{display:block;font-weight:600;color:var(--text)}
.msg-row__meta{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}

/* To-do board */
.todo-list{margin-bottom:16px}
.todo-item{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -8px;border-radius:8px;border-bottom:1px solid var(--border-2);transition:background .12s ease}
.todo-item:last-of-type{border-bottom:none}
.todo-item:hover{background:var(--hover)}
.todo-item.is-done .todo-item__title{color:var(--text-faint);text-decoration:line-through}
/* The whole label reads as a link into the to-do's detail (assignees, notes, subtasks). */
.todo-item__title{flex:1;min-width:0;color:var(--text);font-weight:500;cursor:pointer}
.todo-item:hover .todo-item__title{color:var(--accent-hover)}
.todo-item__meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* "Open" affordance — a chevron that fades in on hover so it's clear the row opens. */
.todo-item__go{flex:none;display:inline-flex;color:var(--text-faint);opacity:0;transition:opacity .12s ease}
.todo-item:hover .todo-item__go{opacity:1}
/* The checkbox: a rounded square, centred on the row. The wrapping form must not
   throw off vertical alignment, so make it a centred flex item. */
.todo-item > form.inline{display:inline-flex;align-items:center;flex:none}
.todo-check{width:22px;height:22px;flex:none;border-radius:6px;border:2px solid var(--border);background:var(--bg-surface);display:grid;place-items:center;color:var(--on-solid);cursor:pointer;padding:0;line-height:0;transition:border-color .12s,background .12s}
.todo-check:hover{border-color:var(--ok)}
.todo-check .icon{width:14px;height:14px}
.todo-check.is-checked{background:var(--ok);border-color:var(--ok)}
.todo-add{display:flex;gap:8px;align-items:center;margin-top:10px}
.todo-add .input{flex:1}
.page-title.is-done{text-decoration:line-through;color:var(--text-muted)}

/* Comments */
.comments__head{font-size:14px;font-weight:600;color:var(--text);margin:0 0 14px}
.comment{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--border-2)}
.comment__body{flex:1;min-width:0}
.comment__meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment__author{font-weight:600;color:var(--text);font-size:13.5px}
.comment__when{font-size:11.5px;color:var(--text-faint)}
.comment__del{margin-left:auto}
.comment-form{margin-top:16px;border-top:1px solid var(--border-2);padding-top:16px}
.comment-form__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.file-btn{cursor:pointer;position:relative;overflow:hidden}
.prose--sm{font-size:13.5px;line-height:1.6}
.prose--sm p{margin:0 0 8px}

/* Attachments */
.attach-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.attach{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--bg-app);border:1px solid var(--border-2);border-radius:9px}
.attach__icon{color:var(--text-muted);flex:none}
.attach__name{flex:1;min-width:0;font-weight:500;color:var(--accent-hover);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach__size{font-size:11.5px;color:var(--text-faint)}

/* RTE placeholder for empty editors */
.rte__area:empty::before,
.rte__area[data-empty="1"]::before{content:attr(data-placeholder);color:var(--text-faint)}

/* Docs & Files — file/folder rows */
.filerows{display:flex;flex-direction:column}
.filerow{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--border-2)}
.filerow:last-child{border-bottom:none}
.filerow:hover{background:var(--hover)}
.filerow__main{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:12px 4px;color:var(--text)}
.filerow__icon{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--bg-app);border:1px solid var(--border-2);color:var(--text-muted)}
.filerow__icon--folder{background:var(--accent-wash);color:var(--accent-hover);border-color:transparent}
.filerow__name{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow__meta{font-size:12px;color:var(--text-faint);white-space:nowrap}

/* Docs — rich content with tables */
.prose--doc{max-width:none}
.prose table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px}
.prose th,.prose td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.prose th{background:var(--bg-app);font-weight:600}

/* Calendar month grid */
.cal__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:14px}
.cal__title{font-weight:700;color:var(--text);font-size:18px;text-align:center}
.cal__nav{display:flex;align-items:center;gap:6px;justify-self:start}
.cal__navbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;color:var(--text-2);background:var(--bg-surface)}
.cal__navbtn:hover{background:var(--hover);color:var(--text)}
.cal__navsp{justify-self:end}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{text-align:center;font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;padding-bottom:4px}
.cal__cell{min-height:92px;border:1px solid var(--border-2);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:3px;background:var(--bg-surface)}
.cal__cell--pad{background:transparent;border:none}
.cal__cell.is-today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal__num{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.cal__event{display:block;font-size:11px;line-height:1.3;padding:2px 5px;border-radius:5px;background:var(--accent-wash);color:var(--accent-hover);border-left:2px solid var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal__event:hover{background:var(--accent-wash)}
.cal__time{font-weight:600}
@media(max-width:640px){ .cal__cell{min-height:56px}.cal__event{font-size:0;padding:3px}.cal__event::before{content:"•";font-size:14px} }

/* Upcoming list */
.upnext{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-2)}
.upnext:last-child{border-bottom:none}
.upnext__date{width:44px;flex:none;text-align:center;background:var(--bg-app);border:1px solid var(--border-2);border-radius:9px;padding:4px 0}
.upnext__d{display:block;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px;color:var(--text);line-height:1}
.upnext__m{display:block;font-size:10px;text-transform:uppercase;color:var(--text-muted)}
.upnext__body{min-width:0}
.upnext__title{display:block;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upnext__meta{display:block;font-size:12px;color:var(--text-muted)}

/* Bell "see all" footer */
.notif__seeall{display:block;text-align:center;padding:10px;font-size:12.5px;font-weight:600;color:var(--accent);border-top:1px solid var(--border-2)}
.notif__seeall:hover{background:var(--hover)}

/* --- Review editor -------------------------------------------------------- */
.tabpanel{display:flex;flex-direction:column;gap:16px}
/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so inactive panels would still render. Restore hiding explicitly. */
.tabpanel[hidden]{display:none}
.color-input{width:44px;height:40px;padding:2px;border:1px solid var(--border);border-radius:9px;background:var(--bg-surface);cursor:pointer;flex:none}

/* image pickers */
.img-preview{border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--bg-app);margin-bottom:8px}
.img-preview img{width:100%;height:120px;object-fit:cover;display:block}
.img-preview--logo{padding:12px;display:grid;place-items:center}
.img-preview--logo img{height:52px;width:auto;max-width:100%;object-fit:contain}
.img-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--border-2)}
.img-row:last-child{border-bottom:none;padding-bottom:0}
.img-row__thumb{width:130px;flex:none;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--bg-app);height:96px;display:grid;place-items:center}
.img-row__thumb img{width:100%;height:100%;object-fit:cover}
.img-row__empty{color:var(--text-faint)}
.img-row__fields{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}

/* rich text */
.rte{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-surface)}
.rte__bar{display:flex;gap:2px;flex-wrap:wrap;padding:6px;background:var(--bg-app);border-bottom:1px solid var(--border-2)}
.rte__btn{padding:5px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:600;line-height:1}
.rte__btn:hover{background:var(--bg-surface);border-color:var(--border);color:var(--text)}
.rte__area{min-height:150px;padding:14px 16px;outline:none;font-size:14.5px;line-height:1.7;color:var(--text)}
.rte__area:focus{box-shadow:inset 0 0 0 2px var(--accent-wash)}
.rte__area p{margin:0 0 10px}
.rte__area h3{font-size:16px;margin:16px 0 8px}
.rte__area ul,.rte__area ol{margin:0 0 10px;padding-left:22px}
.rte__area a{color:var(--accent)}

/* section blocks */
.sec{padding:0;margin-bottom:14px}
.sec__head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
.sec__head::-webkit-details-marker{display:none}
.sec__head::before{content:"▸";color:var(--text-faint);font-size:12px;transition:transform .15s}
.sec[open] > .sec__head::before{transform:rotate(90deg)}
.sec__name{font-weight:600;color:var(--text)}
.sec__meta{font-size:12px;color:var(--text-faint)}
.sec__tools{margin-left:auto;display:flex;gap:2px}
.sec > .form{padding:0 18px 18px}
.sec .icon-btn{width:30px;height:30px}
.sec__drag{cursor:grab;color:var(--text-faint);font-size:15px;line-height:1;user-select:none;padding:0 2px}
.sec__drag:active{cursor:grabbing}
.sec.is-dragging{opacity:.55;outline:2px dashed var(--accent);border-radius:12px}

/* gallery editor (multi-upload, drag to reorder, × to delete) */
.gallery-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:6px 0 14px}
.gallery-edit:empty{display:none}
.gallery-edit__item{position:relative;margin:0;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--bg-app);cursor:grab}
.gallery-edit__item:active{cursor:grabbing}
.gallery-edit__item img{width:100%;height:100px;object-fit:cover;display:block;pointer-events:none}
.gallery-edit__item.is-dragging{opacity:.5;outline:2px dashed var(--accent)}
.gallery-edit__x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:50%;background:var(--scrim);color:var(--on-solid);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.gallery-edit__x:hover{background:var(--danger)}
.gallery-add{cursor:pointer}

/* agency remuneration rate card */
.rem-wrap{overflow-x:auto;margin:4px 0}
.rem-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.rem-table th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);text-align:left;padding:8px;border-bottom:1px solid var(--border-2)}
.rem-table td{padding:5px 8px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.rem-table tr:last-child td{border-bottom:none}
.rem-table td:nth-child(2){min-width:180px}
.rem-table td:nth-child(3){min-width:130px}
.rem-table td:nth-child(4),.rem-table td:nth-child(5){width:120px}
.rem-row__drag{width:26px;text-align:center}
.rem-drag{cursor:grab;color:var(--text-faint);user-select:none;font-size:15px;line-height:1}
.rem-drag:active{cursor:grabbing}
.rem-row.is-dragging{opacity:.55;outline:2px dashed var(--accent)}
.rem-rate{font-weight:600}
.rem-rate.is-off{background:var(--bg-app);color:var(--text-faint)}
.rem-nosplit-cell{text-align:center}
.rem-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.subblock{border-top:1px solid var(--border-2);padding-top:14px;margin-top:4px}
.subblock__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:600;font-size:13px;color:var(--text)}
.subblock__head .muted{font-weight:400;color:var(--text-faint)}
.rows{display:flex;flex-direction:column;gap:8px}
.row-item{display:flex;align-items:center;gap:8px}
.row-item .input{flex:1;min-width:0}
.series-item{border:1px solid var(--border-2);border-radius:10px;padding:12px;background:var(--bg-app)}
.series-item__top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.series-item__top .input{flex:1}
.months{display:grid;grid-template-columns:repeat(12,minmax(58px,1fr));gap:6px;overflow-x:auto;padding-bottom:2px}
.month{display:flex;flex-direction:column;gap:3px}
.month span{font-size:10.5px;font-weight:600;color:var(--text-muted);text-align:center}
.month .input{padding:6px 4px;text-align:center;width:100%;max-width:none}
@media(max-width:900px){ .months{grid-template-columns:repeat(6,minmax(58px,1fr))} }

/* Phase 4 — collaboration bits */
.count-badge{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;
  background:var(--accent);color:var(--on-solid);border-radius:20px;font-size:11px;font-weight:700;
}
.detail-col{display:flex;flex-direction:column;gap:16px}
.subhead{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);margin:4px 0 10px}
.subhead .icon{color:var(--warn)}
a.cell-doc__name{color:var(--text)}
a.cell-doc__name:hover{color:var(--accent-hover)}

/* ==========================================================================
   Phase 3 — Card table, Hill charts, Reports, Search, Quick-nav
   ========================================================================== */

/* --- Card table (Kanban) ------------------------------------------------- */
.card-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:14px}
.card-col{flex:0 0 288px;max-width:288px;background:var(--bg-app);border:1px solid var(--border-2);border-radius:12px;display:flex;flex-direction:column}
.card-col--new{background:transparent;border-style:dashed}
.card-col__head{display:flex;align-items:center;gap:8px;padding:11px 12px 9px;border-top:3px solid var(--accent);border-radius:12px 12px 0 0}
.card-col__name{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.card-col__name span:not(.card-col__count){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-col__count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:20px;font-size:11px;color:var(--text-2);flex:none}
.card-col__tools form{margin:0}
/* Column rename: reads as the heading until you touch it, so the board does
   not look like a form. The input IS the heading — no edit-mode toggle. */
.card-col__rename{margin:0;flex:1;min-width:0}
.card-col__name-input{
  width:100%;font:inherit;font-size:14px;font-weight:700;color:var(--text);
  background:transparent;border:1px solid transparent;border-radius:7px;
  padding:3px 6px;margin:-3px -6px;
  text-overflow:ellipsis;
}
.card-col__name-input:hover{background:var(--hover);border-color:var(--border-2)}
.card-col__name-input:focus{background:var(--bg-surface);border-color:var(--accent);outline:none}
.card-col__tools .icon-btn:disabled{opacity:.3;cursor:default}
.card-col__tools .icon-btn:disabled:hover{background:transparent;color:var(--text-faint)}

/* Board labels: a pill carrying its colour, how many cards use it, and a way
   to remove it. The count is the point — an unused label says so. */
.label-list{display:flex;flex-wrap:wrap;gap:8px}
/* Installer: pick-one cards (new install vs restore from a backup). */
.choice{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--border);border-radius:11px;
  background:var(--bg-surface);cursor:pointer;
  transition:border-color .12s,background .12s;
}
.choice:hover{border-color:var(--border-firm);background:var(--hover)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.choice input[type="radio"]{margin-top:3px;flex:none}
.choice__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.choice__title{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--text)}
.choice__desc{font-size:13px;color:var(--text-muted);line-height:1.45}
.choice__extra{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.choice__extra[hidden]{display:none}

.label-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 4px 4px 9px;border:1px solid var(--border);border-left-width:3px;
  border-radius:20px;background:var(--bg-raised);font-size:12.5px;color:var(--text);
}
.label-pill form{margin:0;display:flex}
.label-pill__dot{width:9px;height:9px;border-radius:50%;flex:none}
.label-pill__name{font-weight:600}
.label-pill__count{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:20px;background:var(--bg-sunken);color:var(--text-muted);
  font-size:11px;font-weight:700;
}
.label-pill__x{
  width:20px;height:20px;display:grid;place-items:center;flex:none;
  border:none;border-radius:50%;background:transparent;color:var(--text-faint);
  font-size:15px;line-height:1;cursor:pointer;padding:0;
}
.label-pill__x:hover{background:var(--danger-wash);color:var(--danger)}

/* Prominent, always-visible horizontal scrollbar so the sideways scroll is
   obvious (especially on narrow screens where columns overflow). */
.card-board,.deal-board{scrollbar-width:auto;scrollbar-color:var(--border) transparent}
.card-board::-webkit-scrollbar,.deal-board::-webkit-scrollbar{height:12px}
.card-board::-webkit-scrollbar-track,.deal-board::-webkit-scrollbar-track{background:var(--bg-app);border-radius:20px}
.card-board::-webkit-scrollbar-thumb,.deal-board::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px;border:3px solid var(--bg-app)}
.card-board::-webkit-scrollbar-thumb:hover,.deal-board::-webkit-scrollbar-thumb:hover{background:var(--text-2)}
.card-col__list{display:flex;flex-direction:column;gap:8px;padding:4px 10px;min-height:36px;flex:1;border-radius:8px;transition:background .12s}
.card-col__list.is-over{background:var(--accent-wash)}
.card-col__add,.card-col__addcol{display:flex;gap:6px;padding:10px}
.card-col__add .input,.card-col__addcol .input{flex:1;min-width:0}
.kard{display:block;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:9px;padding:10px 12px;cursor:grab;box-shadow:var(--shadow-sm);text-decoration:none}
.kard:hover{border-color:var(--accent)}
.kard.is-dragging{opacity:.5;cursor:grabbing}
.kard{position:relative}
.kard__title{display:block;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4;padding-right:18px}
.kard__open{position:absolute;top:8px;right:8px;color:var(--text-faint);opacity:0;transition:opacity .12s}
.kard:hover .kard__open{opacity:1}
.board-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:14px}
.board-tools__grp{display:flex;gap:6px;align-items:center}

/* Inline "rename / edit" popover for container titles (columns, lists, folders) */
.card-col__tools{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.card-col__tools .icon-btn,.card-col__tools .btn--danger-ghost{color:var(--text-faint)}
.card-col__tools .icon-btn:hover{color:var(--danger)}
.mini-edit{position:relative;display:inline-flex}
.mini-edit>summary{cursor:pointer;color:var(--text-faint);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px}
/* Kill the default disclosure triangle across engines */
.mini-edit>summary{list-style:none}
.mini-edit>summary::-webkit-details-marker{display:none}
.mini-edit>summary::marker{content:""}
.mini-edit>summary:hover{color:var(--text);background:var(--hover)}
.mini-edit[open]>summary{color:var(--accent-hover);background:var(--accent-wash)}
.mini-edit__form{position:absolute;top:100%;right:0;z-index:30;margin-top:6px;width:230px;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);
  padding:12px;display:flex;flex-direction:column;gap:6px;text-align:left}
.mini-edit__form .field__label{margin:0}
.mini-edit__form .btn{align-self:flex-start;margin-top:4px}
.mini-edit__form .color-swatch{width:100%;height:32px}
.kard__meta{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}

/* --- Hill chart ---------------------------------------------------------- */
.hill{position:relative;width:100%;height:280px;margin:6px 0 4px;user-select:none}
.hill__svg{position:absolute;inset:0;width:100%;height:100%}
.hill__curve{stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.hill__mid{stroke:var(--border-2);stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.hill__ground{stroke:var(--border);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hill__labels{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:space-between;padding:0 8%;font-size:11.5px;color:var(--text-faint);font-weight:600;pointer-events:none}
.hill__dots{position:absolute;left:0;right:0;top:0;bottom:26px;pointer-events:none}
.hill-dot{position:absolute;transform:translate(-50%,50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:auto;cursor:grab}
.hill--readonly .hill-dot{cursor:default}
.hill-dot__pin{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2.5px solid var(--bg-surface);box-shadow:var(--shadow-md)}
.hill-dot__label{font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:6px;padding:1px 6px}
body.is-dragging-hill{cursor:grabbing;user-select:none}

.scope-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border-2)}
.scope-row:last-child{border-bottom:none}
.scope-row__dot{width:12px;height:12px;border-radius:50%;flex:none}
.scope-row__label{flex:1;min-width:0;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-row__pos{font-size:12px;font-weight:600;color:var(--text-2)}
.scope-add{display:flex;gap:6px;align-items:center;padding-top:12px}
.scope-add .input{flex:1;min-width:0}
.color-swatch{width:34px;height:34px;flex:none;padding:2px;border:1px solid var(--border-2);border-radius:8px;background:var(--bg-surface);cursor:pointer}

.snap-list{display:flex;flex-direction:column;gap:2px}
.snap{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none;border:1px solid transparent}
.snap:hover{background:var(--hover)}
.snap.is-active{background:var(--accent-wash);border-color:var(--accent)}
.snap__date{font-size:13px;font-weight:600;color:var(--text)}
.snap__note{font-size:12.5px;color:var(--text-2)}
.snap__by{font-size:11.5px;color:var(--text-faint)}

/* --- Reports ------------------------------------------------------------- */
.rstat{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .12s,box-shadow .12s}
.rstat:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.rstat__num{font-size:30px;font-weight:800;color:var(--text);line-height:1}
.rstat__num--danger{color:var(--danger)}
.rstat__label{font-size:13px;color:var(--text-2)}
.is-overdue{color:var(--danger);font-weight:600}

/* --- Search -------------------------------------------------------------- */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:12px;padding:8px 12px;margin-top:6px}
.search-bar .icon{color:var(--text-faint);flex:none}
.search-bar .input{flex:1;border:none;background:transparent;padding:6px 2px;box-shadow:none}
.search-bar .input:focus{box-shadow:none}
.hit-list{display:flex;flex-direction:column}
.hit{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--border-2);text-decoration:none}
.hit:last-child{border-bottom:none}
.hit:hover{background:var(--hover)}
.hit__icon{color:var(--text-faint);flex:none}
.hit__title{flex:1;min-width:0;color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit__project{font-size:12px;color:var(--text-faint);flex:none}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:48px 20px;color:var(--text-muted);text-align:center}
.empty .icon{width:28px;height:28px;color:var(--text-faint)}
kbd{display:inline-block;padding:1px 6px;font-size:11px;font-family:inherit;background:var(--bg-app);border:1px solid var(--border-2);border-bottom-width:2px;border-radius:5px;color:var(--text-2)}

/* --- Quick-nav palette (Cmd/Ctrl-K) -------------------------------------- */
.qn{position:fixed;inset:0;z-index:200;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;animation:qn-in .12s ease}
@keyframes qn-in{from{opacity:0}to{opacity:1}}
.qn__box{width:min(560px,92vw);background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.qn__input{width:100%;border:none;outline:none;padding:16px 18px;font-size:15px;color:var(--text);background:transparent;border-bottom:1px solid var(--border-2)}
.qn__results{max-height:52vh;overflow-y:auto}
.qn__item{display:flex;flex-direction:column;gap:1px;padding:10px 18px;text-decoration:none;border-left:2px solid transparent}
.qn__item.is-active{background:var(--accent-wash);border-left-color:var(--accent)}
.qn__label{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn__sub{font-size:12px;color:var(--text-faint)}
.qn__empty{padding:22px 18px;color:var(--text-muted);font-size:13.5px;text-align:center}

@media(max-width:720px){ .card-col{flex-basis:82vw;max-width:82vw} }

/* ==========================================================================
   Phase 4 — Campfire / Pings chat, thread list
   ========================================================================== */
.card--flush{padding:0;overflow:hidden}
.chat{display:flex;flex-direction:column;height:min(64vh,620px)}
.chat__log{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:12px}
.chat__empty{margin:auto;color:var(--text-muted)}
.chat-msg{display:flex;gap:10px;align-items:flex-start;max-width:80%}
.chat-msg--mine{margin-left:auto;flex-direction:row-reverse}
.chat-msg__bubble{background:var(--bg-app);border:1px solid var(--border-2);border-radius:12px;padding:8px 12px;min-width:0}
.chat-msg--mine .chat-msg__bubble{background:var(--accent-wash);border-color:transparent}
.chat-msg__head{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.chat-msg__author{font-size:12.5px;font-weight:700;color:var(--text)}
.chat-msg--mine .chat-msg__head{flex-direction:row-reverse}
.chat-msg__time{font-size:11px;color:var(--text-faint)}
.chat-msg__body{font-size:14px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.chat__composer{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--border-2);background:var(--bg-surface)}
.chat__input{flex:1;resize:none;min-height:38px;max-height:160px;line-height:1.4}
.chat__composer .btn{flex:none}

.thread-list{display:flex;flex-direction:column}
.thread{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border-2);text-decoration:none}
.thread:last-child{border-bottom:none}
.thread:hover{background:var(--hover)}
.thread__icon{color:var(--text-faint);flex:none}
.thread__title{flex:1;min-width:0;color:var(--text);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread__when{font-size:12px;color:var(--text-faint)}

/* Check-ins */
.checkin{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--border-2)}
.checkin:last-child{border-bottom:none}
.checkin__body{flex:1;min-width:0}
.checkin__prompt{color:var(--text);font-weight:600;font-size:14px}
.checkin__prompt a{color:var(--text);text-decoration:none}
.checkin__prompt a:hover{color:var(--accent-hover)}
.checkin__meta{font-size:12px;color:var(--text-faint);margin-top:2px}
.checkin__off{opacity:.6}

/* For You: snooze control beside each unread item */
.notif__row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-2)}
.notif__row:last-child{border-bottom:none}
.notif__row .notif__item{flex:1;border-bottom:none}
.notif__snooze{flex:none;display:flex;align-items:center;gap:6px;padding-right:12px}
.notif__snooze .input--sm{width:auto;padding:5px 8px}

/* ==========================================================================
   Phase 5 — Client Mode, My Bar
   ========================================================================== */
.checkbox--card{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-2);border-radius:10px;background:var(--bg-app);cursor:pointer}
.checkbox--card input{margin-top:3px}
.checkbox--card .field__hint{display:block;font-weight:400;margin-top:2px}
.chip--client{background:var(--accent-wash);color:var(--accent-hover);border-color:transparent}

/* My Bar */
.note{border:1px solid var(--border-2);border-radius:10px;margin-bottom:8px;padding:0 12px}
.note__summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;cursor:pointer;list-style:none}
.note__summary::-webkit-details-marker{display:none}
.note__title{font-weight:600;color:var(--text)}
.note__when{font-size:12px;color:var(--text-faint)}
.note[open]{padding-bottom:12px}
.copyrow{display:flex;gap:8px;align-items:center}
.copyrow .input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.form-actions--split{display:flex;justify-content:flex-start;gap:8px}

/* Integrations */
.token-reveal{display:flex;gap:8px;align-items:center;background:var(--accent-wash);border:1px solid var(--accent);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.token-reveal code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font-size:12.5px;color:var(--text)}
.wh{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--border-2)}
.wh:last-child{border-bottom:none}
.wh__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text)}
.wh__events{font-size:11.5px;color:var(--text-faint)}
.form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-inline .input{flex:1;min-width:180px}

/* ==========================================================================
   Deals module — pipeline board, deal cards, timeline
   ========================================================================== */
.deal-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.deal-board .card-col__head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.deal-board .card-col__head.is-won{border-top-color:var(--ok)}
.deal-board .card-col__head.is-lost{border-top-color:var(--danger)}
.stage-prob{font-size:11.5px;font-weight:600;color:var(--text-faint)}
.stage-total{padding:6px 12px 0;display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:600;color:var(--text)}
.stage-total .muted{font-weight:400}
.card-col__empty{padding:8px 12px;color:var(--text-faint)}
.deal-amount{display:block;font-size:13px;font-weight:700;color:var(--accent-hover);margin-top:4px}
.board-hint{display:flex;align-items:center;gap:6px;font-size:12.5px;margin:-6px 0 4px}
/* Board toolbar — My/All toggle + search (HubSpot-style). */
.board-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.board-search{display:flex;align-items:center;gap:8px;margin-left:auto}
.board-search__field{display:flex;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border);border-radius:9px;padding:0 10px;height:36px;color:var(--text-muted);transition:border-color .12s,box-shadow .12s}
.board-search__field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.board-search__field input{border:none;background:none;outline:none;font:inherit;color:var(--text);width:200px;max-width:44vw}
.board-search__field input::placeholder{color:var(--text-faint)}
@media(max-width:640px){.board-search{margin-left:0;width:100%}.board-search__field{flex:1}.board-search__field input{width:100%;max-width:none}}
.board-hint .icon{color:var(--text-faint)}

/* List view: filter bar, saved-view chips, footer */
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filter-bar .input{min-width:130px}
.filter-bar input[type=search]{flex:1;min-width:180px}
.view-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.view-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 12px;border-radius:20px;background:var(--bg-app);border:1px solid var(--border-2);font-size:12.5px}
.view-chip.is-active{background:var(--accent-wash);border-color:var(--accent)}
.view-chip a{color:var(--text);text-decoration:none;font-weight:600}
.view-chip__x{border:none;background:transparent;color:var(--text-faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.view-chip__x:hover{color:var(--danger)}
.chip--accent{background:var(--accent-wash);color:var(--accent-hover);border-color:transparent}
.list-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.table thead th a{color:var(--text-2);text-decoration:none}
.table thead th a:hover{color:var(--text)}

/* Pipeline funnel */
.funnel{display:flex;flex-direction:column;gap:10px}
.funnel__row{display:grid;grid-template-columns:150px 1fr minmax(160px,auto);gap:12px;align-items:center}
.funnel__label{display:flex;flex-direction:column;min-width:0}
.funnel__name{font-weight:600;color:var(--text);font-size:13.5px}
.funnel__prob{font-size:11.5px;color:var(--text-faint)}
.funnel__barwrap{display:flex;align-items:center;gap:8px;min-width:0}
.funnel__bar{height:24px;border-radius:6px;background:var(--accent);min-width:6px;transition:width .3s}
.funnel__bar.is-won{background:var(--ok)}
.funnel__bar.is-lost{background:var(--danger)}
.funnel__count{font-size:12.5px;font-weight:700;color:var(--text-2)}
.funnel__value{text-align:right;font-size:12.5px;color:var(--text);display:flex;flex-direction:column;gap:1px}
.openval{font-size:14px;margin-top:4px}
@media(max-width:640px){ .funnel__row{grid-template-columns:1fr;gap:4px} .funnel__value{text-align:left} }

/* Pipeline admin: sortable stage cards */
.stage-list{gap:8px}
.stage-kard{cursor:grab}
.stage-kard__row{display:flex;align-items:center;gap:8px}
.stage-kard__grip{color:var(--text-faint);flex:none;cursor:grab}
.stage-kard__name{font-weight:600;color:var(--text);flex:1;min-width:0}
.stage-kard__meta{display:flex;align-items:center;gap:6px;font-size:11.5px}
.stage-edit{margin-top:8px}
.stage-edit summary{cursor:pointer;font-size:12.5px;color:var(--accent-hover);list-style:none}
.stage-edit summary::-webkit-details-marker{display:none}
.stage-edit[open]{padding-top:8px}
.pipeline-picker{margin-right:2px}

.timeline{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.timeline__item{display:flex;gap:10px;align-items:flex-start;padding:8px 2px}
.timeline__icon{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg-app);border:1px solid var(--border-2);color:var(--text-2)}
.timeline__body{display:flex;flex-direction:column;min-width:0}
.timeline__text{font-size:13.5px;color:var(--text)}
.timeline__when{font-size:11.5px;color:var(--text-faint)}

/* =============================================================================
   v1.6.0 — conservative visual polish (Phase 3, Raven-inspired)
   Additive only: completes hover intents the base rules already declared in
   their `transition` lists, adds Raven's signature active-nav accent bar, and
   lifts clickable surfaces subtly. No palette / radius / layout token changes —
   the established Stripe-style look is preserved, just tightened.
   ========================================================================== */

/* Sidebar — signature left accent bar on the active item (inset shadow = no
   layout shift, no pseudo-element, no position dependency). */
.nav-item.is-active{box-shadow:inset 3px 0 0 var(--accent)}

/* Clickable card surfaces list `transform` in their transition but never used
   it — complete the intended lift-on-hover for a cohesive, premium feel. */
.stat--link:hover,
.section-card:hover,
.doc-card:hover,
.tool-tile:hover,
.rstat:hover{transform:translateY(-1px)}

/* Draggable board cards — add depth on hover to match the other surfaces. */
.kard:hover{box-shadow:var(--shadow-md)}

/* Primary action — a subtle lift so it reads as the main call to action. */
.btn--primary{transition:background .12s,border-color .12s,box-shadow .12s,color .12s,transform .12s}
.btn--primary:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}

/* Consistent focus ring on native controls that didn't already define one
   (accessibility + polish). Elements with an existing ring keep theirs — the
   value is identical, so keyboard focus never doubles up visually. */
select:focus-visible,
summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-wash)}

/* =============================================================================
   Onboarding module — checklist rows, rep portal, review controls
   ========================================================================== */
.ob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){ .ob-grid2{grid-template-columns:1fr} }

.ob-fieldset{border:1px solid var(--border-2);border-radius:var(--r);padding:14px 16px;margin:4px 0 12px}
.ob-fieldset>legend{padding:0 6px;font-size:12.5px;font-weight:700;color:var(--text-2)}

/* Checklist rows — card-style, shared by template editor, review + portal */
.ob-list{display:flex;flex-direction:column;gap:10px}
.ob-row{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border-2);border-radius:var(--r);background:var(--bg-surface);transition:border-color .12s,box-shadow .12s}
.ob-row:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}
.ob-row__icon{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--bg-app);border:1px solid var(--border-2);color:var(--text-2)}
.ob-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ob-row__title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:650;color:var(--text)}
.ob-row__actions{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ob-row.is-done{background:var(--ok-wash);border-color:var(--ok-line)}
.ob-row.is-done .ob-row__title{color:var(--text-2)}

/* Review rows stack their action bar full-width beneath the body. */
.ob-row--review{flex-wrap:wrap}
.ob-row--review .ob-row__actions{flex:1 1 100%;align-items:flex-start;margin-top:2px}

/* Completion check bubble (portal) */
.ob-check{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--border);background:var(--bg-surface);display:grid;place-items:center;color:var(--on-solid);transition:background .12s,border-color .12s}
.ob-check.is-done{background:var(--ok);border-color:var(--ok)}

/* Uploaded-file card — click to preview, separate download button */
.ob-filecard{display:flex;align-items:stretch;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--bg-surface);max-width:430px}
.ob-filecard__main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 10px;transition:background .12s}
.ob-filecard__main:hover{background:var(--hover)}
.ob-filecard__thumb{flex:none;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-hover)}
.ob-filecard__info{flex:1;min-width:0;display:flex;flex-direction:column}
.ob-filecard__name{font-weight:600;color:var(--text);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-filecard__sub{font-size:11.5px;color:var(--text-muted)}
.ob-filecard__eye{flex:none;color:var(--accent);display:inline-flex}
.ob-filecard__dl{flex:none;display:grid;place-items:center;width:42px;border-left:1px solid var(--border-2);color:var(--text-muted);transition:background .12s,color .12s}
.ob-filecard__dl:hover{background:var(--hover);color:var(--text)}

/* Review notes */
.ob-note{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--text-2);background:var(--bg-app);border-radius:8px;padding:7px 10px}
.ob-note--warn{background:var(--warn-wash);color:var(--warn)}

/* Review form (approve/reject inline) */
.ob-review{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-start;width:100%}
.ob-review .input{flex:1;min-width:180px;max-width:320px}

/* Upload control */
.ob-upload{margin:0}
.ob-upload__label{margin:0;display:inline-flex;align-items:center;gap:6px}

/* Add-item footer in the template editor */
.ob-additem{border-top:1px solid var(--border-2);margin-top:12px;padding-top:14px}
.ob-additem__opts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Rep portal hero */
.ob-hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.ob-hero__pct{font-size:32px;font-weight:800;color:var(--accent);line-height:1}
.ob-hero--done{background:var(--ok-wash);border-color:var(--ok-line)}
.ob-hero--done .ob-hero__pct{color:var(--ok)}

/* Admin instance summary bar */
.ob-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ob-summary__progress{flex:1;min-width:200px;display:flex;align-items:center;gap:10px}
.ob-summary__progress .progress{flex:1}

/* Type picker (assign form) — Agency vs Fundraiser */
.ob-typepick{display:flex;gap:10px;flex-wrap:wrap}
.ob-typepick__opt{flex:1;min-width:160px;display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--border-2);border-radius:var(--r);cursor:pointer;font-weight:600;color:var(--text-2);transition:border-color .12s,background .12s,color .12s}
.ob-typepick__opt:hover{border-color:var(--border)}
.ob-typepick__opt input{accent-color:var(--accent)}
.ob-typepick__opt:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--accent-hover)}

/* Repeatable people rows (assign form — add multiple at once) */
.ob-people{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.ob-person{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.ob-person .field{margin:0}
.ob-person__x{align-self:end;margin-bottom:2px;color:var(--text-muted)}
.ob-person__x:hover{color:var(--danger);background:var(--danger-wash)}
/* Hide the remove control when there's only a single row. */
.ob-people:has(.ob-person:only-child) .ob-person__x{display:none}
.ob-addbtn{margin-top:2px}
@media(max-width:560px){ .ob-person{grid-template-columns:1fr 1fr} .ob-person__x{grid-column:1 / -1;justify-self:start} }

/* Grouped people view — Agencies / In-house accordion */
.ob-group{border:1px solid var(--border-2);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.ob-group:last-child{margin-bottom:0}
.ob-group__sum{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .12s;flex-wrap:wrap}
.ob-group__sum::-webkit-details-marker{display:none}
.ob-group__sum:hover{background:var(--hover)}
.ob-group__caret{display:inline-flex;color:var(--text-faint);transition:transform .15s;flex:none}
.ob-group[open] .ob-group__caret{transform:rotate(90deg)}
.ob-group__icon{display:inline-flex;color:var(--text-2);flex:none}
.ob-group__name{font-weight:650;color:var(--text)}
.ob-group__prog{display:flex;align-items:center;gap:8px;flex:1;min-width:120px;max-width:260px}
.ob-group__prog .progress{flex:1}
.ob-group__body{border-top:1px solid var(--border-2);background:var(--bg-app)}
@media(max-width:700px){ .ob-group__prog{display:none} }

/* Type filter tabs (manage list) */
.ob-tabs{display:inline-flex;gap:4px;background:var(--bg-app);border:1px solid var(--border-2);border-radius:9px;padding:3px}
.ob-tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-muted)}
.ob-tab:hover{color:var(--text)}
.ob-tab.is-active{background:var(--bg-surface);color:var(--accent-hover);box-shadow:var(--shadow-sm)}
.ob-tab__n{font-size:11px;color:var(--text-muted);background:var(--bg-app);border:1px solid var(--border-2);border-radius:20px;padding:0 7px}
.ob-tab.is-active .ob-tab__n{color:var(--accent-hover)}

/* Messages — group-channel members bar */
.chat-members{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chat-members__list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chat-members__x{background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 4px}
.chat-members__x:hover{color:var(--danger)}
.chat-members__add{display:flex;align-items:center;gap:6px}
.chat-members__add .input{min-width:160px}

/* Real-time duplicate-email warning on forms */
.field-warn{font-size:12px;color:var(--warn);margin-top:5px;line-height:1.4}
.input--warn{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-wash)}

/* Recruitment — qualification score factors */
.recruit-factor{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-2)}
.recruit-factor:last-child{border-bottom:0}
.recruit-factor__label{flex:0 0 110px;font-size:13px;color:var(--text-2)}
.recruit-factor__bar{flex:1;height:8px;border-radius:6px;background:var(--bg-app);overflow:hidden}
.recruit-factor__fill{display:block;height:100%;background:var(--accent);border-radius:6px}
.recruit-factor__num{flex:none;font-size:12px}

/* --- Interview weekly grid (Recruitment) -------------------------------- */
.ivnav{display:flex;align-items:center;gap:6px}
.ivnav__label{margin-left:6px;font-size:13px}
.ivgrid-wrap{overflow-x:auto;border:1px solid var(--border-2);border-radius:10px}
.ivgrid{width:100%;border-collapse:collapse;table-layout:fixed;min-width:760px}
.ivgrid th,.ivgrid td{border:1px solid var(--border-2)}
.ivgrid thead th{padding:8px 4px;font-size:12px;font-weight:600;color:var(--text-2);text-align:center;background:var(--bg-app);text-transform:uppercase;letter-spacing:.03em}
.ivgrid thead th.is-today{color:var(--accent-hover);background:var(--accent-wash)}
.ivgrid__dom{display:block;font-size:11px;font-weight:500;color:var(--text-muted);text-transform:none;letter-spacing:0}
.ivgrid__time{width:58px;text-align:right;padding:4px 8px;font-size:12px;color:var(--text-muted);background:var(--bg-app);vertical-align:top;white-space:nowrap}
.ivcell{height:46px;padding:3px;vertical-align:top;position:relative}
.ivgrid[data-can-manage="1"] .ivcell:not(.is-blocked){cursor:pointer}
.ivgrid[data-can-manage="1"] .ivcell:not(.is-blocked):hover{background:var(--accent-wash)}
.ivcell.is-over{outline:2px dashed var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ivcell.is-blocked{background:repeating-linear-gradient(135deg,var(--bg-app),var(--bg-app) 5px,var(--border-2) 5px,var(--border-2) 10px);cursor:not-allowed}
.ivgrid.is-blocking .ivcell{cursor:pointer}
.ivgrid.is-blocking .ivcell:hover{outline:2px dashed var(--warn);outline-offset:-2px}
.iv-block{display:block;font-size:11px;line-height:1.35;padding:3px 6px;margin-bottom:2px;border-radius:5px;background:var(--accent-wash);color:var(--accent-hover);border-left:2px solid var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv-block[draggable="true"]{cursor:grab}
.iv-block.is-dragging{opacity:.4}
.iv-block__time{font-weight:600}
[data-ivblock-toggle].is-active{background:var(--warn-wash);color:var(--warn);border-color:transparent}
@media(max-width:640px){ .ivcell{height:38px}.iv-block{font-size:10px;padding:2px 4px} }

/* --- Dashboard card drag-reorder (pointer-based) ------------------------ */
.dash-card{position:relative}
.grid--stats .dash-card{display:flex}
.grid--stats .dash-card > .stat{flex:1}
.dash-card__tools{position:absolute;top:6px;right:6px;z-index:5;display:flex;gap:1px}
.dash-card__tool{width:24px;height:24px;display:grid;place-items:center;border:0;background:transparent;color:var(--text-faint);padding:0}
.dash-card__tool:hover{color:var(--accent)}
.dash-card__handle{cursor:move;touch-action:none}
.dash-card__hide{cursor:pointer}
.dash-card.is-dragging .dash-card__handle{color:var(--accent)}
/* Reserve the top-right corner so the tools never sit on a card's head chip. */
.dash-card .card__head{padding-right:52px}
.dash-card.is-dragging{box-shadow:var(--shadow-lg);transform:scale(1.02)}
.dash-card--placeholder{border:2px dashed var(--accent);border-radius:var(--r);background:var(--accent-wash);opacity:.55}
body.dash-dragging{user-select:none;cursor:grabbing}

/* --- Token select (searchable multi-select) ----------------------------- */
.toksel{position:relative}
.toksel__box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;padding:6px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);cursor:text}
.toksel__box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.toksel__input{flex:1;min-width:120px;border:0;outline:0;background:transparent;font:inherit;color:var(--text);padding:4px 2px}
.toksel__chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-wash);color:var(--accent-hover);border-radius:999px;padding:3px 6px 3px 10px;font-size:13px;font-weight:500}
.toksel__x{border:0;background:transparent;color:var(--accent-hover);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;border-radius:50%}
.toksel__x:hover{background:var(--hover)}
.toksel__menu{list-style:none;margin:4px 0 0;padding:4px;position:absolute;z-index:40;left:0;right:0;max-height:240px;overflow:auto;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg)}
.toksel__opt{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:14px}
.toksel__opt:hover{background:var(--accent-wash);color:var(--accent-hover)}
.toksel__empty{padding:8px 10px;color:var(--text-faint);font-size:13px}

.dash-card{transition:box-shadow .12s}

/* --- Dashboard charts + simplified customize ---------------------------- */
.dash-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
@media(max-width:1200px){ .dash-charts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .dash-charts{grid-template-columns:1fr} }
.dash-charts .dash-card{display:flex}
.dash-charts .dash-card>.dash-chart{flex:1;margin:0}
.dash-chart__wrap{position:relative;height:240px;padding:6px 4px 2px}
.dash-chart__wrap canvas{max-width:100%}
.dash-cust__group{margin-bottom:14px}
.dash-cust__grouphead{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 6px}
.dash-cust__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--border-2);border-radius:8px;margin-bottom:6px;cursor:pointer;font-size:14px}
.dash-cust__row:hover{background:var(--hover)}
.dash-cust__row input{flex:none}
.dash-cust__presets{margin-top:16px;border-top:1px solid var(--border-2);padding-top:12px}
.dash-cust__presets>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--text-2);list-style:none}
.dash-cust__presets>summary::-webkit-details-marker{display:none}

/* --- Screen options (WordPress-style drop-down customize panel) ---------- */
.screen-options{max-height:0;overflow:hidden;transition:max-height .28s ease}
.screen-options.is-open{max-height:1600px}
.screen-options__inner{padding:18px 20px;margin-bottom:16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md)}
.screen-options__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.screen-options__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 22px}
.screen-options__group{min-width:0}
.screen-options__foot{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--border-2);padding-top:12px}
.screen-options__presets{margin-top:10px;max-width:540px}

/* --- Secondary nav bar (current section's pages, under the top bar) ------ */
/* Section pages, inline in the top bar (left of the search). */
.topnav{display:flex;align-items:center;gap:2px;overflow-x:auto;min-width:0;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap}
.topnav__tab:hover{background:var(--hover);color:var(--text)}
.topnav__tab.is-active{background:var(--accent-wash);color:var(--accent-hover);font-weight:600}
.topnav__tab .icon{opacity:.85}

/* =============================================================================
   Kanban board
   -----------------------------------------------------------------------------
   Component rules, so they live in app.css (theme.css loads first and would
   lose the cascade). Every value is a token read — no literal colours.
   ========================================================================== */
.card-board{
  display:flex; gap:14px; align-items:flex-start;
  overflow-x:auto; padding-bottom:10px;
}
.card-col{
  flex:0 0 288px; display:flex; flex-direction:column; gap:8px;
  background:var(--bg-sunken); border:1px solid var(--border);
  border-radius:var(--r); padding:10px;
}
.card-col--new{ background:transparent; border-style:dashed; }
.card-col__head{ display:flex; align-items:center; gap:8px; }
.card-col__name{ font-weight:600; font-size:13.5px; }
.card-col__count{
  font-size:11px; font-weight:600; color:var(--text-muted);
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:20px; padding:1px 7px;
}
.card-col__tools{ margin-left:auto; }
.card-col__list{ display:flex; flex-direction:column; gap:8px; min-height:48px; }

.card-item{
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; cursor:grab;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-sm);
}
.card-item:active{ cursor:grabbing; }
.card-item.is-dragging{ opacity:.45; border-style:dashed; }
.card-item__title{ font-weight:550; font-size:13.5px; line-height:1.35; }
.card-item__meta{ display:flex; flex-wrap:wrap; gap:5px; }

/* The drop target needs to read as one while a card is in flight. */
.card-col__list:empty::after{
  content:""; display:block; height:44px;
  border:1px dashed var(--border-firm, var(--border)); border-radius:8px;
}

/* =============================================================================
   Public share pages
   -----------------------------------------------------------------------------
   Seen by clients who have no account and no idea a platform exists behind the
   link. No chrome, no nav — just the file, on brand. Tokens only, no literals.
   ========================================================================== */
.share-page{ display:flex; flex-direction:column; min-height:100vh; background:var(--bg-app); }
.share-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; background:var(--chrome); color:var(--text-on-dark);
}
.share-head__name{ font-weight:600; font-size:15px; }
.share-main{ flex:1; display:flex; align-items:flex-start; justify-content:center; padding:44px 18px; }
.share-foot{
  padding:16px 22px; text-align:center;
  font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border);
}

.share-card{
  width:100%; max-width:440px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-md);
  padding:30px 26px; text-align:center;
}
.share-card--wide{ max-width:620px; }
.share-card__icon{ display:inline-flex; color:var(--accent); margin-bottom:10px; }
.share-card__title{ margin:0 0 6px; font-size:19px; font-weight:650; text-wrap:balance; }
.share-card__sub{ margin:0 0 14px; font-size:14px; color:var(--text-muted); }
.share-card__note{ margin:16px 0 0; font-size:12.5px; color:var(--text-muted); }
.share-card__error{
  margin:0 0 12px; padding:8px 12px; border-radius:6px; font-size:13.5px;
  background:var(--danger-wash); color:var(--danger-ink); border:1px solid var(--danger-line);
}
.share-form{ display:flex; flex-direction:column; gap:10px; text-align:left; }

.share-preview{
  margin:0 0 16px; padding:12px; border-radius:8px;
  background:var(--bg-sunken); border:1px solid var(--border);
}
.share-preview img{ max-height:300px; margin:0 auto; }

.share-list{ display:flex; flex-direction:column; gap:8px; text-align:left; }
.share-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg-surface);
  transition:border-color .12s ease, background .12s ease;
}
.share-item:hover{ border-color:var(--accent); background:var(--accent-wash); }
.share-item__thumb{ width:44px; height:44px; object-fit:cover; border-radius:5px; flex:none; }
.share-item__icon{ width:44px; display:grid; place-items:center; color:var(--text-faint); flex:none; }
.share-item__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.share-item__name{ font-weight:550; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-item__meta{ font-size:12px; color:var(--text-muted); }
.share-item__action{ color:var(--accent); flex:none; }

@media (max-width:560px){
  .share-main{ padding:22px 12px; }
  .share-card{ padding:22px 18px; }
}

/* --- File uploader + tiles ------------------------------------------------ */
.uploader__zone{
  border:2px dashed var(--border-firm, var(--border)); border-radius:var(--r);
  padding:22px; text-align:center; transition:border-color .12s ease, background .12s ease;
}
.uploader__zone.is-over{ border-color:var(--accent); background:var(--accent-wash); }
.uploader__icon{ display:inline-flex; color:var(--text-faint); }
.uploader__lead{ margin:6px 0 2px; font-weight:550; }
.uploader__hint{ margin:0 0 10px; font-size:12.5px; color:var(--text-muted); }
.uploader__input{ display:block; margin:0 auto 8px; max-width:320px; }
.uploader__list{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.uploader__row{ display:flex; align-items:center; gap:10px; font-size:13px; }
.uploader__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uploader__bar{ flex:0 0 140px; height:6px; border-radius:3px; background:var(--bg-sunken); overflow:hidden; }
.uploader__bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .15s ease; }
.uploader__pct{ flex:0 0 42px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.uploader__row.is-done .uploader__pct{ color:var(--ok); }
.uploader__row.is-failed .uploader__pct{ color:var(--danger); }
.uploader__row.is-failed .uploader__name{ color:var(--danger-ink); }

.file-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; padding:12px; }
.file-tile{
  border:1px solid var(--border); border-radius:var(--r); background:var(--bg-surface);
  display:flex; flex-direction:column; overflow:hidden;
}
.file-tile__preview{
  display:grid; place-items:center; height:118px; background:var(--bg-sunken);
  position:relative; overflow:hidden;
}
.file-tile__preview img{ width:100%; height:100%; object-fit:cover; }
.file-tile__icon{ color:var(--text-faint); }
.file-tile__ext{
  position:absolute; bottom:6px; right:8px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; color:var(--text-muted);
}
.file-tile__body{ padding:8px 10px 4px; display:flex; flex-direction:column; min-width:0; }
.file-tile__name{ font-size:13px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-tile__meta{ font-size:11.5px; color:var(--text-muted); }
.file-tile__actions{ display:flex; gap:2px; padding:4px 6px 6px; margin-top:auto; }