/* ::: gbp.css . SST . /shared/gbp/v1/ . 2026-07-07 . v1.015 :::
   The base type (h1-h6, p) is INTENTIONALLY left to each site's own theme — no font,
   size, or color is set on them here. This file ONLY styles the guide's COMPONENT
   FEATURES: the numbered step badges, the details table, and the callout boxes
   (checklist, good-news, warnings, manager-email highlight, path, fork cards, copy
   button). Boxes enforce a readable dark text color so they work on light OR dark site
   themes. Brand accent = --gbp-accent (per-client). EDIT HERE ONLY; bump ?v=N in every
   consuming /ops/gbp.html (sst-cache-bust rule). No Liquid (SST rule #7). */
.tlgbp{
  --gbp-accent:#2b6cb0; --gbp-accent-soft:#eaf1f8; --gbp-surface:#ffffff; --gbp-border:#e8e6dc;
  --gbp-green:#2f855a; --gbp-green-soft:#e9f5ee; --gbp-green-border:#bfe3cf;
  --gbp-warn-soft:#fdf6e3; --gbp-warn-border:#f0dca6;
  max-width:1000px;margin:0 auto;padding:8px 4px 40px;
}
.tlgbp *{box-sizing:border-box;}
.tlgbp .gbp-head{border-bottom:3px solid var(--gbp-accent);padding-bottom:16px;margin-bottom:8px;}

/* callout boxes / details — keep their features; force readable dark text on any theme */
.tlgbp .gbp-callout,.tlgbp .gbp-checklist,.tlgbp .gbp-details,.tlgbp .gbp-path,
.tlgbp .gbp-warn,.tlgbp .gbp-good,.tlgbp .gbp-highlight,.tlgbp .gbp-fork .gbp-card{color:#1f2430;}

.tlgbp .gbp-callout{border-radius:12px;padding:16px 20px;margin:22px 0;}
.tlgbp .gbp-goodnews{background:var(--gbp-green-soft);border:1px solid var(--gbp-green-border);}

.tlgbp .gbp-checklist{background:var(--gbp-surface);border:1px solid var(--gbp-border);border-radius:12px;padding:20px 24px;margin:22px 0 30px;}
.tlgbp .gbp-checklist ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.tlgbp .gbp-checklist ul li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0 !important;list-style:none !important;}
.tlgbp .gbp-checklist li.gbp-cli{cursor:pointer;user-select:none;}
.tlgbp .gbp-check{flex:0 0 auto;color:#b3b8bf;margin-top:3px;}
.tlgbp .gbp-checklist li.gbp-checked .gbp-check{color:rgba(3,147,3,1);}

.tlgbp .gbp-step{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--gbp-border);}
.tlgbp .gbp-step:first-of-type{border-top:none;}
.tlgbp .gbp-num{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--gbp-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:6px;}
.tlgbp .gbp-sb{flex:1;min-width:0;}

.tlgbp .gbp-path{background:#f4f2ec;border:1px solid var(--gbp-border);border-radius:10px;padding:12px 16px;margin:10px 0;}

.tlgbp .gbp-fork{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 4px;}
.tlgbp .gbp-fork .gbp-card{border:1px solid var(--gbp-border);border-radius:10px;padding:14px 16px;background:var(--gbp-surface);}

.tlgbp .gbp-details{background:var(--gbp-surface);border:1px solid var(--gbp-border);border-radius:10px;padding:6px 18px;margin:10px 0;}
.tlgbp .gbp-details .gbp-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--gbp-border);}
.tlgbp .gbp-details .gbp-row:last-child{border-bottom:none;}
.tlgbp .gbp-details .gbp-v{font-weight:600;text-align:right;}

.tlgbp .gbp-warn{background:var(--gbp-warn-soft);border:1px solid var(--gbp-warn-border);border-radius:12px;padding:14px 18px;margin:14px 0;}
.tlgbp .gbp-good{background:var(--gbp-green-soft);border:1px solid var(--gbp-green-border);border-radius:12px;padding:14px 18px;margin:14px 0;}

.tlgbp .gbp-highlight{background:#fff;border:2px dashed var(--gbp-accent);border-radius:10px;padding:14px 18px;margin:10px 0;}
.tlgbp .gbp-copy{display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:#fff;border:1px solid var(--gbp-accent);border-radius:8px;padding:6px 10px 6px 12px;font-family:inherit;line-height:1.2;}
.tlgbp .gbp-copy:hover{background:var(--gbp-accent-soft);}
.tlgbp .gbp-copy .gbp-copy-ico{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--gbp-accent);border-radius:5px;padding:4px 9px;white-space:nowrap;}
.tlgbp .gbp-copy.gbp-copied{border-color:var(--gbp-green);background:var(--gbp-green-soft);}
.tlgbp .gbp-copy.gbp-copied .gbp-copy-ico{background:var(--gbp-green);}

.tlgbp .gbp-foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--gbp-border);}

.tlgbp .gbp-notify{display:inline-block;background:var(--gbp-accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:14px 26px;border-radius:10px;margin:6px 0 2px;line-height:1.2;}
.tlgbp .gbp-notify:hover{filter:brightness(1.07);}

.tlgbp .gbp-modal-overlay{position:fixed;inset:0;background:rgba(20,20,19,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px;}
.tlgbp .gbp-modal-overlay[hidden]{display:none;}
.tlgbp .gbp-modal{background:#fff;border-radius:14px;width:100%;max-width:560px;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden;}
.tlgbp .gbp-modal-x{position:absolute;top:6px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:#666;cursor:pointer;z-index:2;}
.tlgbp .gbp-modal-frame{display:block;width:100%;height:540px;border:0;}

@media(max-width:560px){
  .tlgbp .gbp-checklist ul{grid-template-columns:1fr;}
  .tlgbp .gbp-fork{grid-template-columns:1fr;}
  .tlgbp .gbp-details .gbp-row{flex-direction:column;gap:2px;}
  .tlgbp .gbp-details .gbp-v{text-align:left;}
}
@media print{ .tlgbp{padding:0;} .tlgbp .gbp-step{page-break-inside:avoid;} }