/* ============================================================
   TIPISTAMP — one stylesheet, app + marketing.
   ------------------------------------------------------------
   Identity: white ground, cool-charcoal ink, vermillion tipi.
   Light-committed (no dark inversion). Token names are kept
   from the previous sheet so the /proof and /sign inline
   styles inherit the new palette with no markup change.
   Loaded by views/head.php (app, <body class="app">) and by
   views/layout-public.php + views/site/head.php (marketing).
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper:      #ffffff;
  --paper-2:    #f7f7f6;
  --card:       #ffffff;
  --card-2:     #f3f3f2;
  --ink:        #333436;   /* logo letters — cool charcoal */
  --ink-soft:   #63656a;
  --ink-mute:   #9a9da2;
  --rule:       #e4e4e3;
  --rule-soft:  #efefee;
  --seal:       #e33f26;   /* the tipi — vermillion; the one accent */
  --seal-deep:  #d0392b;   /* hover / active */
  --verified:   #2e7d32;
  --pending:    #d0392b;
  --danger:     #c62828;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 3rem;
  --gutter: 1.5rem;
  --radius: 4px;

  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Archivo Black", "Inter", system-ui, sans-serif; /* display / wordmark weight */
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --step-0: 1rem;
  --step-1: 1.16rem;
  --step-2: 1.5rem;
  --step-3: 2.2rem;
  --step-4: clamp(2.6rem, 6vw, 4.2rem);
}

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.app {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.app img { max-width: 100%; height: auto; }
.app h1, .app h2, .app h3, .app h4, .app h5, .app h6,
.app .h4, .app .h5, .app .h6 {
  color: var(--ink);
  margin: 0 0 .6rem;
  text-wrap: balance;
  line-height: 1.14;
}
/* h1/h2 carry the wordmark's display weight; smaller headings are Inter 700. */
.app h1, .app h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.app h3, .app h4, .app h5, .app h6, .app .h4, .app .h5, .app .h6 {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0;
}
.app h1 { font-size: 1.55rem; }
.app h2 { font-size: 1.25rem; }
.app h3, .app .h4 { font-size: 1.06rem; }
.app h4, .app h5, .app h6, .app .h5, .app .h6 { font-size: 1rem; }
.app p { margin: 0 0 1rem; }
.app a { color: var(--seal); text-decoration: none; text-underline-offset: 3px; }
.app a:hover { color: var(--seal-deep); text-decoration: underline; }
.app :focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 2px; }
.app hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.app code, .app kbd, .app samp, .app pre { font-family: var(--mono); font-size: .9em; }
.app :not(pre) > code { background: var(--card-2); padding: .1em .35em; border-radius: 3px; }
.app pre {
  background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .8rem 1rem; overflow-x: auto; line-height: 1.5;
}
.app small, .app .small { font-size: .84rem; }
.app strong, .app b, .app .fw-bold { font-weight: 600; }
.app .fw-semibold { font-weight: 600; }
.app ul, .app ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.app li { margin: .2rem 0; }
.app table { border-collapse: collapse; width: 100%; }

/* ---------- app shell (layout.php) ---------- */
/* Data grids can be very wide (many columns), so the shell is full width —
   it never centres/caps. Reading-width content caps itself (.doc-wrapper,
   forms). #page beats .container-fluid via the id. */
#page.apibase-shell { width: 100%; max-width: none; margin-inline: 0; padding: 0 1.25rem 2rem; }
#page > .row { margin-inline: 0; margin-bottom: 0; }
#page > .row > [class*="col-"] { padding-inline: 0; }
#page .apibase-nav-wrap { margin: 0 0 1.7rem; }
#page .apibase-banner { margin: 0 0 1.5rem; }
.apibase-main.row { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: flex-start; margin-inline: 0; }
.apibase-main > .apibase-sidebar { flex: 0 0 18rem; max-width: 100%; min-width: 0; padding-inline: 0; margin-bottom: 0; }
.apibase-main > .apibase-content { flex: 1 1 0; min-width: 0; max-width: 100%; padding-inline: 0; margin-bottom: 0; overflow-x: auto; }
.apibase-footer { margin-top: 2.5rem; }
@media (max-width: 860px) {
  .apibase-main.row { display: block; }
  .apibase-main > .apibase-sidebar { margin-bottom: 1.6rem; }
}

/* sidebar headings stay small — beat .app h1/h2/h3 serif */
.apibase-sidebar h1, .apibase-sidebar h2, .apibase-sidebar h3,
.apibase-sidebar h4, .api-sidebar-title {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
}

/* ---------- grid ---------- */
.container { width: min(100% - 2rem, 62rem); margin-inline: auto; }
.container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--gutter) / -2); }
.row > [class*="col-"], .row > .col { padding-inline: calc(var(--gutter) / 2); margin-bottom: var(--gutter); }
.col, .col-12 { flex: 1 1 100%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
[class*="col-md-"], [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
.g-0 { margin-inline: 0; } .g-0 > [class*="col-"] { padding-inline: 0; margin-bottom: 0; }
.g-1 { --gutter: .25rem; } .g-2 { --gutter: .5rem; } .g-3 { --gutter: 1rem; } .g-4 { --gutter: 1.5rem; }
@media (min-width: 768px) {
  .col-md-1{flex:0 0 8.333%;max-width:8.333%} .col-md-2{flex:0 0 16.666%;max-width:16.666%}
  .col-md-3{flex:0 0 25%;max-width:25%} .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-5{flex:0 0 41.666%;max-width:41.666%} .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.333%;max-width:58.333%} .col-md-8{flex:0 0 66.666%;max-width:66.666%}
  .col-md-9{flex:0 0 75%;max-width:75%} .col-md-10{flex:0 0 83.333%;max-width:83.333%}
  .col-md-11{flex:0 0 91.666%;max-width:91.666%} .col-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width: 992px) {
  .col-lg-3{flex:0 0 25%;max-width:25%} .col-lg-4{flex:0 0 33.333%;max-width:33.333%}
  .col-lg-6{flex:0 0 50%;max-width:50%} .col-lg-8{flex:0 0 66.666%;max-width:66.666%}
}

/* ---------- spacing utilities (Bootstrap 5 scale) ---------- */
.m-0{margin:0} .m-1{margin:var(--sp-1)} .m-2{margin:var(--sp-2)} .m-3{margin:var(--sp-3)} .m-4{margin:var(--sp-4)} .m-5{margin:var(--sp-5)}
.mt-0{margin-top:0} .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)}
.ms-0{margin-left:0} .ms-1{margin-left:var(--sp-1)} .ms-2{margin-left:var(--sp-2)} .ms-3{margin-left:var(--sp-3)} .ms-auto{margin-left:auto}
.me-0{margin-right:0} .me-1{margin-right:var(--sp-1)} .me-2{margin-right:var(--sp-2)} .me-3{margin-right:var(--sp-3)} .me-auto{margin-right:auto}
.mx-auto{margin-inline:auto} .my-2{margin-block:var(--sp-2)} .my-3{margin-block:var(--sp-3)} .my-4{margin-block:var(--sp-4)}
.p-0{padding:0} .p-1{padding:var(--sp-1)} .p-2{padding:var(--sp-2)} .p-3{padding:var(--sp-3)} .p-4{padding:var(--sp-4)} .p-5{padding:var(--sp-5)}
.pt-0{padding-top:0} .pt-2{padding-top:var(--sp-2)} .pt-3{padding-top:var(--sp-3)} .pt-4{padding-top:var(--sp-4)}
.pb-2{padding-bottom:var(--sp-2)} .pb-3{padding-bottom:var(--sp-3)} .pb-4{padding-bottom:var(--sp-4)}
.px-2{padding-inline:var(--sp-2)} .px-3{padding-inline:var(--sp-3)} .px-4{padding-inline:var(--sp-4)}
.py-1{padding-block:var(--sp-1)} .py-2{padding-block:var(--sp-2)} .py-3{padding-block:var(--sp-3)} .py-4{padding-block:var(--sp-4)} .py-5{padding-block:var(--sp-5)}

/* ---------- display / flex utilities ---------- */
.d-none{display:none} .d-block{display:block} .d-inline{display:inline} .d-inline-block{display:inline-block}
.d-flex{display:flex} .d-inline-flex{display:inline-flex} .d-grid{display:grid}
.flex-wrap{flex-wrap:wrap} .flex-column{flex-direction:column} .flex-fill{flex:1 1 auto} .flex-grow-1{flex-grow:1}
.align-items-center{align-items:center} .align-items-start{align-items:flex-start} .align-items-end{align-items:flex-end} .align-items-baseline{align-items:baseline}
.justify-content-center{justify-content:center} .justify-content-between{justify-content:space-between}
.justify-content-end{justify-content:flex-end} .justify-content-start{justify-content:flex-start}
.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
.w-100{width:100%} .h-100{height:100%} .mw-100{max-width:100%}
.text-nowrap{white-space:nowrap}

/* ---------- type / color utilities ---------- */
.text-muted, .muted { color: var(--ink-soft) !important; }
.text-secondary { color: var(--ink-soft); }
.text-primary { color: var(--seal); }
.text-dark { color: var(--ink); }
.text-success { color: var(--verified); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--pending); }
.text-center { text-align: center; }
.text-right, .text-end { text-align: right; }
.text-left, .text-start { text-align: left; }
.text-uppercase { text-transform: uppercase; letter-spacing: .04em; }
.text-lowercase { text-transform: lowercase; }
.text-decoration-none { text-decoration: none; }
.fst-italic { font-style: italic; }
.lh-1 { line-height: 1; }
.font-monospace, .mono { font-family: var(--mono); }
.lead, .doc-lead { font-size: var(--step-1); color: var(--ink-soft); }
.eyebrow, .api-banner-kicker {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--seal);
}

/* ---------- borders / bg / effect utilities ---------- */
.border { border: 1px solid var(--rule) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--rule) !important; }
.border-bottom { border-bottom: 1px solid var(--rule) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.bg-light { background: var(--card-2) !important; }
.bg-white { background: var(--card) !important; }
.bg-transparent { background: transparent !important; }
.shadow-sm, .shadow { box-shadow: none !important; }
.overflow-auto { overflow: auto; }
.position-relative { position: relative; }
.img-fluid { max-width: 100%; height: auto; }
.visually-hidden, .api-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.app .btn, .app button.btn, .app a.btn,
.api-btn-dark, .api-btn-compact, .api-btn-block {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .6rem 1.05rem; border: 1px solid var(--seal); border-radius: 3px;
  background: transparent; color: var(--seal); cursor: pointer; text-decoration: none;
  line-height: 1; transition: background .12s, color .12s, border-color .12s;
}
.app .btn:hover, .api-btn-dark:hover, .api-btn-compact:hover, .api-btn-block:hover {
  background: var(--seal); color: var(--paper); text-decoration: none;
}
.app .btn-dark, .app .btn-primary, .api-btn-dark {
  background: var(--seal); border-color: var(--seal); color: var(--paper);
}
.app .btn-dark:hover, .app .btn-primary:hover, .api-btn-dark:hover {
  background: var(--seal-deep); border-color: var(--seal-deep); color: var(--paper);
}
.app .btn-outline-secondary, .app .btn-default, .app .btn-outline-dark, .app .btn-light {
  border-color: var(--rule); color: var(--ink-soft);
}
.app .btn-outline-secondary:hover, .app .btn-default:hover, .app .btn-outline-dark:hover, .app .btn-light:hover {
  border-color: var(--seal); color: var(--seal); background: transparent;
}
.app .btn-danger, .app .btn-outline-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.app .btn-danger:hover, .app .btn-outline-danger:hover { background: var(--danger); color: var(--paper); }
.app .btn-link { border-color: transparent; background: none; color: var(--seal); text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.app .btn-link:hover { background: none; color: var(--seal-deep); text-decoration: underline; }
.app .btn-sm, .api-btn-compact { font-size: .7rem; padding: .42rem .8rem; }
.app .btn-lg { font-size: .84rem; padding: .75rem 1.3rem; }
.app .btn-block, .api-btn-block { display: flex; width: 100%; }
.app .btn:disabled, .app .btn.disabled { opacity: .45; cursor: not-allowed; }
.app .btn:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }

/* ---------- forms ---------- */
.app .form-group, .app .form-check { margin-bottom: 1rem; }
.app label, .app .form-label {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
}
.app .form-control, .app .form-select, .app input[type=text], .app input[type=email],
.app input[type=password], .app input[type=number], .app input[type=search],
.app input[type=url], .app input[type=date], .app textarea, .app select {
  display: block; width: 100%; padding: .55rem .7rem;
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
  line-height: 1.4;
}
.app textarea { min-height: 6rem; font-family: var(--mono); font-size: .86rem; }
.app .form-control:focus, .app .form-select:focus, .app input:focus, .app textarea:focus, .app select:focus {
  outline: none; border-color: var(--seal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--seal) 22%, transparent);
}
.app .form-control::placeholder, .app textarea::placeholder { color: var(--ink-mute); }
.app input[type=checkbox], .app input[type=radio], .app .form-check-input { width: auto; margin-right: .4rem; accent-color: var(--seal); }
.app .form-check { display: flex; align-items: baseline; gap: .1rem; }
.app .form-check-label { display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .92rem; color: var(--ink); }
.app .radio-inline { display: inline-flex; align-items: baseline; gap: .35rem; margin-right: 1rem; font-size: .92rem; }
.app .input-group { display: flex; }
.app .input-group > .form-control { border-radius: 3px 0 0 3px; }
.app .input-group > .btn { border-radius: 0 3px 3px 0; }
.app .form-text, .app .help-block { font-size: .8rem; color: var(--ink-soft); margin-top: .3rem; }
.app fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
.app legend { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: 0 .4rem; width: auto; }

/* ---------- cards + legacy panels ---------- */
.app .card, .app .panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  margin-bottom: 1.2rem;
}
.app .card-body, .app .panel-body { padding: 1.1rem 1.2rem; }
.app .card-header, .app .panel-heading {
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--rule); background: var(--card-2);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.app .card-title, .app .panel-title { margin: 0; font-family: var(--serif); font-size: var(--step-1); text-transform: none; letter-spacing: 0; color: var(--ink); }
.app .card-footer, .app .panel-footer { padding: .8rem 1.2rem; border-top: 1px solid var(--rule); background: var(--card-2); }
.app .panel-primary, .app .panel-default { border-color: var(--rule); }

/* ---------- alerts + badges ---------- */
.app .alert {
  padding: .85rem 1.05rem; border: 1px solid var(--rule); border-left-width: 3px;
  border-radius: var(--radius); margin-bottom: 1.1rem; font-size: .92rem;
}
.app .alert-success { border-left-color: var(--verified); color: var(--verified); }
.app .alert-danger, .app .alert-error { border-left-color: var(--danger); color: var(--danger); }
.app .alert-warning { border-left-color: var(--pending); color: var(--pending); }
.app .alert-info { border-left-color: var(--seal); color: var(--seal); }
.app .badge, .api-props-badge, .api-db-tag {
  display: inline-block; padding: .12rem .5rem; border-radius: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  border: 1px solid var(--rule); color: var(--ink-soft); background: transparent;
  text-transform: uppercase; vertical-align: middle;
}
.app .badge.bg-success, .app .badge-success { border-color: var(--verified); color: var(--verified); }
.app .badge.bg-danger, .app .badge-danger { border-color: var(--danger); color: var(--danger); }
.app .badge.bg-primary, .app .badge-primary { border-color: var(--seal); color: var(--seal); }

/* ---------- generic tables ---------- */
.app .table { width: 100%; font-size: .9rem; }
.app .table th, .app .table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.app .table > thead th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500; border-bottom: 1px solid var(--rule); background: var(--card-2);
}
.app .table-responsive { overflow-x: auto; }

/* ---------- data grid (views/tables.php) ---------- */
.api-data-table { border: 1px solid var(--rule); background: var(--paper); font-size: .86rem; }
.api-data-table > thead > tr > th, .api-data-table > thead > tr > td {
  background: var(--card-2); color: var(--ink-soft);
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem .7rem; line-height: 1.2; white-space: nowrap;
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule-soft);
}
.api-data-table > thead > tr > th:last-child { border-right: 0; }
.api-data-table > tbody > tr > td, .api-data-table > tbody > tr > th {
  background: var(--paper); color: var(--ink); font-family: var(--mono); font-weight: 400;
  font-size: .84rem; padding: .5rem .7rem; border-bottom: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft); vertical-align: top;
}
.api-data-table > tbody > tr:hover > td { background: var(--card-2); }
.api-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; }
.api-col-head-actions { display: inline-flex; gap: .3rem; white-space: nowrap; opacity: .35; transition: opacity .12s; }
.api-data-table th:hover .api-col-head-actions { opacity: 1; }
.api-col-sort { color: var(--ink-soft); font-weight: 500; }
.api-col-sort:hover { color: var(--seal); }
.api-col-meta-action { font-size: .5rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
.api-col-meta-action:hover { color: var(--seal); text-decoration: none; }
.api-col-meta-action-delete:hover { color: var(--danger); }
.api-actions-head { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; color: var(--ink-mute); font-weight: 500; }
.api-cell-action { text-align: center; width: 2.4rem; white-space: nowrap; }
.api-row-action { display: inline-flex; align-items: center; justify-content: center; padding: .3rem; color: var(--ink-soft); line-height: 0; }
.api-row-action svg { width: 1.15rem; height: 1.15rem; display: block; }
.api-row-action:hover { color: var(--seal); }
.api-row-action-delete:hover { color: var(--danger); }
/* footer row inside the table (#exec: Records / Execution time) — very small, quiet */
.api-data-table #exec > th { background: var(--card-2); border-bottom: 0; padding: .35rem .7rem; }
.api-data-table #exec > th, .api-exec-cell, .api-exec-cell span {
  font-family: var(--mono); font-size: .64rem; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute);
}
.api-table-header { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0 0 1rem; }
.api-table-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 1rem 0 0; }
.api-table-footer .api-pagination-bar-bottom { margin: 0; }
.api-table-footer .api-table-actions { margin-left: auto; }
.api-table-footer .api-inline-form { display: inline-flex; }
.api-table-footer .btn { height: 2rem; }
.api-table-header .api-table-title, .api-rules-title {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0;
}
/* pagination: << [ L (input) Go ] >>  — one tidy inline row */
.api-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.api-pagination-bar > a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem;
  font-family: var(--mono); font-size: .8rem; padding: 0 .5rem;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-soft); text-decoration: none;
}
.api-pagination-bar > a:hover { border-color: var(--seal); color: var(--seal); }
.api-pagination-bar form {
  display: inline-flex !important; align-items: center; gap: .4rem;
  margin: 0 !important; font-family: var(--mono); font-size: .8rem; color: var(--ink-soft);
}
.api-pagination-bar form input[type="number"] {
  display: inline-block; width: 4.5rem; height: 2rem; padding: .2rem .45rem; margin: 0;
  font-family: var(--mono); font-size: .82rem;
}
.api-pagination-bar form .btn { height: 2rem; padding: 0 .8rem; }
.api-search-input { display: block; max-width: 22rem; margin: 0 0 1.1rem; }
.api-inline-form, .api-inline-link, .api-inline-delete { display: inline; }
.api-row-action, .api-action-link { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }
.api-row-action:hover, .api-action-link:hover { color: var(--seal); }
.api-row-action-delete:hover { color: var(--danger); }

/* ---------- top nav ---------- */
.topnav {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.1rem;
  padding: 1rem 0 .9rem; border-bottom: 1px solid var(--ink); background: transparent;
}
.topnav-left, .topnav-right { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.topnav-right { margin-left: auto; }
.topnav a {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.topnav a:hover { color: var(--ink); text-decoration: none; }
.topnav a.active { color: var(--seal); }

/* ---------- left sidebar ---------- */
.api-sidebar-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1.1rem; overflow: hidden; }
.api-sidebar-card-head { padding: .8rem 1rem .65rem; border-bottom: 1px solid var(--rule); }
.api-sidebar-title { margin: 0; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.api-sidebar-card-body { padding: .75rem 1rem .9rem; }
.api-sidebar-actions { margin-bottom: .6rem; }
.api-sidebar-help, .api-sidebar-subtext { color: var(--ink-soft); font-size: .78rem; margin-bottom: .5rem; }
.api-sidebar-list { display: flex; flex-direction: column; }
.api-sidebar-item { border-bottom: 1px solid var(--rule-soft); }
.api-sidebar-item:last-child { border-bottom: 0; }
.api-sidebar-link { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .4rem .05rem; font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.api-sidebar-link:hover { color: var(--seal); text-decoration: none; }
.api-sidebar-name { word-break: break-word; }
.api-sidebar-meta, .api-sidebar-ext { color: var(--ink-soft); font-size: .68rem; white-space: nowrap; }
.api-side-links, .api-side-link-row { display: flex; flex-direction: column; gap: .15rem; }
.api-side-link { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); padding: .3rem .05rem; }
.api-side-link:hover { color: var(--seal); }
.api-note { border: 1px solid var(--rule); border-left-width: 3px; border-radius: 3px; padding: .6rem .75rem; font-size: .82rem; margin-bottom: .7rem; }
.api-note-warning { border-left-color: var(--pending); color: var(--pending); }
.api-note-info { border-left-color: var(--seal); color: var(--seal); }

/* ---------- footer ---------- */
.api-footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; padding: 1.5rem 0 0; margin-top: 2.2rem; border-top: 1px solid var(--ink); }
.api-footer-group-title { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.api-footer-links { display: flex; flex-direction: column; gap: .28rem; }
.api-footer-links a, a.link-ui { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.api-footer-links a:hover, a.link-ui:hover { color: var(--seal); }
.api-footer-links a.active, a.link-ui.active { color: var(--seal); }
.api-layout-footer { border: 0; }
.api-layout-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 1.1rem 0; margin-top: 1.3rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .7rem; color: var(--ink-soft); }
.api-layout-meta-sep { opacity: .5; }

/* ---------- banner (banner.php) ---------- */
.api-banner { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 1rem 1.2rem; margin-bottom: 1.3rem; position: relative; }
.api-banner-grid, .api-banner-sides { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-start; }
.api-banner-main { flex: 1 1 18rem; }
.api-banner-side { flex: 1 1 14rem; font-size: .84rem; color: var(--ink-soft); }
.api-banner-side--divider { border-left: 1px solid var(--rule); padding-left: 1.6rem; }
.api-banner .api-banner-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  letter-spacing: .01em; margin: 0 0 .2rem; line-height: 1.1;
}
.api-banner-lead { color: var(--ink); font-size: .9rem; margin: 0; }
.api-banner-text { color: var(--ink-soft); font-size: .84rem; margin: .2rem 0 .4rem; line-height: 1.5; }
.api-banner-version { font-family: var(--mono); font-size: .68rem; color: var(--ink-mute); margin-left: .3rem; }
.api-banner-kicker { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--seal); }
.api-banner-close { position: absolute; top: .5rem; right: .7rem; color: var(--ink-soft); background: none; border: 0; font-size: 1rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.api-banner-close:hover { color: var(--ink); }

/* ---------- dashboard (details.php — api-db-*) ---------- */
.api-db-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 1.2rem; }
.api-db-card > .api-db-card-head { padding: .85rem 1.2rem; border-bottom: 1px solid var(--rule); background: var(--card-2); }
.api-db-card > .api-db-card-body { padding: 1.2rem; }
.api-db-title { font-family: var(--serif); font-size: var(--step-2); margin: 0; }
.api-db-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.api-db-meta-grid, .api-db-meta-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .4rem 1.4rem; margin-top: 1.4rem; }
.api-db-stack { display: flex; flex-direction: column; gap: 1.1rem; }
.api-db-block { min-width: 0; }
.api-db-metric { background: var(--card-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: 0; }
.api-db-card-head { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.api-db-label { color: var(--ink-soft); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem; }
.api-db-value { font-family: var(--mono); font-size: .9rem; word-break: break-word; }
.api-db-value-strong, .api-db-metric-value { font-family: var(--serif); font-size: var(--step-3); color: var(--ink); line-height: 1.1; }
.api-db-metric-sub, .api-db-value-unit { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }
.api-db-formats { display: flex; flex-wrap: wrap; gap: .35rem; }
.api-db-symmetry { display: flex; flex-wrap: wrap; gap: .8rem; font-family: var(--serif); font-size: var(--step-2); color: var(--ink); }
.api-db-meta-item { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .86rem; min-width: 0; }
.api-db-meta-label { color: var(--ink-soft); font-family: var(--mono); font-size: .74rem; }
.api-db-meta-value { font-family: var(--mono); font-size: .82rem; word-break: break-word; text-align: right; }
.api-db-meta-stack { display: flex; flex-direction: column; }
.api-db-panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }

/* ---------- table properties (api-props-*) — renders inside the narrow sidebar ---------- */
.api-props-list { border: 1px solid var(--rule); border-radius: var(--radius); }
.api-props-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .2rem .6rem; padding: .5rem .75rem; border-bottom: 1px solid var(--rule-soft); font-size: .82rem;
}
.api-props-row:last-child { border-bottom: 0; }
.api-props-label { flex: 1 1 auto; color: var(--ink-soft); font-family: var(--mono); font-size: .72rem; }
.api-props-value { flex: 0 1 auto; text-align: right; font-family: var(--mono); font-size: .8rem; word-break: break-word; }
.api-rules-help, .api-rules-title + p { color: var(--ink-soft); font-size: .88rem; }

/* ---------- record view (show-rec.php — api-show-*) ---------- */
.api-show-record { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.api-show-head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--rule); background: var(--card-2); }
.api-show-head > div { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.api-show-head h2, .api-show-head .h4 {
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; line-height: 1.1; color: var(--ink);
  margin: 0; padding: 0;
}
.api-show-head .btn { flex: none; }
.api-show-title { font-family: var(--serif); font-size: var(--step-1); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 1rem; }
.api-show-row { display: flex; gap: 1rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; }
.api-show-row:last-child { border-bottom: 0; }
.api-show-label { flex: 0 0 12rem; color: var(--ink-soft); font-family: var(--mono); font-size: .76rem; }
.api-show-value { font-family: var(--mono); font-size: .86rem; word-break: break-word; }
.api-show-image img { max-width: 320px; border: 1px solid var(--rule); border-radius: 3px; }
.api-show-table { width: 100%; }

/* ---------- curl tester (api-curl-*) ---------- */
.api-curl-wrap { max-width: 52rem; }
.api-curl-header { margin-bottom: 1.2rem; }
.api-curl-title { font-family: var(--serif); font-size: var(--step-3); margin: 0 0 .3rem; }
.api-curl-lead { color: var(--ink-soft); }
.api-curl-form { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem; background: var(--card); }
.api-curl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.api-curl-field-full, .api-curl-field-sm { grid-column: 1 / -1; }
.api-curl-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.api-curl-help { color: var(--ink-soft); font-size: .78rem; }
.api-curl-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.api-curl-control-mono, .api-curl-textarea { font-family: var(--mono); font-size: .84rem; }
.api-curl-actions { margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.api-curl-pre, .api-curl-response-body-mono, .api-build-pre {
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 3px;
  padding: .8rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; word-break: break-word;
}
.api-curl-response-wrap { margin-top: 1.4rem; }
.api-curl-response-head { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; }
@media (max-width: 640px) { .api-curl-grid { grid-template-columns: 1fr; } }

/* ---------- build (api-build-*) ---------- */
.api-build-wrap { max-width: 52rem; }
.api-build-header { margin-bottom: 1.2rem; }
.api-build-title { font-family: var(--serif); font-size: var(--step-3); margin: 0 0 .3rem; }
.api-build-lead { color: var(--ink-soft); }
.api-build-form, .api-build-contract { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem; background: var(--card); margin-bottom: 1.2rem; }
.api-build-section, .api-build-actions { margin-top: 1rem; }
.api-build-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.api-build-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.api-build-textarea { font-family: var(--mono); font-size: .84rem; min-height: 8rem; }
.api-build-contract-head { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; }
.api-build-feedback { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }

/* ---------- file upload (api-file-* / api-upload-*) ---------- */
.api-file-block, .api-upload-panel { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--card-2); }
.api-file-actions, .api-file-upload, .api-upload-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.api-file-label, .api-upload-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.api-file-name { font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.api-form-lock { opacity: .55; pointer-events: none; }

/* ---------- loader / animation helpers ---------- */
.api-loader-spinner, .loader {
  width: 1.4rem; height: 1.4rem; border: 2px solid var(--rule); border-top-color: var(--seal);
  border-radius: 50%; animation: app-spin .7s linear infinite; display: inline-block;
}
@keyframes app-spin { to { transform: rotate(360deg); } }
.fadeIn, .fadeInDown { animation: app-fade .3s ease both; }
@keyframes app-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.glightbox { cursor: zoom-in; }

/* ---------- long-form doc pages (help / devguide — doc-*) ---------- */
.doc-wrapper { max-width: 48rem; margin-inline: auto; }
.doc-section { padding: 2.4rem 0; border-top: 1px solid var(--rule); }
.doc-section:first-child { border-top: 0; }
.doc-section h1, .doc-section h2 { font-family: var(--serif); }
.doc-lead, .doc-text { color: var(--ink-soft); }
.doc-code {
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 3px;
  padding: .8rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .82rem;
  white-space: pre; display: block; margin: 1rem 0;
}
.doc-note { border: 1px solid var(--rule); border-left: 3px solid var(--pending); border-radius: 3px; padding: .8rem 1rem; margin: 1rem 0; font-size: .9rem; color: var(--ink-soft); }
.doc-note strong { color: var(--ink); }
.doc-footer { padding-top: 2rem; margin-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .88rem; }
.doc-illustration, .doc-feature img { border: 1px solid var(--rule); border-radius: 4px; }
.doc-feature { margin: 1.4rem 0; }
.doc-title-icon { width: 2rem; height: auto; vertical-align: middle; }
.doc-hero { padding: 2rem 0 1rem; }
.doc-subtitle, .doc-tagline { color: var(--ink-soft); font-size: var(--step-1); }

/* ---------- modal (dependencies popup — app-ui.js toggles .is-open) ---------- */
.app .modal {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: flex-start; justify-content: center;
  padding: 4rem 1rem; background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.app .modal.is-open { display: flex; }
.app .modal-dialog { width: 100%; max-width: 24rem; }
.app .modal-content { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.app .modal-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule); background: var(--card-2); }
.app .modal-title { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.app .modal-header .close { order: 2; background: none; border: 0; font-size: 1.1rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .15rem .35rem; }
.app .modal-header .close:hover { color: var(--ink); }
.app .modal-body { padding: 1rem 1.1rem; }
.app .modal-body ul { list-style: none; padding: 0; margin: 0; }
.app .modal-body li { padding: .3rem 0; font-family: var(--mono); font-size: .86rem; }
body.modal-open { overflow: hidden; }
.list-unstyled { list-style: none; padding-left: 0; }

/* ---------- flash (flash.php) ---------- */
.app .flash, .app .flash-message {
  padding: .8rem 1.05rem; border: 1px solid var(--rule); border-left-width: 3px;
  border-radius: var(--radius); margin-bottom: 1.2rem; font-size: .92rem;
}
.app .flash-success { border-left-color: var(--verified); color: var(--verified); }
.app .flash-error { border-left-color: var(--danger); color: var(--danger); }
.app .flash-warning { border-left-color: var(--pending); color: var(--pending); }
.app .flash-info { border-left-color: var(--seal); color: var(--seal); }

/* ============================================================
   TIPISTAMP — marketing + public pages   (<body class="ts">)
   ============================================================ */
body.ts {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts img { max-width: 100%; height: auto; }
.ts a { color: var(--seal); text-decoration: none; }
.ts a:hover { color: var(--seal-deep); }
.ts h1, .ts h2 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 .5rem; text-wrap: balance; }
.ts h3, .ts h4 { font-family: var(--sans); font-weight: 700; line-height: 1.2; margin: 0 0 .4rem; }
.ts h1 { font-size: var(--step-4); }
.ts h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.ts h3 { font-size: 1.14rem; }
.ts p  { margin: 0 0 1rem; }
.ts code { font-family: var(--mono); font-size: .9em; background: var(--card-2); padding: .1em .35em; border-radius: 3px; }
.ts hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.ts-wrap { width: min(100% - 2.4rem, 64rem); margin-inline: auto; }
.ts-wrap.narrow { max-width: 44rem; }

/* --- wordmark --- */
.ts .ts-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ts img.ts-logo { display: block; width: auto; height: 30px; max-width: none; }
@media (max-width: 480px) { .ts img.ts-logo { height: 26px; } }

/* text fallback wordmark (kept for contexts without the raster) */
.ts-wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 1.35rem;
  letter-spacing: .02em; color: var(--ink); text-transform: uppercase;
  display: inline-flex; align-items: baseline; line-height: 1;
}
.ts-wordmark .tipi { color: var(--seal); }
.ts-wordmark:hover { color: var(--ink); }
.ts-mark { /* the teepee glyph alone */
  display: inline-block; width: 1em; height: 1em; color: var(--seal);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: currentColor;
}

/* --- nav --- */
.ts-nav { border-bottom: 1px solid var(--ink); background: var(--paper); }
.ts-nav .inner { display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 0; }
.ts-nav .links { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.ts-nav .links a { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ts-nav .links a:hover { color: var(--ink); }
.ts-nav .links a.active { color: var(--seal); }
.ts-nav .links .cta {
  color: var(--paper); background: var(--seal); border-radius: 3px;
  padding: .5rem .9rem; letter-spacing: .06em;
}
.ts-nav .links .cta:hover { background: var(--seal-deep); color: var(--paper); }
@media (max-width: 640px) { .ts-nav .inner { flex-wrap: wrap; } .ts-nav .links { width: 100%; margin-left: 0; } }
/* logged in: the /site/* nav matches the app bar (.ts-appbar) exactly */
.ts .ts-nav--app .inner { padding: .9rem 0; gap: 1.4rem; }
.ts .ts-nav--app img.ts-logo { height: 26px; }
.ts .ts-nav--app .links { gap: 1.05rem; }

/* --- buttons --- */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.4rem; border: 1.5px solid var(--seal); border-radius: 4px;
  background: var(--seal); color: var(--paper); cursor: pointer; text-decoration: none;
  line-height: 1; transition: background .12s, border-color .12s, color .12s;
}
/* element-qualified overrides: beat `.ts a { color: var(--seal) }` */
.ts a.ts-btn, .ts button.ts-btn, .ts a.ts-btn:hover { color: var(--paper); }
.ts-btn:hover { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--paper); }
.ts-btn.ghost, .ts a.ts-btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.ts-btn.ghost:hover, .ts a.ts-btn.ghost:hover { background: var(--ink); color: var(--paper); }
.ts-btn.sm { padding: .55rem 1rem; font-size: .85rem; }
.ts-btn.block { display: flex; width: 100%; }

/* --- hero + section rhythm --- */
.ts-hero { padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--rule); }
.ts-eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--seal); margin: 0 0 1rem;
}
.ts-hero h1 { max-width: 16ch; }
.ts-lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; margin: 1rem 0 1.8rem; }
.ts-hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.ts-section { padding: 3.5rem 0; border-bottom: 1px solid var(--rule); }
.ts-section:last-of-type { border-bottom: 0; }
.ts-section > h2 { max-width: 20ch; }
.ts-section > .sub { color: var(--ink-soft); max-width: 52ch; margin: .4rem 0 2rem; }

/* --- 3 steps --- */
.ts-steps { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: s; }
.ts-step { border: 1px solid var(--rule); border-top: 3px solid var(--seal); border-radius: 5px; padding: 1.4rem 1.3rem; }
.ts-step::before { counter-increment: s; content: counter(s); font-family: var(--serif); font-size: 1.6rem; color: var(--seal); display: block; margin-bottom: .5rem; }
.ts-step h3 { margin-bottom: .3rem; }
.ts-step p { color: var(--ink-soft); font-size: .94rem; margin: 0; }

/* --- feature grid / callout --- */
.ts-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ts-card { border: 1px solid var(--rule); border-radius: 5px; padding: 1.4rem 1.3rem; background: var(--card); }
.ts-card h3 { margin-bottom: .35rem; }
.ts-card p { color: var(--ink-soft); font-size: .94rem; margin: 0; }
.ts-callout { border: 1px solid var(--seal); border-left-width: 4px; border-radius: 4px; padding: 1.1rem 1.3rem; background: color-mix(in srgb, var(--seal) 5%, transparent); margin: 1.6rem 0; }

/* --- pricing --- */
.ts-plans { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ts-plan { border: 1px solid var(--rule); border-radius: 6px; padding: 1.6rem 1.4rem; }
.ts-plan.featured { border-color: var(--seal); border-width: 1.5px; }
.ts-plan .name { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ts-plan .price { font-family: var(--serif); font-size: 2rem; margin: .3rem 0; }
.ts-plan .price small { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); font-weight: 400; }
.ts-plan ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; font-size: .92rem; }
.ts-plan li { padding: .35rem 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); }

/* --- public register / ledger table --- */
.ts-ledger { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ts-ledger th, .ts-ledger td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--rule-soft); }
.ts-ledger thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--ink); }
.ts-ledger td.mono, .ts-ledger .mono { font-family: var(--mono); font-size: .8rem; }
.ts-ledger .pill { display: inline-block; font-family: var(--mono); font-size: .68rem; padding: .05rem .5rem; border: 1px solid var(--rule); border-radius: 1rem; color: var(--ink-soft); }
.ts-ledger .pill.ok { border-color: var(--verified); color: var(--verified); }
.ts-ledger .pill.wait { border-color: var(--pending); color: var(--pending); }

/* --- forms (contact / login / register) --- */
.ts-form { max-width: 26rem; }
.ts-form .field { margin-bottom: 1.1rem; }
.ts-form label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.ts-form input, .ts-form textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
}
.ts-form input:focus, .ts-form textarea:focus { outline: none; border-color: var(--seal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 18%, transparent); }
.ts-form textarea { min-height: 7rem; }
.ts-form .ts-btn { width: 100%; }
.ts-form .alt { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-soft); }

/* --- footer --- */
.ts-footer { border-top: 1px solid var(--ink); margin-top: 4rem; }
.ts-footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.4rem; padding: 2rem 0; }
.ts-footer .built { color: var(--ink-soft); font-size: .9rem; max-width: 36ch; }
.ts-footer .built strong { color: var(--ink); font-weight: 600; }
.ts-footer .flinks { display: flex; flex-wrap: wrap; gap: 1rem; }
.ts-footer .flinks a { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.ts-footer .flinks a:hover { color: var(--seal); }
.ts-footer .fine { padding-bottom: 1.6rem; color: var(--ink-mute); font-size: .78rem; }

/* --- flash (shared) --- */
.ts .flash, .ts .flash-message { padding: .8rem 1.05rem; border: 1px solid var(--rule); border-left-width: 3px; border-radius: 4px; margin-bottom: 1.2rem; font-size: .92rem; }
.ts .flash-success { border-left-color: var(--verified); color: var(--verified); }
.ts .flash-error   { border-left-color: var(--danger); color: var(--danger); }
.ts .flash-info    { border-left-color: var(--seal); color: var(--seal); }

/* ============================================================
   TIPISTAMP app header — /proof and /sign (<body class="app">)
   ============================================================ */
.app .ts-appbar { border-bottom: 1px solid var(--ink); background: var(--paper); }
.app .ts-appbar-in {
  width: min(100% - 2.4rem, 64rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.4rem; padding: .9rem 0;
}
.app .ts-appbar-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex: 0 0 auto; }
.app .ts-appbar-brand img { height: 26px; width: auto; display: block; }
.app .ts-appbar-brand b {
  font-family: var(--serif); font-weight: 400; font-size: .98rem;
  letter-spacing: .02em; color: var(--ink);
}
.app .ts-appbar-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.05rem; }
.app .ts-appbar-nav a {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.app .ts-appbar-nav a:hover { color: var(--ink); }
.app .ts-appbar-nav a.on { color: var(--seal); }
.app .ts-appbar-nav a.out { color: var(--ink-mute); }
.app .ts-appbar-nav a.out:hover { color: var(--seal); }
@media (max-width: 620px) {
  .app .ts-appbar-in { flex-wrap: wrap; gap: .7rem 1rem; }
  .app .ts-appbar-nav { width: 100%; margin-left: 0; }
}

/* the content column proof/sign render into — same width as .ts-wrap (/site/*) */
.app .ts-appmain { width: min(100% - 2.4rem, 64rem); margin: 2rem auto 4rem; }