/*
 * Economy: the Markets terminal (css/markets.css), with what only Economy has. Its own tokens only (css/app.css): the
 * measures take the Market's inks (gross in ink, coins in the Sell colour, NPC potential in the Buy colour), an
 * assumption the caution ink, a comparison the accent. No token is defined here.
 */

/* Independent series toggles keep each enabled measure's chart colour. */
#measure button[aria-pressed="true"] { background:var(--surface); box-shadow:var(--control-thumb-shadow); font-weight:var(--weight-strong); }
#measure button[aria-pressed="true"] :is(.side-name,.side-value) { color:var(--ink); }
#measure button[data-measure="coins"][aria-pressed="true"] :is(.side-name,.side-value) { color:var(--sell); }
#measure button[data-measure="npc"][aria-pressed="true"] :is(.side-name,.side-value) { color:var(--buy); }
#measure #priceToggle[aria-pressed="true"] :is(.side-name,.side-value) { color:var(--average); }
#measure button:disabled { opacity:var(--opacity-disabled); cursor:default; }
.eco-chart-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); }
#measure { flex-wrap:wrap; }

/* Ranges, then the interval after a hairline, on the foot of the chart. */
.eco-bar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); min-width:0; }
.eco-interval { margin-left:0; padding-left:var(--space-3); border-left:var(--rule) solid var(--line); }

/* Keys: dashed for a comparison or an assumption; the TC price thin, in the daily-average grey. */
.eco-key-dashed { border-top-style:dashed; }
.eco-key-measure { color:var(--ink); }
.key.eco-key-price { border-top:var(--rule) solid var(--average); }
.key.eco-key-assumption { border-top:var(--rule-strong) dashed var(--caution); }

/* Panels: the head may hold a control; a lead line, small headings and notes. */
.eco-panel-head { justify-content:space-between; }
.eco-month { min-height:calc(var(--control-height) - var(--space-1)); }
/* The month calendar: a button with the month, opening a year of twelve months under it (TradingView's date picker). */
.eco-month-pick { position:relative; }
.tv-terminal .eco-month { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 8px; border:1px solid var(--tv-border); border-radius:6px; font:500 13px var(--tv-font); white-space:nowrap; }
.tv-terminal .eco-month svg { width:18px; height:18px; }
.eco-calendar { position:absolute; z-index:30; top:calc(100% + 4px); right:0; width:232px; padding:8px; border-radius:8px; background:var(--tv-popup, var(--surface)); box-shadow:var(--tv-popup-shadow, var(--control-thumb-shadow)); color:var(--tv-text, var(--ink)); }
.eco-calendar[hidden] { display:none; }
.eco-calendar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font:600 14px var(--tv-font, inherit); }
.eco-calendar-head .tv-icon:disabled { opacity:.3; }
.eco-calendar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.eco-calendar-grid button { position:relative; height:36px; border:0; border-radius:6px; background:none; color:inherit; font:500 13px var(--tv-font, inherit); cursor:pointer; }
.eco-calendar-grid button:hover:not(:disabled) { background:var(--tv-btn-hover, var(--line-faint)); }
.eco-calendar-grid button[aria-selected="true"] { background:var(--tv-brand, var(--accent)); color:var(--tv-white); }
.eco-calendar-grid button:disabled { color:var(--tv-text-3, var(--muted)); opacity:.45; cursor:default; }
.eco-calendar-grid button:focus-visible { outline:2px solid var(--tv-brand, var(--accent)); outline-offset:1px; }
.eco-calendar-dot { position:absolute; top:6px; right:8px; width:5px; height:5px; border-radius:50%; background:var(--tv-orange-500); }
.eco-panel-lead { margin-top:0; color:var(--muted); }
.eco-panel-heading { margin:var(--space-4) 0 var(--space-2); font-size:var(--step-n2); font-weight:var(--weight-strong); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.eco-panel-note { color:var(--muted); font-size:var(--step-n2); }
.panel-body > .eco-panel-note:first-child { margin-top:0; }
.eco-segmented { display:flex; flex-wrap:wrap; }
.eco-toggle[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
.eco-prose p:first-child { margin-top:0; }
.eco-data summary { cursor:pointer; color:var(--accent); }
.eco-data-frame { max-width:100%; max-height:calc(var(--space-8) * 5); overflow:auto; margin-block:var(--space-2); isolation:isolate; }
.eco-data-frame :is(th,td):first-child { position:sticky; left:0; background:var(--canvas); }
.eco-data-frame .current td:first-child { background:var(--accent-soft); }
.eco-data-frame th { position:sticky; top:0; background:var(--canvas); z-index:var(--layer-sticky); }
.eco-data-frame th:first-child { z-index:var(--layer-header); }
#loadFeedback p { margin:0 0 var(--space-3); }
#loadFeedback { padding:var(--space-4); text-align:center; }
#loadFeedback.has-view { inset:auto 0 0; background:var(--surface); padding:var(--space-3); border-top:var(--rule) solid var(--line); }
#loadFeedback.has-view > div { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-3); }
#loadFeedback.has-view p { margin:0; }
.eco-chart-unavailable { display:grid; place-items:center; padding:var(--space-4); color:var(--muted); text-align:center; font-size:var(--step-n1); }

/* A month's creatures: name and gross potential on one line, what each kill yields and the share under them. */
.eco-list { margin:var(--space-3) 0 0; padding:0; list-style:none; font-variant-numeric:lining-nums tabular-nums; }
.eco-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 var(--space-2); padding:var(--space-1) 0; border-bottom:var(--rule) solid var(--line-faint); }
.eco-list-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eco-list-value { font-weight:var(--weight-strong); text-align:right; }
.eco-list-sub,.eco-list-share { color:var(--muted); font-size:var(--step-n2); }
.eco-list-share { text-align:right; }
.eco-list-other .eco-list-name { color:var(--muted); }

/* A narrow chart keeps the measure names and leaves their values to the readout and the details. */
@container chart (max-width:599.98px) {
  /* On a phone the status occupies its own row, so two price axes cannot squeeze it over the plot. */
  #chartPanel .chart-area { display:flex; flex-direction:column; }
  #chartPanel .chart { position:relative; inset:auto; flex:1; min-height:0; }
  #chartPanel .chart-head { position:relative; order:-1; left:auto; top:auto; max-width:100%; padding-bottom:var(--space-2); }
  #measure .side-value { display:none; }
  /* The readout keeps the period, the measure and kills; the rest is in the details and the help. */
  .legend .eco-extra { display:none; }
  .legend .eco-selected { display:revert; }
  .legend .label.eco-selected { display:grid; }
  .legend .rest.eco-selected { display:flex; }
}
@container chart (max-width:471.98px) {
  .eco-interval { padding-left:var(--space-2); }
  /* Gold figures run to ten digits: the readout keeps the change in percent only. */
  .chart-head .eco-delta { display:none; }
  #chartPanel .chart-legend { grid-template-columns:minmax(0,1fr) auto; width:100%; }
  #chartPanel .legend .label { white-space:normal; }
  #chartPanel .legend .note { grid-column:1 / -1; }
  #chartPanel .legend .rest { grid-column:1 / -1; flex-wrap:wrap; white-space:normal; }
  #chartPanel .legend .rest:empty { display:none; }
}
@media (max-width:359.98px) {
  #worldsPanel table.watch :is(th,td) { padding-inline:var(--space-1); }
}
@container chart (max-width:319.98px) {
  .eco-interval { padding-left:0; border-left:0; }
}
.eco-calendar-head [data-year]:first-child svg { transform:rotate(90deg); }
.eco-calendar-head [data-year]:last-child svg { transform:rotate(-90deg); }