/* The buy and sell sheet of the real account, and the short sheet that follows the swipe. Both fit their content and keep one height: every slot below is reserved. */

/* The form */
.sw-order { gap: 8px; padding-top: 0; }
.sheet-body.sw-order:has(+ .sheet-dock) { padding-bottom: 4px; }
.sw-order .w-card { flex: none; gap: 2px; padding: 8px 12px 6px; }
.sw-order .w-token { height: 36px; gap: 6px; }
.sw-order .w-token b { font-size: 15px; }
.sw-order .w-amt { height: 36px; }
/* The coin chip wears no arrow: pressable or not, it keeps one width. */
.sw-order .sw-from { padding-right: 12px; }
.sw-from:disabled { opacity: 1; }
/* A tap on the chip leaves the focus on it: the ring is the amount's, and a keyboard still sees it. */
.sw-order .w-card:has(.sw-from:focus:not(:focus-visible)) { box-shadow: none; }
.sw-order .slider-control { height: 30px; }
.sw-order .slider-stops { height: 22px; }
/* The keyboard left the form less room than its rows take (squeezeAware in demo/wallet.js): the amount and what it buys stay in view, the slider and the other rows wait under the keyboard. */
.sw-order.is-squeezed .tk-order-slider,
.sw-order.is-squeezed-more .xn-term, .sw-order.is-squeezed-more .or-rows:not(:focus-within),
.sw-order.is-squeezed-most .w-card-top { display: none; }
/* Its own rule: an engine without :has() drops the whole list it stands in, kit/compat.css has its stand-in. */
.sw-order.is-squeezed .sw-term:has(.sw-slip) { display: none; }
.sw-order.is-busy { pointer-events: none; opacity: .55; transition: opacity .2s ease; }
.sw-terms { display: flex; flex-direction: column; padding: 2px 8px 2px 12px; border-radius: var(--r-field); background: var(--fill); }
.sw-term { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; font-size: 14px; line-height: 19px; color: var(--hint); }
.sw-term + .sw-term { box-shadow: 0 -.5px 0 var(--sep); padding-right: 4px; }
.sw-term > span { flex: none; }
.sw-slip { flex: none; width: 156px; }
/* What is received, then its money in brackets, smaller. One line of fixed height: a bracket with no room left wraps onto a second line that is never shown, so it goes whole, never cut, and the row keeps its height. */
.sw-out { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; justify-content: flex-end; height: 21px; font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; transition: opacity .18s ease; }
.sw-out.is-loading { opacity: .45; }
.sw-out-main { flex: 0 1 auto; min-width: 0; display: flex; }
.sw-out-num { flex: none; }
.sw-out-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.sw-out-val { flex: none; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--hint); }
.sw-out .roll-d, .sw-out .roll-c, .sw-out .roll-col > span { height: 21px; line-height: 21px; }
.sw-rows .summary-row > b.sw-worth { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; justify-content: flex-end; height: 19px; }
.sw-worth > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sw-worth-val { flex: none; white-space: pre; font-weight: 400; color: var(--hint); }

/* Stop and take-profit: two rows of fixed height, on the sell side only. The slot of slippage shows the price while an order is set. */
.or-row { display: flex; align-items: center; gap: 6px; height: 40px; }
.or-row + .or-row, .or-rows + .sw-term { box-shadow: 0 -.5px 0 var(--sep); }
.or-name { flex: none; width: 36px; font-size: 14px; line-height: 19px; color: var(--hint); }
.or-chips { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 40px); height: 30px; padding: 2px; border-radius: 10px; background: var(--fill); }
.or-thumb { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 40px; border-radius: 8px; background: var(--thumb); box-shadow: var(--thumb-shadow); opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.or-thumb.is-on { opacity: 1; }
.or-chip { position: relative; min-width: 0; padding: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; touch-action: pan-y; }
.or-chip::after { content: ""; position: absolute; inset: -5px 0; }
.or-row[data-kind="stop"] .or-chip[aria-pressed="true"] { color: var(--red); font-weight: 600; }
.or-row[data-kind="take"] .or-chip[aria-pressed="true"] { color: var(--green); font-weight: 600; }
.or-field { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--fill); color: var(--text); font-size: 16px; line-height: 21px; font-variant-numeric: tabular-nums; text-align: right; outline: none; user-select: text; -webkit-user-select: text; }
.or-field::placeholder { color: var(--hint); font-size: 14px; }
/* The ring is a shadow inside the field: a touch hides outlines. From the focus on, the field wears its unit and makes room for it, so the first digit lands where the caret stood. */
.or-field:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.or-field:focus::placeholder { color: transparent; }
.sw-slip[hidden], .or-now[hidden] { display: none; }
.or-now { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-end; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.or-now-num { flex: none; }
.or-now-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.or-now .roll-d, .or-now .roll-c, .or-now .roll-col > span { height: 19px; line-height: 19px; }
.or-rows + .sw-term { padding-right: 4px; }

/* The line above the swipe has its place reserved, so a problem moves nothing. */
.sw-dock { padding-top: 0; box-shadow: none; }
.sw-line { margin: 0; height: 24px; padding-bottom: 6px; font-size: 13px; line-height: 18px; font-weight: 500; text-align: center; color: var(--danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-line[data-tone="note"] { color: var(--hint); }
.sw-dock .swipe { height: 56px; border-radius: 28px; }
.sw-dock .swipe-fill { border-radius: 28px; }
.sw-dock .swipe-thumb { width: 48px; height: 48px; }
.sw-dock .swipe-text, .sw-dock .swipe-sheen, .sw-dock .swipe-sheen-text { padding-inline: 56px 14px; }
.sw-dock .swipe-text { font-size: 15px; }
.sw-pass { display: flex; gap: 8px; height: 56px; }
.sw-pass[hidden] { display: none; }
.sw-pass-input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text); font-size: 16px; line-height: 21px; outline: none; user-select: text; -webkit-user-select: text; }
.sw-pass-input:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.sw-pass .btn { flex: none; width: 56px; min-height: 56px; padding: 0; border-radius: 16px; }

/* After the swipe */
.sw-state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 40px; }
.sw-state-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--link); }
.sw-state[data-tone="up"] .sw-state-mark { color: var(--green); }
.sw-state[data-tone="down"] .sw-state-mark { color: var(--danger); }
.sw-state[data-tone="hint"] .sw-state-mark { color: var(--hint); }
.sw-state-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-state-title { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.02em; }
.sw-state-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 17px; color: var(--hint); }
.sw-state-text[hidden] { display: none; }
.sw-status { gap: 10px; padding-top: 4px; padding-bottom: calc(12px + var(--safe-bottom)); }
.sw-rows { gap: 6px; padding: 10px 14px; border-radius: var(--r-field); background: var(--fill); }
.sw-rows .summary-row { min-height: 19px; }
.sw-rows .summary-row > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sw-actions { margin-top: auto; display: flex; gap: 8px; }
.sw-done { flex: 1; min-width: 0; }
.sw-open { flex: none; width: 50px; padding: 0; }
.sw-open[hidden] { display: none; }
.sw-spin { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3.5px solid color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent); animation: sw-spin .9s linear infinite; }
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* The orders of Портфель: rows of one height, with every state in the same two lines. */
.or-section[hidden] { display: none; }
.or-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.or-title em { font-style: normal; font-size: 14px; line-height: 19px; font-weight: 500; letter-spacing: 0; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.or-item { height: 56px; min-height: 56px; gap: 10px; padding: 0 10px 0 12px; --sep-left: 58px; contain: layout paint style; }
.or-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.or-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.or-sym { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-dist { flex: none; font-size: 13px; line-height: 18px; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.or-dist[data-tone="near"] { color: var(--red); font-weight: 500; }
.or-sub { font-size: 13px; line-height: 17px; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-sub[data-tone="up"] { color: var(--green); font-weight: 500; }
.or-sub[data-tone="accent"] { color: var(--link); font-weight: 500; }
.or-end { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.or-x { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--hint); }
.or-x::after { content: ""; position: absolute; inset: -8px; }
.or-item:has(.or-x:active)::after { opacity: 0; }
.or-skel { height: 56px; }
.sw-spin--small { width: 20px; height: 20px; border-width: 2.5px; }
.sw-status.or-cancel { gap: 3px; }
.or-cancel .sw-line { flex: none; }
.tk-order-slider.is-empty { pointer-events: none; opacity: .4; }
.or-box { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.or-box .or-field { width: 100%; }
.or-unit { position: absolute; right: 8px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--hint); pointer-events: none; opacity: 0; }
.or-row.has-price .or-unit, .or-box:focus-within .or-unit { opacity: 1; }
.or-row.has-price .or-field, .or-field:focus { padding-right: 44px; }
.or-rows.is-off .or-row { opacity: .4; }
.or-actions { flex-direction: column; }
.or-actions .sw-pass { width: 100%; }
.or-actions .btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sw-spin { animation-duration: 2.4s; }
}
@media (max-width: 359px) {
  .or-row { gap: 5px; }
  .or-name { width: 32px; font-size: 13px; }
  .or-chips { grid-template-columns: repeat(3, 38px); }
  .or-thumb { width: 38px; }
  .or-chip { font-size: 12px; }
  .or-item { gap: 8px; }
  .or-sym { font-size: 14px; }
  .or-dist { font-size: 12px; }
  .sw-slip { width: 132px; }
  .sw-term { font-size: 13px; }
  .sw-out { font-size: 15px; }
  .sw-out-val, .sw-worth-val { font-size: 12px; }
  .sw-terms .sw-term:has(.sw-out), .sw-rows .summary-row:has(.sw-worth) { gap: 8px; }
  .sw-rows { padding-inline: 12px; }
  .sw-rows .summary-row { font-size: 13px; }
}