/*  COMPUTE — THE CONSOLE.

    One surface. A glass case pinned along the bottom in the slot the building's
    statistics strip occupies, carrying a dark readout chassis and a four-segment
    rail. Exactly one segment is expanded. Reaching segment 02 is what opens the
    top-down. There is no second panel, no side rail and no modal at any width —
    that was the thing that kept reading as two floating menus.

    MATERIAL RULE: every chip, figure, row and lamp sits ON THE CHASSIS. The
    white glass is only the case around it. That is what stops this reading as a
    landing page with a form on it.

    TYPE RULE, absolute: no sentence is ever set in mono, no figure is ever set
    in Inter. Words are Inter; figures are Plex Mono with tabular numerals. */

/* ── the mode switch in the bar ───────────────────────────────────── */
.cmode{display:inline-flex;align-items:center;margin-left:10px;padding:2px;
  border:1px solid var(--edge,rgba(16,60,112,.16));border-radius:999px;
  background:var(--glass2,rgba(255,255,255,.72));vertical-align:middle}
.cmode button{font:700 10.5px ui-monospace,Menlo,monospace;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 10px;border:0;border-radius:999px;
  background:transparent;color:var(--dim,#6f8bab);cursor:pointer;line-height:1}
.cmode button:hover{color:var(--ink,#103c70)}
.cmode button.on{background:var(--ink,#103c70);color:#fff}
html.compute .cmode button.on{background:var(--lime,#cbf70c);color:#14210a}
@media (max-width:600px){.cmode{margin-left:6px}.cmode button{padding:5px 7px;font-size:9.5px}}

/* ── the building's own furniture, out of the way in compute ───────── */
html.v2 .dash.dashm{display:none}
html.v2.compute .dash:not(.dashm){display:none}
html.v2.compute .dash.dashm{display:none}
/*  No speech bubbles in compute. The building talks; a machine for rent
    does not, and a duck with an opinion over a price is noise. */
html.compute .saybub{display:none!important}

/*  ── THE BUILDING'S OWN CONTROLS ARE NOT IN THIS PRODUCT ──────────────
    An audit found nineteen ways into building mode still reachable from
    compute. Four were blockers and two of those were one click from the mode
    switch itself: the room button opened the building's chat straight over the
    console, and a duck's feed card kept a camera lock that overrode the compute
    rig entirely, so the building stopped answering compute at all.

    These are hidden with display:none rather than opacity, DELIBERATELY. The
    rule this replaces hid a window by setting opacity to 0 and left it
    hit-testing — elementFromPoint still returned it — so an invisible building
    dialog silently swallowed every click in a 560x493 rectangle over the
    drawing. Hiding is not disabling. display:none is both, and it takes the
    control out of the tab order too, which opacity never did.               */
html.compute .barroom,
html.compute .baraudio,
html.compute .camhold,
html.compute #buybtn,
html.compute .roomwin,
html.compute .room,
html.compute .dwin,
html.compute .feedmodal{display:none!important;pointer-events:none!important}

/*  The ducks' bubbles position themselves with an inline transform, and the
    site's own way of silencing them (html.nobubble) matches on exactly that,
    so this keeps the selector rather than inventing a class that does not
    exist. What it ADDS is the disabling: hidden at opacity 0 the element still
    hit-tests, and elementFromPoint still returns it, which is how an invisible
    building window came to swallow every click in a 560x493 rectangle over the
    drawing. Hiding is not disabling. */
html.compute div[style*="translate(-50%"]{opacity:0!important;pointer-events:none!important}

/* ── the terminal is a holder's door, not a customer's ──────────────
   /terminal/ is gated on holding 1,000,000 LDC (or having destroyed
   100,000 in the building) and its trade panel takes a fee on swaps.
   A compute customer must never be one click from that: LDC is not
   required to rent a machine, and the rental business is deliberately
   separate from the token. Building mode keeps it. */
html.compute .barterm{display:none}

/* ── the footer follows the product ─────────────────────────────────── */
.cfoot{display:none}
html.compute .cfoot{display:block}
html.compute .v2foot{display:none}
.cfoot .vf-soon{font:600 11px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--dim,#6f8bab);
  border:1px solid var(--line,rgba(16,60,112,.16));border-radius:999px;padding:3px 10px}

/*  In focus the footer goes with everything else: the console slides down into
    its place and nothing competes with the drawing. */
html.in-focus .v2foot,html.in-focus .cfoot,html.in-focus .foot{opacity:0!important;pointer-events:none}
.v2foot,.cfoot,.foot,.dash,.dashm{transition:opacity .45s linear}

/* ══ THE CONSOLE ═══════════════════════════════════════════════════ */

.cn,.cn *{box-sizing:border-box}
.cn{
  position:fixed;left:50%;transform:translateX(-50%);
  width:min(1060px,calc(100% - 44px));
  bottom:calc(var(--footh,76px) + 12px);
  height:var(--cnh,172px);
  border-radius:18px;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1.5px solid rgba(16,60,112,.14);
  box-shadow:0 26px 60px rgba(0,40,100,.22);
  padding:12px;z-index:6;display:none;
  transition:height .28s cubic-bezier(.22,.61,.36,1),
             bottom .45s cubic-bezier(.22,.61,.36,1);
}
html.compute .cn{display:block}
/*  The blur is dropped while the case is resizing: compositing a live blur
    against a moving 3D scene is the one thing that costs frames here. */
.cn.cn-moving{backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}
html.in-focus .cn{bottom:14px}

/* the chassis */
/*  The site sets text-transform and letter-spacing broadly, and the console is
    sentence case throughout — every uppercase run below is asked for
    explicitly. Reset once, here, rather than fighting it per rule. */
.cn,.cn *{text-transform:none;letter-spacing:normal}

.cn-ch{
  height:100%;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#12160A 0%,#080A05 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  display:grid;grid-template-rows:18px 34px 1fr;
}

/* ── the rail: progress, ticket stub, and the ONLY back control ───────
   A done segment shows WHAT YOU CHOSE, in mono, and clicking it returns to
   that step and clears every segment to its right. So there is no Back, no
   Next, no ✕ and no cancel anywhere on this surface. */
.cn-rail{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;
  border-bottom:1px solid rgba(203,247,12,.15)}
.cn-seg{display:flex;align-items:center;gap:7px;padding:0 12px;min-width:0;
  border-right:1px solid rgba(203,247,12,.15);background:transparent;
  border-top:0;border-left:0;border-bottom:0;cursor:default;text-align:left;
  font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.cn-seg:last-child{border-right:0}
.cn-seg i{flex:0 0 auto;width:6px;height:6px;border-radius:1px;
  border:1px solid rgba(203,247,12,.30);background:transparent}
.cn-seg b{flex:0 0 auto;font:700 10px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;color:rgba(203,247,12,.38)}
.cn-seg span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 10px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:rgba(203,247,12,.38)}
.cn-seg.cn-now{background:rgba(203,247,12,.06)}
.cn-seg.cn-now i{background:#CBF70C;border-color:#CBF70C}
.cn-seg.cn-now b,.cn-seg.cn-now span{color:#CBF70C}
.cn-seg.cn-done{cursor:pointer}
.cn-seg.cn-done i{background:#CBF70C;border-color:#CBF70C}
.cn-seg.cn-done b{color:rgba(232,240,216,.85)}
/*  The done segment's word is the VALUE you picked, so it is a figure and it is
    set in mono. Letter-spacing drops because it is no longer a label. */
.cn-seg.cn-done span{font:700 10.5px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.04em!important;text-transform:none;
  color:rgba(232,240,216,.85)}
.cn-seg.cn-done:hover span{color:#fff}
.cn-seg:focus-visible{outline:2px solid #CBF70C;outline-offset:-2px}

/* ── the stage ──────────────────────────────────────────────────────── */
.cn-stage{position:relative;min-height:0;padding:10px 12px;display:flex;flex-direction:column;
  overflow:hidden}
.cn.cn-cap .cn-stage{overflow-y:auto;overscroll-behavior:contain}
.cn-fade{animation:cnIn .18s cubic-bezier(.22,.61,.36,1) both}
@keyframes cnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the status line, permanent at every step */
.cn-status{display:flex;align-items:center;gap:7px;padding:0 12px;min-width:0;
  border-bottom:1px solid rgba(203,247,12,.15)}
.cn-status i{width:6px;height:6px;border-radius:50%;background:#E8A317;
  box-shadow:0 0 0 2px rgba(232,163,23,.18);flex:0 0 auto}
.cn-status span{font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.11em!important;
  text-transform:uppercase!important;color:rgba(232,240,216,.62);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── figures, and the EXAMPLE tag that is a child of the figure ──────
   §7: every figure not read from a deployed contract is emitted by one
   function and carries its own tag, so the disclosure cannot drift away
   from the number the way a line of furniture at the top can. */
/*  A FIGURE CARRIES ITS OWN FACE. Every figure context re-armed mono except
    .cn-escrow, which printed the escrow sentence's three figures in Inter one
    line under an identical figure in mono. Declaring it here means no context
    can forget it. .cnex re-declares Inter, because it is a word. */
.cnfig{white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
/*  A POLICY CONSTANT: a figure, so mono and tabular, but no tag — deployment
    would not change it. */
.cnlim{white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.cnfig[data-example="1"] .cnex{display:inline-block}
.cn-f .cnex{flex:0 0 auto;margin-left:0!important;vertical-align:baseline}
.cnfig .cnex,.cn-f .cnex{display:inline-block;margin-left:6px;vertical-align:2px;
  font:700 8.5px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.10em!important;
  color:#E8A317;background:rgba(232,163,23,.12);
  border:1px solid rgba(232,163,23,.40);border-radius:4px;padding:2px 4px}

/* ── step 01: the doors ─────────────────────────────────────────────── */
.cn-doors{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:0 0 auto}
.cn-door{display:block;width:100%;min-width:0;text-align:left;cursor:pointer;height:72px;
  background:rgba(203,247,12,.05);border:1px solid rgba(203,247,12,.18);
  border-radius:10px;padding:12px 14px;color:inherit;font:inherit;
  transition:background .16s linear,border-color .16s linear}
.cn-door:hover{background:rgba(203,247,12,.09);border-color:rgba(203,247,12,.45)}
.cn-door:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-door .cnhd{display:flex;align-items:baseline;gap:10px}
.cn-door b{font:600 15px Inter,ui-sans-serif,system-ui,sans-serif;color:#E8F0D8;
  letter-spacing:-.01em}
.cn-door .cnfig,.cn-door .cnlim{margin-left:auto;font:700 12px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:#CBF70C;flex:0 0 auto}
.cn-door em{display:block;font-style:normal;margin-top:5px;
  font:400 12px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;color:rgba(232,240,216,.72)}
/* the quiet third door */
.cn-quiet{margin-top:8px;flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:26px}
.cn-quiet button{background:transparent;border:0;padding:0;cursor:pointer;
  font:600 12px Inter,ui-sans-serif,system-ui,sans-serif;color:#CBF70C;
  border-bottom:1px solid rgba(203,247,12,.35);line-height:1.5}
.cn-quiet button:hover{border-bottom-color:#CBF70C}
.cn-quiet em{font-style:normal;font:400 12px Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── step 02: the chip strip ────────────────────────────────────────── */
.cn-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;touch-action:pan-x}
.cn-strip::-webkit-scrollbar{display:none}
.cn-chip{flex:0 0 232px;scroll-snap-align:start;height:64px;cursor:pointer;
  background:rgba(203,247,12,.06);border:1px solid rgba(203,247,12,.20);
  border-radius:8px;padding:10px 12px;text-align:left;color:inherit;font:inherit;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .16s linear,border-color .16s linear}
.cn-chip:hover{border-color:rgba(203,247,12,.45)}
.cn-chip.cn-on{border-color:#CBF70C;background:rgba(203,247,12,.12)}
.cn-chip:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-chip .cnr1{display:flex;align-items:center;gap:7px;min-width:0}
/*  The class name truncates first, always. The price never truncates. */
.cn-chip .cncls{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;color:#E8F0D8}
.cn-chip .cnr2{display:flex;align-items:baseline;gap:8px}
.cn-chip .cnfig{font:700 15px "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#CBF70C;
  flex:0 0 auto}
/*  The square is the POINTER from this row to a shape on the drawing, in that
    hall's own load colour. It is drawn only when a heartbeat under 90 seconds
    old exists — a dot that was inferred rather than read is never drawn, in any
    colour, because a green light nobody measured is the one lie this surface
    cannot afford. */
.cn-chip .cndot{flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--tone,#2FA84F)}
.cn-chip .cnword{font:400 10px Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*  No auto margin here. getComputedStyle returns an auto margin's USED
    value — free space, not content — so the content measurement counted
    the gap it was supposed to ignore and step 02 stopped shrinking below
    step 01, which is the one height rule the design will not trade. */
.cn-count{margin-top:0;padding-top:8px;display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.cn-count .cnfig,.cn-count .cnlim{font:700 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:rgba(232,240,216,.72)}
.cn-count em{font-style:normal;font:400 11px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.62);min-width:0}

/*  Zero listings — the day-one state. ONE labelled card, never a strip of
    priced chips: one card with an EXAMPLE tag on every figure cannot be
    misread as inventory; three priced chips can. */
.cn-demo{flex:0 0 auto;border:1px dashed rgba(232,163,23,.42);border-radius:8px;
  padding:10px 12px;background:rgba(232,163,23,.05);display:flex;align-items:center;gap:12px}
.cn-demo{cursor:pointer;color:inherit;font:inherit;text-align:left;
  transition:background .16s linear,border-color .16s linear}
.cn-demo:hover{border-color:rgba(232,163,23,.72)}
.cn-demo.cn-on{border-style:solid;border-color:#CBF70C;background:rgba(203,247,12,.12)}
.cn-demo:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-demo .cncls{font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;color:#E8F0D8;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-demo .cnfig{margin-left:auto;font:700 15px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:#CBF70C;flex:0 0 auto}
.cn-lede{font:400 12px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.72);margin-bottom:8px;flex:0 0 auto}

/* ── step 03: hours, price, calls ───────────────────────────────────── */
.cn-row{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px}
.cn-presets{display:flex;gap:6px;flex:0 0 auto}
.cn-presets button{height:40px;min-width:58px;padding:0 13px;cursor:pointer;
  border:1px solid rgba(203,247,12,.22);border-radius:8px;background:transparent;
  font:700 13px "IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  color:rgba(232,240,216,.72);transition:background .16s linear,border-color .16s linear}
.cn-presets button:hover{border-color:rgba(203,247,12,.45)}
.cn-presets button.cn-on{background:rgba(203,247,12,.14);border-color:#CBF70C;color:#CBF70C}
.cn-presets button:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
/*  "other" is Inter: it is a word, not a figure. */
.cn-presets button.cn-w{font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0}
.cn-sum{margin-left:auto;font:700 19px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;color:#E8F0D8;letter-spacing:-.01em;flex:0 0 auto}
.cn-num{height:40px;width:92px;padding:0 10px;border-radius:8px;
  border:1px solid rgba(203,247,12,.45);background:rgba(203,247,12,.06);color:#E8F0D8;
  font:700 15px "IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.cn-num:focus{outline:2px solid #CBF70C;outline-offset:1px}
.cn-err{font:400 11px Inter,ui-sans-serif,system-ui,sans-serif;color:#E8A317}

/*  THE SPLIT BAR — present at steps 03 and 04, never collapsing. The deal is
    a picture before it is a sentence. */
.cn-split{flex:0 0 auto;margin-top:10px}
.cn-split .cnbar{height:6px;border-radius:3px;overflow:hidden;display:flex;
  background:rgba(255,255,255,.08)}
.cn-split .cnbar u{display:block;height:100%;text-decoration:none}
.cn-split .cnbar .cna{background:#CBF70C}
.cn-split .cnbar .cnb{background:#2A5F95}
.cn-split .cnlbl{display:flex;justify-content:space-between;gap:12px;margin-top:6px;
  font:500 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  color:rgba(232,240,216,.72)}

/* provider fields */
.cn-fields{display:flex;gap:10px;flex-wrap:nowrap;flex:0 0 auto;align-items:flex-end}
.cn-f{display:flex;flex-direction:column;gap:5px;min-width:0}
/*  ONE LINE EACH. The labels were wrapping to two and three lines, which threw
    the row's baselines out and pushed the fields down into the split. The label
    is a label: it does not wrap, and the field beneath it is what flexes. */
.cn-f label{display:flex;align-items:center;gap:6px;white-space:nowrap;
  font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.11em!important;
  text-transform:uppercase!important;color:rgba(203,247,12,.62)}
.cn-f:nth-child(1){flex:0 0 176px}
.cn-f:nth-child(2){flex:0 0 150px}
/*  A nowrap label wider than its own field ran into its neighbour's, so the
    row read as one run-on string. It stops at its own edge now. */
/*  THE BUILDING'S STYLESHEET SIZES BARE <label> AND IT REACHES IN HERE.

    index.html carries `label{display:inline-block;width:88px;font-size:12px}`
    and then `label{width:76px}` — element selectors, written for the old
    console's forms, with nothing scoping them to it. Every rule below styles
    .cn-f label without ever setting a WIDTH, so the 76px won on all of them:
    measured on a 1440x900 desktop, "Where the buyer connects" sat in a 661px
    field inside a 76px label clipped to 236px of text, and read as
    "WHERE THE B". "Price per hour" lost 21px and read as "PRICE PER HO".
    The width of a label has to come from the field it belongs to, not from
    another product's form. skin.css:652 already records this same rule
    landing somewhere it did not belong; this is the second place.

    The ellipsis is the honest fallback: if a label ever genuinely cannot fit
    its field it should end in a mark that says so, not stop mid-word as
    though the string were shorter than it is. */
.cn-f label{overflow:hidden;width:auto;max-width:100%;text-overflow:ellipsis}
.cn label,.ys-edit label{width:auto;max-width:100%}
.cn-f input,.cn-f select{height:36px;padding:0 10px;border-radius:8px;
  border:1px solid rgba(203,247,12,.22);background:rgba(203,247,12,.05);color:#E8F0D8;
  font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;min-width:0}
.cn-f input.cnmono{font:700 15px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums}
.cn-f input:focus,.cn-f select:focus{outline:2px solid #CBF70C;outline-offset:1px}
.cn-f.cngrow{flex:1 1 220px}
/*  THE FIELD THAT IS BLOCKING SAYS SO ITSELF.
    Three fields that all read as filled, and a dim box in the far corner
    naming something missing, is not a design a stranger can act on — the
    owner looked at this step and could not tell how to leave it. The amber
    is the same one the NOT DEPLOYED lamp uses: a state, not an error. */
.cn-f.cn-need input,.cn-f.cn-need .cn-money{border-color:#E8A317}
.cn-f.cn-need label{color:#E8A317}
.cn-needs{font-style:normal;flex:0 0 auto;padding:2px 5px;border-radius:4px;
  font:700 8.5px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.10em!important;
  text-transform:uppercase!important;color:#E8A317;background:rgba(232,163,23,.12);
  border:1px solid rgba(232,163,23,.40)}
/*  And the waiting control is the way back to that field, so it has to look
    like something you can press. It focuses the field it names. */
.cn-go.cn-wait{cursor:pointer}
.cn-go.cn-wait:hover{border-color:rgba(232,163,23,.55)}
.cn-go.cn-wait .cnhold{border-color:#E8A317}

/* the code door */
.cn-calls{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;min-width:0}
.cn-call{display:flex;align-items:baseline;gap:10px;background:rgba(203,247,12,.05);
  border-radius:8px;padding:8px 10px;min-width:0;cursor:default}
.cn-call b{flex:0 0 46px;font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.11em!important;text-transform:uppercase!important;color:rgba(203,247,12,.62)}
/*  Wraps instead of scrolling. white-space:pre with the scrollbar hidden cut
    these mid-token with nothing to say more was there. */
.cn-call code{font:400 12.5px/1.45 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:#E8F0D8;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.cn-call code::-webkit-scrollbar{display:none}
.cn-call.cn-hot{background:rgba(203,247,12,.11)}

/* ── THE ONE FORWARD CONTROL ─────────────────────────────────────────
   Back is the rail and only the rail. Forward is the pick where the step is a
   set of things to pick from — steps 01 and 02 — and this, once, where the
   step is a value you tune or fields you fill. Step 03 is the only such step,
   and it was the only step with no way out.

   It is deliberately NOT the last child of the stage: the escrow sentence
   follows it in source order, so when the stage scrolls under the cap this is
   not the first thing lost. */
.cn-foot3{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:10px;flex:0 0 auto}
.cn-foot3 .cn-split{flex:1 1 58%;min-width:0;margin-top:0}
.cn-keep{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  font:700 12px "IBM Plex Mono",ui-monospace,Menlo,monospace;color:rgba(232,240,216,.72)}
.cn-go{flex:0 0 auto;height:36px;padding:0 14px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid rgba(203,247,12,.45);color:#CBF70C;
  font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;
  transition:background .16s linear,border-color .16s linear}
.cn-go:hover{background:rgba(203,247,12,.10);border-color:#CBF70C}
.cn-go:hover .cnarw{transform:translateX(2px)}
.cn-go:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cnarw{font-style:normal;transition:transform .16s cubic-bezier(.22,.61,.36,1)}
/*  THE WAITING FORM is a different element in the same box, never a disabled
    button and never greyed: the text stays at full contrast and says what is
    missing. The amber lamp is NOT spent here — that lamp means the contract is
    not deployed, and lending it to a transient "finish typing" state is the
    worst trade on this surface. */
.cn-go.cn-wait{cursor:default;border-color:rgba(203,247,12,.22);color:#E8F0D8;
  font-weight:500}
.cn-go.cn-wait:hover{background:transparent;border-color:rgba(203,247,12,.22)}
/*  The same hollow square the rail draws on a step not yet reached, at the
    same size and the same weight, because it means the same thing. */
.cnhold{width:6px;height:6px;border-radius:1px;flex:0 0 auto;
  border:1px solid rgba(203,247,12,.30);background:transparent}
.cn-err{font:400 11px Inter,ui-sans-serif,system-ui,sans-serif;color:#E8A317;flex:0 0 auto}
/*  The field that holds the rejected value says so itself. Amber, the same
    colour as the sentence explaining it — never red, which on this surface is
    reserved for a hall at capacity. */
.cn-num.cn-bad,.cn-money input.cn-bad{border-color:#E8A317;color:#E8A317}
.cn-money:focus-within:has(input.cn-bad){border-color:#E8A317}

/*  Under the cap the stage scrolls inside itself, and the forward control and
    the equipment state stay pinned — "there isn't even a button" must not turn
    into "the button is below the fold". */
.cn.cn-cap .cn-foot3,.cn.cn-cap .cn-foot4{position:sticky;bottom:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,10,5,0),#080A05 8px)}

/* the price field's $ sits BESIDE the input, never inside its value */
.cn-money{display:flex;align-items:center;gap:6px;
  border:1px solid rgba(203,247,12,.22);border-radius:8px;
  background:rgba(203,247,12,.05);padding:0 10px;height:36px}
.cn-money i{font-style:normal;font:700 15px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:rgba(232,240,216,.72)}
/*  Beats .cn-f input, which was painting a second border INSIDE the money box
    and reading as a field within a field. */
.cn-f .cn-money input{border:0;background:transparent;padding:0;height:34px;width:100%;
  border-radius:0}
.cn-f .cn-money input:focus{outline:none}
.cn-money{flex:1 1 auto}
.cn-money:focus-within{border-color:#CBF70C}

/* provide step 02: the empty halls are the choice, the prices are reference */
.cn-hchip{flex:0 0 132px;height:44px;flex-direction:row;align-items:center;gap:10px}
/*  The hall letter is a token, and a token is mono wherever it appears — the
    rail stub and the drawing's label both set it that way. */
.cn-hchip .cncls{font:700 13px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums}
.cn-ref{font-style:normal;font:400 11px Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.62)}

/* the endpoint echoed back at step 04 */
.cn-echo{margin-top:6px;font:400 12.5px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  color:rgba(232,240,216,.62);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto}

/* the quote block is a control, so the ring works on touch and on a keyboard */
.cn-quote{cursor:pointer;text-align:left;border:0;font:inherit;color:inherit;
  flex-wrap:wrap;width:100%}
.cn-quote:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-call em{flex:1 1 100%;font-style:normal;margin-top:3px;
  font:400 11px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;color:rgba(232,240,216,.62)}
.cn-call{flex-wrap:wrap}

/* ── step 04: the order ─────────────────────────────────────────────── */
.cn-order{font:700 19px "IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;color:#E8F0D8;letter-spacing:-.01em;flex:0 0 auto}
.cn-escrow{margin-top:7px;font:400 12.5px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.72);flex:0 0 auto}
/*  WRAPS RATHER THAN OVERFLOWS. .cn-act never shrinks and .cn-split cannot go
    below its own nowrap min-content, so on a nowrap row the equipment state ran
    past the stage's overflow:hidden edge — at 768px, 226px of it was cut and the
    contract link was entirely off-screen. */
.cn-foot4{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:10px;flex:0 0 auto}
.cn-foot4 .cn-split{flex:1 1 58%;min-width:0;margin-top:0}
/*  THE ACTION CONTROL IS AN EQUIPMENT STATE, NOT A GREYED-OUT BUTTON. It is
    never <button disabled>: it reads to a screen reader, it says what is true,
    and it is not a promise dressed as a control. Neither the amber lamp nor
    the NOT DEPLOYED line may be removed for a demo or a screenshot. */
.cn-act{flex:1 1 auto;min-width:0;height:44px;border-radius:10px;background:transparent;
  border:1.5px solid rgba(203,247,12,.45);display:flex;align-items:center;gap:10px;
  padding:0 14px;color:#E8F0D8;font:500 13px Inter,ui-sans-serif,system-ui,sans-serif}
.cn-act .cnlamp{width:8px;height:8px;border-radius:50%;background:#E8A317;
  box-shadow:0 0 0 2px rgba(232,163,23,.18);flex:0 0 auto}
.cn-act a{color:rgba(203,247,12,.62);font-size:12px;text-decoration:none;
  border-bottom:1px solid rgba(203,247,12,.28);margin-left:2px}
.cn-act a:hover{color:#CBF70C}
/*  The small print sits on the WHITE GLASS, outside the chassis: it qualifies
    the whole surface, not one figure on it. ABOVE the case, not below — the
    case is the last thing before the viewport edge, so anything appended after
    it hangs off the bottom of the screen, which is where this first went. */
.cn-fine{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;
  padding:8px 14px;border-radius:12px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(16,60,112,.12);
  font:400 11px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink2,#2a5f95)}

/* ── where a paid rental lands (roadmap 2.5) ─────────────────────────
   Step 04 of the rent door once the chain has the rental. Sentences, so
   Inter; the two windows and the container's defaults are policy figures
   and ride lim(), mono. The RUNNING readout that used to be styled here was
   drawn off a field nothing assigned, and is gone with it. */
.cn-landed{margin-top:7px;flex:0 0 auto}
.cn-landed p{margin:0 0 5px;font:400 12.5px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.72)}
.cn-landed p:last-child{margin-bottom:0}
/*  The door into yours: the same equipment slot as the buy control, pressable,
    lime on hover like the forward control. */
.cn-golink{cursor:pointer;flex:0 1 auto;border-color:rgba(203,247,12,.45);color:#CBF70C;
  font:600 13px Inter,ui-sans-serif,system-ui,sans-serif;background:transparent;
  transition:background .16s linear,border-color .16s linear}
.cn-golink:hover{background:rgba(203,247,12,.10);border-color:#CBF70C}
.cn-golink:hover .cnarw{transform:translateX(2px)}
.cn-golink:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
/*  A landed buy control is a status, not a button, so no pointer. */
.cn-foot4 div.cn-buy.cn-done{cursor:default;text-transform:none!important;letter-spacing:.02em!important}

/* ── the four launch lines (roadmap 2.6) ─────────────────────────────
   Drawn once per wallet per session in front of the first send, full width
   of the foot, above the control whose words changed. Amber edge: a state
   the sender is standing in, not an error, the same as "list it anyway". */
.cn-launch{flex:1 1 100%;margin:0;padding:8px 12px;border-radius:8px;
  border:1px solid rgba(232,163,23,.40);background:rgba(232,163,23,.07)}
.cn-launch b{display:block;margin-bottom:4px;font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.11em!important;text-transform:uppercase!important;color:#E8A317}
.cn-launch ul{margin:0;padding-left:16px}
.cn-launch li{font:400 12px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#E8F0D8}
.cn-hair{position:absolute;left:0;bottom:0;height:2px;background:#CBF70C;width:0;
  transition:width .9s linear}

/* ── the one label on the drawing: the selected hall, and nothing else ──
   The drawing says WHERE and HOW BUSY. The console says WHAT and HOW MUCH.
   Neither repeats the other, so twelve chips over the render are gone. */
.cn-hall{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:5;
  display:none;align-items:center;gap:7px;padding:4px 10px 4px 5px;border-radius:999px;
  background:rgba(20,27,8,.86);opacity:0;transition:opacity .18s linear}
html.in-focus .cn-hall{display:flex}
.cn-hall b{display:inline-flex;width:18px;height:18px;border-radius:50%;
  align-items:center;justify-content:center;background:#CBF70C;color:#141b08;
  font:800 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace}
.cn-hall span{font:600 10px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.09em!important;
  text-transform:uppercase!important;color:#E8F0D8}

/* ══ PHONE ═════════════════════════════════════════════════════════ */
@media (max-width:759px){
  /*  It truncated at exactly the two words that matter. Two lines on a phone
      rather than an ellipsis through the disclosure. */
  .cn-ch{grid-template-rows:auto 30px 1fr}
  .cn-status{align-items:flex-start;padding:2px 10px}
  .cn-status span{white-space:normal;font-size:9px;line-height:1.3}
  .cn-status i{margin-top:3px}
  .cn{left:8px;right:8px;width:auto;transform:none;border-radius:16px;padding:8px;
    bottom:calc(8px + env(safe-area-inset-bottom))}
  html.in-focus .cn{bottom:calc(8px + env(safe-area-inset-bottom))}
  .cn-stage{padding:9px 10px}
  .cn-seg{gap:6px;padding:0 8px}
  /*  The NUMBER is always shown. The word or value is shown for the current
      and the done segments; a future segment shows its number alone, because
      four labels do not fit across 375px and the number is what orients. */
  .cn-seg:not(.cn-now):not(.cn-done) span{display:none}
  .cn-doors{grid-template-columns:1fr;gap:8px}
  .cn-door{height:60px;padding:10px 12px}
  .cn-door em{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cn-chip{flex:0 0 62vw}
  .cn-presets{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .cn-presets button{min-width:0;width:100%;padding:0 4px}
  .cn-row{flex-wrap:wrap}
  .cn-sum{margin-left:0;flex:1 1 100%;font-size:17px;margin-top:8px}
  .cn-foot4{flex-direction:column;align-items:stretch;gap:10px}
  .cn-act{width:100%;height:48px;justify-content:center}
  .cn-foot3{flex-direction:column;align-items:stretch;gap:10px}
  .cn-go{width:100%;height:44px;justify-content:center}
  .cn-hchip{flex:0 0 46vw}
  .cn-keep{justify-content:space-between}
  /*  At 375px the order line is wider than the screen in one piece, so on a
      phone it is allowed to wrap — and its figure with it, which is the one
      place the nowrap on .cnfig has to give. The EXAMPLE tag still travels
      with its number because they are one element. */
  .cn-order{font-size:16px;white-space:normal}
  .cn-order .cnfig{white-space:normal}
  .cn-run{font-size:17px}
  /*  The two halves of the split stack rather than truncate: "$0.49 to the
      busi" is worse than two lines. */
  .cn-split .cnlbl{flex-direction:column;gap:3px}
  .cn-seg{gap:5px;padding:0 6px}
  .cn-seg b{font-size:9.5px}
  .cn-seg span{font-size:9px}
  .cn-seg.cn-done span{font-size:9.5px}
  /*  The small print does not fit on a phone and must not become the page.
      Two lines, then a tap opens it. It changes nothing else — not the step,
      not the camera. */
  .cn-fine{max-height:3em;overflow:hidden;cursor:pointer;padding-right:34px}
  .cn-fine.cnopen{max-height:none}
  .cn-fine::after{content:"more";position:absolute;right:12px;top:8px;
    font:600 10px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--dim,#6f8bab)}
  .cn-fine.cnopen::after{content:"less"}
  .cn-fields{flex-direction:column;flex-wrap:wrap;align-items:stretch}
  .cn-f:nth-child(1),.cn-f:nth-child(2){flex:0 0 auto}
  .cn-f.cngrow{flex:1 1 auto}
}
/*  Between 560 and 759 the rail keeps the desktop layout but the doors lose
    their sub-sentences — the sentence is the first thing to go, never the
    figure. */
@media (min-width:560px) and (max-width:759px){
  .cn-doors{grid-template-columns:1fr 1fr}
  .cn-door em{display:none}
  .cn-chip{flex:0 0 200px}
}
@media (prefers-reduced-motion:reduce){
  .cn,.cn-hair,.cn-door,.cn-chip,.cn-presets button{transition-duration:.01ms!important}
  .cn-fade{animation-duration:.01ms!important}
}

/* ══ YOURS — the post-purchase surface ═══════════════════════════════════
   A panel rather than a step: a rental exists independently of whatever the
   stepper happens to be showing, and the one control a buyer may need in a
   hurry must not be four clicks inside a flow. */
/*  Sized to the TOP BAR, where it now lives — matched to the pills already in
    that row rather than to the console, which it no longer touches at all. */
.cn-yours{background:transparent;border:1px solid rgba(11,60,112,.22);
  color:var(--ink2,#2a5f95);font:700 11.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.12em;text-transform:lowercase;padding:7px 12px;border-radius:999px;
  cursor:pointer;flex:none;align-self:center;white-space:nowrap}
.cn-yours:hover{background:rgba(203,247,12,.22);border-color:rgba(11,60,112,.38)}
/*  NO COMPUTE OVERRIDE. The bar is the same light glass in both modes — it is
    the PAGE behind it that goes dark, not the bar — so tinting this lime for
    compute mode put pale yellow on white and made the one new control the
    hardest thing in the row to read. It matches BUILDING beside it instead. */
.cn-yours:hover{background:rgba(203,247,12,.12)}
.ys{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,5,.72);backdrop-filter:blur(7px)}
.ys.ysopen{display:flex}
.ys-ch{width:min(680px,94vw);max-height:84vh;overflow:auto;background:#0E1209;
  border:1px solid rgba(203,247,12,.26);border-radius:14px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#E8F0D8}
.ys-top{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid rgba(203,247,12,.18);position:sticky;top:0;background:#0E1209}
.ys-top b{font-size:12px;letter-spacing:.26em;color:#CBF70C}
.ys-x{margin-left:auto;background:transparent;border:0;color:rgba(232,240,216,.6);
  font:inherit;font-size:11px;letter-spacing:.14em;cursor:pointer}
.ys-body{padding:16px 18px 20px}
.ys-body h4{margin:16px 0 8px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,240,216,.46);font-weight:700}
.ys-body h4:first-child{margin-top:0}
.ys-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ys-row{border:1px solid rgba(203,247,12,.16);border-radius:10px;padding:12px 13px;
  background:rgba(203,247,12,.03)}
.ys-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ys-h b{font-size:12.5px;letter-spacing:.14em}
.ys-st{font-size:9.5px;letter-spacing:.16em;padding:3px 7px;border-radius:3px;
  background:rgba(232,240,216,.10);color:rgba(232,240,216,.72)}
.ys-active{background:rgba(47,168,79,.18);color:#7BD98F}
.ys-reserved{background:rgba(232,163,23,.18);color:#F0C46A}
.ys-flagged{background:rgba(214,69,61,.20);color:#F2938C}
/*  The chip: what the machine said to a plain read of its /_ldc/health,
    in one of three words (compute-yours.js chipOf). It sits beside the
    status pill and never gates the door. Drawn hidden, filled when the
    probe answers; the [hidden] rule is last and forced because the wall's
    display rule below would otherwise beat the attribute. */
.ys-chip{font-size:9.5px;letter-spacing:.14em;padding:3px 7px;border-radius:3px;
  background:rgba(232,240,216,.06);color:rgba(232,240,216,.50);border:1px solid rgba(232,240,216,.14)}
.ys-chip-serving{background:rgba(47,168,79,.14);color:#7BD98F;border-color:rgba(47,168,79,.34)}
.ys-chip-idle{background:rgba(232,163,23,.12);color:#F0C46A;border-color:rgba(232,163,23,.30)}
.ys-chip-unreachable{background:rgba(214,69,61,.12);color:#F2938C;border-color:rgba(214,69,61,.30)}
.ys-gate-in .ys-chip{display:inline-block;margin-left:4px;vertical-align:middle}
.ys-gate-in .ys-acts .ys-said{margin:0;align-self:center;font-size:12px;color:#F0C46A}
.ys-chip[hidden]{display:none !important}
.ys-row em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;
  color:rgba(232,240,216,.70)}
/* the flag deadline is the one thing on this surface that can be lost by
   not looking, so it is louder than the button that acts on it */
.ys-deadline{margin-top:9px;padding:9px 11px;border-radius:7px;font-size:12px;line-height:1.5;
  background:rgba(214,69,61,.12);border:1px solid rgba(214,69,61,.32);color:#F2C4C0}
.ys-deadline b{color:#FF8E86}
/* the ten minutes after the start (Kirt's decision 6): a clock the buyer can
   still act on, so it is amber rather than the flag deadline's red */
.ys-grace{margin-top:9px;padding:9px 11px;border-radius:7px;font-size:12px;line-height:1.5;
  background:rgba(240,196,106,.10);border:1px solid rgba(240,196,106,.30);color:#F3DDAE}
.ys-grace b,.ys-grace .ys-gl{color:#F0C46A;font-variant-numeric:tabular-nums}
.ys-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ys-acts button{background:rgba(203,247,12,.10);border:1px solid rgba(203,247,12,.30);
  color:#CBF70C;font:700 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.10em;
  padding:8px 12px;border-radius:6px;cursor:pointer}
.ys-acts button:hover{background:rgba(203,247,12,.18)}
.ys-acts button:disabled{opacity:.5;cursor:default}
.ys-acts .ys-warn{background:rgba(214,69,61,.14);border-color:rgba(214,69,61,.42);color:#FF9C95}
.ys-none{padding:14px 0;color:rgba(232,240,216,.62);font-size:12.5px;line-height:1.55}
.ys-none b{display:block;color:#E8F0D8;margin-bottom:4px;font-size:13px}
.ys-none em{font-style:normal}
.ys-more{margin-top:8px;font-size:11.5px;color:rgba(232,240,216,.45)}
.ys-owed{margin-top:16px;padding:12px 13px;border-radius:10px;
  border:1px solid rgba(232,163,23,.34);background:rgba(232,163,23,.08)}
.ys-owed b{display:block;color:#F0C46A;font-size:12.5px;margin-bottom:4px}
.ys-owed em{font-style:normal;font-size:12.5px;line-height:1.5;color:rgba(232,240,216,.70)}
@media (max-width:760px){ .ys-ch{width:96vw;max-height:88vh} }

/* the stranger's-machine wall — deliberately not dismissible by clicking away */
.ys-gate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,3,.86);backdrop-filter:blur(9px);
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.ys-gate-in{width:min(560px,92vw);background:#120E0D;color:#E8F0D8;padding:22px 24px 20px;
  border:1px solid rgba(214,69,61,.46);border-radius:14px}
.ys-gate-in b{display:block;font-size:15px;color:#FF9C95;margin-bottom:10px;letter-spacing:.02em}
.ys-gate-in p{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:rgba(232,240,216,.80)}
.ys-gate-in code{font-size:11.5px;color:#CBF70C;word-break:break-all}
.ys-gate-in ul{margin:0 0 4px;padding-left:18px}
.ys-gate-in li{font-size:12.5px;line-height:1.6;color:rgba(232,240,216,.76);margin-bottom:7px}
.ys-gate-in li b{display:inline;font-size:12.5px;color:#FFC9C4;margin:0}
.ys-plain{background:transparent !important;border-color:rgba(232,240,216,.24) !important;
  color:rgba(232,240,216,.62) !important}
.ys-on{font-size:10px;letter-spacing:.12em;color:rgba(232,240,216,.42);margin-left:auto}
.ys-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ys-edit label{display:flex;align-items:center;gap:3px;font-size:12.5px;color:rgba(232,240,216,.72)}
.ys-edit span{font-size:12px;color:rgba(232,240,216,.52)}
.ys-price{background:rgba(203,247,12,.06);border:1px solid rgba(203,247,12,.28);color:#E8F0D8;
  font:700 12.5px/1 ui-monospace,Menlo,monospace;padding:7px 8px;border-radius:5px;width:74px}
.ys-price:focus{outline:1px solid rgba(203,247,12,.6);outline-offset:1px}
.ys-edit button{background:rgba(203,247,12,.10);border:1px solid rgba(203,247,12,.30);
  color:#CBF70C;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.09em;
  padding:8px 11px;border-radius:6px;cursor:pointer}
.ys-edit button:hover{background:rgba(203,247,12,.18)}
.ys-edit button:disabled{opacity:.5;cursor:default}
/*  Where the buyer connects, as a field the provider can change from here.
    The label grows so the address gets the row; the button keeps its size. */
.ys-edit.ys-move label{flex:1 1 220px;min-width:0}
.ys-end{flex:1 1 auto;min-width:0;background:rgba(203,247,12,.06);border:1px solid rgba(203,247,12,.28);
  color:#E8F0D8;font:600 12px/1 ui-monospace,Menlo,monospace;padding:7px 8px;border-radius:5px}
.ys-end:focus{outline:1px solid rgba(203,247,12,.6);outline-offset:1px}
/*  A refusal, said on the row it belongs to. Amber like every refusal on the
    console: a state, not an error, and never the red the flag deadline owns. */
.ys-said{margin-top:8px;font-size:12px;line-height:1.5;color:#F0C46A}
/*  The four launch lines on a row, once per wallet per session, in front of
    the row's first send. The same amber edge the console's block wears. */
.ys-launch{margin-top:10px;padding:9px 11px;border-radius:7px;
  border:1px solid rgba(232,163,23,.40);background:rgba(232,163,23,.07)}
.ys-launch b{display:block;margin-bottom:4px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#F0C46A}
.ys-launch ul{margin:0;padding-left:16px}
.ys-launch li{font-size:12px;line-height:1.5;color:#E8F0D8;margin-bottom:3px}
.ys-quiet{margin-top:8px;font-size:11.5px;line-height:1.5;color:rgba(232,240,216,.48)}
.ys-rec{margin-top:2px;padding:12px 13px;border-radius:10px;
  border:1px solid rgba(203,247,12,.22);background:rgba(203,247,12,.05)}
.ys-rec b{display:block;color:#CBF70C;font-size:19px;letter-spacing:.04em;margin-bottom:5px}
.ys-rec em{font-style:normal;font-size:12.5px;line-height:1.55;color:rgba(232,240,216,.66)}

/* ── iOS ZOOMS ANY FIELD UNDER 16px AND WILL NOT ZOOM BACK ───────────────
    skin.css:1451 already carries this rule, and the warning on it is exact:
    with html/body overflow hidden and every surface fixed there is nothing to
    scroll, so once iOS has zoomed in on a focused field the way out is gone.
    It was scoped to .roomwrite, .pc-name and #roomin and never reached the
    compute console — whose fields are 13px (.cn-f input, .cn-f select) and
    15px (.cnmono). Step 03 is the step WITH the fields, so on an iPhone the
    one screen a provider has to type into is the one that traps them.

    (pointer:coarse) as well as the width, for the same reason it is there:
    a landscape phone is 844-932 CSS px and the width gate never fires. */
@media (max-width:760px), (pointer:coarse){
  .cn-f input, .cn-f select,
  .cn-f input.cnmono, .cn-money input, .cn-num,
  .ys-edit input, .ys-edit select, .ys-edit textarea{ font-size:16px; }
}

/* ── the buy control, once there is a market to buy from ─────────────────
    It replaces the disabled .cn-act in place, so it inherits that block's
    geometry and only says what is different: this one is pressable. The two
    result states are the site's own vocabulary — lime for done, amber for a
    refusal, never red, which on this surface means a hall at capacity. */
.cn-buy{ cursor:pointer; border:1px solid rgba(203,247,12,.45);
  background:rgba(203,247,12,.10); color:#CBF70C; text-align:left;
  font:700 11px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.10em!important; text-transform:uppercase!important; }
.cn-buy:hover:not(:disabled){ background:rgba(203,247,12,.16); }
.cn-buy:disabled{ cursor:progress; opacity:.85; }
.cn-buy.cn-bad{ border-color:#E8A317; color:#E8A317; background:rgba(232,163,23,.10);
  text-transform:none!important; letter-spacing:.02em!important; }
.cn-buy.cn-done{ border-color:#CBF70C; background:rgba(203,247,12,.20); }

/*  THE LISTING CONTROL shares the buy control's face: it replaces the same
    disabled .cn-act in the same slot, and its result states are the same
    two colours. .cn-warn is the "list it anyway" state, amber because it is
    a state the provider chose to stand in, not an error; the line beneath
    it (.cn-said) carries the machine's reason at full width of the foot. */
.cn-list{ cursor:pointer; border:1px solid rgba(203,247,12,.45);
  background:rgba(203,247,12,.10); color:#CBF70C; text-align:left;
  font:700 11px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.10em!important; text-transform:uppercase!important; }
.cn-list:hover:not(:disabled){ background:rgba(203,247,12,.16); }
.cn-list:disabled{ cursor:progress; opacity:.85; }
.cn-list.cn-bad,.cn-list.cn-warn{ border-color:#E8A317; color:#E8A317; background:rgba(232,163,23,.10);
  text-transform:none!important; letter-spacing:.02em!important; }
.cn-list.cn-warn{ cursor:pointer; }
.cn-list.cn-done{ border-color:#CBF70C; background:rgba(203,247,12,.20); cursor:default;
  text-transform:none!important; letter-spacing:.02em!important; height:auto; min-height:44px; padding:8px 14px; white-space:normal; }
.cn-list.cn-done .cnlamp,.cn-list.cn-warn .cnlamp{ background:#CBF70C; }
.cn-list.cn-warn .cnlamp{ background:#E8A317; }
.cn-said{flex:1 1 100%;font:400 11.5px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#E8A317}
/*  The health word on a step 02 chip: what the machine answered. Lime for
    serving, the chip's own dim for idle, amber for unverified, a state
    the buyer should weigh, never the red that means a hall at capacity. */
.cn-chip .cnword.cnw-serving{color:#CBF70C}
.cn-chip .cnword.cnw-unverified{color:#E8A317}
.cn-chip .cnword.cnw-asking{color:rgba(232,240,216,.45)}
/*  A machine whose gate answers as another listing (review M6): red, the
    one state on the strip that refuses the buy. */
.cn-chip .cnword.cnw-another{color:#F2938C}
/*  The provider's settled value, beside the class; the class truncates
    first, as it always has. */
.cn-chip .cnrec{flex:0 0 auto;margin-left:auto;font:400 10px Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(232,240,216,.55);white-space:nowrap}
/*  The strip's last control: the next window, older listings, or back. */
.cn-chip.cn-more{background:transparent;border-style:dashed}
.cn-chip.cn-more .cncls{font-weight:500;color:#CBF70C}
.ys-chip-another{background:rgba(214,69,61,.16);color:#F2938C;border-color:rgba(214,69,61,.42)}
.ys-find{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ys-find label{font-size:12px;color:rgba(232,240,216,.62)}
.ys-find input{background:rgba(203,247,12,.06);border:1px solid rgba(203,247,12,.28);color:#E8F0D8;
  font:12px ui-monospace,Menlo,monospace;padding:6px 8px;border-radius:5px;width:7em}
.ys-find button{background:rgba(203,247,12,.10);border:1px solid rgba(203,247,12,.30);
  color:#CBF70C;font:700 11.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.10em;
  padding:8px 12px;border-radius:6px;cursor:pointer}
.ys-found{margin-top:8px}
/*  The refusal count in the compute footer: a figure, so mono. */
.cfoot .vf-refused{font:600 11px "IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
  color:var(--dim,#6f8bab);margin-right:8px;white-space:nowrap}

/*  THE FAUCET ROW — testnet only. Amber like the lamp, because amber has meant
    "not real money" on this page since day one. */
.cn-faucetrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;min-width:0}
.cn-faucet{cursor:pointer;height:36px;padding:0 14px;border-radius:9px;border:1px solid rgba(232,163,23,.55);
  background:rgba(232,163,23,.10);color:#f3d27a;font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cn-faucet .cnlamp{width:7px;height:7px;border-radius:50%;background:#E8A317;flex:0 0 auto}
.cn-faucet:hover{background:rgba(232,163,23,.18)}
.cn-faucet:disabled{opacity:.75;cursor:default}
.cn-faucet.cn-done{border-color:rgba(203,247,12,.6);color:#CBF70C}
.cn-faucet.cn-done .cnlamp{background:#CBF70C}
.cn-faucet.cn-bad{border-color:rgba(255,120,80,.6);color:#ffb090;white-space:normal;height:auto;min-height:36px;padding:6px 14px}
.cn-faucetnote{font:600 10px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
/*  A count line carrying the chip may WRAP: the figure does not shrink, so
    at 375px the sentence was squeezed into a six-line column beside it and
    the chip cut to "get 1,…". Wrapped, it is three short lines on a phone
    and still one on a desktop. */
.cn-count.cn-fct{flex-wrap:wrap;row-gap:4px}
/*  On step 02's count line the faucet is a chip, not a row: it takes no
    more cross-axis room than the line it sits on (20px tall, pulled in by
    2px each side), so step 02 stays under step 01 on both tiers. The note
    is its title. */
.cn-count .cn-faucet{height:20px;margin:-2px 0 -2px auto;padding:0 8px;border-radius:6px;font-size:10px;letter-spacing:.04em;gap:6px;
  align-self:center;flex:0 0 auto;white-space:nowrap}
.cn-count .cn-faucet .cnlamp{width:6px;height:6px}
.cn-count .cn-faucet.cn-bad{height:auto;min-height:20px;padding:2px 8px;white-space:normal;line-height:1.3;flex:1 1 100%;margin:0;text-align:left}
/*  The lamp goes lime only where the dollars are dollars. */
.cn-status.cn-live i{background:#CBF70C}

/* ══ A PROBLEM, REPORTED (compute.js openReport, functions/api/bug.js) ═══
   Three pieces, all testers' only. The "report" pill in the top bar, the
   quiet link in the footer row and at the foot of yours; the smaller
   "report this" after a sentence that says
   something did not go through; and the dialog, which is an overlay above
   the whole page and never a row in a step, so the console's height table
   (compute.js CNH) is untouched by it. Every button here is pressed flat
   against the page's own `button` rule (grey bevel, uppercase, padding),
   which would otherwise reach in, the way the label rule reached the
   provide door's fields. */

/*  The footer's link reads as the row's other links: the page's link ink,
    underlined, lime under the pointer like every `a` on the page. */
.cfoot .vf-report{background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;line-height:inherit;color:var(--link,#0000EE);text-decoration:underline;
  text-transform:none;letter-spacing:normal}
.cfoot .vf-report:hover{background:var(--lime,#CBF70C);color:#000;text-decoration:none}
.cfoot .vf-report:focus-visible{outline:2px solid var(--lime,#CBF70C);outline-offset:2px}

/*  "report" in the top bar (compute.js placeReportBar): the way in that is
    still on screen at steps 02 to 04, where html.in-focus has faded the
    footer above to nothing. It wears "yours"'s face, the pill beside it,
    and like the footer link it shows only in compute mode; no in-focus
    rule reaches the bar, which is the point of putting it there. */
.cn-bugbar{display:none;background:transparent;border:1px solid rgba(11,60,112,.22);
  color:var(--ink2,#2a5f95);font:700 11.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.12em;text-transform:lowercase;padding:7px 12px;border-radius:999px;
  cursor:pointer;flex:none;align-self:center;white-space:nowrap}
html.compute .cn-bugbar{display:inline-block}
/*  NOT ON A PHONE (final review, 2026-10-07). The phone bar has no room for
    it: at 375 px the mark, the mode switch, "yours" and the wallet icon
    leave about 30 px, and the pill is about 76, so it pushed the wallet
    button off the right edge, the failure skin.css's phone bar rules were
    written to prevent. On a phone the ways in are the foot of yours (one
    tap away at every step, through "yours" in the bar), the console's own
    footer at step 01, and "report this" after every error sentence. */
@media (max-width:760px){ html.compute .cn-bugbar{display:none} }
.cn-bugbar:hover{background:rgba(203,247,12,.12);border-color:rgba(11,60,112,.38)}
.cn-bugbar:focus-visible{outline:2px solid var(--lime,#CBF70C);outline-offset:2px}

/*  "report this" on the chassis: a word, so Inter; dim lime, underlined, a
    step quieter than the sentence it follows. In a control's own row it
    sits beside the control; on a phone, where those rows stack, it keeps to
    the right under it instead of stretching into a bar. */
.cn .cn-repthis{flex:0 0 auto;align-self:center;background:transparent;border:0;padding:0;margin:0 0 0 6px;
  cursor:pointer;white-space:nowrap;font:500 11px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
  color:rgba(203,247,12,.72);text-decoration:underline;text-decoration-color:rgba(203,247,12,.35);
  text-underline-offset:2px}
.cn .cn-repthis:hover{color:#CBF70C;text-decoration-color:#CBF70C}
.cn .cn-repthis:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
@media (max-width:759px){
  .cn .cn-foot3 .cn-repthis,.cn .cn-foot4 .cn-repthis{align-self:flex-end;margin:0}
}

/*  The same in yours, in the panel's own mono. */
.ys .ys-repthis{background:transparent;border:0;padding:0;margin:0 0 0 8px;cursor:pointer;
  font:600 11px/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;
  color:rgba(232,240,216,.62);text-decoration:underline;text-decoration-color:rgba(232,240,216,.28);
  text-underline-offset:2px;text-transform:none}
.ys .ys-repthis:hover{color:#CBF70C;text-decoration-color:#CBF70C;background:transparent}
.ys .ys-repthis:focus-visible{outline:1px solid rgba(203,247,12,.6);outline-offset:2px}
.ys-foot{display:flex;justify-content:flex-end;padding:0 18px 16px}
.ys .ys-report{background:transparent;border:0;padding:4px 0;cursor:pointer;
  font:600 11px/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;
  color:rgba(232,240,216,.52);text-decoration:underline;text-decoration-color:rgba(232,240,216,.24);
  text-underline-offset:3px;text-transform:none}
.ys .ys-report:hover{color:#CBF70C;text-decoration-color:#CBF70C;background:transparent}
.ys .ys-report:focus-visible{outline:1px solid rgba(203,247,12,.6);outline-offset:2px}

/*  THE DIALOG. The console's chassis — the same dark gradient, lime rule
    and label voice — standing on its own over a dim of the page. Above the
    console (6) and above yours (60), so it can be opened from either;
    below the stranger's-machine wall (70), which must never be covered. */
.cn-rep{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(6,8,5,.55)}
.cn-rep,.cn-rep *{box-sizing:border-box;text-transform:none;letter-spacing:normal}
.cn-rep-in{width:min(480px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;
  border-radius:12px;background:linear-gradient(180deg,#12160A 0%,#080A05 100%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px rgba(0,0,0,.45);
  color:#E8F0D8;font:400 12.5px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
.cn-rep-top{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;position:sticky;top:0;z-index:1;
  background:#12160A;border-bottom:1px solid rgba(203,247,12,.15)}
.cn-rep-top b{font:600 10px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em!important;
  text-transform:uppercase!important;color:#CBF70C}
.cn-rep .cn-rep-x{margin-left:auto;background:transparent;border:0;padding:6px 0;cursor:pointer;
  font:600 11px Inter,ui-sans-serif,system-ui,sans-serif;color:rgba(232,240,216,.62)}
.cn-rep .cn-rep-x:hover{color:#CBF70C}
.cn-rep .cn-rep-x:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-rep-body{padding:12px}
.cn-rep p{margin:0 0 10px;max-width:none}
/*  The sentence being reported, amber-edged like the launch lines: a state
    the visitor is standing in, quoted exactly as the console said it. */
.cn-rep-err{padding:8px 10px;border-radius:8px;border:1px solid rgba(232,163,23,.40);background:rgba(232,163,23,.07)}
.cn-rep-err span{display:block;margin-bottom:3px;font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.11em!important;text-transform:uppercase!important;color:#E8A317}
.cn-rep-err em{font-style:normal;color:#E8F0D8;overflow-wrap:anywhere}
.cn-rep label{display:block;width:auto;max-width:100%;margin:0 0 5px;font:600 9.5px Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.11em!important;text-transform:uppercase!important;color:rgba(203,247,12,.62)}
.cn-rep textarea,.cn-rep input[type=text]{display:block;width:100%;max-width:none;margin:0 0 10px;padding:8px 10px;
  border-radius:8px;border:1px solid rgba(203,247,12,.22);background:rgba(203,247,12,.05);color:#E8F0D8;
  box-shadow:none;font:400 13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
.cn-rep textarea{min-height:96px;resize:vertical}
.cn-rep textarea::placeholder,.cn-rep input[type=text]::placeholder{color:rgba(232,240,216,.38)}
.cn-rep textarea:focus,.cn-rep input[type=text]:focus{outline:2px solid #CBF70C;outline-offset:1px}
/*  The wallet line is a sentence with a box, not a field label. */
.cn-rep .cn-rep-chk{display:flex;align-items:center;gap:8px;margin:0 0 10px;cursor:pointer;
  font:400 12.5px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:normal!important;
  text-transform:none!important;color:#E8F0D8}
.cn-rep-chk input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:#CBF70C}
.cn-rep-chk input:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
.cn-rep-also{font-size:11.5px;color:rgba(232,240,216,.72);overflow-wrap:anywhere}
.cn-rep-keep{font-size:11px;color:rgba(232,240,216,.55)}
.cn-rep-keep a{color:rgba(203,247,12,.72);text-decoration:underline;text-decoration-color:rgba(203,247,12,.35)}
.cn-rep-keep a:hover{color:#CBF70C;background:transparent}
.cn-rep-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.cn-rep .cn-rep-send{flex:0 0 auto;height:36px;padding:0 14px;border-radius:8px;cursor:pointer;
  background:rgba(203,247,12,.10);border:1px solid rgba(203,247,12,.45);color:#CBF70C;
  font:600 13px Inter,ui-sans-serif,system-ui,sans-serif}
.cn-rep .cn-rep-send:hover:not(:disabled){background:rgba(203,247,12,.18);border-color:#CBF70C}
.cn-rep .cn-rep-send:disabled{cursor:default;opacity:.7;color:#CBF70C}
.cn-rep .cn-rep-send:focus-visible{outline:2px solid #CBF70C;outline-offset:2px}
/*  The result: lime-ink words when it was logged, amber when it was not —
    never the red that means a hall at capacity. */
.cn-rep .cn-rep-said{flex:1 1 200px;margin:0;font-size:12px;color:#E8F0D8}
.cn-rep .cn-rep-said.cn-bad{color:#E8A317}
/*  On a phone it is a sheet along the bottom, where the thumb already is,
    the send control a full-width bar like the console's own. */
@media (max-width:759px){
  .cn-rep{align-items:flex-end;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .cn-rep-in{width:100%;border-radius:16px}
  .cn-rep .cn-rep-send{width:100%;height:44px}
}
/*  The testnet flag (skin.css, html.testnet .netflag: fixed at the bottom
    left, z-index 9998, nearly opaque) sits exactly where that sheet's last
    line is on a phone, and the last line is the result: the id a report
    was logged as, or why it was refused. It steps aside while a report is
    open (compute.js openReport sets html.cn-rep-open, closeReport takes
    it off); the dialog says "testnet" on its own line in the meantime.
    Important, because skin.css's own rule sets display:flex on it. */
html.cn-rep-open .netflag{display:none!important}
/*  iOS zooms any field under 16px and will not zoom back (the rule above,
    at "iOS ZOOMS ANY FIELD"). Repeated here, after the dialog's own font,
    because a rule of the same weight earlier in the file would lose to it. */
@media (max-width:760px), (pointer:coarse){
  .cn-rep textarea, .cn-rep input[type=text]{ font-size:16px; }
}