/* ─── Contabeleza Guides — Ivory + Clay Theme ───
   Inspired by thariqs.github.io/html-effectiveness/
   Warm, bright, readable. Only loaded on guide pages. */

:root {
  --ivory:    #FAF9F5;
  --paper:    #FFFFFF;
  --slate:    #141413;
  --clay:     #D97757;
  --clay-d:   #B85C3E;
  --oat:      #E3DACC;
  --olive:    #788C5D;
  --g100:     #F0EEE6;
  --g200:     #E6E3DA;
  --g300:     #D1CFC5;
  --g500:     #87867F;
  --g700:     #3D3D3A;
  --serif:    ui-serif, Georgia, "Times New Roman", Times, serif;
  --sans:     system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:     ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ivory) !important;
  color: var(--slate) !important;
  font-family: var(--sans) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── Topbar override ─── */
.topbar {
  background: var(--ivory) !important;
  border-bottom: 1.5px solid var(--g300) !important;
}
.topbar .brand { color: var(--slate) !important; font-family: var(--sans) !important; }
.topbar .brand .dot { background: var(--clay) !important; -webkit-text-fill-color: var(--clay) !important; }
nav.tabs a { color: var(--g500) !important; }
nav.tabs a.active { background: var(--clay) !important; color: var(--paper) !important; }
nav.tabs a:hover:not(.active) { background: var(--g100) !important; color: var(--slate) !important; }
.topbar .ext { color: var(--g500) !important; }
.topbar .ext:hover { color: var(--clay) !important; }
.more-menu summary.active { background: var(--clay) !important; color: var(--paper) !important; }
.more-dropdown a:hover { background: var(--g100) !important; color: var(--clay) !important; }

/* ─── Page wrapper ─── */
.page { max-width: 1120px !important; padding: 0 32px 140px !important; position: relative; }

/* ─── Top-right back link (general guide pages) ─── */
.g-back {
  position: absolute;
  top: 28px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g500);
  text-decoration: none;
  padding: 8px 14px;
  border: 1.5px solid var(--g300);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  transition: all 0.15s ease;
  z-index: 10;
}
.g-back:hover {
  color: var(--clay);
  border-color: var(--clay);
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-2px);
}
.g-back-arrow {
  font-size: 14px;
  transition: transform 0.15s ease;
}
.g-back:hover .g-back-arrow {
  transform: translateX(-2px);
}
@media (max-width: 720px) {
  .g-back { top: 18px; right: 18px; font-size: 11px; padding: 6px 10px; }
  .guide-masthead { padding-top: 70px; }
}

/* ─── Masthead (catalog pages) ─── */
.guide-masthead {
  padding: 80px 0 56px;
  border-bottom: 1.5px solid var(--g300);
  margin-bottom: 12px;
  position: relative;
  overflow: visible;
}
.guide-masthead .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.guide-masthead .eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: var(--clay);
}
.guide-masthead h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(38px, 5.4vw, 62px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.018em !important;
  margin: 0 0 8px !important;
  max-width: 17ch;
  color: var(--slate) !important;
}
.guide-masthead h1 em {
  font-style: italic;
  color: var(--clay) !important;
}
.guide-masthead .intro {
  font-size: 17.5px;
  color: var(--g700);
  margin: 22px 0 0;
  max-width: 620px;
}
.guide-masthead .intro a { color: var(--clay); text-decoration-color: var(--oat); text-underline-offset: 3px; }
.guide-masthead .intro a:hover { text-decoration-color: var(--clay); }

/* ─── TOC pills ─── */
.guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 26px 0 0;
}
.guide-toc a {
  font-size: 13.5px;
  padding: 7px 14px;
  border: 1.5px solid var(--g300);
  border-radius: 999px;
  text-decoration: none;
  color: var(--g700);
  background: var(--paper);
  transition: border-color 120ms, color 120ms, background 120ms;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.guide-toc a .n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--g500);
}
.guide-toc a:hover { border-color: var(--slate); color: var(--slate); }
.guide-toc a:hover .n { color: var(--clay); }

/* ─── Section ─── */
section.guide-section {
  margin-top: 120px;
  scroll-margin-top: 28px;
}
section {
  margin-top: 120px;
  scroll-margin-top: 28px;
}
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}
.sec-head .idx {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--clay);
  font-weight: 600;
  width: 34px;
  flex-shrink: 0;
}
.sec-head h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  margin: 0 !important;
  letter-spacing: -0.012em !important;
  color: var(--slate) !important;
}
.sec-head h2::before { display: none !important; }
.sec-head .count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--g500);
  background: var(--g100);
  padding: 2px 8px;
  border-radius: 999px;
}
.sec-intro {
  font-size: 16px;
  color: var(--g700);
  max-width: 700px;
  margin: 0 0 24px 50px;
}
@media (max-width: 640px) { .sec-intro { margin-left: 0; } }

/* ─── Card grid ─── */
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 20px;
  margin-left: 50px;
}
@media (max-width: 640px) { .g-grid { margin-left: 0; } }

/* ─── Cards (catalog) ─── */
a.g-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--g300);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  overflow: hidden;
}
a.g-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(20, 20, 19, 0.10);
  border-color: var(--slate);
}
.g-card .thumb {
  height: 132px;
  background: var(--g100);
  border-bottom: 1.5px solid var(--g200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: background 150ms ease;
}
a.g-card:hover .thumb { background: var(--oat); }
.g-card .thumb svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.g-card .thumb svg .st { stroke: var(--g500); fill: none; stroke-width: 2.5; }
.g-card .thumb svg .fl { fill: var(--g300); }
.g-card .thumb svg .cl { fill: var(--clay); }
.g-card .thumb svg .ol { fill: var(--olive); }
.g-card .thumb svg .oa { fill: var(--oat); stroke: var(--g500); stroke-width: 2.5; }
.g-card .thumb svg .sl { fill: var(--slate); }
.g-card .thumb svg .wh { fill: var(--paper); stroke: var(--g500); stroke-width: 2.5; }
.g-card .thumb svg .ln { stroke: var(--g500); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.g-card .thumb svg .lc { stroke: var(--clay); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.g-card .thumb svg .da { stroke-dasharray: 4 4; }
a.g-card:hover .thumb svg .fl { fill: var(--g500); }
a.g-card:hover .thumb svg .oa { fill: var(--paper); }

.g-card .body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.g-card .title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.22;
  color: var(--slate);
  margin-bottom: 7px;
  letter-spacing: -0.008em;
}
.g-card .desc {
  font-size: 15px;
  color: var(--g700);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}
.g-card .file {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--g500);
  border-top: 1px solid var(--g100);
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.g-card .file .arrow { transition: transform 150ms ease; color: var(--g300); }
a.g-card:hover .file { color: var(--clay); }
a.g-card:hover .file .arrow { transform: translateX(3px); color: var(--clay); }

/* ─── Inline content cards ─── */
.g-content-card {
  background: var(--paper);
  border: 1.5px solid var(--g300);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: box-shadow 150ms;
}
.g-content-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.g-content-card h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  margin-top: 0 !important;
  color: var(--slate) !important;
}
.g-content-card h2::before { display: none !important; }
.g-content-card h3 {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--g500) !important;
  margin: 1.4rem 0 0.5rem !important;
}

/* ─── Tables ─── */
.g-content-card table,
.g-content-card .state-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0.75rem 0;
}
.g-content-card th {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--g500) !important;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1.5px solid var(--g200);
  background: transparent !important;
}
.g-content-card td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--g100);
  color: var(--g700);
  font-size: 15px;
}
.g-content-card tr:hover td {
  background: var(--g100) !important;
  border-left: 2px solid var(--clay) !important;
  padding-left: calc(0.75rem - 2px) !important;
}

/* ─── Code blocks ─── */
.g-content-card pre,
.g-content-card code {
  font-family: var(--mono) !important;
  font-size: 13px !important;
}
.g-content-card pre {
  background: var(--g100) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 10px !important;
  padding: 1rem 1.1rem !important;
  overflow-x: auto;
  line-height: 1.55;
  color: var(--slate) !important;
}
.g-content-card code {
  background: var(--g100) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: var(--slate) !important;
  font-size: 0.88em !important;
}
.g-content-card pre code {
  background: transparent !important;
  padding: 0 !important;
}

/* ─── Callouts ─── */
.callout {
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  margin: 1rem 0;
  font-size: 15px;
  border-left: 3.5px solid;
  line-height: 1.5;
}
.callout strong { display: block; margin-bottom: 4px; }
.callout.success { background: rgba(120,140,93,0.08); border-left-color: var(--olive); }
.callout.warn { background: rgba(217,119,87,0.08); border-left-color: var(--clay); }
.callout.info { background: rgba(135,134,127,0.06); border-left-color: var(--g500); }

/* ─── Flow diagrams ─── */
.flow-steps { display: flex; flex-direction: column; gap: 6px; margin: 1.5rem 0; }
.flow-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ivory);
  border: 1.5px solid var(--g200);
  border-left: 4px solid var(--g300);
  border-radius: 0 10px 10px 0;
  transition: border-color 150ms;
}
.flow-step:hover { border-left-color: var(--clay); }
.flow-step.opt { border-left-color: var(--oat); }
.flow-step.active { border-left-color: var(--clay); background: rgba(217,119,87,0.04); }
.flow-step.done { border-left-color: var(--olive); }
.flow-step .step-num {
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--paper);
  border: 1.5px solid var(--g200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-family: var(--mono);
  color: var(--g500);
}
.flow-step.active .step-num { border-color: var(--clay); color: var(--clay); }
.flow-step.done .step-num { border-color: var(--olive); color: var(--olive); }
.flow-step .step-body { flex: 1; }
.flow-step .step-body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--slate); font-family: var(--sans); }
.flow-step .step-body p { margin: 4px 0 0; font-size: 15px; color: var(--g500); line-height: 1.5; }

/* ─── Horizontal state diagram ─── */
.state-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1.5rem 1rem;
  margin: 1rem 0;
  background: var(--ivory);
  border-radius: 10px;
  justify-content: center;
}
.state-row .state {
  padding: 6px 14px;
  background: var(--paper);
  border: 1.5px solid var(--g300);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--g700);
}
.state-row .state.warn { border-color: var(--clay); color: var(--clay); }
.state-row .state.ok { border-color: var(--olive); color: var(--olive); }
.state-row .arrow { color: var(--g300); font-size: 1.2rem; }

/* ─── Architecture diagram ─── */
.arch-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 2rem 1rem;
  margin: 1rem 0;
  background: var(--ivory);
  border-radius: 10px;
  border: 1.5px solid var(--g200);
}
.arch-row .box {
  padding: 10px 16px;
  background: var(--paper);
  border: 1.5px solid var(--g300);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  min-width: 90px;
  color: var(--g700);
}
.arch-row .box.hl { border-color: var(--clay); color: var(--clay); }
.arch-row .box.green { border-color: var(--olive); color: var(--olive); }
.arch-row .box.slate { border-color: var(--slate); color: var(--slate); }
.arch-row .arrow { color: var(--g300); font-size: 1.3rem; }

/* ─── Grids ─── */
.g-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 1rem 0;
}
.g-piece {
  background: var(--ivory);
  border: 1.5px solid var(--g200);
  border-radius: 10px;
  padding: 16px;
}
.g-piece h3 { font-family: var(--mono); font-size: 15px; margin: 0 0 8px; color: var(--slate); }
.g-piece p { font-size: 14.5px; color: var(--g500); margin: 0; }

/* ─── Auth type cards ─── */
.auth-card {
  background: var(--ivory);
  border: 1.5px solid var(--g200);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.auth-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.auth-card-header code { font-size: 14px; background: var(--paper); padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--g300); }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.badge.default { background: var(--clay); color: var(--paper); }
.badge.optional { background: var(--oat); color: var(--g700); }

/* ─── Tabs ─── */
.g-tabs { margin: 1rem 0; }
.g-tabs input[type="radio"] { display: none; }
.g-tabs label {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid var(--g300);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--g500);
  margin-right: 3px;
  background: var(--ivory);
  transition: all 0.15s;
}
.g-tabs label:hover { color: var(--g800); border-color: var(--clay); }
.g-tabs input[type="radio"]:checked + label {
  background: var(--paper);
  color: var(--clay);
  border-color: var(--clay);
}
.g-tab-panel { display: none; }
.g-tabs #tab1:checked ~ .g-tab-panel[data-t="tab1"],
.g-tabs #tab2:checked ~ .g-tab-panel[data-t="tab2"],
.g-tabs #tab3:checked ~ .g-tab-panel[data-t="tab3"],
.g-tabs #tab4:checked ~ .g-tab-panel[data-t="tab4"] {
  display: block;
  border: 1.5px solid var(--clay);
  border-radius: 0 10px 10px 10px;
  background: var(--paper);
  padding: 1.4rem 1.6rem;
}
.g-tab-panel > h3:first-child { margin-top: 0; }
.g-tab-panel > p:first-child { margin-top: 0; }
.g-tab-panel pre { margin: 0; border: none !important; background: transparent !important; border-radius: 0 !important; }

/* ─── Method badges ─── */
.m {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  display: inline-block !important;
  min-width: 52px !important;
  text-align: center !important;
}
.m.get { background: var(--olive); color: var(--paper) !important; }
.m.post { background: var(--clay); color: var(--paper) !important; }
.m.patch { background: var(--g500); color: var(--paper) !important; }
.m.put { background: var(--g700); color: var(--paper) !important; }
.m.delete { background: var(--slate); color: var(--paper) !important; }

/* ─── Endpoint list ─── */
.ep-group { margin: 1rem 0; }
.ep-group h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g500); margin-bottom: 6px; }
.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 4px;
}
.ep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--ivory);
  border-radius: 8px;
  font-size: 13px;
}
.ep code { background: transparent; padding: 0; font-size: 13px; color: var(--g700); }

/* ─── Status pills ─── */
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
.pill-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-family: var(--mono);
  border: 1.5px solid;
}
.pill-status.red { border-color: var(--clay); color: var(--clay); background: rgba(217,119,87,0.06); }
.pill-status.yellow { border-color: var(--g500); color: var(--g500); background: rgba(135,134,127,0.06); }
.pill-status.green { border-color: var(--olive); color: var(--olive); background: rgba(120,140,93,0.06); }
.pill-status.gray { border-color: var(--g300); color: var(--g500); background: var(--g100); }

/* ─── Checklist ─── */
.g-checklist { list-style: none; padding: 0; }
.g-checklist li { padding: 6px 0; font-size: 16px; color: var(--g700); border-bottom: 1px solid var(--g100); }
.g-checklist li:last-child { border-bottom: none; }

/* ─── Sequence diagram ─── */
.seq { margin: 1.5rem 0; position: relative; padding-left: 2rem; }
.seq::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  background: var(--g200);
}
.seq-item {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--ivory);
  border: 1.5px solid var(--g200);
  border-radius: 10px;
}
.seq-item::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--g300);
}
.seq-item.step-cert::before { border-color: #a78bfa; }
.seq-item.step-auth::before { border-color: var(--clay); }
.seq-item.step-enotas::before { border-color: var(--olive); }
.seq-item.step-final::before { border-color: var(--clay); background: var(--clay); }
.seq-actor {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.seq-text { font-size: 14px; color: var(--g700); }

/* ─── Footer ─── */
.g-footer {
  margin-top: 80px;
  border-top: 1.5px solid var(--g300);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--g500);
}
.g-footer .k { font-family: var(--serif); font-style: italic; color: var(--g700); font-size: 15px; }
.g-footer a { color: var(--clay); text-decoration-color: var(--oat); text-underline-offset: 3px; }

/* ─── General guides (no topbar) ─── */
body.no-topbar .topbar { display: none !important; }
body.no-topbar .page { padding-top: 40px; }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .g-grid { grid-template-columns: 1fr; }
  .sec-intro { margin-left: 0; }
  .g-3col { grid-template-columns: 1fr; }
  .arch-row { flex-direction: column; }
  .state-row { flex-direction: column; }
}