/* ==========================================================================
   terminal-ui.css — premium layout for the charting Terminal (pairs with terminal.js; overrides the older
   .term-* rules in styles.css). Reuses .sui-hero from strategies-ui.css. Remove the <link> to fall back.
   ========================================================================== */
#view-terminal{padding:0 22px 40px}
#view-terminal .term-hero{margin-top:var(--space-5);margin-bottom:14px;padding:22px 30px}
#view-terminal .term-hero h1{font-size:28px}
#view-terminal .term-hero p{max-width:70ch}

#view-terminal .term-desk{max-width:1400px;margin:0 auto;padding:0;border:1px solid var(--line);border-top:3px solid #b8892b;border-radius:16px;
  background:var(--panel);box-shadow:var(--sh-1);overflow:visible}
#view-terminal .term-top{position:relative;overflow:hidden;padding:14px 22px;border-bottom:1px solid var(--line);border-radius:13px 13px 0 0}
#view-terminal .term-top::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,#b8892b 34%,transparent) 1px,transparent 1.5px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%);mask-image:linear-gradient(to left,rgba(0,0,0,.9),transparent 45%)}
#view-terminal .term-title{position:relative;z-index:1;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;min-height:22px}
#view-terminal .term-src{margin-left:10px}

#view-terminal .term-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,max-content));gap:14px 26px;align-items:start;margin:0;padding:16px 22px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
#view-terminal .term-field{display:flex;flex-direction:column;gap:7px;min-width:0}
#view-terminal .term-field>label{font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
#view-terminal .term-field>label::before{content:"";width:3px;height:11px;border-radius:2px;background:#b8892b}
#view-terminal .term-field-search{min-width:260px}
#view-terminal .term-search{position:relative;min-width:0}
#view-terminal .term-search input{width:100%;background:var(--input);border:1px solid var(--line-strong);color:var(--ink);padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
#view-terminal .term-search input::placeholder{text-transform:none;font-weight:400;letter-spacing:0}
#view-terminal .term-sym-results{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);overflow:auto}
#view-terminal .term-sym-row{color:var(--ink);padding:9px 14px}
#view-terminal .term-sym-row:hover{background:var(--blue-soft)}

/* button groups */
#view-terminal .term-tf{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip);border:1px solid var(--line);width:max-content}
#view-terminal .term-inds,#view-terminal .term-draw{display:flex;flex-wrap:wrap;gap:6px}
#view-terminal .tfbtn{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px}
#view-terminal .tfbtn:hover{color:var(--ink)}
#view-terminal .tfbtn.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(15,27,45,.18),0 0 0 1px var(--line)}
#view-terminal .indbtn,#view-terminal .drawbtn,#view-terminal .term-marker-tag{background:var(--panel);border:1px solid var(--line-strong);color:var(--muted);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:650;transition:background-color .15s,border-color .15s,color .15s}
#view-terminal .indbtn:hover,#view-terminal .drawbtn:hover,#view-terminal .term-marker-tag:hover{border-color:var(--teal);color:var(--ink)}
#view-terminal .indbtn.on{background:var(--blue-soft);border-color:var(--teal);color:var(--teal-d)}
#view-terminal .term-marker-tag.on{background:color-mix(in srgb,#b8892b 16%,var(--panel));border-color:#b8892b;color:color-mix(in srgb,#b8892b 60%,var(--ink))}
#view-terminal .drawbtn.on{background:color-mix(in srgb,#b8892b 18%,var(--panel));border-color:#b8892b;color:var(--ink)}
:root[data-theme="dark"] #view-terminal .indbtn.on{color:var(--teal)}

/* chart frame */
#view-terminal .term-chart,#view-terminal .term-rsi-pane{margin:16px 22px 0;width:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);overflow:hidden}
#view-terminal .term-chart{height:520px}
#view-terminal .term-rsi-pane{height:140px;margin-top:10px}
#view-terminal .term-rsi-pane.hidden{display:none}
#view-terminal .term-note{margin:14px 22px 18px;font-size:12px;line-height:1.6;color:var(--muted)}

@media(max-width:900px){
  #view-terminal{padding:0 12px 32px}
  #view-terminal .term-toolbar{grid-template-columns:1fr;padding:14px 16px}
  #view-terminal .term-top{padding:12px 16px}
  #view-terminal .term-chart,#view-terminal .term-rsi-pane{margin-left:14px;margin-right:14px}
  #view-terminal .term-note{margin-left:14px;margin-right:14px}
}

/* BSE-only rows in the symbol search */
#view-terminal .term-sym-row .term-exch{font-style:normal;flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.07em;padding:2px 8px;border-radius:999px;align-self:center;
  background:rgba(184,137,43,.14);color:#8a6516;border:1px solid rgba(184,137,43,.35)}