/* =====================================================================
   ClickLabs Design System
   The shared foundation for every ClickLabs surface (§20).
   Tokens + primitives only. Page-specific styles live in their own file
   and consume these variables.
   ===================================================================== */

:root{
  /* --- Neutral ink scale --- */
  --ink-950:#0B0C0F;
  --ink-900:#141519;
  --ink-800:#202127;
  --ink-700:#2C2D34;

  /* --- Surfaces --- */
  --canvas:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F7F8;
  --surface-sunken:#EDEEF0;
  --overlay:rgba(255,255,255,.84);
  --border:#EBECEE;
  --border-strong:#DCDEE1;

  /* --- Text --- */
  --text:#0E0F11;
  --text-2:#6B6F76;
  --text-muted:#91959C;
  --text-disabled:#B4B7BD;

  /* --- Accent ---
     Monochrome by design. The interface never competes with the
     thumbnails, so the "accent" is ink. The --red-* names are kept as
     the shared accent slots so every existing rule inherits the change. */
  --red:#0E0F11;
  --red-dark:#2C2E33;
  --red-pressed:#000;
  --red-soft:#F1F2F4;
  --red-focus:rgba(14,15,17,.12);

  /* --- Semantic (functional states only) --- */
  --success:#177245; --success-bg:#F1F6F3;
  --warning:#8A5A00; --warning-bg:#FAF5EA;
  --error:#B3382E;   --error-bg:#FBF1F0;
  --info:#3A3D42;    --info-bg:#F4F5F6;

  /* --- Radii (§7.4) --- */
  --r-input:10px;
  --r-btn:10px;
  --r-card:12px;
  --r-dialog:16px;
  --r-media:10px;
  --r-pill:999px;

  /* --- Shadows: minimal, ink-tinted (§7.5) --- */
  --shadow-xs:0 1px 2px rgba(11,12,15,.05);
  --shadow-sm:0 2px 6px rgba(11,12,15,.06);
  --shadow-md:0 8px 24px rgba(11,12,15,.08),0 2px 6px rgba(11,12,15,.04);
  --shadow-lg:0 28px 64px rgba(11,12,15,.16),0 8px 20px rgba(11,12,15,.08);
  --ring:0 0 0 3px rgba(14,15,17,.11);
  --ring-neutral:0 0 0 3px rgba(18,19,23,.10);

  /* --- Type --- */
  --font-sans:"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* --- Motion --- */
  --motion-fast:140ms;
  --motion-ui:210ms;
  --motion-layout:340ms;
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* --- Layout --- */
  --sidebar-w:232px;
  --topbar-h:60px;
  --page-max:1360px;
}

/* ---------------------------------------------------------------------
   Reset + base
   --------------------------------------------------------------------- */
*{box-sizing:border-box}
/* Components below set display, which would otherwise beat the UA [hidden] rule. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:14.5px;
  line-height:1.55;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:none}
::selection{background:var(--red-soft);color:var(--text)}

/* ---------------------------------------------------------------------
   Typography helpers
   --------------------------------------------------------------------- */
.h-display{font-size:clamp(40px,6vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:560;margin:0}
.h1{font-size:clamp(28px,4vw,36px);line-height:1.06;letter-spacing:-.04em;font-weight:560;margin:0}
.h2{font-size:24px;line-height:1.15;letter-spacing:-.032em;font-weight:600;margin:0}
.h3{font-size:18px;line-height:1.25;letter-spacing:-.024em;font-weight:600;margin:0}
/* Quiet label. Sentence case, no shouting — it sits above a heading, not
   next to it. The dash keeps the old markup's <span> meaningful. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:550;letter-spacing:-.005em;
  color:var(--text-muted);margin:0 0 12px;
}
.eyebrow > span{width:14px;height:1.5px;background:var(--border-strong);border-radius:2px}
.muted{color:var(--text-2)}
.text-link{color:var(--text);font-size:13px;font-weight:600;text-decoration:none;transition:color .16s ease}
.text-link:hover,.text-link:focus-visible{color:var(--red-dark)}

/* ---------------------------------------------------------------------
   Buttons
   .btn is the primitive; .primary-button / .secondary-button are kept as
   aliases so existing markup + generated DOM stay styled.
   --------------------------------------------------------------------- */
.btn,.primary-button,.secondary-button,.ghost-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:650;line-height:1;letter-spacing:-.01em;
  padding:11px 16px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
.btn:active,.primary-button:active,.secondary-button:active,.ghost-button:active{transform:translateY(0) scale(.985)}

.btn--primary,.primary-button{background:var(--ink-900);color:#fff;box-shadow:0 1px 2px rgba(11,12,15,.18)}
.btn--primary:hover,.primary-button:hover{background:var(--ink-800);transform:translateY(-1px)}
.btn--primary:focus-visible,.primary-button:focus-visible{box-shadow:var(--ring)}
.btn--primary:disabled,.primary-button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn--secondary,.secondary-button{background:var(--surface);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn--secondary:hover,.secondary-button:hover{border-color:var(--text-2);transform:translateY(-1px)}
.btn--secondary:focus-visible,.secondary-button:focus-visible{box-shadow:var(--ring-neutral)}
.btn--secondary:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn--dark{background:var(--ink-900);color:#fff}
.btn--dark:hover{background:var(--ink-800);transform:translateY(-1px)}

.ghost-button{background:transparent;color:var(--text-2);padding:9px 12px}
.ghost-button:hover{background:var(--surface-2);color:var(--text)}

.btn--sm{padding:8px 12px;font-size:12px}
.btn--lg{padding:14px 22px;font-size:14px}

/* Small pill/icon action used on result cards + toolbars */
.icon-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--text-2);
  padding:7px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);cursor:pointer;text-decoration:none;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease,transform .16s ease;
}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--border-strong);color:var(--text);background:var(--surface-2)}
.icon-btn:active{transform:scale(.97)}

/* ---------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------- */
.field-label{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:650;color:var(--text);margin-bottom:9px;
}
.field-label > span{margin-left:auto;font-weight:500;color:var(--text-muted)}

.text-input{
  width:100%;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-input);
  padding:12px 13px;font-size:13.5px;color:var(--text);
  outline:none;resize:vertical;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.text-input::placeholder{color:var(--text-muted)}
.text-input:focus{border-color:var(--red);box-shadow:var(--ring)}
textarea.text-input{min-height:76px;line-height:1.5}

.info{
  display:inline-grid;place-items:center;
  width:17px;height:17px;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--surface-2);
  font-size:10px;font-weight:700;color:var(--text-2);cursor:help;flex:none;
}
.info:hover{border-color:var(--text-2);color:var(--text)}

/* ---------------------------------------------------------------------
   Chips (filters / selectable tags)
   --------------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-pill);padding:8px 14px;
  font-size:12.5px;font-weight:550;color:var(--text-2);cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease,transform .16s ease;
}
.chip:hover{border-color:var(--border-strong);color:var(--text);transform:translateY(-1px)}
.chip:focus-visible{box-shadow:var(--ring-neutral)}
.chip.on{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}

/* ---------------------------------------------------------------------
   Badges / status pills
   --------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:650;letter-spacing:.01em;
  padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--success{color:var(--success);background:var(--success-bg);border-color:transparent}
.badge--warning{color:var(--warning);background:var(--warning-bg);border-color:transparent}
.badge--info{color:var(--info);background:var(--info-bg);border-color:transparent}
.badge--neutral::before{display:none}

/* Soft informational tag used for honesty notes */
.honest-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:550;color:var(--text-2);
  border:1px solid var(--border);background:var(--surface-2);
  padding:6px 11px;border-radius:var(--r-pill);cursor:help;
}
.honest-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-muted)}

/* ---------------------------------------------------------------------
   Cards + empty states
   --------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.card--elevated{box-shadow:var(--shadow-md)}

.empty-state{
  display:grid;gap:8px;justify-items:start;
  padding:22px;border:1px dashed var(--border-strong);border-radius:var(--r-card);
  background:var(--surface-2);color:var(--text-2);font-size:13px;
}
.empty-state a{color:var(--red-dark);font-weight:650}

.status{min-height:18px;font-size:12.5px;color:var(--text-2);margin-top:9px}
.status.error{color:var(--error)}

/* =====================================================================
   App shell — sidebar + workspace (§8.2)
   Dark Ink sidebar, light Canvas content.
   ===================================================================== */
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}

.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);z-index:40;
  background:#FAFAFB;color:var(--text);
  --mark-hole:#FAFAFB; /* the CL is knocked out of the tile, so it must match the surface behind it */
  display:flex;flex-direction:column;
  padding:18px 12px 12px;
  border-right:1px solid var(--border);
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 9px 22px;font-size:17px;font-weight:650;letter-spacing:-.03em;color:var(--text);
}
.brand-mark{width:25px;height:25px;flex:none;color:var(--text)}

.side-nav{display:grid;gap:2px}
.nav-section-label{
  font-size:11.5px;font-weight:550;letter-spacing:-.005em;
  color:var(--text-muted);padding:18px 11px 6px;
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;
  min-height:40px;padding:0 11px;border-radius:9px;text-align:left;
  color:var(--text-2);font-size:13px;font-weight:500;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.nav-item:hover,.nav-item:focus-visible{background:#F2F3F4;color:var(--text)}
.nav-item:focus-visible{box-shadow:var(--ring)}
.nav-item.active{background:#EDEEF0;color:var(--text);font-weight:550}
.nav-item.active .nav-icon{color:var(--text)}
.nav-icon{width:18px;height:18px;flex:none;display:grid;place-items:center;color:var(--text-muted);transition:color .16s ease}
.nav-item:hover .nav-icon{color:var(--text)}
.nav-item small{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);background:var(--surface-sunken);padding:2px 6px;border-radius:5px;
}
.nav-divider{height:1px;background:var(--border);margin:12px 8px}

/* Usage meter (§11 / §8.2 footer) */
.usage-meter{
  margin:auto 6px 12px;padding:13px 13px 14px;
  background:rgba(255,255,255,.66);border:1px solid var(--border);border-radius:11px;
}
.usage-meter .um-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.usage-meter .um-label{font-size:11px;font-weight:600;color:var(--text);letter-spacing:.01em}
.usage-meter .um-plan{font-size:9px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.usage-track{height:5px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}
.usage-fill{height:100%;border-radius:var(--r-pill);background:var(--red);width:35%}
.usage-meter .um-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.usage-meter .um-count{font-size:10.5px;color:var(--text-muted)}
.usage-meter .um-count b{color:var(--text);font-weight:600}
.usage-meter .um-upgrade{font-size:10.5px;font-weight:650;color:var(--red-dark)}
.usage-meter .um-upgrade:hover{color:var(--red-pressed)}

.sidebar-foot{
  display:flex;align-items:center;gap:10px;
  padding:12px 8px 4px;border-top:1px solid var(--border);
}
.mini-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--ink-900);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;
}
.sidebar-foot .sf-id{display:grid;min-width:0;line-height:1.25}
.sidebar-foot .sf-id strong{font-size:12px;color:var(--text);font-weight:600}
.sidebar-foot .sf-id span{font-size:10.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{margin-left:auto;flex:none;width:8px;height:8px;border-radius:50%;background:#3FBE6E;box-shadow:0 0 0 3px rgba(63,190,110,.16)}

/* Workspace column + topbar */
.workspace{grid-column:2;min-width:0}
.topbar{
  position:sticky;top:0;z-index:30;height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;padding:0 28px;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border);
}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted)}
.crumb strong{color:var(--text);font-weight:650}
.crumb b{color:var(--border-strong);font-weight:400}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
.help-button{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:13px;font-weight:600;cursor:help;transition:border-color .16s ease,color .16s ease;
}
.help-button:hover{border-color:var(--border-strong);color:var(--text)}
.menu-btn{display:none;width:38px;height:38px;border-radius:9px;font-size:18px;color:var(--text)}
.menu-btn:hover{background:var(--surface-2)}

.page{max-width:var(--page-max);margin:0 auto;padding:48px 44px 112px}

/* ---------------------------------------------------------------------
   Tooltip (shared)
   --------------------------------------------------------------------- */
.tooltip{
  position:fixed;z-index:120;max-width:236px;
  background:var(--ink-900);color:#F1F1F3;
  padding:8px 11px;border-radius:8px;font-size:11.5px;line-height:1.4;
  box-shadow:var(--shadow-lg);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;
}
.tooltip.show{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   Modal / dialog (shared)
   --------------------------------------------------------------------- */
.modal-wrap{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;
  background:rgba(11,12,15,.5);backdrop-filter:blur(5px);
}
.modal-wrap.open{display:grid;animation:cl-fade .2s ease}
.modal{
  width:min(960px,100%);max-height:90vh;overflow:auto;
  background:var(--surface);border-radius:var(--r-dialog);
  padding:26px;box-shadow:var(--shadow-lg);
  animation:cl-modal .32s cubic-bezier(.22,1,.36,1);
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.modal-head .eyebrow{margin-bottom:6px}
.modal-close{
  width:34px;height:34px;flex:none;border-radius:9px;font-size:20px;line-height:1;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.modal-close:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface-2)}
.toast-region{position:fixed;right:20px;bottom:20px;z-index:140;display:grid;gap:8px;pointer-events:none}
.toast{min-width:260px;max-width:360px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg);font-size:11.5px;color:var(--text);animation:toast-in var(--motion-layout) var(--ease-out)}
.toast.error{border-color:rgba(201,54,43,.25);background:rgba(255,240,238,.96);color:var(--error)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}

@keyframes cl-fade{from{opacity:0}}
@keyframes cl-modal{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes cl-stage-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cl-shimmer{to{background-position:-200% 0}}

/* Scroll reveal */
.reveal-ready{opacity:0;transform:translateY(12px)}
.revealed{animation:cl-stage-in .55s cubic-bezier(.22,1,.36,1) both}

/* ---------------------------------------------------------------------
   Responsive shell
   --------------------------------------------------------------------- */
@media(max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .workspace{grid-column:1}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .menu-btn{display:grid;place-items:center}
  .page{padding:36px 26px 80px}
}
@media(max-width:680px){
  .topbar{height:58px;padding:0 16px}
  .crumb b,.crumb span:first-child{display:none}
  .page{padding:26px 16px 72px}
  .toast-region{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}.toast{max-width:none;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}