/* work.css — the shared UI kit for every team tool on work.retainwithemails.com.
   Modelled on Klaviyo's web app (Atlas). Values come ONLY from the generated :root block below;
   the rules after it read var(--w-*) and never a colour literal. Regenerate the block with
   python3 tools/web/_work_ui/build_css.py  (gate: --check). */

/* BEGIN GENERATED by tools/web/_work_ui/build_css.py from rwe_tokens.json (color.work + work). Do not hand-edit. */
:root {
  --w-page: #F9FAFB;
  --w-surface: #FFFFFF;
  --w-surface-hover: #F3F6F7;
  --w-surface-sunk: #F3F6F7;
  --w-nav-hover: #F3F6F7;
  --w-nav-active: #EAEDEF;
  --w-ink: #1D1E20;
  --w-ink-2: #4B4D4E;
  --w-ink-3: #696A6B;
  --w-icon: #5D5E60;
  --w-ink-disabled: #ACB0B4;
  --w-border: #C4C9CF;
  --w-border-subtle: #EAEDEF;
  --w-border-hover: #939495;
  --w-primary: #1D1E20;
  --w-primary-hover: #37383A;
  --w-primary-ink: #FFFFFF;
  --w-secondary-hover: #EAEDEF;
  --w-link: #155FEA;
  --w-link-hover: #05339E;
  --w-focus: #0B4BCB;
  --w-danger-solid: #C72326;
  --w-danger-solid-hover: #931519;
  --w-neutral-bg: #EAEDEF;
  --w-neutral-fg: #1D1E20;
  --w-success-bg: #DAFBE4;
  --w-success-fg: #022217;
  --w-success-solid: #25935C;
  --w-warning-bg: #FFFCCC;
  --w-warning-fg: #453102;
  --w-danger-bg: #FFEDEB;
  --w-danger-fg: #931519;
  --w-info-bg: #E0F2FF;
  --w-info-fg: #011B60;
  --w-progress-fill: #25935C;
  --w-status-1-bg: #FFEEEB;
  --w-status-1-edge: #B63B39;
  --w-status-2-bg: #FFEFE5;
  --w-status-2-edge: #A94E00;
  --w-status-3-bg: #FCF2E2;
  --w-status-3-edge: #906200;
  --w-status-4-bg: #EEF7E6;
  --w-status-4-edge: #547925;
  --w-status-5-bg: #E9F8EB;
  --w-status-5-edge: #2C7F44;
  --w-warning-solid: #B07B04;
  --w-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --w-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
  --w-fs-display: 32px; --w-fw-display: 500; --w-lh-display: 40px;
  --w-fs-card-title: 20px; --w-fw-card-title: 600; --w-lh-card-title: 28px;
  --w-fs-stat: 24px; --w-fw-stat: 600; --w-lh-stat: 32px;
  --w-fs-page-title: 16px; --w-fw-page-title: 600; --w-lh-page-title: 24px;
  --w-fs-body: 16px; --w-fw-body: 400; --w-lh-body: 24px;
  --w-fs-ui: 14px; --w-fw-ui: 400; --w-lh-ui: 20px;
  --w-fs-small: 12px; --w-fw-small: 400; --w-lh-small: 16px;
  --w-fs-button: 14px; --w-fw-button: 600; --w-lh-button: 20px;
  --w-fs-button-lg: 16px; --w-fw-button-lg: 500; --w-lh-button-lg: 24px;
  --w-r-sm: 4px;
  --w-r-md: 8px;
  --w-r-lg: 12px;
  --w-r-xl: 16px;
  --w-r-pill: 9999px;
  --w-shadow-card: 0px 2px 8px 0px rgba(55, 63, 71, 0.08), 0px 1px 2px 0px rgba(55, 63, 71, 0.12);
  --w-shadow-popover: 0 20px 48px 0 rgba(55, 63, 71, 0.16), 0 12px 24px 0 rgba(55, 63, 71, 0.2), 0 0 12px 0 rgba(55, 63, 71, 0.08);
  --w-shadow-focus: 0 0 0 3px rgba(65, 161, 230, 0.2);
  --w-shadow-scrim: rgba(93, 94, 96, 0.8);
  --w-sidebar: 240px;
  --w-sidebar-pad: 14px;
  --w-rail: 72px;
  --w-nav-item: 32px;
  --w-nav-item-pad: 6px;
  --w-nav-gap: 1px;
  --w-icon-box: 20px;
  --w-icon-size: 16px;
  --w-header: 48px;
  --w-panel-inset: 8px;
  --w-content-pad: 24px;
  --w-card-pad: 24px;
  --w-control: 40px;
  --w-control-sm: 32px;
  --w-badge: 24px;
  --w-tab: 40px;
  --w-progress: 8px;
  --w-drawer-breakpoint: 900px;
}
/* END GENERATED */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.w {
  margin: 0; background: var(--w-page); color: var(--w-ink);
  font-family: var(--w-font-sans); font-size: var(--w-fs-ui); line-height: var(--w-lh-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.w a { color: var(--w-link); text-decoration: none; }
.w a:hover { color: var(--w-link-hover); text-decoration: underline; }
.w h1, .w h2, .w h3, .w h4, .w p { margin: 0; }
.w code, .w pre, .w kbd { font-family: var(--w-font-mono); }
.w :focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-icon { width: var(--w-icon-size); height: var(--w-icon-size); flex: none; display: block; }

/* ---------------------------------------------------------------- app frame */
.w-app { display: grid; grid-template-columns: var(--w-sidebar) minmax(0, 1fr); min-height: 100vh; }
/* ⚠️ FULL BLEED (2026-10-16). The main panel used to float as a rounded card inset 8px from
   the window; every approved Paper board ("Drop Console — Discord redesign", the *2 artboards)
   runs the white surface straight from the rail's edge to the window's, with the rail carrying
   a 1px rule. That inset frame was half of why the hub read "awful" beside the Drop boards.
   Spec: workflows/work_hub_design.md §1. */
.w-main {
  margin: 0; background: var(--w-surface); border: 0; border-radius: 0;
  min-height: 100vh; min-width: 0; display: flex; flex-direction: column;
}
.w-content { padding: 24px 32px 36px; flex: 1; min-width: 0; }
.w-content--narrow { max-width: 880px; }

/* ---------------------------------------------------------------- sidebar */
.w-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px;
  padding: 12px var(--w-sidebar-pad) 12px; background: var(--w-page);
  border-right: 1px solid var(--w-border-subtle);
}
.w .w-brand { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; color: var(--w-ink); }
.w .w-brand:hover { text-decoration: none; color: var(--w-ink); }
.w-brand__mark {
  width: 24px; height: 24px; border-radius: var(--w-r-md); background: var(--w-primary); color: var(--w-primary-ink);
  display: grid; place-items: center; font-size: var(--w-fs-small); font-weight: 700; letter-spacing: -0.02em;
}
.w-brand__name { font-size: var(--w-fs-ui); font-weight: 600; }

.w-search {
  display: flex; align-items: center; gap: 8px; height: var(--w-control-sm); padding: 0 8px;
  background: var(--w-surface); border: 1px solid var(--w-border); border-radius: var(--w-r-md); color: var(--w-ink-2);
}
.w-search:hover { border-color: var(--w-border-hover); }
.w-search:focus-within { border-color: var(--w-focus); box-shadow: var(--w-shadow-focus); }
.w-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
  font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink);
}
.w-search input::placeholder { color: var(--w-ink-2); }
.w-kbd { font-family: var(--w-font-sans); font-size: var(--w-fs-ui); color: var(--w-ink-2); white-space: nowrap; }

.w-nav { display: flex; flex-direction: column; gap: 32px; flex: 1; margin-top: 8px; }
.w-nav__section { display: flex; flex-direction: column; gap: var(--w-nav-gap); margin: 0; padding: 0; list-style: none; }
.w-nav__label {
  display: flex; align-items: center; height: var(--w-nav-item); padding: 0 8px; margin: 0; font-size: var(--w-fs-small); line-height: var(--w-lh-small); color: var(--w-ink-3);
}
.w .w-nav__item, .w-nav__group {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--w-nav-item);
  padding: 6px var(--w-nav-item-pad); border: 0; border-radius: var(--w-r-md); background: transparent;
  font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-2); text-align: left; cursor: pointer;
}
.w .w-nav__item:hover, .w-nav__group:hover { background: var(--w-nav-hover); color: var(--w-ink-2); text-decoration: none; }
.w .w-nav__item[aria-current="page"] { background: var(--w-nav-active); color: var(--w-ink); }
.w-nav__ico { width: var(--w-icon-box); height: var(--w-icon-box); display: grid; place-items: center; color: var(--w-icon); flex: none; }
.w-nav__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-nav__ext { color: var(--w-ink-3); opacity: 0; transition: opacity 120ms; }
.w-nav__item:hover .w-nav__ext { opacity: 1; }
.w-nav__chev { color: var(--w-icon); transition: transform 150ms ease; }
.w-nav__group[aria-expanded="true"] .w-nav__chev { transform: rotate(180deg); }
.w-nav__sub { display: flex; flex-direction: column; gap: var(--w-nav-gap); margin: var(--w-nav-gap) 0 0; padding: 0; list-style: none; }
.w-nav__sub[hidden] { display: none; }
.w .w-nav__sub .w-nav__item { padding-left: calc(var(--w-nav-item-pad) + var(--w-icon-box) + 8px); }
.w-nav__count {
  min-width: 20px; height: 16px; padding: 0 4px; border-radius: var(--w-r-pill); background: var(--w-danger-solid);
  color: var(--w-primary-ink); font-size: var(--w-fs-small); line-height: 16px; text-align: center;
}
.w-nav__empty { padding: 6px 8px; color: var(--w-ink-3); font-size: var(--w-fs-ui); }
.w-sidebar__foot { border-top: 1px solid var(--w-border-subtle); margin: 0 calc(-1 * var(--w-sidebar-pad)); padding: 12px var(--w-sidebar-pad) 0; }
.w-user { display: flex; align-items: center; gap: 8px; min-height: var(--w-nav-item); padding: 6px var(--w-nav-item-pad); border-radius: var(--w-r-md); }
.w-avatar {
  width: 20px; height: 20px; border-radius: 50%; background: var(--w-info-bg); color: var(--w-info-fg);
  display: grid; place-items: center; font-size: 9px; font-weight: 600; flex: none;
}
.w-user__name { font-size: var(--w-fs-ui); font-weight: 600; color: var(--w-ink); }
.w-user__meta { font-size: var(--w-fs-small); line-height: var(--w-lh-small); color: var(--w-ink-3); overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------- collapsed rail (presenting)
   Chris records these tools for YouTube and wants the nav out of the way without
   losing it: "I can hit this button and then have the dashboard instantaneously
   become full page". Collapsing is a class on .w-app, so the grid column and every
   label fold together and the main panel simply gets wider. The state lives in
   localStorage and is applied by work.js before paint, so a reload does not flash
   the wide sidebar. Below 900px the sidebar is already a drawer, so the rail is a
   desktop-only idea and the class is ignored there. */
.w-collapse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--w-nav-item); margin-top: 4px;
  padding: 6px var(--w-nav-item-pad); border: 0; border-radius: var(--w-r-md);
  background: transparent; color: var(--w-ink-2); cursor: pointer;
  font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui);
}
.w-collapse:hover { background: var(--w-nav-hover); }
.w-collapse__ico { display: grid; place-items: center; color: var(--w-icon); flex: none; transition: transform 150ms ease; }
.w-collapse__text { flex: 1; min-width: 0; text-align: left; }

/* ⚠️ DESKTOP ONLY. Below 900px the sidebar is a drawer and the rail means nothing — but these
   rules used to be unscoped, and since the rail became the DEFAULT (2026-10-15) every phone
   opened the drawer as a 280px panel of bare icons with no labels. Measured 2026-10-16 at 390. */
@media (min-width: 900px) {
  .w-rail-on .w-app { grid-template-columns: var(--w-rail) minmax(0, 1fr); }
  .w-rail-on .w-sidebar { padding-left: 8px; padding-right: 8px; }
  .w-rail-on .w-brand__name,
  .w-rail-on .w-nav__text,
  .w-rail-on .w-nav__label,
  .w-rail-on .w-nav__chev,
  .w-rail-on .w-nav__ext,
  .w-rail-on .w-kbd,
  .w-rail-on .w-search,
  .w-rail-on .w-nav__sub,
  .w-rail-on .w-user__name,
  .w-rail-on .w-user__meta,
  .w-rail-on .w-collapse__text { display: none; }
  .w-rail-on .w-brand { justify-content: center; padding: 0; }
  .w-rail-on .w-nav { gap: 18px; }
  .w-rail-on .w-nav__section { gap: 2px; }
  .w-rail-on .w-nav__item,
  .w-rail-on .w-nav__group { justify-content: center; padding-left: 0; padding-right: 0; }
  .w-rail-on .w-user { justify-content: center; padding-left: 0; padding-right: 0; }
  .w-rail-on .w-collapse { justify-content: center; }
  .w-rail-on .w-collapse__ico { transform: rotate(180deg); }
  /* The whole folded rail is the expand target (work.js), so it says so on hover. */
  .w-rail-on .w-sidebar { cursor: e-resize; }
  .w-rail-on .w-sidebar :is(a, button) { cursor: pointer; }
  .w-rail-on .w-sidebar__foot { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
  .w-rail-on .w-nav__count { display: none; }
}

/* ---------------------------------------------------------------- mobile bar + drawer */
.w-mobilebar { display: none; }
.w-scrim { display: none; }

@media (max-width: 899px) {
  .w-collapse { display: none; }
  .w-app { display: block; }
  .w-mobilebar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 200;
    height: 52px; padding: 0 12px; background: var(--w-page); border-bottom: 1px solid var(--w-border-subtle);
  }
  .w-mobilebar .w-brand { padding: 0 4px; }
  .w-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 400; width: min(280px, 86vw); height: 100%;
    background: var(--w-page); box-shadow: var(--w-shadow-popover);
    transform: translateX(-105%); transition: transform 200ms cubic-bezier(.22, 1, .36, 1); visibility: hidden;
  }
  .w-drawer-open .w-sidebar { transform: none; visibility: visible; }
  .w-drawer-open .w-scrim { display: block; position: fixed; inset: 0; z-index: 300; background: var(--w-shadow-scrim); }
  .w-drawer-open { overflow: hidden; }
  .w-main { margin: 0; border: 0; border-radius: 0; min-height: calc(100vh - 52px); }
  .w-content { padding: 16px 16px 28px; }
  .w-header { padding: 10px 16px; min-height: 56px; }
  .w-tabs { padding: 0 16px; gap: 20px; }
  body.w { --w-card-pad: 16px; }
  .w-table { min-width: 600px; }
  .w-stat { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .w-sidebar, .w-nav__chev, .w-toast { transition: none !important; } }

/* ---------------------------------------------------------------- page header + breadcrumb */
/* The top bar (Paper H2/E2): 60px, 32px gutters, a hairline under it. The breadcrumb sits in a
   bordered PILL — `.w-header__lead` is the pill, so the crumbs and the current page's name (the
   h1) read as one object: "Importer / Gmail connection". */
.w-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: 60px; padding: 10px 32px; border-bottom: 1px solid var(--w-border-subtle);
}
.w-header__lead {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
  padding: 5px 10px 5px 12px; border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-md);
}
.w-header__title { font-size: var(--w-fs-ui); font-weight: 600; line-height: var(--w-lh-ui); color: var(--w-ink); }
.w-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); }
.w .w-crumbs a { color: var(--w-ink-3); }
.w .w-crumbs a:hover { color: var(--w-ink); text-decoration: none; }
.w-crumbs__sep { color: var(--w-ink-disabled); }

.w-display { font-size: var(--w-fs-display); font-weight: var(--w-fw-display); line-height: var(--w-lh-display); color: var(--w-ink); }
.w-section-title { font-size: var(--w-fs-card-title); font-weight: var(--w-fw-card-title); line-height: var(--w-lh-card-title); }
.w-muted { color: var(--w-ink-2); }
.w-subtle { color: var(--w-ink-3); }
.w-text-body { font-size: var(--w-fs-body); line-height: var(--w-lh-body); }
.w-small { font-size: var(--w-fs-small); line-height: var(--w-lh-small); }

/* ---------------------------------------------------------------- tabs + rail */
.w-tabs {
  display: flex; gap: 24px; padding: 0 32px; border-bottom: 1px solid var(--w-border-subtle);
  overflow-x: auto; scrollbar-width: none;
}
.w-tabs::-webkit-scrollbar { display: none; }
.w .w-tab {
  position: relative; display: flex; align-items: center; height: var(--w-tab); padding: 0; white-space: nowrap;
  font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-2);
}
.w .w-tab:hover { color: var(--w-ink); text-decoration: none; }
.w .w-tab[aria-current="page"] { color: var(--w-ink); font-weight: 600; }
.w-tab[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--w-ink); border-radius: 0;
}
.w-layout-rail { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.w-layout-rail > :last-child { max-width: 720px; }
.w-rail { display: flex; flex-direction: column; gap: 4px; }
.w .w-rail a {
  display: flex; align-items: center; min-height: var(--w-control-sm); padding: 6px 12px; border-radius: var(--w-r-md);
  color: var(--w-ink-2); font-size: var(--w-fs-ui);
}
.w .w-rail a:hover { background: var(--w-nav-hover); color: var(--w-ink); text-decoration: none; }
.w .w-rail a[aria-current="page"] { background: var(--w-nav-active); color: var(--w-ink); font-weight: 600; }
@media (max-width: 899px) {
  .w-layout-rail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .w-rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .w .w-rail a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- buttons */
.w .w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  height: var(--w-control-sm); padding: 0 12px; border: 1px solid transparent; border-radius: var(--w-r-md);
  font: inherit; font-size: var(--w-fs-button); font-weight: var(--w-fw-button); line-height: var(--w-lh-button);
  cursor: pointer; text-decoration: none; transition: background-color 120ms, border-color 120ms, color 120ms;
}
.w .w-btn:hover { text-decoration: none; }
.w .w-btn--primary { background: var(--w-primary); border-color: var(--w-primary); color: var(--w-primary-ink); }
.w .w-btn--primary:hover { background: var(--w-primary-hover); border-color: var(--w-primary-hover); color: var(--w-primary-ink); }
.w .w-btn--secondary { background: var(--w-surface); border-color: var(--w-border); color: var(--w-ink); }
.w .w-btn--secondary:hover { background: var(--w-secondary-hover); color: var(--w-ink); }
.w .w-btn--ghost { background: transparent; color: var(--w-ink); }
.w .w-btn--ghost:hover { background: var(--w-secondary-hover); color: var(--w-ink); }
.w .w-btn--danger { background: var(--w-danger-solid); border-color: var(--w-danger-solid); color: var(--w-primary-ink); }
.w .w-btn--danger:hover { background: var(--w-danger-solid-hover); border-color: var(--w-danger-solid-hover); color: var(--w-primary-ink); }
.w .w-btn--sm { height: 28px; padding: 0 8px; }
.w .w-btn--lg { height: var(--w-control); padding: 0 12px; font-size: var(--w-fs-button-lg); font-weight: var(--w-fw-button-lg); line-height: var(--w-lh-button-lg); }
.w .w-btn--icon { width: var(--w-control-sm); padding: 0; }
.w .w-btn:disabled, .w .w-btn[aria-disabled="true"] {
  background: var(--w-surface-sunk); border-color: var(--w-surface-sunk); color: var(--w-ink-disabled); cursor: not-allowed;
}

/* ---------------------------------------------------------------- badges */
.w-badge {
  display: inline-flex; align-items: center; gap: 4px; height: var(--w-badge); padding: 2px 8px; border-radius: var(--w-r-pill);
  font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); white-space: nowrap; vertical-align: middle;
}
.w-badge--sm { height: 20px; font-size: var(--w-fs-small); line-height: var(--w-lh-small); }
.w-badge--neutral { background: var(--w-neutral-bg); color: var(--w-neutral-fg); }
.w-badge--success { background: var(--w-success-bg); color: var(--w-success-fg); }
.w-badge--warning { background: var(--w-warning-bg); color: var(--w-warning-fg); }
.w-badge--danger  { background: var(--w-danger-bg);  color: var(--w-danger-fg); }
.w-badge--info    { background: var(--w-info-bg);    color: var(--w-info-fg); }

/* ---------------------------------------------------------------- progress */
.w-progress { display: flex; flex-direction: column; gap: 6px; }
.w-progress__meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--w-fs-ui); color: var(--w-ink-2); }
.w-progress__meta b { color: var(--w-ink); font-weight: 600; }
.w-progress__track { height: var(--w-progress); border-radius: var(--w-r-sm); background: var(--w-neutral-bg); overflow: hidden; }
.w-progress__fill { height: 100%; border-radius: var(--w-r-sm); background: var(--w-progress-fill); }

/* ---------------------------------------------------------------- cards + stats */
.w-card {
  background: var(--w-surface); border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-lg);
  padding: 20px var(--w-card-pad); min-width: 0;
}
.w-card--danger { background: var(--w-danger-bg); border-color: var(--w-danger-solid); }
.w-card--danger .w-card__title { color: var(--w-danger-fg); }
.w-content > .w-card + .w-card { margin-top: 24px; }
.w-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.w-card__title { font-size: var(--w-fs-body); font-weight: 600; line-height: var(--w-lh-body); color: var(--w-ink); }
.w-card__actions { display: flex; gap: 8px; align-items: center; }
.w-card__body { min-width: 0; font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink); }
.w-card--flush { padding: 0; overflow: hidden; }
.w-card--flush > .w-card__head { padding: var(--w-card-pad) var(--w-card-pad) 0; }

.w-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
@media (max-width: 599px) { .w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .w-grid > .w-card { grid-column: 1 / -1; } }
.w-stack { display: flex; flex-direction: column; gap: 16px; }
.w-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.w-stat {
  background: var(--w-surface); border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-lg);
  padding: 20px var(--w-card-pad); display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.w-stat__label { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-2); }
.w-stat__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-stat__value { font-size: var(--w-fs-stat); font-weight: var(--w-fw-stat); line-height: var(--w-lh-stat); color: var(--w-ink); }
.w-stat__delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 2px 8px; border-radius: var(--w-r-pill); font-size: var(--w-fs-small); line-height: var(--w-lh-small); }
.w-stat__delta--up { background: var(--w-success-bg); color: var(--w-success-fg); }
.w-stat__delta--down { background: var(--w-danger-bg); color: var(--w-danger-fg); }
.w-stat__delta--flat { background: var(--w-neutral-bg); color: var(--w-neutral-fg); }
.w-stat__delta .w-icon { width: 12px; height: 12px; }
.w-stat__hint { font-size: var(--w-fs-small); line-height: var(--w-lh-small); color: var(--w-ink-3); }

/* ---------------------------------------------------------------- forms */
.w-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w-field + .w-field { margin-top: 16px; }
.w-label { font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink); }
.w-help { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-2); }
.w-input, .w-select, .w-textarea {
  width: 100%; min-width: 0; height: var(--w-control); padding: 0 12px;
  background: var(--w-surface); border: 1px solid var(--w-border); border-radius: var(--w-r-md);
  font: inherit; font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink);
  transition: border-color 120ms, box-shadow 120ms;
}
.w-input::placeholder, .w-textarea::placeholder { color: var(--w-ink-3); }
.w-input:hover, .w-select:hover, .w-textarea:hover { border-color: var(--w-focus); }
.w-input:focus, .w-select:focus, .w-textarea:focus { outline: 0; border-color: var(--w-focus); box-shadow: var(--w-shadow-focus); }
.w-textarea { height: auto; min-height: 96px; padding: 8px 12px; resize: vertical; }
.w-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.w-select-wrap { position: relative; }
.w-select-wrap::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--w-ink); border-bottom: 1.5px solid var(--w-ink); transform: translateY(-70%) rotate(45deg);
}
.w-input:disabled, .w-select:disabled, .w-textarea:disabled { background: var(--w-surface-sunk); color: var(--w-ink-disabled); }
.w-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-body); color: var(--w-ink); cursor: pointer; }
.w-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--w-primary); }

/* ---------------------------------------------------------------- table */
.w-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.w-table { width: 100%; border-collapse: collapse; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); }
.w-table th {
  text-align: left; font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--w-ink-3); background: var(--w-surface);
  padding: 10px 10px 9px; border-bottom: 1px solid var(--w-border); white-space: nowrap;
}
.w-table td { padding: 14px 10px; border-bottom: 1px solid var(--w-border-subtle); color: var(--w-ink); vertical-align: middle; }
.w-table tbody tr:hover td { background: var(--w-surface-hover); }
.w-table .w-num { text-align: right; font-variant-numeric: tabular-nums; }
.w-table .w-cell-sub { display: block; color: var(--w-ink-2); font-size: var(--w-fs-small); line-height: var(--w-lh-small); }

/* ---------------------------------------------------------------- empty state */
.w-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.w-empty__ico {
  width: 48px; height: 48px; border-radius: var(--w-r-lg); background: var(--w-surface-sunk); color: var(--w-icon);
  display: grid; place-items: center; margin-bottom: 8px;
}
.w-empty__ico .w-icon { width: 24px; height: 24px; }
.w-empty__title { font-size: var(--w-fs-card-title); font-weight: var(--w-fw-card-title); line-height: var(--w-lh-card-title); color: var(--w-ink); }
.w-empty__body { max-width: 420px; font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink-2); }
.w-empty__action { margin-top: 12px; }

/* ---------------------------------------------------------------- modal */
.w-modal[hidden] { display: none; }
.w-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; }
.w-modal__scrim { position: absolute; inset: 0; background: var(--w-shadow-scrim); }
.w-modal__dialog {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--w-surface); border-radius: var(--w-r-xl); box-shadow: var(--w-shadow-popover); padding: var(--w-card-pad);
}
.w-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.w-modal__title { font-size: var(--w-fs-card-title); font-weight: var(--w-fw-card-title); line-height: var(--w-lh-card-title); color: var(--w-ink); }
.w-modal__close { color: var(--w-ink); }
.w-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.w-modal-open { overflow: hidden; }

/* ---------------------------------------------------------------- toast */
.w-toasts {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(480px, calc(100vw - 32px));
}
.w-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 100%;
  min-width: min(340px, 100%); padding: 10px 10px 10px 12px; border-radius: var(--w-r-md); box-shadow: var(--w-shadow-popover);
  background: var(--w-primary); color: var(--w-primary-ink); font-size: var(--w-fs-ui); line-height: var(--w-lh-ui);
  transition: opacity 200ms, transform 200ms;
}
.w-toast--success { background: var(--w-success-solid); }
.w-toast--danger { background: var(--w-danger-solid); }
.w-toast__text { flex: 1; min-width: 0; }
.w .w-toast__close { background: transparent; border: 0; color: inherit; padding: 2px; border-radius: var(--w-r-sm); cursor: pointer; display: grid; place-items: center; }
.w-toast--leaving { opacity: 0; transform: translateY(-6px); }

/* ---------------------------------------------------------------- misc */
.w-divider { height: 1px; background: var(--w-border-subtle); border: 0; margin: 24px 0; }
.w-kit-swatch { width: 100%; height: 40px; border-radius: var(--w-r-md); border: 1px solid var(--w-border-subtle); }

/* ================================================================ the Paper patterns (2026-10-16)
   Read off the approved "Drop Console — Discord redesign" boards; every one is named, with the
   artboard it came from, in workflows/work_hub_design.md. Colours are tokens only. */

/* -- page title block (H2 "Signups", F2 "Modern Drop 2.0") -------------------------------- */
.w-title { display: flex; align-items: flex-start; gap: 24px; margin: 2px 0 24px; flex-wrap: wrap; }
.w-title__main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.w-title__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-title__h { font-size: var(--w-fs-stat); font-weight: 600; line-height: var(--w-lh-stat); letter-spacing: -0.02em; color: var(--w-ink); }
.w-title__sub { font-size: var(--w-fs-body); line-height: var(--w-lh-body); color: var(--w-ink-3); max-width: 72ch; }
.w-title__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.w .w-title__actions .w-btn { height: 36px; padding: 0 14px; }
.w-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--w-r-sm);
  background: var(--w-info-bg); color: var(--w-info-fg);
  font-size: var(--w-fs-small); font-weight: 700; letter-spacing: 0.04em; line-height: 1;
}

/* -- section label with a hairline (F2 "THE STAGES, IN ORDER") ------------------------------ */
.w-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-ink-3);
}
.w-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--w-border-subtle); }

/* -- stat strip: ONE card, dividers between (H2 stat card) ---------------------------------- */
.w-stats {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border: 1px solid var(--w-border-subtle); border-radius: var(--w-r-lg); padding: 20px 24px;
}
.w-stats__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 36px; border-left: 1px solid var(--w-border-subtle); }
.w-stats__item:first-child { padding-left: 0; border-left: 0; }
.w-stats__label { font-size: var(--w-fs-small); line-height: var(--w-lh-small); font-weight: 600; color: var(--w-ink-3); }
.w-stats__value { font-size: var(--w-fs-display); line-height: var(--w-lh-display); font-weight: 600; letter-spacing: -0.03em; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.w-stats__note { font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-3); }
.w-stats__note--up { color: var(--w-success-solid); }

/* -- segmented control (H2 "7 days · 30 days · 90 days · Pick dates") ------------------------ */
.w-seg { display: inline-flex; align-items: center; padding: 3px; border-radius: 9px; background: var(--w-surface-sunk); }
.w .w-seg__item {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--w-ink-2); font: inherit; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); cursor: pointer; white-space: nowrap;
}
.w .w-seg__item:hover { color: var(--w-ink); text-decoration: none; }
.w .w-seg__item[aria-pressed="true"], .w .w-seg__item[aria-current="true"] {
  background: var(--w-surface); border-color: var(--w-border-subtle); color: var(--w-ink); font-weight: 600;
}

/* -- filter chip (H2 "Page Both ⌄") and the plain search field (E2 "Find a channel") -------- */
.w .w-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--w-border); border-radius: var(--w-r-md); background: var(--w-surface);
  font: inherit; font-size: var(--w-fs-ui); color: var(--w-ink); cursor: pointer; white-space: nowrap;
}
.w-chip__k { color: var(--w-ink-3); }
.w-chip__v { font-weight: 600; color: var(--w-ink); }
.w .w-chip--on { background: var(--w-surface-sunk); border-color: var(--w-ink); }
.w-find {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; min-width: 0;
  border-radius: var(--w-r-md); background: var(--w-surface-sunk); color: var(--w-ink-3);
}
.w-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--w-fs-ui); color: var(--w-ink); }
.w-find input::placeholder { color: var(--w-ink-3); }
.w-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.w-toolbar__spacer { flex: 1; }

/* -- status line (E2 "● Yes" / "● No, the bot has no permission") ---------------------------- */
.w-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--w-fs-ui); line-height: var(--w-lh-ui); color: var(--w-ink-2); }
.w-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--w-ink-disabled); flex: none; }
.w-status--ok::before { background: var(--w-success-solid); }
.w-status--warn::before { background: var(--w-warning-solid); }
.w-status--bad { color: var(--w-danger-fg); }
.w-status--bad::before { background: var(--w-danger-solid); }

/* -- group band (E2 "Community · 9 channels") ------------------------------------------------ */
.w-band {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: var(--w-r-md); background: var(--w-surface-sunk); font-weight: 600; color: var(--w-ink);
}
.w-band__count { padding: 0 8px; border-radius: var(--w-r-pill); background: var(--w-neutral-bg); font-size: var(--w-fs-small); line-height: 20px; font-weight: 600; color: var(--w-ink-2); }

/* -- a quiet explanatory note, set flush rather than boxed ----------------------------------- */
.w-note { font-size: var(--w-fs-ui); line-height: 22px; color: var(--w-ink-2); }
.w-note b { color: var(--w-ink); font-weight: 600; }

/* -- a row list: label + meta left, status + action right (E2 rows, H2 table rows) ----------- */
.w-rows { border-top: 1px solid var(--w-border); }
.w-rowi { display: flex; align-items: center; gap: 16px; padding: 14px 10px; border-bottom: 1px solid var(--w-border-subtle); flex-wrap: wrap; }
.w-rowi__main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.w-rowi__title { font-weight: 600; color: var(--w-ink); }
.w-rowi__meta { font-size: var(--w-fs-ui); color: var(--w-ink-3); overflow-wrap: anywhere; }
.w-rowi__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 899px) {
  /* Repeated here because the top bar and tab rules sit AFTER the first mobile block in this
     file, so that block's gutters lose the cascade. */
  .w-header { padding: 10px 16px; min-height: 56px; }
  .w-tabs { padding: 0 16px; gap: 20px; }
  .w-title { gap: 12px; margin-bottom: 20px; }
  .w-stats { padding: 16px; row-gap: 16px; }
  .w-stats__item { flex: 1 1 40%; padding: 0 0 0 16px; }
  .w-stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .w-stats__value { font-size: var(--w-fs-stat); line-height: var(--w-lh-stat); }
}

/* ================================================================ approved on Paper, 2026-10-16
   "Work hub — every screen, before and after" (rows Q/R): the campaign-status ramp, the week
   meter that replaced the status pill, and the horizontal revenue bars. Spec:
   workflows/work_hub_design.md §4c. Colours are the --w-status-* tokens only. */

/* -- a row tinted by how far behind its weekly target it is (Active work ONLY) -------------- */
.w-table tr[class*="w-srow--"] td { background: var(--w-srow-bg); }
.w-table tr[class*="w-srow--"] td:first-child { box-shadow: inset 3px 0 0 var(--w-srow-edge); }
.w-table tbody tr[class*="w-srow--"]:hover td { background: var(--w-srow-bg); filter: brightness(0.985); }
.w-srow--1 { --w-srow-bg: var(--w-status-1-bg); --w-srow-edge: var(--w-status-1-edge); }
.w-srow--2 { --w-srow-bg: var(--w-status-2-bg); --w-srow-edge: var(--w-status-2-edge); }
.w-srow--3 { --w-srow-bg: var(--w-status-3-bg); --w-srow-edge: var(--w-status-3-edge); }
.w-srow--4 { --w-srow-bg: var(--w-status-4-bg); --w-srow-edge: var(--w-status-4-edge); }
.w-srow--5 { --w-srow-bg: var(--w-status-5-bg); --w-srow-edge: var(--w-status-5-edge); }

/* -- the week meter: one segment per targeted campaign -------------------------------------- */
.w-meter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.w-meter__segs { display: inline-flex; align-items: center; gap: 2px; }
.w-meter__seg { width: 12px; height: 5px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--w-border); }
.w-meter__seg--sent { background: var(--w-meter-c, var(--w-ink-2)); box-shadow: none; }
.w-meter__seg--sched { background: var(--w-meter-c, var(--w-ink-2)); opacity: .4; box-shadow: none; }
.w-meter__div { width: 1px; height: 9px; margin: 0 2px; background: var(--w-ink-3); }
.w-meter__txt { font-size: var(--w-fs-small); line-height: var(--w-lh-small); color: var(--w-ink-3); }
.w-srow--1 .w-meter { --w-meter-c: var(--w-status-1-edge); }
.w-srow--2 .w-meter { --w-meter-c: var(--w-status-2-edge); }
.w-srow--3 .w-meter { --w-meter-c: var(--w-status-3-edge); }
.w-srow--4 .w-meter { --w-meter-c: var(--w-status-4-edge); }
.w-srow--5 .w-meter { --w-meter-c: var(--w-status-5-edge); }

/* -- the legend for the ramp ---------------------------------------------------------------- */
.w-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--w-fs-small); color: var(--w-ink-2); }
.w-legend span { display: inline-flex; align-items: center; gap: 5px; }
.w-legend i { width: 9px; height: 9px; border-radius: 2px; }

/* -- horizontal revenue bars (per flow / per campaign) --------------------------------------- */
.w-bar { position: relative; height: 6px; border-radius: 3px; background: var(--w-neutral-bg); min-width: 80px; }
.w-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--w-ink-2); }
.w-bar--muted > i { background: var(--w-ink-disabled); }

/* -- tabs inside an expanded row ------------------------------------------------------------ */
.w-subtabs { display: flex; gap: 20px; border-bottom: 1px solid var(--w-border-subtle); margin-bottom: 8px; }
.w .w-subtabs button, .w .w-subtabs a {
  position: relative; padding: 0 0 9px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--w-fs-ui); color: var(--w-ink-2); text-decoration: none;
}
.w .w-subtabs [aria-selected="true"] { color: var(--w-ink); font-weight: 600; }
.w .w-subtabs [aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--w-ink); }
.w-subtabs small { margin-left: 4px; color: var(--w-ink-3); font-size: var(--w-fs-small); }

/* Phones show the page NAME in the top bar (shell mobile_title), so the breadcrumb pill is noise
   there — every approved phone board drops it. The header bar stays only when it carries actions. */
@media (max-width: 899px) {
  .w-header .w-header__lead { display: none; }
  .w-header:not(:has(.w-header__actions > *)) { display: none; }
}

/* -- live review fixes (2026-10-16) ------------------------------------------------------- */
/* The folded rail marks the GROUP whose child page is open (Resources, Importer, Drop): the
   children are hidden on the rail, so without this the icon of the page you are on was blank. */
@media (min-width: 900px) {
  .w-rail-on .w-nav__group--current { background: var(--w-nav-active); color: var(--w-ink); }
  /* Rail geometry from the approved boards: 40x36 cells on a 40px pitch, 28px avatar, no rule. */
  .w-rail-on .w-nav__item, .w-rail-on .w-nav__group { width: 40px; height: 36px; min-height: 36px; margin: 0 auto; padding: 0; }
  .w-rail-on .w-nav__section { gap: 4px; }
  .w-rail-on .w-sidebar__foot { border-top: 0; }
  .w-rail-on .w-avatar { width: 28px; height: 28px; font-size: var(--w-fs-small); }
}
.w-find:focus-within { box-shadow: var(--w-shadow-focus); outline: 1px solid var(--w-focus); }
.w-find input:focus, .w-find input:focus-visible { outline: 0; }
.w-title__h, .w-title__sub, .w-empty__title, .w-empty__body { text-wrap: balance; }