/*
 * css/pages/sell.css: /sell (group sell, SPEC 5.2). Tokens from css/tokens.css only; every shared component (cards,
 * band, table, feed, states, fields, amount, tabs, code block, chips) comes from css/site.css untouched. What is here
 * is the page's own layout: the jump links, the listing form, the service cards and their route rows, the earnings
 * block with the redeem tool, and the four part "take payment" section. Designed at 360px first.
 */

/* ------------------------------------------------------------------------------------------------ head */
.sell-head .lede { max-width: 64ch; }
.sell-jump {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--s7);
}
.sell-jump a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel);
  font: 600 14.5px/1.3 var(--font-body); color: var(--dim);
  transition: border-color var(--t2), color var(--t1), background-color var(--t2);
}
.sell-jump a:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.sell-jump__n { font: 500 12px/1 var(--font-mono); color: var(--accent); letter-spacing: .06em; flex: none; }
@media (min-width: 820px) { .sell-jump { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 880px; } }

/* ------------------------------------------------------------------------------------------------ section heads */
.sell-sec__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s6); }
.sell-sec__head .small { color: var(--muted); max-width: 64ch; }
@media (min-width: 1024px) {
  .sell-sec__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
  .sell-sec__head .small { max-width: 56ch; }
}

/* ------------------------------------------------------------------------------------------------ 01 list a service */
.reg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) { .reg { grid-template-columns: minmax(0, 1fr) 22rem; gap: 24px; } }
.reg-form { display: flex; flex-direction: column; gap: 22px; }
.reg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px) {
  .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .reg-grid__wide { grid-column: 1 / -1; }
}
.field__count { font: 500 12px/1.4 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field__count.is-over { color: var(--danger); }
.field__opt { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.slug-msg { overflow-wrap: anywhere; }
.slug-msg.is-error { color: var(--danger); }
.slug-msg.is-ok { color: var(--accent); }
.reg-fee {
  padding: 12px 14px; border-radius: var(--r2); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--panel-3); font-size: 14.5px; color: var(--dim);
}
.reg-fee strong { color: var(--text); font-weight: 600; }
.reg-aside { display: flex; flex-direction: column; gap: 18px; }
.takes { list-style: none; counter-reset: take; display: flex; flex-direction: column; gap: 14px; }
.takes li {
  counter-increment: take; position: relative; padding-left: 34px;
  font-size: 14.5px; line-height: 1.55; color: var(--body);
}
.takes li::before {
  content: counter(take); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-tint); color: var(--accent);
  font: 600 12px/1 var(--font-mono);
}
.takes strong { color: var(--text); font-weight: 600; }
@media (min-width: 1024px) { .reg-aside { position: sticky; top: calc(var(--header-h) + 24px); } }

/* ------------------------------------------------------------------------------------------------ 02 your services */
.svcs { display: flex; flex-direction: column; gap: 16px; }
.svc {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .svc { padding: 24px 28px; } }
.svc.is-paused { border-style: dashed; border-color: var(--line-strong); }
.svc__head { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.svc__head .tone-bar { grid-row: 1 / span 2; min-height: 44px; }
.svc__title { min-width: 0; }
.svc__name { font: 700 20px/1.3 var(--font-body); letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
.svc__slug { margin-top: 4px; font: 400 13px/1.5 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.svc__slug .mono { color: var(--dim); }
.svc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 640px) {
  .svc__head { grid-template-columns: 3px minmax(0, 1fr) auto; }
  .svc__head .tone-bar { grid-row: 1; }
  .svc__chips { justify-content: flex-end; }
}
.svc__body { display: flex; flex-direction: column; gap: 16px; }
.svc__summary { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 72ch; overflow-wrap: anywhere; }
.svc__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; }
.svc__facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc__facts dt { font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.svc__facts dd { font-size: 14px; color: var(--dim); min-width: 0; }
.svc__facts .mono { font-size: 13px; }
@media (min-width: 640px) { .svc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .svc__facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr); } }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.svc__actions .btn--quiet { margin-left: 4px; }

/* service details, edited in place */
.svc-edit { display: flex; flex-direction: column; gap: 18px; padding: 18px; border-radius: var(--r3); background: var(--panel-3); border: 1px solid var(--line); }
.svc-edit__note { font-size: 14px; color: var(--muted); }
.svc-edit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px) {
  .svc-edit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-edit__wide { grid-column: 1 / -1; }
}

/* routes */
.svc__routes { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.svc__routes-head { margin-bottom: 4px; }
.routes { list-style: none; display: flex; flex-direction: column; }
.route {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--line-row); min-width: 0;
}
.route:last-child { border-bottom: 0; }
.route > form { grid-column: 1 / -1; }
.route__method {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 24px; padding: 0 8px;
  border-radius: var(--r1); background: var(--panel-2); border: 1px solid var(--line-strong);
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text);
}
.route__main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.route__path { font: 500 14px/1.45 var(--font-mono); color: var(--text); background: none; padding: 0; overflow-wrap: anywhere; }
.route__summary { font-size: 14px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.route__id { font: 400 12px/1.4 var(--font-mono); color: var(--faint); }
.route__price { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.route__amount { font: 500 15px/1.3 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.route__unit { font: 400 11.5px/1.3 var(--font-mono); color: var(--faint); white-space: nowrap; }
.route__state { grid-column: 3; grid-row: 2; justify-self: end; }
.route__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.route.is-off .route__path, .route.is-off .route__amount { color: var(--muted); }
@media (min-width: 1024px) {
  .route { grid-template-columns: 64px minmax(0, 1fr) 7.5rem 4.5rem auto; align-items: center; gap: 12px 16px; }
  .route__method { grid-column: 1; grid-row: 1; }
  .route__main { grid-column: 2; grid-row: 1; }
  .route__price { grid-column: 3; grid-row: 1; }
  .route__state { grid-column: 4; grid-row: 1; justify-self: start; }
  .route__actions { grid-column: 5; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; }
}
.routes__empty { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; font-size: 14.5px; color: var(--muted); }
.routes__empty .icon { margin-top: 3px; color: var(--accent); }

/* the route forms: add one, rewrite one, reprice one */
.svc__add { margin-top: 6px; border-top: 1px solid var(--line-row); }
.svc__add > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
  font: 600 14.5px/1 var(--font-body); color: var(--accent);
}
.svc__add > summary::-webkit-details-marker { display: none; }
.svc__add > summary:hover { color: var(--text); }
.svc__add[open] > summary { color: var(--dim); }
.route-form, .route-edit {
  display: flex; flex-direction: column; gap: 16px; padding: 16px; margin-top: 4px;
  border-radius: var(--r3); background: var(--panel-3); border: 1px solid var(--line);
}
.route-form__title { font: 600 14px/1.4 var(--font-body); color: var(--text); }
.route-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) {
  .route-form__grid { grid-template-columns: 9rem minmax(0, 1fr); }
  .route-form__wide { grid-column: 1 / -1; }
  .route-form__grid > .field:last-child { grid-column: 1 / -1; max-width: 22rem; }
}
@media (min-width: 1024px) {
  .route-form__grid { grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1fr) 13rem; align-items: start; }
  .route-form__wide { grid-column: auto; }
  .route-form__grid > .field:last-child { grid-column: auto; max-width: none; }
}
.route-edit__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.route-edit__title code { font-size: 13.5px; overflow-wrap: anywhere; }
.route-edit--price { max-width: 30rem; }
.route-edit__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.amount--s .input { height: 48px; font-size: 17px; }

/* ------------------------------------------------------------------------------------------------ 03 earnings */
.earn { display: flex; flex-direction: column; gap: 16px; }
.earn__band dd { font-size: 17px; }
.earn__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) { .earn__side { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); } }
.earn__withdraw { display: flex; flex-direction: column; gap: 18px; }
.earn__avail { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.earn__bounty {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--spec-amber); border-radius: var(--r3); background: var(--panel);
  font-size: 14.5px; color: var(--dim);
}
.earn__bounty .icon { color: var(--spec-amber); flex: none; }
.earn__bounty p { flex: 1 1 14rem; min-width: 0; }
.redeem-wrap { margin-top: 4px; }
.redeem { border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); }
.redeem > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none;
  font: 600 15px/1.3 var(--font-body); color: var(--text);
}
.redeem > summary::-webkit-details-marker { display: none; }
.redeem > summary .icon { color: var(--accent); }
.redeem > summary::after { content: "+"; margin-left: auto; font: 500 18px/1 var(--font-mono); color: var(--muted); }
.redeem[open] > summary::after { content: "-"; }
.redeem__body { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.redeem__body .small { color: var(--muted); max-width: 72ch; }
.redeem__input { font: 400 13px/1.55 var(--font-mono); min-height: 120px; }
.redeem__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.redeem__result { display: flex; flex-direction: column; gap: 12px; }
.redeem__result:empty { display: none; }
.redeem__line { font-size: 14.5px; color: var(--dim); }
.redeem__table td, .redeem__table th { white-space: nowrap; }

.feed-head { display: flex; flex-direction: column; gap: 6px; margin: var(--s9) 0 var(--s4); }
.feed-head .small { color: var(--muted); }
.sell-feed .feed__side { gap: 6px; }
.feed__refund { margin-top: 2px; }
.feed-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; }

/* ------------------------------------------------------------------------------------------------ 04 take payment */
.flow { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: var(--s7); }
@media (min-width: 640px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow__step {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel);
}
.flow__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent-line); color: var(--accent); font: 600 13px/1 var(--font-mono);
}
.flow__step p { font-size: 14.5px; line-height: 1.55; color: var(--body); min-width: 0; }
.flow__step strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
[data-pay-launch]:not(:empty) { margin-bottom: var(--s6); }

.pay { display: flex; flex-direction: column; }
.pay__block {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: var(--s8);
  border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px);
}
.pay__block:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .pay__block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } }
.pay__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pay__copy > p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--body); }
.pay__copy .note { overflow-wrap: anywhere; }
.pay__code { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pay__pick { display: flex; flex-direction: column; gap: 8px; max-width: 24rem; }
.pay__files { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pay__files li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line-row); font-size: 14px; color: var(--body); }
.pay__files code { align-self: flex-start; }
.pay__fields th { white-space: nowrap; }
.pay__fields td { font-size: 14px; }
.kit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kit pre { max-height: 36rem; overflow: auto; }
.kit [role="tabpanel"]:focus-visible { outline-offset: 4px; }

/* the two code tables read as stacked rows on a phone */
.pay-errors td, .pay-reasons td { font-size: 14px; }
.pay-errors th code, .pay-reasons th code { white-space: nowrap; }
@media (max-width: 767px) {
  .pay-errors thead, .pay-reasons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pay-errors tr, .pay-reasons tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-row); }
  .pay-errors tbody tr:last-child, .pay-reasons tbody tr:last-child { border-bottom: 0; }
  .pay-errors td, .pay-errors th, .pay-reasons td, .pay-reasons th { display: block; padding: 0; border: 0; }
  .pay-errors td:nth-child(3), .pay-errors td:nth-child(4), .pay-reasons td { grid-column: 1 / -1; }
  .pay-errors td:nth-child(4) { color: var(--muted); }
  .pay-errors tbody tr:hover, .pay-reasons tbody tr:hover { background: none; }
}
@media (max-width: 767px) {
  .pay-errors td:nth-child(4)::before { content: "The agent: "; font-weight: 600; color: var(--dim); }
}

/* the settlement feed: the refund action gets its own column, so every row keeps one height */
.sell-feed.has-act .feed__row { grid-template-columns: 62px minmax(0, 1fr) auto 7.5rem; }
.feed__act { display: flex; justify-content: flex-end; }
.feed__act:empty { display: none; }
@media (max-width: 479px) {
  .sell-feed.has-act .feed__row { grid-template-columns: minmax(0, 1fr) auto; }
  .sell-feed .feed__act { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .route__actions .icon { display: none; }
}

/* a code block and the sentence that says what it is for */
.snip { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.snip__cap { font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------------------------------------ the example dashboard */
/*
 * SPEC 1.3 and 5.5: js/pages/sell/example.js puts one [data-example] region under "Your services" while this visitor has
 * no dashboard of their own. The frame, the banner, the chips and the disabled actions are the shared .is-example
 * treatment of css/site.css; what is here lays the sample dashboard out with the same cards, band and feed as a real one.
 */
.sell-example:not(:empty) { margin-top: var(--s6); }
.ex-dash { display: flex; flex-direction: column; gap: var(--s8); min-width: 0; }
.ex-part { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ex-part__title { font: 600 17px/1.35 var(--font-body); color: var(--text); }
.ex-part__lede { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 64ch; margin-top: -6px; }
.ex-why { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.ex-line { font-size: 14px; line-height: 1.55; color: var(--dim); max-width: 72ch; overflow-wrap: anywhere; }
.ex-svc__add { padding-top: 12px; border-top: 1px solid var(--line-row); }
.ex-bounty .example-action { flex: 1 1 100%; }

/* the feed: a phone wraps the title already; wider, the chip takes room, so the title wraps instead of cutting */
.ex-feed .feed__title { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.ex-feed .feed__title .example-chip { margin-right: 2px; }

/* the banked notes: one row per note, its state and the reason in words under it */
.ex-bank { list-style: none; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); overflow: hidden; }
.ex-bank__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; min-width: 0;
  padding: 14px 16px; border-bottom: 1px solid var(--line-row);
}
.ex-bank__row:last-child { border-bottom: 0; }
.ex-bank__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ex-bank__hash { font: 400 12.5px/1.4 var(--font-mono); color: var(--dim); }
.ex-bank__age { font: 400 12px/1.4 var(--font-mono); color: var(--muted); }
.ex-bank__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-bank__route { font: 500 14px/1.45 var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.ex-bank__payer { font: 400 12px/1.45 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.ex-bank__amount { font: 500 14px/1.45 var(--font-mono); color: var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-bank__why { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--body); max-width: 80ch; overflow-wrap: anywhere; }
.ex-bank__row.is-skipped .ex-bank__why { padding-left: 12px; border-left: 3px solid var(--warn); color: var(--text); }
.ex-bank__row.is-expired .ex-bank__route, .ex-bank__row.is-expired .ex-bank__amount { color: var(--muted); }
@media (min-width: 640px) {
  .ex-bank__row { padding: 14px 18px; }
}
@media (max-width: 639px) {
  .ex-dash { gap: var(--s7); }
}