/* blocks.css — the block layout for Mint, Account and Docs (docs/design.md §11.4). Tokens from variables.css only;
   no rounded corners; no new colours. One bold element per page: the face, centred and the largest thing. */

/* ---------- the stage: the face in the centre ---------- */
.bk-stage { text-align: center; padding: 40px 0 32px; }
.bk-stage__face { width: 100%; max-width: 440px; margin: 0 auto; }
.bk-face { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated;
  border: var(--border-width) solid var(--color-border); background: var(--color-bg-terminal); }
.bk-stage__name { font-family: var(--font-family-display); font-weight: var(--font-weight-normal); font-size: clamp(48px, 9vw, 88px);
  line-height: 0.9; color: var(--color-text-highlight); margin: var(--spacing-2xl) 0 var(--spacing-sm); }
.bk-stage__owner { color: var(--color-text-secondary); margin: 0 auto var(--spacing-lg); max-width: none; overflow-wrap: anywhere; }
.mp .bk-stage__owner { max-width: none; }
.bk-owner-kind { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bk-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; margin-bottom: var(--spacing-lg); }
.bk-chip { border: var(--border-width) solid var(--color-border); padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm); color: var(--color-text-primary); }
.bk-chip--ok { border-color: var(--color-accent-green); color: var(--color-accent-green); }
.bk-chip--warn { border-color: var(--color-accent-yellow); color: var(--color-accent-yellow); }
.bk-chip--bad { border-color: var(--color-accent-red); color: var(--color-accent-red); }
.bk-stage__actions { justify-content: center; }
.bk-stage .mp-note { margin: var(--spacing-md) auto 0; }
.bk-stage .mp-unrevealed { max-width: 440px; margin: 0 auto; }

/* ---------- "Before you buy" ---------- */
.bk-buy { border: var(--border-width) solid var(--color-accent-yellow); border-left-width: var(--border-width-accent);
  padding: var(--spacing-xl); margin: 0 0 var(--spacing-2xl); }
.bk-buy[hidden] { display: none; }
.bk-buy h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-normal); font-size: 36px; line-height: 1;
  color: var(--color-accent-yellow); margin: 0 0 var(--spacing-xs); }
.mp .bk-buy__lead { margin: 0 0 var(--spacing-lg); color: var(--color-text-primary); }
.bk-buy__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); margin: 0 0 var(--spacing-md); }
.bk-buy__facts dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bk-buy__facts dd { margin: var(--spacing-xs) 0 0; color: var(--color-text-highlight); font-size: var(--font-size-lg); overflow-wrap: anywhere; }

/* ---------- two panels: display + control ---------- */
.bk-panels { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--spacing-2xl); align-items: start; margin-bottom: 64px; }
.bk-panel { border: var(--border-width) solid var(--color-border); background: var(--color-bg-secondary); min-width: 0; }
.bk-panel__head { padding: var(--spacing-md) var(--spacing-xl); border-bottom: var(--border-width) solid var(--color-border); }
.bk-panel__head h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-normal); font-size: 32px; line-height: 1;
  color: var(--color-text-highlight); margin: 0; }
.bk-panel--ctl { border-top: var(--border-width-thick) solid var(--color-accent-green); }
.bk-block { padding: var(--spacing-lg) var(--spacing-xl); border-top: var(--border-width) solid var(--color-border); }
.bk-panel__head + .bk-block { border-top: 0; }
.bk-block h3 { font-size: var(--font-size-lg); color: var(--color-text-highlight); margin: 0 0 var(--spacing-sm); font-weight: var(--font-weight-bold); }
.mp .bk-text { margin: 0 0 var(--spacing-sm); color: var(--color-text-primary); max-width: 60ch; }
.mp .bk-small, .bk-small { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--spacing-xs) 0 0; line-height: var(--line-height-relaxed); }
.bk-dim { color: var(--color-text-muted); }

.bk-list { width: 100%; border-collapse: collapse; }
.bk-list td { padding: var(--spacing-sm) 0; border-bottom: var(--border-width) solid var(--color-border); vertical-align: top;
  color: var(--color-text-primary); overflow-wrap: anywhere; font-size: var(--font-size-base); }
.bk-list td:not(:first-child) { text-align: right; padding-left: var(--spacing-md); color: var(--color-text-highlight); font-variant-numeric: tabular-nums; }
.bk-list td.bk-dim { color: var(--color-text-muted); white-space: nowrap; }
.bk-list small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: 2px; }
.bk-row--unknown td { color: var(--color-text-muted); }
.bk-list--looks td:nth-child(2) { text-align: left; }

.bk-wallet { display: flex; gap: var(--spacing-lg); align-items: flex-start; }
.bk-qr { flex: none; width: 116px; }
.bk-qr svg { width: 116px; height: 116px; display: block; }
.bk-qr svg rect { fill: var(--color-text-highlight); }
.bk-qr svg path { fill: var(--color-bg-primary); }
.bk-wallet__addr { min-width: 0; display: grid; gap: var(--spacing-sm); justify-items: start; }
.bk-wallet__addr code { font-size: var(--font-size-sm); color: var(--color-text-highlight); overflow-wrap: anywhere; }
.bk-tag { border: var(--border-width) solid var(--color-accent-yellow); color: var(--color-accent-yellow); padding: 2px var(--spacing-sm);
  font-size: var(--font-size-xs); }

.bk-more > summary { cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-sm); list-style: none; }
.bk-more > summary::-webkit-details-marker { display: none; }
.bk-more > summary::before { content: "+ "; color: var(--color-text-muted); }
.bk-more[open] > summary::before { content: "− "; }
.bk-plain { list-style: none; margin: var(--spacing-md) 0 0; padding: 0; display: grid; gap: var(--spacing-sm); }
.bk-plain li { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed);
  padding-left: var(--spacing-lg); position: relative; }
.bk-plain li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; border-top: var(--border-width) solid var(--color-text-muted); }
.bk-plain b { color: var(--color-text-highlight); }
.bk-tech dl { margin-top: var(--spacing-md); }
.bk-safety > summary { font-size: var(--font-size-base); color: var(--color-text-primary); }

/* ---------- control panel ---------- */
.bk-ctl { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-ctl.is-off .bk-action > summary { opacity: 0.5; }
.bk-ctl.is-off .bk-action[open] .bk-form, .bk-ctl.is-off .bk-action[open] .bk-sell { opacity: 0.5; }
.bk-action { border-top: var(--border-width) solid var(--color-border); }
.bk-action > summary { cursor: pointer; list-style: none; padding: var(--spacing-lg) var(--spacing-xl); display: grid;
  grid-template-columns: 1fr auto; gap: 2px var(--spacing-md); }
.bk-action > summary::-webkit-details-marker { display: none; }
.bk-action > summary b { color: var(--color-text-highlight); font-size: var(--font-size-lg); }
.bk-action > summary span { grid-column: 1; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bk-action > summary::after { content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-text-muted); font-size: var(--font-size-xl); }
.bk-action[open] > summary::after { content: "−"; }
.bk-action > summary:focus-visible { outline: var(--border-width-thick) solid var(--color-accent-blue); outline-offset: -2px; }
.bk-form { display: grid; gap: var(--spacing-md); padding: 0 var(--spacing-xl) var(--spacing-xl); }
.bk-form .mp-btn, .bk-sell .mp-btn { width: 100%; }
.bk-form .mp-note, .bk-sell .mp-note { margin: 0; overflow-wrap: anywhere; }
.bk-link { background: none; border: 0; padding: 0; color: var(--color-accent-green); font-family: var(--font-family-mono);
  font-size: var(--font-size-xs); cursor: pointer; justify-self: start; text-decoration: underline; }
.bk-btn-sm { min-height: 32px; padding: 0 var(--spacing-md); font-size: var(--font-size-sm); }
.bk-confirm { border: var(--border-width) solid var(--color-accent-red); border-left-width: var(--border-width-accent); padding: var(--spacing-md); display: grid; gap: var(--spacing-md); }
.bk-confirm[hidden] { display: none; }
.mp .bk-confirm p { margin: 0; color: var(--color-text-highlight); }
.bk-confirm .mp-row { flex-wrap: nowrap; }
.bk-confirm .mp-btn { width: auto; flex: 1; }
.bk-confirm .mp-check { margin: 0; }

/* the sell steps: a real sequence */
.bk-sell { list-style: none; margin: 0; padding: 0 var(--spacing-xl) var(--spacing-xl); counter-reset: sell; display: grid; gap: var(--spacing-lg); }
.bk-sell > li { counter-increment: sell; display: grid; gap: var(--spacing-sm); padding-left: 40px; position: relative; color: var(--color-text-secondary); }
.bk-sell > li::before { content: counter(sell); position: absolute; left: 0; top: -6px; font-family: var(--font-family-display);
  font-size: 32px; line-height: 1; color: var(--color-text-muted); }
.bk-sell > li.is-done::before { color: var(--color-accent-green); }
.bk-sell > li > b { color: var(--color-text-highlight); }
.bk-lockrow { flex-wrap: nowrap; }
.bk-lockrow .mp-btn { width: auto; flex: 1; }
.bk-days { width: auto; flex: 1; }

/* ---------- mint ---------- */
.bk-mint { max-width: 600px; margin: 0 auto; padding-bottom: 64px; }
.bk-mint .mp-sealed { max-width: 440px; margin: 0 auto; }
.bk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--border-width) solid var(--color-border); margin: 0 0 var(--spacing-2xl); }
.bk-facts > div { padding: var(--spacing-md) var(--spacing-lg); border-bottom: var(--border-width) solid var(--color-border); }
.bk-facts > div:nth-child(odd) { border-right: var(--border-width) solid var(--color-border); }
.bk-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.bk-facts dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bk-facts dd { margin: var(--spacing-xs) 0 0; color: var(--color-text-highlight); font-size: var(--font-size-lg); }
.bk-mint .mp-btn.bk-wide { width: 100%; }
.bk-done { border: var(--border-width) solid var(--color-accent-green); border-left-width: var(--border-width-accent); padding: var(--spacing-xl); margin: var(--spacing-xl) 0; }
.bk-done[hidden] { display: none; }
.bk-done h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-normal); font-size: 40px; line-height: 1; color: var(--color-accent-green); margin: 0 0 var(--spacing-md); }
.bk-now { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: var(--border-width) solid var(--color-border); margin: 0; padding: 0; list-style: none; }
.bk-now li { padding: var(--spacing-lg); border-right: var(--border-width) solid var(--color-border); }
.bk-now li:last-child { border-right: 0; }
.bk-now b { display: block; color: var(--color-text-highlight); margin-bottom: var(--spacing-xs); font-size: var(--font-size-lg); }
.bk-now span { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }

/* ---------- docs ---------- */
.bk-doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding: 40px 0 72px; align-items: start; }
.bk-doc__nav { position: sticky; top: var(--spacing-lg); display: grid; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
.bk-doc__nav a { color: var(--color-text-secondary); text-decoration: none; }
.bk-doc__nav a[aria-current="page"] { color: var(--color-text-highlight); }
.bk-doc__body { min-width: 0; }
.bk-doc__body h1 { font-family: var(--font-family-display); font-weight: var(--font-weight-normal); font-size: clamp(48px, 7vw, 72px);
  line-height: 0.95; color: var(--color-text-highlight); margin: 0 0 var(--spacing-lg); }
.bk-doc__body h2 { font-size: var(--font-size-xl); color: var(--color-text-highlight); margin: 48px 0 var(--spacing-md); padding-top: var(--spacing-lg);
  border-top: var(--border-width) solid var(--color-border); }
.bk-doc__body h3 { font-size: var(--font-size-lg); color: var(--color-text-highlight); margin: var(--spacing-2xl) 0 var(--spacing-sm); }
.bk-doc__body p, .bk-doc__body li { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); max-width: 72ch; }
.bk-doc__body ul, .bk-doc__body ol { padding-left: var(--spacing-xl); }
.bk-doc__body code { color: var(--color-text-highlight); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.bk-doc__body pre { background: var(--color-bg-terminal); border: var(--border-width) solid var(--color-border); padding: var(--spacing-lg);
  overflow-x: auto; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.bk-doc__body pre code { color: inherit; }
.bk-doc__body .bk-list { margin: var(--spacing-md) 0; }
.bk-doc__body .bk-list td:not(:first-child) { text-align: left; }
.bk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--border-width) solid var(--color-border); margin: var(--spacing-xl) 0; }
.bk-cards a { display: block; padding: var(--spacing-lg); text-decoration: none; border-bottom: var(--border-width) solid var(--color-border); }
.bk-cards a:nth-child(odd) { border-right: var(--border-width) solid var(--color-border); }
.bk-cards a b { display: block; color: var(--color-text-highlight); margin-bottom: var(--spacing-xs); }
.bk-cards a span { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.bk-cards a:hover b { color: var(--color-accent-green); }
.bk-callout { border: var(--border-width) solid var(--color-accent-yellow); border-left-width: var(--border-width-accent); padding: var(--spacing-lg); margin: var(--spacing-xl) 0; }
.bk-callout p { margin: 0; }

/* ---------- faces: looks table ---------- */
.bk-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--border-width) solid var(--color-border); }
.bk-looks section { padding: var(--spacing-lg); border-right: var(--border-width) solid var(--color-border); border-bottom: var(--border-width) solid var(--color-border); min-width: 0; }
.bk-looks section:nth-child(3n) { border-right: 0; }
.bk-looks h3 { margin: 0 0 var(--spacing-sm); color: var(--color-text-highlight); font-size: var(--font-size-lg); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .bk-panels { grid-template-columns: 1fr; }
  .bk-buy__facts { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .bk-now { grid-template-columns: 1fr; }
  .bk-now li { border-right: 0; border-bottom: var(--border-width) solid var(--color-border); }
  .bk-now li:last-child { border-bottom: 0; }
  .bk-doc { grid-template-columns: 1fr; gap: var(--spacing-xl); padding-top: var(--spacing-xl); }
  .bk-doc__nav { position: static; display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-lg); }
  .bk-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-looks section:nth-child(3n) { border-right: var(--border-width) solid var(--color-border); }
  .bk-looks section:nth-child(2n) { border-right: 0; }
}
@media (max-width: 480px) {
  .bk-stage { padding-top: var(--spacing-xl); }
  .bk-block, .bk-panel__head { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .bk-action > summary, .bk-form { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .bk-sell { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .bk-wallet { flex-direction: column; }
  .bk-facts { grid-template-columns: 1fr; }
  .bk-facts > div:nth-child(odd) { border-right: 0; }
  .bk-facts > div:nth-last-child(2) { border-bottom: var(--border-width) solid var(--color-border); }
  .bk-cards { grid-template-columns: 1fr; }
  .bk-cards a:nth-child(odd) { border-right: 0; }
  .bk-looks { grid-template-columns: 1fr; }
  .bk-looks section { border-right: 0; }
  .bk-looks section:nth-child(2n), .bk-looks section:nth-child(3n) { border-right: 0; }
  .bk-buy { padding: var(--spacing-lg); }
}
.bk-qr:empty { display: none; }
.bk-sub { margin-top: var(--spacing-md); }
.bk-stage .mp-sealed { max-width: 440px; margin: 0 auto; }
.mp p.bk-callout { max-width: none; }
.bk-doc__body .bk-list td:first-child { padding-right: var(--spacing-lg); color: var(--color-text-highlight); }
@media (min-width: 640px) { .bk-doc__body .bk-list td:first-child { white-space: nowrap; } }
.bk-doc__body #reading td:first-child { white-space: normal; }
.hc-cmd { background: var(--color-bg-terminal); border: var(--border-width) solid var(--color-border); padding: var(--spacing-lg); color: var(--color-text-highlight); margin: 0 0 var(--spacing-xl); overflow-x: auto; }

/* The landing is the Mint page (no big hero word); the Account face may be the on-chain page in an iframe. */
.bk-sealed { max-width: 320px; margin: 0 auto; }
.bk-mint__h { font-family: var(--font-family-mono); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    color: var(--color-text-highlight); margin: var(--spacing-xl) 0 var(--spacing-sm); }
.bk-face--live { border: 0; background: var(--color-bg-primary); }
.mp .bk-stage__src { text-align: center; margin: var(--spacing-sm) auto 0; max-width: none; }

.bk-doc__body .bk-list td:first-child { overflow-wrap: break-word; }   /* a short label never breaks mid-word */
.mp .bk-doc__lead { font-size: var(--font-size-lg); color: var(--color-text-primary); }
.bk-doc__body pre code { white-space: pre-wrap; overflow-wrap: anywhere; }   /* long commands wrap at 390 px */
.bk-doc__body a { overflow-wrap: anywhere; }
.bk-blur { filter: blur(5px); user-select: none; color: var(--color-text-highlight); }   /* a placeholder, never the real number */