/*
 * css/pages/protocol.css: /protocol, /coin and /protocol/agents (SPEC 5.2), group protocol. Tokens only
 * (css/tokens.css); the shared components (band, card, chip, table, callout, state, amount, tabs, codeblock) come
 * from css/site.css untouched. What is here is the pages' own layout, designed at 360px first:
 *   .proto-head .proto-toc         the title block and the section links under it
 *   .proto-sec .proto-split        a section, and copy beside a panel from 1024px
 *   .proto-contracts .proto-card   the four contract cards: one column, two from 820px
 *   .proto-facts                   a small figure list (label over value), two columns
 *   .proto-flow                    a numbered path (where a fee goes)
 *   .proto-power .proto-list       what the owner can and cannot do
 *   .proto-limits                  the honest limits, numbered
 *   .proto-check                   the "check it yourself" links
 *   .coin-*                        the $PONCHO page: tier table, sweep line, the stake panel
 *   .agents .agents-*              the generated agent guide: contents column from 1180px, the article, the live check
 * Components the shell does not have and these pages needed: .ext (an external link with its arrow), the folded
 * contents (.agents-toc-m) and the numbered lists. They live here, not in css/site.css.
 */

/* ------------------------------------------------------------------------------------------------ shared */
.ext { display: inline-flex; align-items: center; gap: 3px; }
.ext .icon { width: 14px; height: 14px; color: var(--muted); }
.ext:hover .icon { color: currentColor; }

.proto-head .kicker { margin-bottom: 14px; }
.proto-head .lede { margin-top: var(--s5); }
.proto-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.proto-status:empty { display: none; }
.proto-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.proto-toc a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--dim);
  transition: border-color var(--t2), color var(--t1), background-color var(--t2);
}
.proto-toc a:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }

.proto-glance, .coin-glance { padding-bottom: calc(var(--section) * .45); }
.proto-sec { padding-block: calc(var(--section) * .6); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 8px); }
.proto-sec:last-child { padding-bottom: var(--section); }
.proto-sec__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; max-width: 72ch; }
.proto-sec__lede { font-size: 16px; line-height: 1.6; color: var(--body); }
.proto-sec p:not([class]), .proto-split__copy p:not([class]) { font-size: 16px; line-height: 1.65; color: var(--body); }
.proto-sec p code, .proto-sec li code { overflow-wrap: anywhere; }
.proto-band { margin-top: 32px; }

.proto-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.proto-split__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.proto-split__copy .kicker { margin-bottom: -4px; }
@media (min-width: 1024px) {
  .proto-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .proto-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------------------------ contract cards */
.proto-contracts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 820px) { .proto-contracts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proto-card { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.proto-card::before {
  content: ""; position: absolute; top: -1px; left: var(--card-pad); width: 44px; height: 3px;
  border-radius: 0 0 2px 2px; background: var(--chip, var(--accent));
}
.proto-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.proto-card__head .h3 { font-family: var(--font-mono); font-weight: 600; font-size: 19px; letter-spacing: 0; overflow-wrap: anywhere; min-width: 0; }
.proto-card__role { font-size: 15px; line-height: 1.6; color: var(--body); }

.proto-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.proto-facts > div { background: var(--panel-3); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.proto-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proto-facts dt { font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.proto-facts dd { font: 500 15px/1.35 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.proto-facts dd.is-launch { color: var(--muted); font-size: 14px; }
.proto-facts dd.unknown { color: var(--muted); }
.proto-facts--panel { align-self: start; }
@media (max-width: 359px) { .proto-facts { grid-template-columns: minmax(0, 1fr); } }

.proto-fns { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.proto-fns code { display: inline-block; font-size: 12.5px; padding: 3px 8px; border-radius: var(--r1); background: var(--panel-2); color: var(--dim); }
.proto-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; font-size: 14.5px; }
.proto-links .muted { font-size: 14px; }
.proto-links__sep { color: var(--faint); }
@media (max-width: 819px) {
  .proto-links .link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .coin-tabs [role="tab"] { min-width: 56px; }
  .proto-toc a { min-height: 44px; }
}

/* ------------------------------------------------------------------------------------------------ numbered path */
.proto-flow { list-style: none; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); }
.proto-flow li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line-row); }
.proto-flow li:last-child { border-bottom: 0; }
.proto-flow__n {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--accent-line); background: var(--accent-tint); color: var(--accent);
  font: 600 13px/1 var(--font-mono);
}
.proto-flow li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proto-flow__t { font-weight: 700; font-size: 15.5px; color: var(--text); }
.proto-flow li p:not([class]) { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* ------------------------------------------------------------------------------------------------ caps table */
.proto-caps th[scope="row"] { font: 500 14.5px/1.45 var(--font-body); color: var(--text); min-width: 180px; }
.proto-caps td.num { color: var(--text); white-space: nowrap; }
.proto-caps td code { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 639px) { .proto-caps th[scope="row"] { min-width: 150px; } }

/* ------------------------------------------------------------------------------------------------ owner powers */
.proto-powers { align-items: stretch; }
.proto-power { display: flex; flex-direction: column; gap: 16px; }
.proto-power .h3 { display: flex; align-items: center; gap: 10px; }
.proto-power .h3 .icon { color: var(--accent); }
.proto-power--not .h3 .icon { color: var(--warn); }
.proto-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.proto-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--body); }
.proto-list li::before { content: "/"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--font-mono); }
.proto-power--not .proto-list li::before { color: var(--warn); }

/* ------------------------------------------------------------------------------------------------ honest limits */
.proto-limits { list-style: none; counter-reset: lim; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; }
@media (min-width: 900px) { .proto-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proto-limits li {
  counter-increment: lim; position: relative; background: var(--panel);
  padding: 20px 22px 22px 58px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.proto-limits li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proto-limits li::before {
  content: counter(lim, decimal-leading-zero); position: absolute; left: 20px; top: 21px;
  font: 600 12px/1.5 var(--font-mono); color: var(--accent);
}
.proto-limits--plain li::before { content: "/"; font-size: 15px; top: 19px; }
.proto-limits__t { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--text); }
.proto-limits li p:not([class]) { font-size: 14.5px; line-height: 1.6; color: var(--body); }
@media (max-width: 479px) { .proto-limits li { padding: 18px 16px 20px 46px; } .proto-limits li::before { left: 16px; } }

/* ------------------------------------------------------------------------------------------------ check it yourself */
.proto-check { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .proto-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .proto-check { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proto-check li { display: flex; min-width: 0; }
.proto-check__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; width: 100%; }
.proto-check__item > .icon { color: var(--accent); margin-top: 2px; }
.proto-check__item > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proto-check__item strong { color: var(--text); font-size: 15.5px; }
.proto-check__item span span { font-size: 14px; line-height: 1.5; color: var(--body); }

/* ------------------------------------------------------------------------------------------------ coin */
.coin-head .kicker { margin-bottom: 14px; }
.coin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.coin-launch { margin-top: 20px; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.coin-launch .link { color: var(--dim); }
@media (max-width: 479px) {
  .coin-actions .btn:not(.btn--quiet) { flex: 1 1 100%; }
}

.coin-tiers { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.coin-tier-table th[scope="row"] { font: 600 14px/1.4 var(--font-mono); color: var(--text); white-space: nowrap; }
.coin-tier-table th[scope="row"] .chip { margin-left: 8px; vertical-align: middle; }
.coin-tier-table td.num { color: var(--text); white-space: nowrap; }
.coin-tier-table tr.is-you th, .coin-tier-table tr.is-you td { background: var(--accent-tint); }
.coin-note { font-size: 14px; line-height: 1.55; color: var(--muted); }

.coin-sweep {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px;
  padding: 14px 18px; border-radius: var(--r2); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.coin-sweep__text { flex: 1 1 280px; min-width: 0; font-size: 15px; color: var(--dim); }

.coin-panel { display: flex; flex-direction: column; gap: 24px; }
.coin-panel__state:empty { display: none; }
.coin-panel__state .state { max-width: 720px; }
.coin-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .coin-panel__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; } }
.coin-position { align-self: start; }
.coin-warmup { align-self: start; max-width: 46ch; }
@media (min-width: 900px) {
  .coin-position { grid-column: 1; grid-row: 1; }
  .coin-warmup { grid-column: 1; grid-row: 2; }
  .coin-forms { grid-column: 2; grid-row: 1 / span 2; }
}
.coin-forms { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.coin-form[hidden] { display: none; }
.coin-forms[data-mode="inert"] .amount .input { border-style: dashed; }
.coin-claim { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.coin-claim__text { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* ------------------------------------------------------------------------------------------------ agent guide */
.agents { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: calc(var(--section) * .6) var(--section); }
.agents-toc { display: none; }
@media (min-width: 1180px) {
  .agents { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
  .agents-toc {
    display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--header-h) + 24px);
    max-height: calc(100dvh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  }
  .agents-toc-m { display: none; }
}
.agents-toc ol, .agents-toc-m ol { list-style: none; display: flex; flex-direction: column; }
.agents-toc a {
  display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line);
  font-size: 14px; line-height: 1.4; color: var(--muted); transition: color var(--t1), border-color var(--t1);
}
.agents-toc a:hover { color: var(--text); }
.agents-toc a.is-active { color: var(--text); border-left-color: var(--accent); }

.agents-toc-m { border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); }
.agents-toc-m summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none;
  font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.agents-toc-m summary::-webkit-details-marker { display: none; }
.agents-toc-m summary::after { content: "+"; font: 500 18px/1 var(--font-mono); color: var(--accent); }
.agents-toc-m[open] summary::after { content: "-"; }
.agents-toc-m ol { padding: 0 8px 10px; }
.agents-toc-m a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; border-top: 1px solid var(--line-row); font-size: 15px; color: var(--dim); }
.agents-toc-m a:hover { color: var(--text); }

.agents-doc { min-width: 0; display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.agents-doc > .agents-title { margin-bottom: 4px; overflow-wrap: anywhere; }
.agents-meta { font: 400 13px/1.6 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.agents-meta code { background: none; padding: 0; color: var(--dim); }
.agents-doc > p { font-size: 16px; line-height: 1.7; color: var(--body); }
.agents-doc :not(pre) > code { overflow-wrap: anywhere; }
.agents-doc .agents-h2 { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.agents-doc .agents-h3 { margin-top: 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.agents-list { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.agents-list li { font-size: 15.5px; line-height: 1.65; color: var(--body); padding-left: 4px; }
.agents-list li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.agents-table .table td, .agents-table .table th { vertical-align: top; }
.agents-table .table td { overflow-wrap: anywhere; min-width: 120px; }
.agents-table .table td:first-child { min-width: 96px; }
.agents-table code { font-size: 12.5px; }
.agents-addr { text-decoration: none; }
.agents-addr code { color: var(--accent); }
.agents-doc .codeblock pre { max-height: 560px; overflow: auto; }

.agents-live {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r2); background: var(--panel);
}
.agents-live__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.agents-live__text { font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.agents-live__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 479px) { .agents-live__actions .btn { flex: 1 1 100%; } }
@media (max-width: 639px) {
  .coin-tier-table th, .coin-tier-table td { padding: 10px 10px; }
  .coin-tier-table td.num { white-space: normal; }
  .coin-tier-table th[scope="row"] .chip { margin: 6px 0 0; display: flex; width: max-content; }
}