/* ============================================================
   costandprofitability.com - Glossary hub + entry template
   Lote Enciclopédia (26 jun 2026). Praxis design system.
   Scoped under .cc-gloss so it drops into any page without leaking.
   Never blue. EN / PT-PT / ES-ES (ES is the longest - tested).
   ============================================================ */

.cc-gloss{
  --g-orange:#C75B22; --g-orange-br:#E2761A; --g-green:#1C7A57; --g-green-soft:#3E9B74;
  --g-ink:#1A1714; --g-ink2:#4A4138; --g-muted:#756859; --g-muted2:#9A8E7E;
  --g-paper:#F3EEE4; --g-paper2:#EDE6D8; --g-surface:#FBF9F3; --g-surface2:#FAF7F0;
  --g-line:#DCD3C2; --g-line2:#C9BEAA; --g-dark:#14110D; --g-red:#B23A2E; --g-wheat:#E8DBC2;
  --g-mono:'IBM Plex Mono',ui-monospace,monospace;
  --g-serif:'Newsreader',Georgia,serif;
  --g-sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--g-sans);
  color:var(--g-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.cc-gloss *{box-sizing:border-box;}
.cc-gloss [hidden]{display:none !important;}

/* ---------- hero ---------- */
.cc-gloss .g-hero{
  background:var(--g-dark);color:#fff;border-radius:12px;
  padding:46px 40px 40px;margin-bottom:6px;position:relative;overflow:hidden;
}
.cc-gloss .g-hero::after{
  content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(199,91,34,.20),transparent 70%);pointer-events:none;
}
.cc-gloss .g-eyebrow{
  font-family:var(--g-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--g-orange-br);display:flex;align-items:center;gap:11px;margin-bottom:16px;
}
.cc-gloss .g-eyebrow::before{content:"";width:22px;height:1px;background:var(--g-orange-br);display:inline-block;}
.cc-gloss .g-hero h1{
  font-family:var(--g-serif);font-weight:500;font-size:clamp(30px,4.4vw,46px);line-height:1.06;
  letter-spacing:-.012em;margin:0;max-width:20ch;
}
.cc-gloss .g-hero h1 em{font-style:italic;color:var(--g-orange-br);}
.cc-gloss .g-hero p{color:#CFC4B2;margin:16px 0 0;max-width:60ch;font-size:16px;line-height:1.62;}
.cc-gloss .g-hero .g-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;
  font-family:var(--g-mono);font-size:11.5px;letter-spacing:.04em;color:var(--g-wheat);
}
.cc-gloss .g-hero .g-meta b{color:#fff;font-weight:500;}

/* ---------- toolbar ---------- */
.cc-gloss .g-tools{
  position:sticky;top:0;z-index:30;margin-top:18px;
  background:rgba(243,238,228,.94);backdrop-filter:saturate(150%) blur(10px);
  border:1px solid var(--g-line);border-radius:10px;padding:14px 16px;
}
.cc-gloss .g-searchrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.cc-gloss .g-search{
  flex:1 1 240px;display:flex;align-items:center;gap:10px;
  background:var(--g-surface);border:1px solid var(--g-line2);border-radius:8px;padding:11px 14px;
  transition:border-color .15s,box-shadow .15s;
}
.cc-gloss .g-search:focus-within{border-color:var(--g-orange);box-shadow:0 0 0 3px rgba(199,91,34,.12);}
.cc-gloss .g-search svg{flex:none;width:17px;height:17px;stroke:var(--g-muted);}
.cc-gloss .g-search input{
  flex:1;border:none;background:transparent;outline:none;font-family:var(--g-sans);
  font-size:15px;color:var(--g-ink);min-width:0;
}
.cc-gloss .g-search input::placeholder{color:var(--g-muted2);}
.cc-gloss .g-search .g-clear{
  flex:none;border:none;background:transparent;color:var(--g-muted);cursor:pointer;
  font-family:var(--g-mono);font-size:18px;line-height:1;padding:0 2px;display:none;
}
.cc-gloss .g-search .g-clear:hover{color:var(--g-orange);}
.cc-gloss .g-search.has-val .g-clear{display:block;}
.cc-gloss .g-count{
  font-family:var(--g-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g-muted);white-space:nowrap;flex:none;
}
.cc-gloss .g-count b{color:var(--g-orange);font-weight:600;}

/* theme chips */
.cc-gloss .g-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.cc-gloss .g-chip{
  font-family:var(--g-mono);font-size:11.5px;letter-spacing:.02em;padding:7px 13px;border-radius:100px;
  border:1px solid var(--g-line2);background:var(--g-surface);color:var(--g-ink2);
  cursor:pointer;transition:all .14s;white-space:nowrap;min-height:34px;display:inline-flex;align-items:center;
}
.cc-gloss .g-chip:hover{border-color:var(--g-orange);color:var(--g-orange);}
.cc-gloss .g-chip.on{background:var(--g-ink);color:var(--g-paper);border-color:var(--g-ink);}
.cc-gloss .g-chip .gc-key{color:var(--g-orange-br);font-weight:600;margin-right:6px;}
.cc-gloss .g-chip.on .gc-key{color:var(--g-orange-br);}

/* A-Z rail */
.cc-gloss .g-az{display:flex;flex-wrap:wrap;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--g-line);}
.cc-gloss .g-az a{
  font-family:var(--g-mono);font-size:12px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;color:var(--g-ink2);text-decoration:none;transition:all .12s;
}
.cc-gloss .g-az a:hover{background:var(--g-orange);color:#fff;}
.cc-gloss .g-az a.dim{color:var(--g-muted2);opacity:.45;pointer-events:none;}

/* ---------- sections + grid ---------- */
.cc-gloss .g-body{margin-top:30px;}
.cc-gloss .g-section{margin-bottom:40px;scroll-margin-top:200px;}
.cc-gloss .g-section.empty{display:none;}
.cc-gloss .g-sechead{
  display:flex;align-items:baseline;gap:14px;margin-bottom:18px;padding-bottom:12px;
  border-bottom:1px solid var(--g-line);
}
.cc-gloss .g-sechead .g-seckey{
  font-family:var(--g-mono);font-size:12px;font-weight:600;color:var(--g-orange);letter-spacing:.06em;
  flex:none;
}
.cc-gloss .g-sechead h2{
  font-family:var(--g-serif);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:0;color:var(--g-ink);
}
.cc-gloss .g-sechead .g-secn{
  margin-left:auto;font-family:var(--g-mono);font-size:11px;color:var(--g-muted2);letter-spacing:.04em;flex:none;
}
.cc-gloss .g-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:760px){ .cc-gloss .g-grid{grid-template-columns:1fr;} }

/* ---------- entry card ---------- */
.cc-gloss .g-term{
  background:var(--g-surface);border:1px solid var(--g-line);border-radius:10px;
  padding:22px 22px 20px;scroll-margin-top:210px;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cc-gloss .g-term.target{border-color:var(--g-orange);box-shadow:0 0 0 3px rgba(199,91,34,.13);}
.cc-gloss .g-term .g-thead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px;}
.cc-gloss .g-term h3{
  font-family:var(--g-serif);font-weight:500;font-size:20px;line-height:1.16;letter-spacing:-.01em;
  margin:0;color:var(--g-ink);
}
.cc-gloss .g-term .g-tag{
  flex:none;font-family:var(--g-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-muted);border:1px solid var(--g-line2);border-radius:100px;padding:4px 9px;white-space:nowrap;
  margin-top:3px;
}

/* definition = citable answer block */
.cc-gloss .g-def{
  background:var(--g-surface2);border:1px solid var(--g-line);border-radius:8px;
  padding:13px 15px 14px;margin-bottom:13px;position:relative;
}
.cc-gloss .g-def::before{
  content:attr(data-l);position:absolute;top:-8px;left:13px;background:var(--g-surface);
  font-family:var(--g-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--g-orange);
  padding:0 6px;
}
.cc-gloss .g-def p{margin:0;font-size:14.5px;line-height:1.58;color:var(--g-ink2);}
.cc-gloss .g-def p .lead{color:var(--g-ink);font-weight:500;}

/* formula / example mono block */
.cc-gloss .g-formula{
  background:var(--g-dark);border-radius:8px;padding:12px 14px;margin-bottom:13px;overflow-x:auto;
}
.cc-gloss .g-formula .fl{
  font-family:var(--g-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--g-muted2);
  margin-bottom:7px;
}
.cc-gloss .g-formula code{
  font-family:var(--g-mono);font-size:12.5px;line-height:1.65;color:#EDE6D8;display:block;white-space:pre-wrap;
}
.cc-gloss .g-formula.ex{background:var(--g-wheat);}
.cc-gloss .g-formula.ex .fl{color:var(--g-muted);}
.cc-gloss .g-formula.ex code{color:var(--g-ink2);}

/* footer of card: related + learn more */
.cc-gloss .g-foot{margin-top:auto;}
.cc-gloss .g-rel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;}
.cc-gloss .g-rel .rl{
  font-family:var(--g-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted2);
  width:100%;margin-bottom:1px;
}
.cc-gloss .g-rel a, .cc-gloss .g-rel span.flat{
  font-family:var(--g-sans);font-size:12px;padding:5px 11px;border-radius:100px;
  border:1px solid var(--g-line2);background:var(--g-paper);color:var(--g-ink2);text-decoration:none;
  transition:all .13s;line-height:1.25;
}
.cc-gloss .g-rel a:hover{border-color:var(--g-orange);color:var(--g-orange);background:var(--g-surface);}
.cc-gloss .g-rel span.flat{color:var(--g-muted);border-style:dashed;}
.cc-gloss .g-learn{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--g-sans);font-weight:600;font-size:13px;
  color:var(--g-orange);text-decoration:none;transition:gap .15s,color .15s;min-height:32px;
}
.cc-gloss .g-learn:hover{color:var(--g-orange-br);gap:10px;}
.cc-gloss .g-learn svg{width:14px;height:14px;stroke:currentColor;}

/* empty state */
.cc-gloss .g-empty{
  text-align:center;padding:56px 20px;color:var(--g-muted);
}
.cc-gloss .g-empty .ge-t{font-family:var(--g-serif);font-size:22px;color:var(--g-ink2);margin-bottom:8px;}
.cc-gloss .g-empty .ge-s{font-family:var(--g-mono);font-size:12px;letter-spacing:.03em;}
.cc-gloss .g-empty button{
  margin-top:16px;font-family:var(--g-sans);font-weight:600;font-size:13px;color:#fff;background:var(--g-orange);
  border:none;border-radius:6px;padding:10px 18px;cursor:pointer;
}
.cc-gloss .g-empty button:hover{background:var(--g-orange-br);}

/* highlight search matches */
.cc-gloss mark{background:rgba(226,118,26,.26);color:inherit;border-radius:2px;padding:0 1px;}

/* back-to-top */
.cc-gloss .g-top{
  position:fixed;right:22px;bottom:22px;z-index:40;width:44px;height:44px;border-radius:50%;
  background:var(--g-ink);color:var(--g-paper);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;box-shadow:0 4px 16px rgba(20,17,13,.3);
}
.cc-gloss .g-top.show{opacity:1;pointer-events:auto;}
.cc-gloss .g-top:hover{background:var(--g-orange);}
.cc-gloss .g-top svg{width:18px;height:18px;stroke:currentColor;}

@media(max-width:560px){
  .cc-gloss .g-hero{padding:34px 24px 30px;}
  .cc-gloss .g-term{padding:18px 18px 16px;}
}