/* =========================================================================
   /help/  ·  Salience design system restyle
   -------------------------------------------------------------------------
   Shipped from this repo, linked in by deploy/refresh_static_chrome.py in
   place of the page's inline <style> block. All classes and ids preserved,
   so the sidebar scrollspy and the Ask-AI wiring bind unchanged.

   What was wrong: radial-gradient wash behind the page, rounded corners and
   pill chips throughout, a WHITE drop shadow on a white card, `.btn-primary`
   setting #111111 text on a #000000 field (invisible), a stray #10b981
   Tailwind emerald on the "New" box, and em dashes in the callout labels.
   ========================================================================= */

.cp-main *,.cp-main *::before,.cp-main *::after{box-sizing:border-box;margin:0;padding:0}
.cp-main{scroll-behavior:smooth}
.cp-main{background-image:none}
.cp-main a{color:var(--color-accent-ink,#2c7a2c);text-decoration:none}
.cp-main a:hover{text-decoration:underline;text-underline-offset:3px}
.cp-main code{
  font-family:var(--font-mono);
  background:var(--color-ink,#000);color:var(--color-accent,#8cf37a);
  padding:0.1rem 0.4rem;border-radius:0;font-size:0.8125rem;
}
.cp-main pre{
  font-family:var(--font-mono);
  background:var(--color-ink,#000);color:var(--color-accent,#8cf37a);
  border:0;border-radius:0;padding:1.2rem;overflow-x:auto;
  font-size:0.8125rem;line-height:1.8;margin:1.25rem 0;
}
.cp-main pre code{background:transparent;padding:0}
.cp-main .btn-primary{
  background:var(--color-ink,#000);color:var(--color-paper,#fff);
  padding:0.8rem 1.6rem;border-radius:0;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8rem;font-weight:400;
  transition:background .25s,color .25s;
}
.cp-main .btn-primary:hover{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000);text-decoration:none}

/* Layout: the wrapper takes the shared 1180px container (carl-extras.css),
   so the sidebar and content sit inside the same frame as every other page
   instead of running full-bleed. */
.cp-main .page-wrapper{display:flex;align-items:flex-start;min-height:100vh}

/* Sidebar */
.cp-main .sidebar{
  width:260px;flex-shrink:0;
  background:var(--color-paper,#fff);
  border-right:1px solid var(--color-hairline,#e6e6e6);
  padding:0 1.5rem 0 0;position:sticky;top:5rem;align-self:flex-start;
  max-height:calc(100vh - 5rem);overflow-y:auto;
}
.cp-main .sidebar-section{padding:0 1.5rem;margin-bottom:2rem}
.cp-main .sidebar-title{
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.625rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--color-muted,#6b6b6b);margin-bottom:0.9rem;
}
.cp-main .sidebar-links{list-style:none}
.cp-main .sidebar-links li{margin-bottom:0}
.cp-main .sidebar-links a{
  display:block;padding:0.5rem 0.75rem;border-radius:0;
  border-left:2px solid transparent;
  color:var(--color-muted,#6b6b6b);font-size:0.8125rem;
  transition:color .2s,border-color .2s,background .2s;
}
.cp-main .sidebar-links a:hover{background:rgba(140,243,122,0.1);color:var(--color-ink,#000);text-decoration:none}
.cp-main .sidebar-links a.active{
  background:transparent;color:var(--color-ink,#000);
  border-left-color:var(--color-accent-deep,#5fdc55);
}
.cp-main .sidebar-links .new-badge,.cp-main .new-badge{
  display:inline-block;background:var(--color-accent,#8cf37a);
  color:var(--color-ink,#000);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.5rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.15rem 0.35rem;border-radius:0;margin-left:0.5rem;
}

/* Main column: gutters come from the wrapper; the measure keeps prose
   readable inside the frame. */
.cp-main .main-content{flex:1;min-width:0;margin-left:0;padding:0 0 0 3rem;max-width:860px}

/* Ask-AI bar */
.cp-main .ask-ai-hero{
  margin:0 0 3.5rem;padding:1.5rem;
  background:var(--color-accent-soft,#f9f8f9);
  border:1px solid var(--color-hairline,#e6e6e6);
  border-radius:0;box-shadow:none;
}
.cp-main .ask-ai-form{
  display:flex;gap:0;align-items:stretch;
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  border-radius:0;padding:0;transition:border-color .2s;
}
.cp-main .ask-ai-form:focus-within{border-color:var(--color-ink,#000);box-shadow:none}
.cp-main .ask-ai-icon{
  flex:0 0 auto;display:flex;align-items:center;
  padding-left:1rem;color:var(--color-accent-ink,#2c7a2c);font-size:1rem;
}
.cp-main .ask-ai-input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--color-ink,#000);font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.875rem;
  padding:0.9rem 0.75rem;
}
.cp-main .ask-ai-input::placeholder{color:var(--color-muted,#6b6b6b)}
.cp-main .ask-ai-btn{
  flex:0 0 auto;background:var(--color-ink,#000);color:var(--color-paper,#fff);
  border:0;border-radius:0;padding:0 1.6rem;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-weight:400;font-size:0.8rem;
  cursor:pointer;transition:background .25s,color .25s;
}
.cp-main .ask-ai-btn:hover{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000);filter:none}
.cp-main .ask-ai-btn:active{transform:scale(0.98)}
.cp-main .ask-ai-btn:disabled{background:var(--color-hairline,#e6e6e6);color:var(--color-muted,#6b6b6b);opacity:1;cursor:not-allowed}
.cp-main .ask-ai-suggestions{
  margin-top:1rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;
  color:var(--color-muted,#6b6b6b);font-size:0.72rem;
}
.cp-main .ask-ai-chip{
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  color:rgba(0,0,0,0.75);border-radius:0;
  padding:0.4rem 0.75rem;font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.72rem;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.cp-main .ask-ai-chip:hover{border-color:var(--color-ink,#000);color:var(--color-ink,#000);background:rgba(140,243,122,0.1)}
@media(max-width:540px){
  .cp-main .ask-ai-form{flex-wrap:wrap;padding:0}
  .cp-main .ask-ai-input{width:100%;min-width:0}
  .cp-main .ask-ai-btn{width:100%;padding:0.9rem}
}

/* Sections */
.cp-main .section h3{
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:500;letter-spacing:-0.02em;
  margin:2rem 0 0.75rem;color:var(--color-ink,#000);
}
.cp-main .section h4{
  font-family:var(--font-display);
  font-size:0.95rem;font-weight:500;letter-spacing:-0.01em;
  margin:1.5rem 0 0.5rem;color:var(--color-ink,#000);
}
.cp-main .section p{color:rgba(0,0,0,0.75);margin-bottom:1rem}
.cp-main .section ul,.cp-main .section ol{color:rgba(0,0,0,0.75);margin:1rem 0;padding-left:1.5rem}
.cp-main .section li{margin-bottom:0.5rem}

/* Callouts: a left accent rule, not a tinted pill. Labels carry no em dash. */
.cp-main .feature-box{
  background:var(--color-accent-soft,#f9f8f9);
  border:1px solid var(--color-hairline,#e6e6e6);
  border-radius:0;padding:1.5rem;margin:1.5rem 0;
}
.cp-main .feature-box h4{margin-top:0;color:var(--color-ink,#000)}
.cp-main .tip-box,.cp-main .warning-box,.cp-main .new-feature-box{
  background:var(--color-accent-soft,#f9f8f9);
  border:0;border-left:2px solid var(--color-hairline,#e6e6e6);
  border-radius:0;padding:1rem 1.25rem;margin:1.5rem 0;
}
.cp-main .tip-box p,.cp-main .warning-box p,.cp-main .new-feature-box p{display:inline;margin:0}
.cp-main .tip-box::before,.cp-main .warning-box::before,.cp-main .new-feature-box::before{
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-weight:500;
  text-transform:uppercase;letter-spacing:0.14em;font-size:0.625rem;
  display:block;margin-bottom:0.4rem;
}
.cp-main .tip-box{border-left-color:var(--color-accent-deep,#5fdc55)}
.cp-main .tip-box::before{content:"Tip";color:var(--color-accent-ink,#2c7a2c)}
.cp-main .warning-box{border-left-color:var(--color-warn,#8a5a0a)}
.cp-main .warning-box::before{content:"Note";color:var(--color-warn,#8a5a0a)}
.cp-main .new-feature-box{border-left-color:var(--color-ink,#000)}
.cp-main .new-feature-box::before{content:"New";color:var(--color-ink,#000)}

/* Tables */
.cp-main table{
  width:100%;border-collapse:collapse;margin:1.5rem 0;
  border:1px solid var(--color-hairline,#e6e6e6);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem;
}
.cp-main th,.cp-main td{padding:0.75rem 1rem;text-align:left}
.cp-main th{
  font-size:0.625rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--color-muted,#6b6b6b);
  border-bottom:1px solid var(--color-hairline,#e6e6e6);
}
.cp-main td{color:rgba(0,0,0,0.8);border-bottom:1px solid #f0f0f0}
.cp-main tr:last-child td{border-bottom:0}

/* Screenshots */
.cp-main .screenshot{
  border:1px solid var(--color-hairline,#e6e6e6);
  border-radius:0;margin:1.5rem 0;max-width:100%;display:block;
}
.cp-main .screenshot-caption{
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.625rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--color-muted,#6b6b6b);margin-top:-1rem;margin-bottom:1.5rem;
}
.cp-main .badge{
  display:inline-flex;align-items:center;gap:0.35rem;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  font-size:0.5625rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.2rem 0.5rem;border-radius:0;
  background:var(--color-accent-soft,#f9f8f9);
  border:1px solid var(--color-hairline,#e6e6e6);
  color:var(--color-muted,#6b6b6b);
  vertical-align:baseline;
}
/* The badges' inline SVGs ship with no width/height, so unconstrained they
   render at intrinsic size - the giant boxed icons Carl flagged. Pin them to
   the type size. */
.cp-main .badge svg{width:10px;height:10px;flex-shrink:0}
/* The two verdict badges sit one above the other in the copy, so they share a
   minimum width and the longer label ("UNVERIFIED") sets it. */
.cp-main .badge.verified,
.cp-main .badge.suspicious{min-width:9.5rem;justify-content:flex-start}
.cp-main .badge.verified{background:var(--color-accent,#8cf37a);border-color:transparent;color:var(--color-ink,#000)}
.cp-main .badge.suspicious{background:var(--color-paper,#fff);border-color:var(--color-warn,#8a5a0a);color:var(--color-warn,#8a5a0a)}

@media(max-width:900px){
  .cp-main .page-wrapper{flex-direction:column}
  .cp-main .sidebar{width:100%;position:static;max-height:none;border-right:0;border-bottom:1px solid var(--color-hairline,#e6e6e6);padding:0 0 1.5rem;margin-bottom:2rem}
  /* In the column layout the wrapper's align-items:flex-start sizes the
     content to fit its widest unbreakable child (min-width:0 only acts on
     the vertical axis here), pushing the page wider than the viewport. Pin
     it to the column width, and let wide tables scroll inside themselves
     the way pre blocks already do. */
  .cp-main .main-content{padding:0;align-self:stretch;width:100%;max-width:100%;overflow-wrap:break-word}
  .cp-main table{display:block;max-width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){.cp-main *{transition-duration:0.01ms!important}}

/* ---- Sidebar accordion (behaviour in carl-nav.js) ----------------------- */
.cp-main .sidebar-section{padding:0;margin-bottom:0;border-bottom:1px solid var(--color-hairline,#e6e6e6)}
.cp-main .sidebar-section:first-child{border-top:1px solid var(--color-hairline,#e6e6e6)}

.cp-main .sidebar-title{
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  margin-bottom:0;padding:0.85rem 0.25rem;
  cursor:pointer;user-select:none;
  transition:color .2s;
}
.cp-main .sidebar-title:hover{color:var(--color-ink,#000)}
.cp-main .sidebar-title::after{
  content:"";flex-shrink:0;width:7px;height:7px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;
  transition:transform .2s;
}
.cp-main .sidebar-section.collapsed .sidebar-title::after{transform:rotate(-45deg);margin-top:0}
.cp-main .sidebar-section.collapsed .sidebar-links{display:none}
.cp-main .sidebar-links{padding-bottom:0.75rem}

/* ---- Ask-AI in the rail (moved there by carl-nav.js) -------------------- */
.cp-main .sidebar .ask-ai-hero{
  margin:0 0 1.75rem;padding:1rem;
  background:var(--color-accent-soft,#f9f8f9);
  border:1px solid var(--color-hairline,#e6e6e6);
}
.cp-main .sidebar .ask-ai-form{flex-wrap:wrap;gap:0.5rem;border:0;background:transparent;padding:0}
.cp-main .sidebar .ask-ai-form:focus-within{border:0}
.cp-main .sidebar .ask-ai-icon{display:none}
.cp-main .sidebar .ask-ai-input{
  width:100%;flex:none;
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8125rem;line-height:1.6;
  padding:0.8rem 0.85rem;
  min-height:6.5rem;resize:none;display:block;
}
.cp-main .sidebar .ask-ai-input::placeholder{color:var(--color-muted,#6b6b6b)}
.cp-main .sidebar .ask-ai-input:focus{border-color:var(--color-ink,#000)}
.cp-main .sidebar .ask-ai-btn{width:100%;padding:0.85rem 0;font-size:0.8125rem}
/* Suggestions: quiet stacked rows, not a ragged chip cloud. */
.cp-main .sidebar .ask-ai-suggestions{
  display:flex;flex-direction:column;align-items:stretch;
  margin-top:0.9rem;gap:0.4rem;
}
.cp-main .sidebar .ask-ai-chip{
  display:block;width:100%;text-align:left;
  font-size:0.6875rem;padding:0.55rem 0.7rem;
  background:var(--color-paper,#fff);
}