/* 建玉 — the board.
 *
 * The page is built around the 板: a vertical price column with uniform rows
 * and the live price locked to its true place in the sequence. Colour follows
 * the Tokyo convention throughout — 朱 is a gain and a buy, 藍 is a loss and a
 * sell — because every broker screen this sits beside does the same, and
 * flipping it would misread at a glance.
 */

:root {
  color-scheme: light dark;

  --paper:    #E9EBE7;   /* page ground — cool pale, the grey of a board screen */
  --board:    #FFFFFF;   /* the board face itself */
  --board-2:  #F4F5F2;   /* alternating and inset surfaces */
  --ink:      #1B1E1B;
  --ink-2:    #59605A;
  --ink-3:    #8B928C;
  --rule:     #D3D8D0;
  --rule-2:   #E3E7E1;

  --up:       #C8362C;   /* 上げ・買付・到達 */
  --up-wash:  #FAEBE9;
  --down:     #2B6099;   /* 下げ・売付・分岐割れ */
  --down-wash:#E9EFF6;
  --mark:     #8C6B14;   /* 到達済みの目盛 */

  --sans: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --fig: "Barlow Semi Condensed", "Zen Kaku Gothic New", system-ui, sans-serif;

  --row: 40px;           /* one rung of the board */
  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #12171E;   /* 藍墨 — indigo ink, not neutral black */
    --board:    #1A212B;
    --board-2:  #161D26;
    --ink:      #E3E8EA;
    --ink-2:    #98A5B1;
    --ink-3:    #66727E;
    --rule:     #2A343F;
    --rule-2:   #212A34;

    --up:       #E8564B;
    --up-wash:  #33201F;
    --down:     #4E9BD8;
    --down-wash:#182935;
    --mark:     #D9A93C;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  font-feature-settings: "palt" 1;
  padding-bottom: 72px;
}

/* Figures line up in columns everywhere they appear. */
.fig, table td, table th, .kv dd {
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* ---------- seal ---------- */

.seal {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  background: var(--up);
  color: #fff;
  font-family: var(--mincho);
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  border-radius: 1px;
}

.seal-lg { width: 46px; height: 46px; font-size: 28px; margin: 0 auto 20px; }

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px max(18px, env(safe-area-inset-left)) 12px max(18px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.ident { display: flex; align-items: center; gap: 11px; }

.ident h1 {
  margin: 0;
  font-family: var(--mincho);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
}

.ident-text p {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* The one number worth seeing before anything else. */
.tally { text-align: right; line-height: 1.15; }

.tally-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.tally-value {
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tally-split {
  display: block;
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
}

/* The rate sits in the masthead because it revalues every dollar figure on
   the page — it is not a property of any one holding. */
.rate-and-feed { display: grid; justify-items: end; gap: 4px; }

.rate {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  padding: 3px 4px 3px 9px;
}

.rate label {
  font-family: var(--fig);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.rate input {
  width: 78px;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

/* A typed rate is not the market's, so it says so. */
.rate.manual { border-color: var(--mark); }
.rate.manual input { color: var(--mark); }

.rate-clear {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--fig);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.rate-clear:hover { color: var(--down); }
.rate-clear[hidden] { display: none; }

.rate-note {
  margin: 0;
  font-family: var(--fig);
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
  min-height: 1em;
}
.rate-note.manual { color: var(--mark); }

.feed {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fig);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}

.feed-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
}
.feed.live .feed-dot { background: var(--up); box-shadow: 0 0 0 3px var(--up-wash); }
.feed.poll .feed-dot { background: var(--mark); }
.feed.dead .feed-dot { background: var(--down); }

/* ---------- page ---------- */

main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
}

section { margin-top: 44px; }
.board-section { margin-top: 30px; }

.head { margin-bottom: 16px; }

.head h2 {
  display: inline;
  margin: 0;
  font-family: var(--mincho);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Kanji numerals mark sections because the page is a fixed sequence of five
   parts, not an arbitrary list. */
.eyebrow {
  display: inline-block;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--rule);
  font-family: var(--mincho);
  font-size: 13px;
  color: var(--up);
  vertical-align: 2px;
}

.head p {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ---------- ladder editor ---------- */

.ladder-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
}

.ladder-edit-label {
  font-family: var(--mincho);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 3px 5px 3px 10px;
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  background: var(--board-2);
}

.chip button {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--fig);
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}
.chip button:hover { color: var(--down); }

.chip-add { display: flex; gap: 6px; }

.chip-add input {
  width: 96px;
  margin-top: 0;
  padding: 5px 8px;
  font-size: 14px;
}

.chip-add button { padding: 5px 12px; font-size: 12px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  margin: 0;
}

.switch input { width: auto; margin: 0; }

.ladder-edit .msg { margin-left: auto; }

/* ---------- the board ---------- */

.boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
}

.board {
  background: var(--board);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--rule);
}

.board-name {
  font-family: var(--fig);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.board-name .acct {
  margin-left: 7px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  vertical-align: 1px;
}

.board-meta {
  font-family: var(--fig);
  font-size: 12px;
  color: var(--ink-3);
  text-align: right;
}

.board-meta .phase-open { color: var(--up); }

/* Uniform rungs, exactly like a real board: every row is the same height
   whatever the gap between the prices. */
.rungs { display: flex; flex-direction: column; }

.rung {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 10px;
  height: var(--row);
  padding: 0 14px;
  border-bottom: 1px solid var(--rule-2);
}
.rung:last-child { border-bottom: 0; }

.rung-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.rung-price {
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 500;
  text-align: right;
  color: var(--ink-2);
}

.rung-note {
  font-family: var(--fig);
  font-size: 11px;
  color: var(--ink-3);
  min-width: 68px;
  text-align: right;
}

/* A rung the price has already cleared. */
.rung.done { background: var(--up-wash); }
.rung.done .rung-label { color: var(--up); }
.rung.done .rung-price { color: var(--up); font-weight: 600; }

/* The live price: the only filled row on the page. */
.rung.live {
  background: var(--ink);
  border-bottom-color: var(--ink);
  height: calc(var(--row) + 12px);
}

.rung.live .rung-label {
  color: var(--paper);
  opacity: 0.55;
  font-family: var(--fig);
  font-size: 12px;
}

.rung.live .rung-price {
  color: var(--board);
  font-size: 25px;
  font-weight: 600;
}

.rung.live .rung-note { color: var(--paper); opacity: 0.72; }

/* Underwater: the live row sits below every rung. */
.rung.live.under { background: var(--down); border-bottom-color: var(--down); }
.rung.live.under .rung-price { color: #fff; }

.board-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--rule);
  background: var(--board-2);
  font-family: var(--fig);
  font-size: 12px;
  color: var(--ink-2);
}

.board-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- holdings ---------- */

.holdings {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
}

.holding { border-bottom: 1px solid var(--rule); padding: 14px 16px; }
.holding:last-child { border-bottom: 0; }

.holding-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.holding-name {
  font-family: var(--fig);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.holding-pl { font-family: var(--fig); font-size: 16px; font-weight: 600; }
.holding-pl .sub { font-size: 12px; margin-left: 8px; font-weight: 400; }

.holding-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px 18px;
  margin-top: 11px;
}

.holding-stats .k {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.holding-stats .v {
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* The currency split. Shown only for foreign holdings, where the yen result
   and the share price genuinely disagree. */
.fx-split {
  margin-top: 11px;
  border-top: 1px solid var(--rule-2);
  padding-top: 9px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px 18px;
}

.fx-split .k {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.fx-split .v {
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.fx-split .r {
  font-family: var(--fig);
  font-size: 11px;
  color: var(--ink-3);
}

/* Per-parcel sell prices. This is the table the decision is actually made
   from: one row per parcel, its own cost, and what it has to reach. */
.lots {
  margin-top: 12px;
  border-top: 1px solid var(--rule-2);
  padding-top: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lot-table { font-size: 13px; }

.lot-table th {
  background: transparent;
  border-bottom: 1px solid var(--rule-2);
  padding: 5px 10px;
  position: static;
}

.lot-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2);
  vertical-align: top;
}

.lot-table tbody tr:last-child td { border-bottom: 0; }

/* The parcel that goes first if you sell now. */
.lot-table tr.next td { color: var(--ink); }

.lot-table .tag {
  margin-left: 6px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--up);
  border: 1px solid var(--up);
  padding: 0 4px;
}

.lot-table .rate-tag {
  margin-left: 5px;
  font-size: 11px;
  color: var(--ink-3);
}

.lot-table td.target { color: var(--ink); }

.lot-table td.target .pnl {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
}

/* Already clears this target at the live price. */
.lot-table td.target.hit { background: var(--up-wash); color: var(--up); font-weight: 600; }
.lot-table td.target.hit .pnl { color: var(--up); opacity: 0.8; }

/* ---------- tables ---------- */

.sheet {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td {
  padding: 9px 14px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-2);
}

th {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: var(--board-2);
  border-bottom-color: var(--rule);
  position: sticky;
  top: 0;
}

th:first-child, td:first-child { text-align: left; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.sum td { border-top: 1px solid var(--rule); font-weight: 600; }

/* Year selector. The ledger goes back years, so the default view is the
   current one and the rest are one tap away. */
.years {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.year {
  flex: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--fig);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
}

.year .amt {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
}

.year.is-on { background: var(--ink); color: var(--board); border-color: var(--ink); }
.year.is-on .amt { color: var(--board); opacity: 0.7; }

/* A month's size relative to the best month, drawn in the row itself. */
.bar {
  display: block;
  height: 3px;
  min-width: 2px;
  margin-top: 4px;
  margin-left: auto;
  background: var(--up);
  opacity: 0.5;
}
.bar.neg { background: var(--down); }

/* A second figure under the first, for the return beside an amount or the
   broker's cost beside ours. */
.sub-pct {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
}

td.empty {
  text-align: center;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 13px;
  padding: 26px 14px;
}

/* ---------- drawer ---------- */

.drawer {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
}

.drawer > summary {
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}

.drawer > summary::-webkit-details-marker { display: none; }

.drawer-title {
  font-family: var(--mincho);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  flex: 1;
}

.drawer > summary::after {
  content: "＋";
  font-family: var(--fig);
  color: var(--ink-3);
}
.drawer[open] > summary::after { content: "−"; }

.drawer-body { padding: 4px 16px 18px; border-top: 1px solid var(--rule-2); }

.drawer-note {
  font-family: var(--fig);
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 12px;
}

.head-note {
  margin: 14px 0 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 62ch;
}

/* The ledger is dense and scanned rather than read. */
#ledger { font-size: 13px; }
#ledger td { padding: 6px 12px; }
#ledger td:last-child { padding: 4px 8px; }

.tabs { display: flex; gap: 6px; margin: 14px 0; }

.tab {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
}
.tab.is-on { color: var(--board); background: var(--ink); border-color: var(--ink); }

.pane { display: none; }
.pane.is-on { display: block; }

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.fields.two { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
label.wide { margin-top: 14px; }

input, select, textarea {
  width: 100%;
  margin-top: 5px;
  background: var(--board-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--fig);
  font-size: 15px;
  padding: 8px 10px;
}

textarea { resize: vertical; line-height: 1.55; font-size: 13px; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--up);
  outline-offset: 2px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-solid, .btn-line {
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-solid { background: var(--ink); color: var(--board); }
.btn-solid:hover { background: var(--up); }

.btn-line { background: transparent; border-color: var(--rule); color: var(--ink-2); }
.btn-line:hover { color: var(--ink); border-color: var(--ink-2); }

.msg { font-family: var(--fig); font-size: 12px; }
.msg.ok { color: var(--up); }
.msg.err { color: var(--down); }

.problem {
  font-family: var(--fig);
  font-size: 12px;
  color: var(--down);
  border-left: 2px solid var(--down);
  padding: 3px 12px;
  margin-top: 4px;
}

.drop {
  display: block;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--board-2);
  padding: 26px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.drop:hover, .drop.over { border-color: var(--up); color: var(--ink); }
.drop.loaded { border-style: solid; color: var(--ink); }

.preview { margin-top: 14px; }
.preview .sheet { margin-top: 10px; }
.preview:empty { display: none; }

/* ---------- footer ---------- */

.footer { margin-top: 46px; border-top: 1px solid var(--rule); padding-top: 22px; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 14px;
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  padding: 14px 16px;
}
.panel[hidden] { display: none; }

.panel h3 {
  margin: 0 0 10px;
  font-family: var(--mincho);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.kv { margin: 0; display: grid; gap: 5px; }

.kv .line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}

.kv dt { color: var(--ink-3); font-family: var(--sans); }
.kv dd { margin: 0; text-align: right; color: var(--ink-2); }

.keys { display: grid; gap: 8px; }

.key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 8px;
}

.key-row .name { font-size: 13px; }
.key-row .when { font-family: var(--fig); font-size: 11px; color: var(--ink-3); }

.btn-del {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--down);
  font-family: var(--sans);
  font-size: 11px;
  padding: 4px 11px;
  cursor: pointer;
}
.btn-del:hover { border-color: var(--down); }

.note { margin: 12px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.6; }

.warn {
  margin-top: 12px;
  border-left: 2px solid var(--mark);
  padding: 8px 13px;
  font-size: 12px;
  color: var(--mark);
  background: var(--board-2);
}

/* ---------- gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
}
.gate[hidden] { display: none; }

.gate-card {
  width: min(360px, 100%);
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--board);
  padding: 32px 24px 22px;
}

.gate-card h2 {
  margin: 0;
  font-family: var(--mincho);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.gate-hint {
  margin: 9px 0 22px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
}

.gate-code { display: block; text-align: left; margin-bottom: 18px; }
.gate-code[hidden] { display: none; }
#gateTokenForm button { width: 100%; margin-top: 10px; }

.gate-actions { display: grid; gap: 8px; }
.gate-actions button { width: 100%; }
.gate .msg { display: block; margin-top: 14px; min-height: 1.2em; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .masthead-in {
    grid-template-columns: 1fr auto;
    grid-template-areas: "ident feed" "tally tally";
    gap: 8px 14px;
  }
  .ident { grid-area: ident; }
  .rate-and-feed { grid-area: feed; }
  .tally { grid-area: tally; text-align: left; }
  .tally-label { display: inline; margin-right: 10px; }
  .tally-value { font-size: 27px; }
  .tally-split { display: inline; margin-left: 10px; }
  .ident-text p { display: none; }
  th, td { padding: 8px 11px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rung { transition: background 220ms ease, height 220ms ease; }
  .rung-price { transition: color 220ms ease; }
}