/* Assetrix account — one stylesheet for every screen.

   Nothing is fetched from anywhere: the faces come from the site's own
   stylesheet, and the families are named here only so the fallbacks are right
   while these pages stand alone in the working tree. */

:root{
  --paper:#F7F4EA; --card:#FDFCF7; --line:#E2DED1; --line2:#D2CCBB; --fill:#F1EDE1;
  --ink:#12395C; --ink-deep:#0C2740; --mute:#5A6A7C; --mute2:#3F5468;
  --gold:#C9A227; --gold-soft:#E8D28A; --gold-fill:#F5EDD6; --gold-line:#E2D3A6; --gold-ink:#6B5A1F;
  --good:#2E7D5B; --warn-fill:#FBEFEE; --warn-line:#E8C6C1; --warn-ink:#8A4238; --warn-deep:#7A241A;
  --serif:'PT Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* A rule that sets display beats the browser's own rule for [hidden], and the
   result is an empty box sitting on the page where a warning used to be. */
[hidden]{display:none !important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55}
a{color:var(--ink);text-decoration:none}
h1,h2,h3{margin:0;color:var(--ink-deep)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grow{flex-grow:1}

/* ---- status bar: the network is never out of sight ---- */
.bar{background:var(--card);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap}
.brand{font-size:12px;font-weight:700;letter-spacing:.14em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:0 0 auto}
.dot.off{background:var(--mute)}
/* A state is a dot, the same three colours everywhere (cabinet, 21.09):
   green alive, gold waiting for a boundary, red held back. */
.dot.gold{background:var(--gold)}
.dot.bad{background:var(--warn-ink)}
.net{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--mute2);
     border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.net.test{border-color:var(--gold-line);background:var(--gold-fill);color:var(--gold-ink);font-weight:600}
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--ink-deep);
      background:var(--gold-soft);border-radius:6px;padding:4px 9px}
.freshness{font-size:12.5px;color:var(--mute)}

.btn{font:inherit;font-family:var(--sans);font-size:14px;cursor:pointer;border-radius:8px;padding:9px 16px;min-height:40px;
     border:1px solid var(--ink);background:transparent;color:var(--ink)}
.btn.solid{background:var(--gold);border-color:var(--gold);color:var(--ink-deep);font-weight:600}
.btn.big{min-height:52px;padding:15px 22px;font-size:15px;width:100%;justify-content:center;
         font-family:var(--sans);font-variant-numeric:tabular-nums} /* .big is a figure, .btn.big is a button: the figure's font is not inherited here (18.09) */
.btn[disabled]{opacity:.42;cursor:default}
/* a way out of a screen may be a link rather than a press; it wears the
   same button and needs the box a link does not have by itself */
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* a link cannot be switched off the way a button can: while a deal is in
   flight it looks and behaves like a disabled button (decision 106) */
a.btn[aria-disabled="true"]{opacity:.42;cursor:default;pointer-events:none}

/* (the strip of tabs that stood here went with decision 29; the screen
   selector and its list are further down) */

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card + .card{margin-top:16px}
.cols > .card + .card{margin-top:0} /* in a grid, neighbours start level (18.09) */
.kicker{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lead{font-family:var(--serif);font-size:28px;line-height:1.15;font-weight:700}
.sub{font-size:14.5px;color:var(--mute)}
/* The column floor is a floor, not a promise: on a 320-point phone the window
   gives 288 and a bare minmax(300px,1fr) made every card 300 wide, so seven
   screens out of ten pushed the page 36 points sideways. min(…,100%) keeps the
   floor on a wide screen and lets the single column take the window on a
   narrow one (cabinet, 21.09, layout ritual). */
.cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-top:16px;align-items:start}
.cols.wide{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.row{display:flex;align-items:baseline;gap:12px;padding:7px 0}
/* A row or a tile that is pressed is a control, and a finger needs forty
   points: the ritual on nine widths found eight of them at 37 to 39
   (cabinet, 21.09). The three points come as padding, not as a height, so the
   figure and its name keep standing on one baseline. A row that is only read
   keeps its own height. */
button.row,button.figbtn,button.tile{padding-top:10px;padding-bottom:10px}
.row + .row{border-top:1px solid var(--line)}
.row .k{color:var(--mute2);font-size:14px;flex-grow:1}
.row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink-deep)}
.row.total{border-top:1px solid var(--line2);margin-top:5px;padding-top:11px}
.row.total .k{font-size:15px;font-weight:600;color:var(--ink-deep)}
.row.total .v{font-size:19px;font-weight:600}
/* A sum line ruled the way a ledger rules a total: one line above, a double
   line beneath (the customer, 19.09). The rows above it add up to it. */
.row.total.ledger{border-top:1px solid var(--ink-deep);border-bottom:3px double var(--ink-deep);padding-bottom:9px;margin-bottom:6px}
.row .v.off{color:var(--mute)}
.big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:30px;color:var(--ink-deep);line-height:1.1}
section{margin-top:22px}

/* ---- where we are ---- */
.where{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{font-size:13px;font-weight:600;color:var(--ink-deep);background:var(--fill);border:1px solid var(--line2);
      border-radius:999px;padding:5px 13px}
.pill.now{background:var(--gold-soft);border-color:var(--gold)}
.scale{margin-top:14px}
.scale .head{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--mute)}
.track{position:relative;height:10px;border-radius:999px;background:var(--fill);border:1px solid var(--line2);margin:7px 0}
.track .fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--gold-soft)}
.track .mark{position:absolute;top:-4px;width:3px;height:16px;border-radius:2px;background:var(--ink-deep);transform:translateX(-1px)}
.scale .ends{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;color:var(--mute2)}

/* ---- the protection picture ---- */
.guard{margin-top:6px}
.gtrack{position:relative;height:132px;border:1px solid var(--line2);border-radius:10px;background:var(--card);overflow:hidden}
.groom{position:absolute;left:0;right:0;background:rgba(201,162,39,.13)}
.gfloor{position:absolute;left:0;right:0;bottom:0;background:repeating-linear-gradient(
        135deg,rgba(138,66,56,.05) 0 6px,rgba(138,66,56,.11) 6px 12px)}
.gline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--ink-deep)}
.gline.rec{border-top:1px solid var(--gold)}
.gline.th{border-top:2px dashed var(--warn-ink)}
.gname{position:absolute;left:11px;transform:translateY(-50%);font-size:11.5px;color:var(--mute2);
       background:var(--card);padding:0 5px;border-radius:4px;white-space:nowrap}
.gtag{position:absolute;right:11px;transform:translateY(-50%);font-family:var(--mono);font-size:12px;
      background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink-deep);white-space:nowrap}
.gtag.rec{color:var(--gold-ink);border-color:var(--gold-line)}
.gtag.th{color:var(--warn-ink);border-color:var(--warn-line)}

/* ---- notices ---- */
.note{border-radius:10px;padding:13px 15px;font-size:13.5px;display:flex;gap:11px;align-items:flex-start}
.note.calm{background:var(--fill);border:1px solid var(--line2);color:var(--mute2)}
.note.gold{background:var(--gold-fill);border:1px solid var(--gold-line);color:var(--gold-ink)}
.note.warn{background:var(--warn-fill);border:1px solid var(--warn-line);color:var(--warn-ink)}
/* A notice already had three kinds and three faint backgrounds; on a phone,
   at arm's length, the three look alike. Each now carries a rule of its own
   colour down the left, so the kind is seen before a word of it is read
   (cabinet, 21.09). The colours are the cabinet's one code: gold waits for
   you or for a boundary, red stops, ink is in flight, green has passed. */
.note.gold{border-left:3px solid var(--gold)}
.note.warn{border-left:3px solid var(--warn-ink)}
.note + .note,.card .note{margin-top:12px}
/* ---- where a deal stands, as a rule down the left (cabinet, 21.09) ----
   Four states and four colours, the same on every screen: gold while the
   wallet holds your signature, ink once it has gone, green when it has
   passed, red when it stopped. The sentence beside it says the same in
   words; the rule is what the eye finds without reading. */
.note.step{border-left-width:3px;border-left-style:solid}
.note.step-ask{border-left-color:var(--gold)}
.note.step-sent{border-left-color:var(--ink)}
.note.step-done{border-left-color:var(--good)}
.note.step-stop{border-left-color:var(--warn-ink)}
.note .btn{flex:0 0 auto;margin-left:auto}

/* ---- the tap: a test network only (decision 100) ----
   The sand of the network pill, so that it reads as part of the test
   network and not as something the protocol says. */
.tap{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;
     background:var(--gold-fill);border:1px solid var(--gold-line);color:var(--gold-ink)}
.tap-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
         width:46px;height:46px;border-radius:50%;background:var(--gold-soft);color:var(--ink-deep)}
.tap-ico svg{width:26px;height:26px}
.tap-words{flex:1 1 auto;min-width:0}
.tap-head{font-size:15.5px;font-weight:600;color:var(--ink-deep)}
.tap-line{margin:3px 0 0;font-size:14px}
.tap-gas{margin:8px 0 0;font-size:14px;font-weight:600;color:var(--warn-deep)}
.tap-btn{flex:0 0 auto;background:var(--card);border-color:var(--ink-deep);color:var(--ink-deep);font-weight:600}
@media (max-width:600px){
  .tap{flex-wrap:wrap;align-items:flex-start;padding:14px 16px;gap:12px}
  .tap-ico{width:38px;height:38px}
  .tap-ico svg{width:22px;height:22px}
  .tap-words{flex:1 1 60%}
  .tap-btn{width:100%}
}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:9px;margin-top:16px}
label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.amount{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:10px;
        background:#FFFFFF;padding:4px 12px 4px 16px}
.amount input{flex-grow:1;min-width:0;border:0;outline:none;background:transparent;padding:12px 0;
              font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;color:var(--ink-deep)}
.amount .unit{font-size:14px;font-weight:600;color:var(--mute2)}
.amount.bad{border-color:var(--warn-line);background:var(--warn-fill)}
.picker{display:flex;gap:6px;flex-wrap:wrap}
.pick{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line2);background:var(--card);
      color:var(--ink);border-radius:9px;padding:10px 15px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
      max-width:100%;flex-wrap:wrap}
.pick.on{border-color:var(--gold);background:var(--gold-fill);color:var(--ink-deep);font-weight:600}
.pick .tag{font-size:11px;color:var(--mute);border:1px solid var(--line2);border-radius:5px;padding:0 6px}
.pick.on .tag{border-color:var(--gold-line);color:var(--gold-ink)}
.pick[disabled]{opacity:.45;cursor:default}

/* ---- the two steps of a deposit ---- */
.steps{display:flex;gap:10px;margin-top:16px;align-items:stretch}
.step{flex:1 1 0;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card)}
.step.done{border-color:var(--good);background:#F1F7F3}
.step.now{border-color:var(--gold);background:var(--gold-fill)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.step .t{font-size:14px;font-weight:600;color:var(--ink-deep);margin-top:2px}
.step .d{font-size:12.5px;color:var(--mute);margin-top:2px}

/* ---- reserve table ---- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
   color:var(--mute);padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:baseline}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;padding-right:0}
.flag{display:inline-block;font-size:11.5px;border-radius:5px;padding:1px 7px;margin-left:6px;
      border:1px solid var(--line2);color:var(--mute2);background:var(--fill)}
.flag.bad{border-color:var(--warn-line);background:var(--warn-fill);color:var(--warn-ink)}

.foot{max-width:1140px;margin:34px auto 46px;padding:0 20px;font-size:12.5px;color:var(--mute);display:flex;gap:16px;flex-wrap:wrap;align-items:center} /* in the same column as the screen (cabinet, 18.09); centred, so the taller row of languages stands on the same line (decision 110) */

@media (max-width:600px){
  .wrap{padding:0 16px}
  .lead{font-size:24px}
  .big{font-size:26px}
  .card{padding:16px}
  .steps{flex-direction:column}

  /* Four columns do not fit a phone, and a table that runs off the side of
     the screen hides the very column that says whether a figure can be
     trusted. Each row becomes its own small block instead. */
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
  td{border:0;padding:4px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  td::before{content:attr(data-l);font-size:12.5px;color:var(--mute);flex-grow:1}
  /* on a phone the second line of a cell goes under its value rather than
     standing beside it as a third column (cabinet, 18.09) */
  td .sub{flex:0 0 100%;text-align:right;margin-top:1px}
  td.n{text-align:left}
  td:first-child{font-weight:600;padding-bottom:8px}
  td:first-child::before{content:none}
  /* A table of two or three short columns stays a list of rows on the
     phone: a card per row made three currencies look like three screens. */
  table.tight tr{display:flex;align-items:center;justify-content:space-between;gap:10px;
                 border:0;border-radius:0;border-top:1px solid var(--line);padding:8px 0;margin:0}
  table.tight tr:first-child{border-top:0}
  table.tight td{display:block;padding:0;width:auto}
  table.tight td::before{content:none}
  table.tight td:first-child{padding-bottom:0;flex-grow:1}
  table.tight td.n{text-align:right;white-space:nowrap}
  /* A cell holding a button is not a figure: the button asks for 150 points,
     the symbol and the amount for another 140, and a 320-point phone gives
     244. The row wraps and the button takes the width under it, where a thumb
     reaches it easily (cabinet, 21.09, layout ritual). */
  table.tight tr{flex-wrap:wrap}
  table.tight td.act{flex:0 0 100%;white-space:normal;margin-top:8px}
  table.tight td.act .btn{width:100%}

  /* A row is a name and a figure on one line, and on a narrow phone the two do
     not always fit: a shortened address asks for 171 points, and the card
     leaves 244 for the pair. Rather than pushing the page sideways, the figure
     drops under its name. */
  .row{flex-wrap:wrap}
  .row .v{min-width:0}
}

/* ================= the frame on a phone (cabinet, 18.09) =================

   The old frame took 213 points out of 844 — a quarter of the first screen of
   a phone, before a single figure. The tab strip showed 39 % of itself while
   it did: 927 points of width in a window of 358, and four screens out of ten
   were never seen at all.

   Now the bar and the screen selector are one block, which leaves on a scroll
   down and comes back on a scroll up. The overview page is 2 933 points tall,
   seven and a half screens of a phone: holding the frame above it at all times
   means paying for it seven times over. */

/* The head is one dark panel: the mark, the network, the address and the
   screen selector on the ink of the site's own account button, so that the
   way around the account is never lost on the paper of the page (the
   customer, 19.09, decision 89: the top panel got lost). On a wide screen it
   is one row; on a phone the selector takes a second row of the same panel. */
.frame-head{position:sticky;top:0;z-index:40;background:var(--ink-deep);color:var(--paper);
            transition:transform .2s ease;will-change:transform}
.frame-head.gone{transform:translateY(-100%)}

.bar{background:transparent;border-bottom:0}
.bar .wrap{display:grid;grid-template-columns:auto auto 1fr minmax(0,auto);
          grid-template-areas:"mark net grow acct" "screens screens screens screens";
          align-items:center;column-gap:10px;row-gap:9px;min-height:50px;padding-top:8px;padding-bottom:9px}
.bar .brandmark{grid-area:mark}
.bar .net{grid-area:net}
.bar .grow{grid-area:grow}
.bar .acct{grid-area:acct;justify-self:end}
.bar .screens{grid-area:screens}
.net{padding:4px 10px;font-size:12.5px;white-space:nowrap}
.bar .net{color:var(--paper);border-color:rgba(247,244,234,.32);background:transparent}
.bar .net.test{color:var(--gold-soft);border-color:rgba(232,210,138,.55);background:rgba(201,162,39,.16)}

/* Room for the ASTRX mark: it stands in a row that already exists, and costs
   width rather than height. With no file there the room is hidden and takes
   up nothing. */
.brandmark{display:inline-flex;align-items:center;flex:0 0 auto}
.brandmark img,.brandmark svg{display:block;height:28px;width:auto}

/* The address, the freshness and disconnecting, in one control. */
.acct{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;
      color:var(--paper);background:rgba(247,244,234,.10);border:1px solid rgba(247,244,234,.30);border-radius:999px;
      padding:4px 11px;min-height:40px;cursor:pointer;white-space:nowrap}
.acct:hover{background:rgba(247,244,234,.18)}
.acct .who{font-size:12.5px;color:var(--paper);font-weight:600}
.acct .who.mono{font-family:var(--mono);font-weight:400}
/* The network pill never shrinks: the word "test" is what rule 3.4 is about.
   If anything has to give on a narrow screen, it is the action on the right. */
.bar .net{flex:0 0 auto}
.acct{flex:0 1 auto;min-width:0}
.acct .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct.live .dot{background:var(--good)}
.acct.stale .dot{background:var(--gold)}
.acct .freshness{font-size:12px;color:var(--gold-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Freshness in words: inside the oval on a wide screen, and on a phone a line
   under the selector — the row has no width left, and this is the part that
   has to be noticed (cabinet, 18.09). */
.asofline{max-width:1140px;margin:0 auto;padding:0 20px 9px;font-size:12.5px;color:var(--gold-soft)}
@media (min-width:601px){ .asofline{display:none} }
@media (max-width:600px){ .acct .freshness{display:none} .asofline{padding:0 16px 9px} }

/* The strip in the network's colour: what is left once the block has gone. */
.netedge{position:fixed;top:0;left:0;right:0;height:3px;z-index:39;
         background:var(--gold);pointer-events:none}

/* The screen selector: a paper button on the dark head, the one bright thing
   in the panel. Its own row on a phone; in the row on a wide screen. The
   list of screens opens under it and over the page, not inside the page. */
.screens{position:relative;min-width:0}
.screensel{display:flex;align-items:center;justify-content:space-between;width:100%;
           font-family:inherit;font-size:15.5px;font-weight:700;color:var(--ink-deep);
           background:var(--paper);border:1px solid var(--paper);border-radius:10px;
           padding:10px 13px;margin:0;cursor:pointer}
.screensel:hover{background:#fff}
.screensel .chev{display:inline-flex;color:var(--ink);transition:transform .18s ease}
.screensel.open .chev{transform:rotate(180deg)}
.screensel svg{width:17px;height:17px}
/* The name of the screen wraps to a second line rather than losing its end,
   the way the names in the list below it already do: on a 320-point phone
   the selector has 86 points and «Project wallet» asks for 110, and a
   Spanish or Chinese name will be longer still (cabinet, 21.09). */
.screensel .cur{min-width:0;overflow-wrap:anywhere;line-height:1.15;text-align:left}
/* The list of screens (reworked 19.09, the customer's list, point 1).
   The two columns are strictly equal — minmax(0,1fr), because a bare 1fr is
   "no narrower than its content" and the column with the longer word took
   4.6 points more. Every tile has one height, tall enough for a name on two
   lines, with the name centred: tiles are equal by construction, not because
   the English words happened to fit, and a longer Spanish or Chinese name
   drops into the same box. The cross in the corner closes the list; the list
   also closes on a tap beside it, on Escape and on any scroll. */
.screenlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--card);
            border:1px solid var(--line2);border-radius:12px;padding:34px 6px 6px;
            position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:46;
            box-shadow:0 18px 40px rgba(12,39,64,.24)}
.screenlist > a,.screenlist > span{padding:8px 10px;border-radius:8px;font-size:14px;color:var(--mute2);
            min-height:58px;box-sizing:border-box;line-height:1.25;min-width:0}
/* the two inner spans — the icon and the name — are not tiles and take no tile rules */
.screenlist > a > span,.screenlist > span > span{padding:0;min-height:0;min-width:0}
.screenlist > a > span:last-child,.screenlist > span > span:last-child{overflow-wrap:anywhere}
.screenlist .on{background:var(--fill);color:var(--ink-deep);font-weight:600}
.screenlist .gold{color:var(--gold-ink)}
.screenclose{position:absolute;top:4px;right:4px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
             border:0;border-radius:8px;background:transparent;color:var(--mute);cursor:pointer;padding:0}
.screenclose:hover{background:var(--fill);color:var(--ink-deep)}
.screenclose svg{width:18px;height:18px;stroke-width:2}

/* the panel under the address oval: the whole address and the way out */
.bar .wrap{position:relative}
.whopanel{position:absolute;right:0;top:calc(100% + 6px);z-index:45;width:min(420px,calc(100vw - 32px));
          background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:12px 14px 14px;
          box-shadow:0 10px 28px rgba(18,57,92,.14);text-align:left}
.whofull{font-size:13px;color:var(--ink-deep);overflow-wrap:anywhere;user-select:all;margin-top:6px;line-height:1.4}
.whopanel .sub{margin-top:6px}
.whorow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn.small{min-height:40px;padding:7px 13px;font-size:13.5px}

/* the corner within a thumb's reach: the way back up */
.corner{position:fixed;right:14px;bottom:14px;z-index:38;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.cornerbtn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line2);background:var(--card);color:var(--ink);
           display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
           box-shadow:0 4px 14px rgba(18,57,92,.14)}
.cornerbtn svg{width:20px;height:20px}
.cornerbtn:hover{background:var(--fill)}
@media (min-width:601px){ .cornerbtn.top{display:none} }

@media (min-width:760px){
  .bar .wrap{grid-template-columns:auto minmax(0,300px) auto 1fr minmax(0,auto);grid-template-areas:"mark screens net grow acct";min-height:60px}
  .screenlist{grid-template-columns:repeat(4,minmax(0,1fr));right:auto;width:min(720px,calc(100vw - 40px))}
}

/* The panel on a phone (cabinet, 21.09, layout ritual).

   Measured, not guessed: the mark takes 28 points, the network pill 198, the
   address oval 122, and the three gaps 30. With the padding that is 390, and
   the phones we support start at 320. The two of them therefore overlapped on
   every screen — the network name ran under the address.

   The network pill keeps its whole name: the word "test" is what rule 3.4 is
   about, and shortening it is the one thing that must not give. So the address
   moves down to the second row, beside the screen selector. The top row now
   says where you are — the mark and the network — and the row under it says
   what you are doing and who you are.

   The list of screens hangs off the selector, so a narrower selector would
   have given a narrower list. It is pinned to the window instead. */
@media (max-width:600px){
  .bar .wrap{grid-template-columns:auto 1fr auto;
             grid-template-areas:"mark net net" "screens screens acct"}
  .bar .wrap > .grow{display:none}
  .bar .net{justify-self:start}   /* a pill hugs its words; stretched across the row it reads as an empty field */
  /* Eight points given back to the name of the screen: at 360 that is the
     difference between «Project wallet» on one line and on two. */
  .bar .wrap{column-gap:8px}
  .screensel{padding-left:11px;padding-right:11px}
  .screensel .ico{margin-right:7px}
  .bar .acct{justify-self:end;align-self:center}
  .screenlist{left:0;right:auto;width:calc(100vw - 32px)}
}

/* The Assetrix mark in the bar. The media kit asks for a quarter of its
   height around it: at 22 points that is 5.5, and the gap in the row is 9. */
/* The drawing stays 28 points, as the media kit asks; the link around it is
   40, because that is what a finger needs (cabinet, 21.09). */
.brandmark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;min-height:40px}
.brandmark svg{display:block;height:28px;width:28px}

/* ========== the vote: two sections, tiers, one question open (cabinet, 18.09) ==========

   Thirteen questions, and until now thirteen cards with a full set of controls
   each: 8 364 points, 71 controls, "nothing has been cast" thirteen times over.
   Now a question is a line and one of them is open. The order is set by the
   state of the contract (decision 35); what the token is stands above what the
   holders tune (decision 36). */


.qstate{margin-top:22px}
.qstate-line{font-family:var(--serif);font-size:19px;color:var(--ink-deep)}

.qsec{margin-top:24px}
.qlist{margin-top:10px}
/* the structural questions get a frame of their own, so they read as another kind */
.qsec.what .qlist{border:1px solid var(--gold-line);border-radius:14px;background:var(--gold-fill);padding:2px 6px 6px}

.qgroup{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:14px 2px 4px}
.qgroup.live{color:var(--gold-ink)}

.q{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-top:6px;overflow:hidden}
.q.live{border-left:4px solid var(--gold)}
.q.shut{opacity:.72}
.q.open{border-color:var(--line2)}

.qhead{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;
       background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;color:var(--ink-deep)}
.qname{font-size:15px;font-weight:600;flex-grow:1;line-height:1.3}
.qnow{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--mute2);white-space:nowrap}
.qtag{font-size:10.5px;border:1px solid var(--warn-line);border-radius:5px;padding:0 6px;
      color:var(--warn-ink);background:var(--warn-fill);white-space:nowrap}
.qchev{display:inline-flex;color:var(--mute);transition:transform .18s ease;flex:0 0 auto}
.qchev svg{width:16px;height:16px}
.q.open .qchev{transform:rotate(180deg)}

.qline{padding:0 13px 10px;font-size:13px;line-height:1.4;color:var(--mute2)}
.qline.cast{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-deep)}
.qline.mine{color:var(--gold-ink)}
.qline.why{color:var(--mute)}
/* an announced currency in the cycle that decides it (decision 96) */
.qline.win{color:var(--ink-deep)}
.qbody .sub.win{color:var(--ink-deep)}
/* what a ban does, said where the currency is picked */
.qbody .sub.warn{color:var(--warn-ink)}
/* every outcome of the open question and its weight (decision 97) */
.qbody .outcomes{margin-top:6px}

.qbody{padding:4px 13px 16px;border-top:1px solid var(--line)}
.qbody .sub{margin-top:8px}
.qbody .row:first-of-type{margin-top:6px}
.qbody .picker{margin-top:8px}
.qacts{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.qlook{margin-left:auto}

/* ========== spacing and states — one scale (cabinet, 18.09) ==========

   Until now some hundred and seventy gaps and colours were written straight
   into the markup and into the screens — "margin-top:14px" in sixty places. A
   change of rhythm in this file never reached them, and they would have
   drifted apart in silence (decision 37). Now every gap is a class from this
   scale, and the only styles left in a screen are the ones computed from data:
   where a pointer sits on a scale. */

p{margin:0}
.gap-xs{margin-top:4px}
.gap-s{margin-top:8px}
.gap{margin-top:12px}
.gap-m{margin-top:14px}
.gap-l{margin-top:16px}
.gap-xl{margin-top:18px}
.push{margin-left:auto}
.after-s{margin-left:6px}
.stack{display:flex;flex-direction:column;gap:10px}
.line{display:flex;align-items:baseline;gap:12px}
th.n{text-align:right}
input.addr{font-size:16px}
.pick.small{padding:8px 13px;min-height:40px}
.pick.tiny{padding:7px 11px;min-height:40px}
.struck{text-decoration:line-through}
.warn-ink{color:var(--warn-ink)}
.warn-edge{border-color:var(--warn-ink);color:var(--warn-ink)}
.gold-ink{color:var(--gold-ink)}
.good-ink{color:var(--good)}
.linkbtn{display:inline-flex;align-items:center;text-decoration:none}

/* ========== an empty amount field says what goes into it (cabinet, 18.09) ==========
   Until a number is typed the name stands inside the field — with the mark, for
   ASTRX — and the label on the right is hidden; once it is typed the mark goes
   and the label comes back. The name is shown once, never twice. */
.amount{position:relative}
.amount input::placeholder{color:var(--mute);opacity:1;font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.02em}
.amount input:placeholder-shown ~ .unit{display:none}
.amount .tokmark{display:none;position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;line-height:0}
.amount .tokmark svg{width:22px;height:22px;display:block}
.amount.astrx input:placeholder-shown ~ .tokmark,.amount.credits input:placeholder-shown ~ .tokmark{display:block}
.amount.astrx input:placeholder-shown,.amount.credits input:placeholder-shown{padding-left:30px}
/* the same two signs, small, on the tiles that choose between the units (18.09) */
.pick .um{display:inline-block;line-height:0;flex:0 0 auto}
.pick .um svg{width:16px;height:16px;display:block}

/* ---- the sign of a reserve currency (cabinet, 21.09) ----
   A ring with its kind drawn inside: a level bar for a currency held against
   the dollar, a small rise for one whose price moves. The colour says the
   state, and the word beside it says the same thing: alive in the ink of the
   page, asleep or switched off in the quiet grey, banned in the warning's
   red with a stroke through the ring. */
.um.coin{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto;color:var(--ink-deep)}
.um.coin svg{width:17px;height:17px;display:block}
.um.coin.vol{color:var(--gold-ink)}
.um.coin.unknown{color:var(--mute)}
.um.coin.off{color:var(--mute)}
.um.coin.ban{color:var(--warn-ink)}
/* the name of a currency with its sign in front */
.coinname{display:inline-flex;align-items:center;gap:7px;min-width:0}
/* the sign of a position, the same drawing its screen wears */
.posmark{display:inline-flex;align-items:center;line-height:0;color:var(--mute);margin-right:7px;flex:0 0 auto}
.posmark svg{width:16px;height:16px;display:block}
/* a state dot standing after a heading, not before a line */
.kicker .dot{display:inline-block;vertical-align:1px;margin-left:7px}
td .coinname{vertical-align:middle}
/* The sign of a figure's unit before it (decision 85): the token's mark for
   ASTRX, a green rhombus with "$" for dollars (decision 94, the customer,
   20.09). The size is taken from the figure's own type, a little below the
   cap height so it sits with the digits. The rhombus is drawn 13 % larger
   than the square and sits lower by half the difference, so the two look
   the same size and share a centre; its thin tip needs less room before
   the digits than the square's edge. */
.tok,.usd{display:inline-block;line-height:0;vertical-align:-0.12em;margin-right:.3em}
.tok svg,.usd svg{width:.9em;height:.9em;display:block}
.usd{vertical-align:-0.18em;margin-right:.22em}
.usd svg{width:1.02em;height:1.02em}
.big .tok,.big .usd{margin-right:.22em;vertical-align:-0.08em}
.big .tok svg,.big .usd svg{width:.72em;height:.72em}
.big .usd{margin-right:.15em;vertical-align:-0.13em}
.big .usd svg{width:.81em;height:.81em}
/* Voting credits carry their own disc (decision 106). A disc of the square's
   box reads smaller than the square, so it is drawn 7 % larger and sits
   lower by half the difference; its round edge needs a little less room
   before the digits. */
.cred{display:inline-block;line-height:0;vertical-align:-0.15em;margin-right:.26em}
.cred svg{width:.96em;height:.96em;display:block}

/* ========== signposts to the site: an announcement and a link (customer, 18.09) ==========
   At the foot of a screen, the card "On the site": one tile for each page of
   the site that is not retold here. A tile carries the term, a sentence or two
   on what the page is about, and a link that opens a new tab, so the person
   does not lose their place in the account. On a wide screen the tiles stand
   in a row; on a phone, in a column. */
.posts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));margin-top:12px}
.post{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px 13px;display:flex;flex-direction:column}
.post-term{font-weight:600;font-size:15px;color:var(--ink-deep)}
.post-note{font-size:14px;line-height:1.5;color:var(--mute2);margin-top:4px;flex-grow:1}
.post-link{display:inline-flex;align-items:center;min-height:40px;align-self:flex-start;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--ink);
           text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.post-link:hover{text-decoration-color:var(--ink)}

/* ========== the revision (cabinet, 18.09) ==========
   The name of the screen is in the selector; the heading under it repeated that
   name on every screen. It stays for screen readers and leaves the eye, and the
   lead-in line under the selector is the only text before the first card. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro{font-size:15px;color:var(--mute2);max-width:62ch}
section > .intro:first-child,.intro{margin-top:0}
/* A field's label is quieter than a card's kicker. They used to be set the
   same, and "WHAT YOU PUT IN" stood over "COLLATERAL CURRENCY" as two
   headings of equal weight. */
label,.flabel{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute2)}
/* Monospace for figures and addresses only. A word in a column of figures is set in the ordinary face. */
.row .v.words,td.n.words,.qnow.words{font-family:var(--sans);font-size:14px;color:var(--ink-deep)}
.row .v{white-space:nowrap}
.row .v.words{white-space:normal;text-align:right}
/* A word that names a state wears the state's colour. The rule above sets
   the ink of every word standing in a figure's place, and it outranked the
   plain colour classes, so three words meant to be red were drawn in ink:
   "dilutive" on a position (decision 81), "refused" in the payout table
   (decision 82) and a dark quote in the reserve table (found 21.09,
   decision 106). The state of a close also takes a little weight. */
.row .v.words.warn-ink,td.n.words.warn-ink{color:var(--warn-ink)}
.row .v.words.good-ink,td.n.words.good-ink{color:var(--good)}
.row .v.words.warn-ink,.row .v.words.good-ink{font-weight:600}
@media (max-width:600px){ td::before{font-family:var(--sans)} }
/* Figure tiles: in a row on a wide screen, as rows on a phone, the way they
   always were. A line across the whole of a wide screen made the eye travel a
   thousand points from the label to the figure. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:14px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px 10px;min-width:0}
.tile .k{font-size:12.5px;color:var(--mute2);line-height:1.3}
.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink-deep);margin-top:4px;white-space:nowrap}
.tile .v.words{font-family:var(--sans);font-size:14px;font-weight:600}
.tile .s{font-size:12px;color:var(--mute);margin-top:3px}
@media (max-width:600px){
  .tiles{display:block;margin-top:6px}
  .tile{display:flex;align-items:baseline;gap:12px;background:none;border:0;border-radius:0;padding:7px 0}
  .tile + .tile{border-top:1px solid var(--line)}
  .tile .k{flex-grow:1;font-size:14px}
  .tile .v{margin-top:0;font-size:15px}
  .tile .s{display:none}
}
/* A pair of cards of one height, where both are readings rather than a form. */
.cols.even{align-items:stretch}
/* A link in the footer looks like a link. */
/* the line that says what the contract address below it is for: it takes
   the whole width, and the three short parts stand in a row under it */
.foot-open{flex:0 0 100%;color:var(--mute2)}
.foot a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.foot a::after{content:'\00a0\2197'}   /* the arrow never goes to a line of its own (decision 112) */
/* The sum line above the button. On a phone the card that says what you get
   stands below the button, and a person was pressing it without seeing the
   sum. One line, and they see it. */
.sumline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
         margin-top:16px;padding-top:12px;border-top:1px solid var(--line2)}
.sumline.soft{margin-top:0;padding-top:6px;border-top:0}
.sumline .k{font-size:14.5px;font-weight:600;color:var(--ink-deep)}
.sumline.soft .k{font-weight:400;color:var(--mute2)}
.sumline .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink-deep);white-space:nowrap}
.sumline.soft .v{font-size:15px;color:var(--warn-ink)}
.sumline + .btn{margin-top:12px}
.dot.inline{display:inline-block;vertical-align:1px;margin-right:6px}
/* The price corridor on the market: backing on the left, the cost of entry on
   the right, the pool price a pin between them. The same as figure 4 on the
   site, in a single band. */
.corr-track{position:relative;height:10px;border-radius:999px;border:1px solid var(--line2);
            background:linear-gradient(90deg,var(--warn-line) 0%,var(--fill) 50%,var(--gold-soft) 100%);margin:26px 7px 0}
.corr-pin{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--ink-deep);
          border:2px solid #FFFFFF;box-shadow:0 0 0 1px var(--line2);transform:translate(-50%,-50%)}
.corr-pin-v{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-variant-numeric:tabular-nums;
            font-size:12px;color:var(--ink-deep);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.corr-ends{display:flex;justify-content:space-between;gap:12px;margin-top:9px}
.corr-ends > span{display:flex;flex-direction:column;gap:1px;min-width:0}
.corr-ends > span.r{text-align:right;align-items:flex-end}
.corr-ends .k{font-size:12.5px;color:var(--mute2)}
.corr-ends .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-deep)}
@media (min-width:601px){.phone-only{display:none !important}}
p.sub:empty,div.sub:empty{display:none}
/* Screen icons in the selector and in the list: a stroke of the same weight as the chevron. */
.screensel .ico,.screenlist .ico{display:inline-flex;color:var(--mute);flex:0 0 auto;margin-right:9px}
.screensel .ico{color:var(--ink)}
.screensel .ico svg,.screenlist .ico svg{width:18px;height:18px}
.screensel .cur{flex:0 1 auto}
.screenlist > a,.screenlist > span{display:flex;align-items:center}
.screenlist .on .ico{color:var(--ink-deep)}
.screenlist .gold .ico{color:var(--gold)}

/* ========== pictures (cabinet, 18.09, the graphics pass) ==========
   Everything drawn is the same figure that stands in words beside it, only
   larger. The readout is a card at the cursor naming the point: the coordinates
   first, then what they mean. It exists only where a cursor does. */
.hoverable{position:relative}
.inf{position:absolute;z-index:5;pointer-events:none;min-width:150px;max-width:260px;line-height:1.45;text-align:left;
     background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:8px 11px;
     box-shadow:0 6px 18px rgba(18,57,92,.10);font-size:12.5px;color:var(--mute2)}
.inf-head{font-weight:600;color:var(--ink-deep);margin-bottom:3px}
.inf-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.inf-row .k{flex-grow:1}
.inf-row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-deep);white-space:nowrap}
.inf-note{margin-top:5px;padding-top:5px;border-top:1px solid var(--line);color:var(--mute2);font-size:12px}
.inf-sw{width:8px;height:8px;border-radius:2px;flex:0 0 auto;margin-right:6px;align-self:center}

.chart{position:relative;width:100%;line-height:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-empty{font-size:13.5px;color:var(--mute);line-height:1.5;padding:18px 0}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-axis{stroke:var(--line2);stroke-width:1}
.ch-tick{stroke:var(--line2);stroke-width:1}
.ch-ylab,.ch-xlab{font-family:var(--mono);font-size:11px;fill:var(--mute2)}
.ch-line{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ch-band{fill:var(--gold-fill);opacity:.8}
.ch-span{fill:var(--gold-soft);opacity:.45}
.ch-mark{stroke:var(--ink-deep);stroke-width:1.5;stroke-dasharray:3 3}
.ch-guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.ch-hdot{stroke:#FFFFFF;stroke-width:2}
.ch-dot{stroke:#FFFFFF;stroke-width:1.5}
.chart-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12.5px;color:var(--mute2)}
.chart-key span{display:inline-flex;align-items:center;gap:7px}
.chart-key i{display:inline-block;width:14px;height:3px;border-radius:2px}
.chart-key i.band{width:14px;height:10px;background:var(--gold-fill);border:1px solid var(--gold-line)}

/* one bar, cut into parts */
.stk-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--line2);background:var(--fill)}
.stk-bar.empty{background:repeating-linear-gradient(135deg,var(--fill) 0 6px,var(--line) 6px 12px)}
.stk-seg{height:100%;min-width:2px}
.stk-seg + .stk-seg{border-left:1px solid #FFFFFF}
.stk-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:13px;color:var(--mute2)}
.stk-item{display:inline-flex;align-items:baseline;gap:7px}
.stk-sw{width:10px;height:10px;border-radius:3px;align-self:center;flex:0 0 auto}
.stk-item .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-deep)}

/* paired bars: for and against */
.brs-row{display:grid;grid-template-columns:minmax(70px,140px) 1fr auto;align-items:center;gap:10px;padding:5px 0}
.brs-label{font-size:13px;color:var(--mute2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brs-track{display:flex;height:10px;border-radius:999px;background:var(--fill);overflow:hidden;border:1px solid var(--line)}
.brs-a{height:100%;background:var(--gold)}
.brs-b{height:100%;background:var(--mute)}
.brs-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-deep);white-space:nowrap}
/* On a phone the figures beside a bar took its width: "0 admit · 0 decline"
   left the bar a dot. There the name and the figures share a line and the
   bar runs the whole width under them. */
@media (max-width:600px){
  .brs-row{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";row-gap:6px;column-gap:10px;padding:6px 0}
  .brs-label{grid-area:l}
  .brs-val{grid-area:v}
  .brs-track{grid-area:t}
}

/* on a wide screen the scales and the backing picture are larger */
@media (min-width:760px){
  .track{height:14px}
  .track .mark{top:-5px;height:24px}
  .gtrack{height:200px}
  .scale .ends{font-size:13px}
}

/* The oldest phone we support is 320 points wide, and the card inside it is
   244. The three figures under the stage scale ask for 249: a number keeps
   its groups, because a figure without them cannot be read at a glance, so
   the type steps back a point and the gaps close instead
   (cabinet, 21.09, layout ritual). */
@media (max-width:360px){
  /* Three figures of ten digits ask for 265 points even at this size, and the
     card gives 254. None of them is dropped — the one in the middle is where
     the stage stands now — so the row becomes two: the ends of the stage left
     and right, and where it stands centred under them. */
  .scale .ends{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;font-size:11.5px}
  .scale .ends > *{justify-self:start}
  .scale .ends > :last-child{justify-self:end}
  .scale .ends > :nth-child(2):not(:last-child){grid-column:1 / -1;grid-row:2;justify-self:center}
  .scale .ends > :nth-child(3){grid-column:2;grid-row:1}
}

/* A picture folded on a phone: a line with its name, opening on a press.
   On a wide screen there is no line and the picture is open. */
.fold-btn{display:none}
@media (max-width:759px){
  .fold-head{display:none}
  .fold-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
            font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
            background:transparent;border:0;border-top:1px solid var(--line);padding:12px 0 4px;cursor:pointer;text-align:left;
            min-height:44px}
  .fold-btn .chev{display:inline-flex;color:var(--mute);transition:transform .22s ease}
  .fold-btn .chev svg{width:17px;height:17px}
  .fold.open .fold-btn .chev{transform:rotate(180deg)}
  .fold-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
  .fold-body > .fold-in{overflow:hidden;min-height:0;opacity:0;transition:opacity .3s ease}
  .fold.open .fold-body{grid-template-rows:1fr}
  .fold.open .fold-body > .fold-in{opacity:1}
  .card.fold > .fold-btn{border-top:0;padding-top:0}
}

/* A second line inside a table cell: quieter and smaller than the first. It is
   needed where a figure has an age, and where an address has a successor
   already waiting (cabinet, 18.09, decision 53). */
td .sub{display:block;font-size:12.5px;margin-top:3px}

/* A button in a table row. The class `tiny` has been put on these buttons from
   the start, but no rule ever answered to it and they stayed at full height
   (cabinet, 18.09). */
.btn.tiny{padding:6px 12px;min-height:40px;font-size:13px}

/* A figure is a link only when a press gives something: another reading of
   the same figure, or a word of explanation (the customer's rule, 19.09,
   decision 74). Decimals alone are no longer a reason to press. The tile is
   the button, so a thumb need not find the figure; the dotted line under the
   figure is the sign, and the dots beside the label count the readings and
   mark the one on screen. */
button.tile{font:inherit;text-align:left;color:inherit;width:100%;margin:0;cursor:default;
            -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
button.tile .k,button.tile .v{display:block}
button.tile:disabled{opacity:1}
button.tile.views{cursor:pointer}
button.tile.views .vlink{border-bottom:1px dotted var(--line2);padding-bottom:1px}
button.tile.views:hover .vlink{border-bottom-color:var(--mute)}
button.tile.views:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vdots{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.vdots:empty{display:none}
.vdots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--line2)}
.vdots i.on{background:var(--ink-deep)}
/* The same tile on its own, outside a grid of tiles: a boxed block on both
   widths, the label line with the dots, the figure under the dotted line —
   or two lines, where a reading comes in two (decision 75). */
.tile.reading{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:11px 14px 10px;margin-top:14px;width:100%}
.tile.reading .k{display:block;font-size:13px;flex-grow:0}
.tile.reading .v{display:block;margin-top:4px;font-size:17px}
.tile.reading .v .vlink{display:inline-block}
.tile .v .vlink.words{font-family:var(--sans);font-size:14px;font-weight:600}
.tile .v .vlink.rows{display:block;border-bottom:0;padding-bottom:0}
.vrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vrow + .vrow{margin-top:5px}
.vrow .k{font-family:var(--sans);font-size:13px;color:var(--mute2);font-weight:400;flex-grow:1}
.vrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:16px;color:var(--ink-deep);margin:0;white-space:nowrap}
button.tile.views .vlink.rows .vrow .v{border-bottom:1px dotted var(--line2);padding-bottom:1px}
button.tile.views:hover .vlink.rows .vrow .v{border-bottom-color:var(--mute)}
@media (max-width:600px){
  .tile.reading{padding:10px 12px 9px;margin-top:12px}
  .tile.reading .k{font-size:14px}
  .tile.reading .v{font-size:16px}
  .vrow .k{font-size:14px}
  .vrow .v{font-size:15px}
}
/* The same press where the figure is not in a tile (decision 76): the big
   pool price on the market screen (figbtn), and the rows of the overview
   that read several ways — reserve, circulation, issued (decision 85), each
   a row of its group like the rows beside it. Neither looks like a button:
   the dotted line and the dots are the only signs. */
button.figbtn,button.row{font:inherit;text-align:left;color:inherit;background:none;border:0;margin:0;width:100%;cursor:default;
                         -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
button.figbtn{display:block;padding:0}
button.figbtn > span{display:block}
button.figbtn:disabled,button.row:disabled{opacity:1}
button.figbtn.views,button.row.views{cursor:pointer}
button.figbtn.views .vlink,button.row.views .vlink{border-bottom:1px dotted var(--line2);padding-bottom:1px}
button.figbtn.views:hover .vlink,button.row.views:hover .vlink{border-bottom-color:var(--mute)}
button.figbtn.views:focus-visible,button.row.views:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.row .k .vdots{margin-left:8px}

/* A block a person copies by hand into another file. It stands on the control
   panel alone: three fields of an announced currency cannot be read back out of
   the network, and the only way they reach settings.json is by being typed
   across (cabinet, 18.09, decision 53). Wrapping is allowed: the address is
   long, and a horizontal scroll inside a card hides half of it. */
.paste{font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-all;
       margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fill);
       color:var(--ink-deep);-webkit-user-select:all;user-select:all}

/* ========== the door (cabinet, 18.09, decision 56) ==========
   What stands on the screen before a wallet: the mark, the name, the slogan,
   the address of the site, the network in the same pill as the bar, and the
   way in. One column, centred, the width of a phone on any screen; the links
   to the project's channels sit at the foot of the column. The frame and the
   screen wait behind it, hidden, and come up when a wallet is in. */
/* the bottom padding keeps the channel row clear of the corner, where the
   way back up appears on a long page */
.door{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:52px 20px 78px;position:relative}
/* not shown while the wallets are being found: a wallet that enters on its
   own leaves the title page unseen between screens (decision 93) */
.door.pending{visibility:hidden}
.door-in{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center;flex-grow:1}
.door-mark{display:block;line-height:0}
.door-mark svg{width:88px;height:88px;display:block}
.door-name{font-family:var(--serif);font-size:34px;line-height:1.1;font-weight:700;color:var(--ink-deep);margin-top:22px}
.door-slogan{font-size:17px;color:var(--mute2);margin-top:8px}
.door-site{display:inline-block;margin-top:10px;font-size:14px;color:var(--ink);
           text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.door-site:hover{text-decoration-color:var(--ink)}
.net.door-net{margin-top:24px;padding:6px 14px;font-size:13.5px}
.door-testline{font-size:12.5px;color:var(--gold-ink);margin-top:7px}
.door-way{width:100%;margin-top:24px;display:flex;flex-direction:column;gap:12px}
/* the ways in (decision 93): equal buttons, an icon in each, one line under
   each on what it is; whatever goes wrong stays under the way it concerns */
.way{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.way .door-line.warn{margin:2px 0 0}
.door-way .btn.big{display:flex;align-items:center;justify-content:center;gap:11px;background:var(--card);width:100%;min-height:48px;border-radius:10px;font-size:15px}
.door-way .btn.big.solid{background:var(--gold)}
.door-way .btn[disabled]{opacity:.55}
.door-hint{font-size:12.5px;color:var(--mute);line-height:1.4;margin:0;max-width:40ch}
a.door-lookbtn{text-decoration:none;color:var(--ink)}
a.door-lookbtn:hover{border-color:var(--ink)}
/* a wallet on another network: its own card (decision 92), the switch
   inside it and the way by hand behind a fold */
.door-netcard{width:100%;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
              background:var(--card);border:1px solid var(--warn-line);border-radius:12px;padding:14px 16px 12px}
.door-nethead{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink-deep)}
.door-netcard .door-line{margin:0}
.door-netcard .btn.big{margin-top:2px}
.door-foldbox{width:100%;display:flex;flex-direction:column;align-items:center}
.door-fold{margin-top:2px;display:inline-flex;align-items:center;gap:5px}
.door-fold .chev{display:inline-flex;line-height:0}
.door-fold .chev svg{width:14px;height:14px;transition:transform .15s}
.door-fold.open .chev svg{transform:rotate(180deg)}
.door-netcard .door-hand{margin-top:12px;text-align:left}
.wicon{width:22px;height:22px;border-radius:5px;display:block;flex:0 0 auto}
.wicon.glyph{color:var(--mute2);display:inline-flex}
.wicon.glyph svg{width:22px;height:22px}
/* the phone: the pairing link as a QR code, wallet buttons on a phone
   itself, a link to copy (decision 91) */
.door-phonebtn{display:flex;align-items:center;justify-content:center;gap:11px;background:var(--card)}
.door-phone{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.door-qr{width:236px;height:236px;background:#fff;padding:12px;border:1px solid var(--line2);border-radius:14px}
.door-qr svg{display:block;width:100%;height:100%}
.door-qr:empty{background:var(--fill)}
.door-phonelinks{margin-top:0}
.door-phonelinks:empty{display:none}
.door-copy{min-height:40px}
.door-line{font-size:14px;color:var(--mute2);line-height:1.5}
/* centred lines on the door break evenly, never with one word left alone on
   the last line (decision 95); a browser that does not know the rule breaks
   them as before */
.door-line,.door-hint,.door-what,.door-testline{text-wrap:balance}
.door-walllead,.door-social,.door-new li{text-wrap:pretty}
.door-line.strong{font-size:16px;color:var(--ink-deep);font-weight:600}
.door-line.warn{color:var(--warn-ink)}
.door-what{font-size:13px;color:var(--mute);margin-top:12px;max-width:44ch;line-height:1.5}
/* the three steps: a line to open them when a wallet was found; open when none was */
.door-more{font:inherit;font-size:14px;color:var(--ink);background:none;border:0;padding:0;margin-top:18px;cursor:pointer;
           text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.door-more:hover{text-decoration-color:var(--ink)}
.door-new{width:100%;margin-top:22px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 15px}
.door-newhead{font-size:15px;font-weight:600;color:var(--ink-deep)}
.door-new ol{margin:8px 0 0;padding-left:22px;font-size:14px;line-height:1.5;color:var(--mute2)}
.door-new li + li{margin-top:8px}
/* a wallet on another network: the way by hand under the switch button (decision 92);
   a value is taken whole with one click, to be pasted into the wallet */
.door-hand{margin-top:6px}
.door-hand .door-newhead{font-size:14px}
.door-values{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;margin:12px 0 0;font-size:13.5px;line-height:1.4}
.door-values dt{color:var(--mute2)}
.door-values dd{margin:0;color:var(--ink-deep);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.door-handback{font-size:13.5px;color:var(--mute2);margin:12px 0 0}
/* the wallets people use (decision 95): inside the three steps a plain section;
   on its own — when no wallet was found in the browser — a card of its own,
   with the line on where each wallet fits */
.door-wallets{margin-top:14px}
.door-wallets.open{width:100%;margin-top:18px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px 15px}
.door-walllead{font-size:13px;color:var(--mute2);line-height:1.5;margin:4px 0 0}
.door-walls{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.door-walls a{font-size:13.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:999px;padding:5px 12px}
.door-walls a:hover{border-color:var(--ink)}
.door-walls a .wtag{font-size:11px;color:var(--gold-ink);background:var(--gold-fill);border:1px solid var(--gold-line);border-radius:5px;padding:0 6px;margin-left:7px;vertical-align:1px}
.door-social{font-size:13px;color:var(--mute2);line-height:1.5;margin-top:9px}
/* the apps named under the phone button (decision 95): quiet pills, one
   row, centred with the button; the tail is plain words */
.door-apps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px 6px;margin:1px 0 0}
.door-apps .app{font-size:12px;line-height:1;color:var(--mute2);border:1px solid var(--line2);border-radius:999px;padding:4px 9px;white-space:nowrap}
.door-apps .more{font-size:12px;color:var(--mute);padding:0 2px}
/* the apps under the phone button (the customer, 29.09): the same pills, but
   ways to this page inside the app — links on a phone, buttons that show a
   code for the phone's camera on a computer — a line above saying so, and a
   frame of air for a finger */
.door-openrow{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:3px;width:100%}
.door-openrow .door-hint{color:var(--mute2)}
.door-apps.door-openapps{gap:8px}
.door-openrow .door-openapps .app{-webkit-appearance:none;appearance:none;font-family:var(--sans);font-size:14px;line-height:1;color:var(--ink);text-decoration:none;position:relative;padding:9px 14px;background:var(--card);cursor:pointer}
.door-openrow .door-openapps .app::after{content:'';position:absolute;top:-5px;bottom:-5px;left:0;right:0}
.door-openrow .door-openapps .app:hover,.door-openrow .door-openapps .app:active{border-color:var(--ink)}
.door-openrow .door-openapps .app[aria-pressed="true"]{border-color:var(--ink);background:var(--paper);font-weight:600}
.door-openrow .door-openapps .app:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* the code for the phone's camera, under the row on a computer (29.09) */
.door-openqr{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:10px;width:100%}
.door-openqr .door-line{margin:0}
.door-openqr .door-more{margin-top:0}
.door-never{font-size:13px;font-weight:600;color:var(--warn-ink);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.door-look{margin-top:24px;font-size:14px;color:var(--mute2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.door-look:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* ---- the second mark and its blink (the customer, 21.09) ----

   The owl takes the slack the door used to give the channel row, and the
   channel row stands right under it. Two automatic top margins in one column
   would split the space between them and put the owl adrift in the middle,
   so the row gives its own up.

   The blink squeezes each eye to a line and lets it back. It lasts a sixth of
   a second, which is about what a blink lasts; the double one is two of those
   with a breath between. A person whose system asks for less motion gets
   none of it — the owl sits, and nothing is lost, because the blink says
   nothing the page does not also say in words. */
.door-sign{margin-top:auto;padding-top:28px;display:flex;justify-content:center}
.door-sign .owl{height:80px;width:auto;opacity:.9;display:block}
.door-follow{margin-top:0;padding-top:24px;font-size:13px;color:var(--mute);display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center;align-items:baseline}
/* When the mark did not fit, the gap goes back to the channel row and the
   door looks exactly as it looked before there was a mark. */
.door.no-sign .door-follow{margin-top:auto;padding-top:30px}

@keyframes owl-blink{ 0%,100%{transform:scaleY(1)} 42%,58%{transform:scaleY(.08)} }
@keyframes owl-blink2{
  0%,100%{transform:scaleY(1)}
  11%,19%{transform:scaleY(.08)}
  34%{transform:scaleY(1)}
  49%,57%{transform:scaleY(.08)}
  72%{transform:scaleY(1)}
}
.owl .eye{transform:scaleY(1)}
.owl.blink .eye{animation:owl-blink .17s ease-in-out}
.owl.blink2 .eye{animation:owl-blink2 .66s ease-in-out}
@media (prefers-reduced-motion:reduce){
  .owl.blink .eye,.owl.blink2 .eye{animation:none}
}
.door-follow a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.door-follow a:hover{text-decoration-color:var(--ink)}
@media (max-width:600px){
  .door{padding:32px 16px 78px}
  .door-mark svg{width:76px;height:76px}
  .door-name{font-size:30px}
  .door-slogan{font-size:16px}
}

/* ========== reading size on a phone (cabinet, 18.09) ==========

   Measured, not guessed: on the ten screens at 390 points a quarter of every
   character a person sees stood at 12.5 points or less, the largest block of
   body text at 14.5, and nothing at all at 16 — the size a phone reads at by
   habit, and the one both Apple and Material name for body text. The screens
   were tuned on a wide display by eyes that had no trouble with them.

   So the floor is raised, not everything. The big figures already shout and
   are left alone; what moves is the text that explains them, and the smallest
   of it moves furthest: the kickers were 11.5 in capitals, which is the
   hardest combination on the page — capitals take away the shape a word is
   recognised by, so they read smaller than they measure.

   Untouched on purpose: the status row — the network label, the address oval
   and their neighbours. It is the tightest row on a phone, and rule 3.4 asks
   the network to stay in sight rather than be shrunk to fit; growing it is
   how the word "test" gets pushed off the edge. */

@media (max-width:600px){
  /* body and secondary text */
  .sub{font-size:16px}
  .intro{font-size:16.5px}
  .note{font-size:15px}
  td{font-size:16px}
  td::before{font-size:14px}
  .row .k{font-size:15.5px}
  .row .v{font-size:16px}
  .row.total .k{font-size:16px}
  .row.total .v{font-size:20px}
  th{font-size:12.5px}
  .kicker{font-size:13px}
  label,.flabel{font-size:14px}
  .flag{font-size:12.5px}
  .foot{font-size:13.5px}
  .asofline{font-size:13.5px}

  /* things a finger presses */
  .btn{font-size:15.5px}
  .btn.big{font-size:16.5px}
  .pick{font-size:15.5px}
  .pick .tag{font-size:12.5px}
  .amount .unit{font-size:15.5px}
  .screensel{font-size:16px}
  .screenlist a,.screenlist span{font-size:15.5px}

  /* the two steps on the mint screen */
  .step .n{font-size:13px}
  .step .t{font-size:15.5px}
  .step .d{font-size:14px}

  /* figure tiles and the line above a button */
  .tile .k{font-size:15px}
  .tile .v{font-size:16px}
  .tile .s{font-size:13px}
  .sumline .k{font-size:16px}
  .sumline .v{font-size:18px}
  .sumline.soft .v{font-size:16px}

  /* the vote */
  .qgroup{font-size:12.5px}
  .qname{font-size:16px}
  .qnow{font-size:14.5px}
  .qtag{font-size:12px}
  .qline{font-size:14.5px}
  .qstate-line{font-size:20px}

  /* the signposts to the site */
  .post-term{font-size:16px}
  .post-note{font-size:15.5px}
  .post-link{font-size:15px}

  /* scales, pictures and their labels */
  .scale .head{font-size:14px}
  .scale .ends{font-size:14px}
  .gname{font-size:12.5px}
  .gtag{font-size:13px}
  .chart-empty{font-size:15px}
  .chart-key{font-size:14px}
  .stk-legend{font-size:14.5px}
  .brs-label{font-size:14.5px}
  .brs-val{font-size:14px}
  .corr-ends .k{font-size:14px}
  .corr-ends .v{font-size:15px}
  .corr-pin{font-size:13px}
  .ch-ylab,.ch-xlab{font-size:12.5px}

  /* two that hid behind a more specific rule */
  td .sub{font-size:14px}

  /* the door */
  .door-testline{font-size:13.5px}
  .door-what{font-size:14px}
  .door-social{font-size:14px}
  .door-never{font-size:14px}
  .door-follow{font-size:14px}
  /* On a 390 x 844 phone the door filled the screen to the point, and the
     owl had no room at all. The bottom field of the door was 78 points of
     empty paper under the channels; 22 are enough, and the 56 given back
     hold a 48-point owl with the door still on one screen
     (the customer, 21.09). */
  .door{padding-bottom:22px}
  .door-sign{padding-top:14px}
  .door-sign .owl{height:48px}
  .door-walls a{font-size:14.5px}
  .door-walls a .wtag{font-size:12.5px}
  .door-walllead{font-size:14px}
  .door-apps .app,.door-apps .more{font-size:12.5px}
}

/* ========== more than four currencies (decision 98) ==========
   A row of choices keeps three in view and one button, "N more", that opens
   the rest on a line of their own; a table keeps its first rows and folds the
   rest into one line. The chosen currency is never hidden. */
.pick.more,.btn.more{color:var(--mute2);display:inline-flex;align-items:center;gap:6px}
.pick.more .chev,.btn.more .chev,.more-line .chev{display:inline-flex;line-height:0;transition:transform .18s ease}
.pick.more .chev svg,.btn.more .chev svg,.more-line .chev svg{width:15px;height:15px}
.pick.more.open .chev,.btn.more.open .chev{transform:rotate(180deg)}
.picker > .rest{flex:0 0 100%;display:flex;gap:6px;flex-wrap:wrap}
.more-line{font:inherit;font-size:13.5px;color:var(--mute2);background:transparent;border:0;padding:2px 0;cursor:pointer;
           display:inline-flex;align-items:center;gap:6px}
.more-line:hover{color:var(--ink-deep)}
tr.more-rows td{padding-top:9px;padding-bottom:9px}
/* the reserve's picture: the largest three and the rest as one part, which
   opens the whole list on a press */
.stk-item.press{font:inherit;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;text-align:left}
.stk-item.press .k{text-decoration:underline dotted;text-underline-offset:3px}
@media (max-width:600px){
  tr.more-rows{border:0;padding:0 2px}
  tr.more-rows td{padding:4px 0}
  .more-line{font-size:14.5px}
}

/* ---------- the languages (decision 110) ----------
   The site's three, each named in its own script, the current one in ink.
   On the door they stand in the corner, out of the flow, so the door keeps
   the height it measures itself by (decision 104); in the footer they close
   the row. Each is a target of forty points, like everything pressed. */
.langs{display:flex;align-items:center;gap:0;font-size:13px;line-height:1}
.langs a,.langs .cur{display:inline-flex;align-items:center;min-height:40px;padding:0 7px;color:var(--mute);text-decoration:none}
.langs a:hover,.langs a:focus-visible{color:var(--ink-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.langs .cur{color:var(--ink-deep);font-weight:600}
.langs > * + *::before{content:'\00b7';color:var(--line2);margin-right:7px;margin-left:-7px}
.foot .langs a::after{content:none}
.foot-langs{margin-left:-7px}
.door-langs{position:absolute;top:4px;right:8px}

/* ---------- the layout pass (decision 112) ----------
   Every screen in three languages at nine widths, measured and looked at,
   21.09. What was found and how it is held: the rules of the layout
   ritual, which now asks for each of these. */

/* Tiles in a row: the figures stand on one line whatever the labels do. The
   label, the figure and the note of every tile take the same three rows of
   the grid, so a label that runs to two lines lowers no figure but its own
   neighbours' labels keep their place. A browser without the rule shows the
   tiles as before. */
@supports (grid-template-rows:subgrid){
  @media (min-width:601px){
    .tiles{row-gap:0;margin-bottom:-10px}
    .tiles > .tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:10px}
    .tiles > .tile > *{min-width:0}
  }
}

/* A column of figures has its heading over the figures: the heading carried
   the ten points every other cell keeps on its right. */
th.n{padding-right:0}

/* On a phone a figure that drops under its name keeps to the right edge,
   where the figures of the rows around it stand. */
@media (max-width:600px){
  .row .v{margin-left:auto}
  td{gap:2px 0;justify-content:flex-end}
  td::before{margin-right:12px}
  td:first-child{justify-content:flex-start}
}

/* A figure and the line that names it are not glued: the same four points
   the overview has always had (the class gap-xs in the page). */

/* Lines break where the words do, not where the box ends: a heading, a
   label or a button that needs two lines takes its words evenly, and a
   paragraph keeps its measure but leaves no word alone under the rest. A
   browser that does not know the rule breaks them as before. */
.kicker,.lead,.qname,.qgroup,th,label,.flabel,.step .t,.tap-head,.sumline .k,.row .k,.tile .k,
.corr-ends .k,.scale .head > span,.btn,.pick,.screensel .cur,.gname,.qline,.qnow.words,.fold-btn > span{text-wrap:balance}
p,.sub,.note,.tap-line,.step .d,td .sub,.foot-open{text-wrap:pretty}
/* the right-hand words of a scale are one piece: «34 d 23 h left» */
.scale .head > span + span{white-space:nowrap;text-align:right}

/* A button that runs to two lines keeps air between them: the figure's tight
   line came with the class «big» and was never meant for words. */
.btn.big{line-height:1.25}
/* a link dressed as a button centres every line of its words, as a button does */
a.btn{text-align:center}
/* «Max» never breaks: a Chinese word may break between any two signs, and the
   field squeezed it into a column of one sign each */
.amount .btn{flex:0 0 auto;white-space:nowrap}

/* The picture of protection: the name of a line and its figure share the
   line and do not run into each other; a long name takes two lines. */
.gline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 11px}
.gline .gname,.gline .gtag{position:relative;left:auto;right:auto;transform:none}
.gline .gname{flex:0 1 auto;min-width:0;white-space:normal;line-height:1.2}
.gline .gtag{flex:0 0 auto}

/* A question's answer in words gives the question half the row at least: a
   long answer takes two lines rather than squeezing the question into four. */
.qname{flex:1 1 55%;min-width:0}
.qnow.words{white-space:normal;text-align:right;flex:0 1 auto;min-width:0}
.qtag{font-size:11.5px}

/* The head of a position card: «Position #3» and «Made in stage 1» are each
   one piece, and the second goes under the first when both do not fit. */
.poshead{flex-wrap:wrap}
.poshead > .kicker,.poshead > .sub{white-space:nowrap}

/* The dots that count a figure's readings stay beside its label. */
button.tile .k,button.row .k,.figbtn .kicker{display:flex;align-items:center}
button.tile .k > span:first-child,button.row .k > span:first-child{min-width:0}

/* The author's line is one piece. */
.foot-by{white-space:nowrap}

/* The screen selector on a narrow phone: the name gets the room, and a long
   Spanish name takes two lines, not three. */
.screensel .cur{line-height:1.2;overflow-wrap:break-word}
@media (max-width:360px){
  .screensel{font-size:15px;padding-left:9px;padding-right:9px}
  .screensel .ico{margin-right:6px}
}

/* Slippage: four choices in one row on a phone, of one width. */
@media (max-width:600px){
  #slip{flex-wrap:nowrap}
  #slip .pick{flex:1 1 0;justify-content:center;min-width:0;padding-left:6px;padding-right:6px;white-space:nowrap}
}

/* The door: every target a finger is meant to press is forty points tall
   and at least twenty-four wide, without moving a letter. The links and the
   wallets' pills keep the size they are drawn at; what a finger may press is
   a frame of air around each, drawn by nothing (the layout ritual measures
   it). A tag inside a pill is one piece. */
.door-site,.door-more,.door-follow a,.door-walls a{position:relative}
.door-site::after,.door-more::after,.door-follow a::after{content:'';position:absolute;top:-10px;bottom:-10px;left:-8px;right:-8px}
.door-walls a::after{content:'';position:absolute;top:-4px;bottom:-4px;left:0;right:0}
.door-walls a .wtag{white-space:nowrap;display:inline-block}
@media (max-width:360px){
  .door-way .btn.big{padding-left:14px;padding-right:14px}
}

/* Chinese at the sizes of Latin capitals is too small to read: the small
   labels written in capitals elsewhere are a size up, without the spacing
   capitals need. */
:lang(zh) .kicker,:lang(zh) th,:lang(zh) .qgroup{font-size:12.5px;letter-spacing:.04em}
:lang(zh) .flag,:lang(zh) .pick .tag,:lang(zh) .qtag,:lang(zh) .door-walls a .wtag{font-size:12px}
@media (max-width:600px){
  :lang(zh) .kicker{font-size:13.5px}
  :lang(zh) th{font-size:13px}
}

/* ==== many positions (decision 113) ====
   From four positions on, the positions screen shows the whole on top and a
   line a position under it, found, grouped and ordered, the way a wallet of
   many collectibles is shown on a marketplace; the card opens under its line.
   On a computer the lines are a table of six columns; on a phone a line is
   two rows: the number, the collateral and its dollars, then when it was
   made and what closing gives. */
#many{margin-top:16px}
.finder{display:flex;flex-direction:column;gap:12px}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:10px;
        background:#FFFFFF;padding:0 12px;min-height:48px;max-width:460px}
.search:focus-within{border-color:var(--ink)}
.search .sico{display:inline-flex;line-height:0;color:var(--mute);flex:0 0 auto}
.search .sico svg{width:18px;height:18px}
.search input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;font:inherit;
              font-size:15.5px;color:var(--ink-deep);padding:11px 0}
.search input::placeholder{color:var(--mute);opacity:1}
.pchoice{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.pchoice .plabel{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);min-width:5.5em}
.pfound{margin-top:14px;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.pfound .more-line{min-height:40px}
.plist{margin-top:10px}
.phead,.prow,.pgroup{display:grid;grid-template-columns:6.5em minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.35fr) 6.5em 20px;
                     column-gap:14px;align-items:center}
.phead{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
       padding:0 8px 8px;border-bottom:1px solid var(--line);line-height:1.3}
.phead .n,.prow .n,.pgroup .n{text-align:right}
.prow{width:100%;font:inherit;font-size:14.5px;line-height:1.35;text-align:left;color:var(--ink);background:transparent;
      border:0;border-bottom:1px solid var(--line);padding:11px 8px;min-height:48px;cursor:pointer}
.prow:hover{background:var(--fill)}
.prow:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.prow.open{background:var(--gold-fill);border-bottom-color:var(--gold-line)}
.prow .pid{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:600;color:var(--ink-deep);white-space:nowrap}
.prow .pcoll{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
             color:var(--ink-deep);white-space:nowrap}
.prow .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-deep);white-space:nowrap}
.prow .n.words{font-family:var(--sans);font-weight:600}
.prow .n.warn-ink{color:var(--warn-ink)}
.prow .pgive .flag{font-family:var(--sans);vertical-align:1px}
.prow .pmade{color:var(--mute2);white-space:nowrap}
.prow .chev,.pmore .chev{display:inline-flex;line-height:0;color:var(--mute);transition:transform .18s ease}
.prow .chev{justify-self:end}
.prow .chev svg,.pmore .chev svg{width:16px;height:16px}
.prow.open .chev{transform:rotate(180deg)}
.pgroup{padding:16px 8px 8px;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.35;color:var(--ink-deep)}
.pgroup .pgtitle{grid-column:1 / 3;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.pgroup .pgname{font-weight:600}
.pgroup .pgname.good-ink{color:var(--good)}
.pgroup .pgname.warn-ink{color:var(--warn-ink)}
.pgroup .pgcount{font-size:12px;font-weight:600;color:var(--mute2);border:1px solid var(--line2);border-radius:999px;
                padding:0 8px;line-height:1.5;font-family:var(--mono)}
.pgroup .n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pgroup .pgsums{display:contents}
.pgroup .pgusd{grid-column:3}
.pgroup .pggive{grid-column:4}
.prow .pwho{display:contents}
.pdetail{padding:12px 0 16px;border-bottom:1px solid var(--line)}
/* the card keeps the width it is drawn for, and on a wide screen its four
   buttons stand two by two instead of a column a screen wide */
.pdetail > .card{border-color:var(--gold-line);max-width:720px}
@media (min-width:601px){
  .pdetail .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pmore{display:flex;align-items:center;gap:6px;margin:6px 0 0 8px;min-height:44px}
@media (max-width:600px){
  .search input{font-size:16.5px}
  .pchoice .plabel{font-size:13px;min-width:0;flex:0 0 100%}
  .phead{display:none}
  .prow{grid-template-columns:minmax(0,1fr) auto 18px;
        grid-template-areas:"who usd chev" "made give chev";
        column-gap:10px;row-gap:4px;padding:11px 2px;font-size:15.5px}
  .prow .pwho{grid-area:who;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-width:0}
  .prow .pusd{grid-area:usd}
  .prow .pgive{grid-area:give}
  .prow .pmade{grid-area:made;font-size:14px}
  .prow .chev{grid-area:chev;align-self:center}
  /* the group's name, and its count under the name; the two sums in one
     block at the right, beside the name while both fit on a line and under
     it when a long sum would not let them: a group's sum never breaks, and
     the count never drops under the sign of the currency */
  .pgroup{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px;row-gap:6px;
          padding:16px 2px 8px;font-size:15.5px}
  .pgroup .pgtitle{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:3px;justify-items:start}
  .pgroup .pgtitle.coin{grid-template-columns:auto minmax(0,1fr);column-gap:8px}
  .pgroup .pgtitle.coin .pgname,.pgroup .pgtitle.coin .pgcount{grid-column:2}
  .pgroup .pgsums{display:grid;justify-items:end;row-gap:3px;margin-left:auto;flex:0 0 auto}
  .pgroup .pgusd,.pgroup .pggive{grid-column:auto}
  .pgroup .pgcount{font-size:13px}
  .pmore{margin-left:2px}
}
/* the narrowest phones: the number and the collateral take the first line
   whole, and the dollars and what closing gives go under them */
@media (max-width:340px){
  .prow{grid-template-areas:"who who chev" "made usd chev" "made give chev"}
}
:lang(zh) .phead,:lang(zh) .pchoice .plabel{font-size:12.5px;letter-spacing:.04em}

/* ---- the film of the account on the door (the customer, 27.09) ----
   A quiet line under the ways in, with a play sign; the film opens over the
   door, wide on a computer and upright on a phone, and closes with the cross,
   with Escape or with a press beside it. The line stays as quiet as it
   looks, thirty points tall; the finger gets forty all the same, from a
   frame of air above and below it drawn with nothing, like the links of
   the door (decisions 103, 124). */
.door-tourbtn{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:inherit;font-size:14px;color:var(--ink);background:none;border:0;padding:4px 2px;cursor:pointer;
              text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.door-tourbtn::after{content:'';position:absolute;top:-5px;bottom:-5px;left:0;right:0}
.door-tourbtn:hover{text-decoration-color:var(--ink)}
.door-tourbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.door-tourbtn .wicon{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--gold-ink)}
.door-tourbtn .wicon svg{width:21px;height:21px}
.tour-ov{position:fixed;inset:0;z-index:300;background:rgba(12,39,64,.9);display:flex;align-items:center;justify-content:center;padding:16px}
.tour-box{position:relative;width:min(1100px,100%,calc(88vh * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.45)}
.tour-box.tall{width:min(100%,calc(88vh * 9 / 16));aspect-ratio:9/16}
.tour-box video{display:block;width:100%;height:100%;background:#000}
.tour-x{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(12,39,64,.75);color:#F7F4EA;display:grid;place-items:center;cursor:pointer}
.tour-x svg{width:20px;height:20px}
.tour-x:hover{background:rgba(12,39,64,.95)}
.tour-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.tour-on{overflow:hidden}