/* Moneroute: windows added for the live site (terminal, real route planner, what this page can see),
   built from the same 98 parts as desktop.css. Nothing here restyles the approved windows. */

/* first paint: windows and icons stay hidden until main.js has arranged them, then the whole screen appears at once.
   The animation only matters if the script never runs: the page then shows itself after 4 s anyway. */
html.boot .desktop > *, html.boot .taskbar > * { visibility:hidden; animation:boot-show 0s 4s forwards }
@keyframes boot-show { to { visibility:visible } }

/* live values: hidden, not blank, until the first good figure arrives */
html:not(.px-ok) .px-dep{visibility:hidden}
html:not(.px-ok) .px-hide{display:none}
[data-download][hidden],[data-desktop][hidden],[data-ca-block][hidden],[data-needs-x][hidden]{display:none !important}

/* drop-down list in 98 style */
select.field{-webkit-appearance:none;appearance:none;height:21px;padding:2px 20px 2px 4px;cursor:default;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' shape-rendering='crispEdges'><rect width='16' height='17' fill='%23c0c0c0'/><path d='M0 0h15v1H1v15H0z' fill='%23dfdfdf'/><path d='M1 1h13v1H2v13H1z' fill='%23fff'/><path d='M15 0h1v17H0v-1h15z' fill='%23000'/><path d='M14 1h1v15H1v-1h13z' fill='%23808080'/><path d='M4 7h7v1H4zM5 8h5v1H5zM6 9h3v1H6zM7 10h1v1H7z' fill='%23000'/></svg>") no-repeat right 2px center}
select.field:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.field::placeholder{color:#808080}
.field[readonly]{background:var(--face)}
.field.bad{background:#fff3f0}
.btn:disabled{color:var(--sh);text-shadow:1px 1px var(--hi)}
.btn:disabled:active{box-shadow:var(--raised-btn);padding:0 12px}
.btn.sm{min-width:0;height:21px;padding:0 7px}
.btn.sm:active{padding:1px 6px 0 8px}
.btn[aria-pressed="true"]{box-shadow:var(--pressed);background:var(--face) var(--checker);padding:1px 6px 0 8px}
.lnk{padding:0;border:0;background:none;font:inherit;color:#000;text-decoration:underline;cursor:pointer}

/* 98 tab control */
.tabs{display:flex;align-items:flex-end;padding:0 2px;position:relative;z-index:1;flex:none;height:20px}
.tab{height:18px;padding:0 9px;border:0;margin-right:-1px;background:var(--face);cursor:default;font:11px var(--ui);color:#000;
  box-shadow:inset 1px 1px var(--hi), inset 2px 2px var(--lt), inset -1px 0 var(--dk), inset -2px 0 var(--sh);border-radius:3px 3px 0 0}
.tab[aria-selected="true"]{height:20px;margin:0 -2px 0 -2px;padding:0 11px;position:relative;z-index:2;box-shadow:inset 1px 1px var(--hi), inset 2px 2px var(--lt), inset -1px 0 var(--dk), inset -2px 0 var(--sh)}
.tab:first-child[aria-selected="true"]{margin-left:-2px}
.tab:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.tabpanel{flex:1;min-height:0;background:var(--face);box-shadow:var(--raised-win);padding:6px;display:flex;flex-direction:column}
.tabpanel[hidden]{display:none}

/* ---------- route: the real planner ---------- */
#w-route .rt-tools{display:none}
#w-route.rt-open{width:604px}
#w-route.rt-open .rt-tools{display:flex}
.rt-tools{align-items:center;gap:4px;height:30px;padding:2px 6px 2px 4px;flex:none;box-shadow:inset 0 1px var(--sh), inset 0 2px var(--hi);white-space:nowrap}
.rt-tools label{display:flex;align-items:center;gap:4px}
.rt-tools .tsep{width:2px;height:22px;flex:none;box-shadow:inset 1px 0 var(--sh), inset -1px 0 var(--hi);margin:0 3px}
#rt-amt{width:62px;text-align:right}
#rt-preset{width:84px} #rt-win{width:84px} #rt-legs{width:62px}
.rt-tools .btn{margin-left:auto;min-width:0;height:22px;padding:0 8px}
#w-route .lv{height:118px;overflow:auto}
#w-route .lv td.rt-in{padding:1px 4px 1px 2px}
.rt-addr{width:100%;height:20px;font:11px var(--ui)}
#w-route.rt-open col.r3{width:76px}
#w-route.rt-open col.r5{width:auto}
#w-route.rt-open col.r6{width:118px}
/* same 18 px row as the approved progress bar: the bar, and the window's buttons beside it */
.rt-bar{grid-column:1 / -1;display:flex;align-items:center;gap:6px;height:18px}
.rt-bar .prog{flex:1;min-width:0}
.rt-btns{display:flex;gap:4px;margin-left:auto;flex:none}
.rt-btns:empty{display:none}
.rt-btns .btn{min-width:0;height:18px;padding:0 8px}
.rt-btns .btn:active{padding:1px 7px 0 9px}
.rt-foot .btn[hidden]{display:none}
#rt-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#rt-msg.wrap{white-space:normal}
.rt-plan{display:none;flex-direction:column;gap:6px;padding-top:2px}
#w-route.rt-open .rt-plan{display:flex}
#w-route.rt-open .rt-bar .rt-btns{display:none}
.rt-plan p{margin:0;line-height:15px}
.rt-plan a{color:#000}
.rt-foot{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.rt-err{margin-right:auto;color:#000;min-width:0;line-height:14px}
.rt-err b{font-weight:bold}
.st.due{font-weight:bold}

/* ---------- what this page can see ---------- */
#w-see{width:660px;height:340px;left:294px;top:180px}
#w-see col.e1{width:150px}
.see-head{display:flex;align-items:center;gap:10px;padding:6px 6px 8px 4px;flex:none}
.see-head img{flex:none}
.see-head p{margin:0;line-height:15px}
#w-see .lv td{white-space:normal;overflow-wrap:anywhere}
#w-see .lv td:first-child{white-space:nowrap}
#w-see .lv tr.hdr td{color:#404040}

/* ---------- the terminal ---------- */
#w-term{width:1000px;height:640px;left:200px;top:20px}
.tm-frame{flex:1;min-height:0;display:flex;flex-direction:column;container:tm / inline-size;padding-top:2px}
.tm{flex:1;min-height:0;display:grid;gap:4px;grid-template-columns:204px minmax(0,1fr) 252px;grid-template-rows:minmax(0,1fr) 158px;
  grid-template-areas:"left mid right" "left bottom bottom"}
.tm-left{grid-area:left;display:flex;flex-direction:column;gap:3px;min-height:0}
.tm-mid{grid-area:mid;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0}
.tm-right{grid-area:right;display:flex;flex-direction:column;gap:0;min-height:0;overflow:auto}
.tm-bottom{grid-area:bottom;display:flex;flex-direction:column;min-height:0;min-width:0}
.tm-cap{display:flex;align-items:center;justify-content:space-between;gap:6px;height:16px;padding:0 2px;flex:none}
.tm-cap b{font-weight:bold}
.tm-search .combo{height:22px}
.tm-list{list-style:none;margin:0;padding:2px;background:#fff;box-shadow:var(--sunken);overflow:auto;min-height:0}
#tm-results{flex:3}
#tm-watch{flex:2}
.tm-li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;padding:2px 4px 3px;cursor:default;line-height:14px}
.tm-li .s{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-li .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tm-li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#404040}
.tm-li .m{text-align:right;white-space:nowrap;color:#404040;font:11px "Courier New",monospace}
.tm-li .ok{display:inline-block;margin-left:4px;padding:0 3px;font:9px/12px var(--ui);color:#000;background:var(--xo);vertical-align:1px;font-weight:normal}
.tm-li.sel{background:var(--sel);color:var(--sel-t)}
.tm-li.sel .n,.tm-li.sel .m{color:#ddd}
.tm-li:focus-visible{outline:1px dotted #000;outline-offset:-1px}
.tm-li.sel:focus-visible{outline-color:#fff}
.tm-empty{padding:4px 5px;color:#404040;line-height:14px}
.up{color:#257a2a} .down{color:#b3261e}
.tm-li.sel .up,.tm-li.sel .down{color:inherit}

.tm-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:5px 8px 6px;background:#fff;box-shadow:var(--sunken);min-width:0}
.tm-tok{display:flex;align-items:baseline;gap:8px;min-width:0}
.tm-tok b{font:bold 15px/18px var(--ui-b);white-space:nowrap}
.tm-tok span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#404040}
.tm-px{display:flex;align-items:baseline;gap:8px;justify-content:flex-end;white-space:nowrap}
.tm-px b{font:bold 15px/18px var(--ui-b);font-variant-numeric:tabular-nums}
.tm-stats{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:2px 14px;color:#404040;min-width:0}
.tm-stats span{white-space:nowrap}
.tm-stats b{color:#000;font-weight:normal}
.tm-mint{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.tm-mint code{font:11px "Courier New",monospace;color:#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tm-tf{display:flex;align-items:center;gap:2px;flex:none;height:24px}
.tm-tf .btn{min-width:34px;height:21px;padding:0 6px}
.tm-tf .btn:active,.tm-tf .btn[aria-pressed="true"]{padding:1px 5px 0 7px}
.tm-tf .grow{flex:1}
.tm-tf .src{color:#404040;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-chartwrap{flex:1;min-height:0;position:relative;background:#fff;box-shadow:var(--sunken);padding:2px}
.tm-chart{position:absolute;inset:2px}
.tm-chartmsg{position:absolute;left:0;right:0;top:45%;margin:0;padding:0 8px;text-align:center;color:#404040;pointer-events:none;z-index:3}

.tm-right .group{margin:0 0 6px;padding:6px 8px 8px}
.tm-right .group legend{padding:0 3px}
.tm-wrow{display:flex;align-items:center;gap:6px;min-height:21px}
.tm-wrow + .tm-wrow{margin-top:4px}
.tm-wrow .k{flex:none;width:52px;color:#000}
.tm-wrow .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-wrow .field{flex:1;min-width:0}
.tm-wrow .btn{min-width:0;padding:0 8px}
.tm-wrow .btn:active{padding:1px 7px 0 9px}
.tm-note{margin:4px 0 0;color:#404040;line-height:14px}
.tm-note a{color:#000}
.tm-swap .tabs{margin:2px 0 0}
.tm-swap .tabpanel{padding:7px 6px 6px;gap:5px}
.tm-amt{display:flex;align-items:center;gap:4px}
.tm-amt .field{flex:1;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.tm-amt .u{flex:none;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-quick{display:flex;gap:3px}
.tm-quick .btn{flex:1;min-width:0;height:20px;padding:0 4px}
.tm-quick .btn:active{padding:1px 3px 0 5px}
.tm-slip{display:flex;align-items:center;gap:3px}
.tm-slip .k{flex:1}
.tm-slip .btn{min-width:0;height:20px;padding:0 6px}
.tm-slip .btn:active,.tm-slip .btn[aria-pressed="true"]{padding:1px 5px 0 7px}
.tm-slip .field{width:42px;height:20px;text-align:right;padding:2px 3px}
.tm-quote{background:#fff;box-shadow:var(--sunken);padding:3px 5px 4px;line-height:15px;min-height:68px}
.tm-quote div{display:flex;justify-content:space-between;gap:8px}
.tm-quote div span:last-child{text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tm-quote .warn{display:block;color:#b3261e;white-space:normal}
.tm-go{width:100%}
.tm-result{line-height:14px;min-height:14px;overflow-wrap:anywhere}
.tm-result a{color:#000}

.tm-bottom .lv{flex:1;min-height:0}
.tm-bottom .lv td{font-variant-numeric:tabular-nums}
.tm-bottom .lv td.num{text-align:right}
.tm-bottom .lv th.num button{text-align:right}
.tm-bottom .tabpanel{padding:4px}
#tm-pos col.p1{width:22%} #tm-log col.l1{width:64px} #tm-log col.l2{width:30%}
#tm-log td{white-space:normal}

#w-term .sb a{color:#000}
#w-term .sb .sbf.chart{flex:none}

/* medium: chart and the swap side by side, lists above the chart */
@container tm (max-width:900px){
  .tm{grid-template-columns:minmax(0,1fr) 244px;grid-template-rows:84px minmax(0,1fr) 104px;grid-template-areas:"left right" "mid right" "bottom bottom"}
  .tm-left{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto minmax(0,1fr);column-gap:6px}
  .tm-left .tm-search{grid-column:1 / -1}
  .tm-left .cap-r{grid-column:1;grid-row:2} .tm-left #tm-results{grid-column:1;grid-row:3}
  .tm-left .cap-w{grid-column:2;grid-row:2} .tm-left #tm-watch{grid-column:2;grid-row:3}
}
/* narrow: one column, the window body scrolls */
@container tm (max-width:560px){
  .tm{display:flex;flex-direction:column;gap:6px}
  .tm-frame{overflow:auto}
  .tm-left{display:flex;flex:none}
  #tm-results{flex:none;height:132px} #tm-watch{flex:none;height:86px}
  .tm-mid{flex:none}
  .tm-chartwrap{flex:none;height:280px}
  .tm-right{flex:none;overflow:visible}
  .tm-bottom{flex:none;height:220px}
}

@media (max-width:820px){
  #w-route.rt-open{width:100% !important}
  #w-route.rt-open .rt-tools{flex-wrap:wrap;height:auto;row-gap:4px;padding:4px}
  #w-route.rt-open .rt-tools .btn{margin-left:0}
  #w-route.rt-open .rt-landcol{display:table-cell}
  #w-route.rt-open .lv{height:auto;max-height:240px}
  #w-route .lv{height:auto}
  .rt-addr{min-width:104px;width:100%}
  #w-route.rt-open td,#w-route.rt-open th button{padding-left:3px;padding-right:3px}
  .tm-frame{flex:none;overflow:visible}
  .tm-chartwrap{height:280px}
  #w-see .lv{height:auto;overflow:visible;flex:none}
  #w-see col.e1{width:96px}
}