/* =====================================================================
   SR Markets Desk — shell.css
   Ticker tape, nav rail, header, palette, toasts, tooltip, help overlay,
   PIN modal, confirm dialog. Layout of the app shell only — views live in
   markets.css / views.css.
   ===================================================================== */

/* ---------------- ticker tape (always-on chyron) ---------------- */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 100;
  background: #000; color: #fff; overflow: hidden; display: flex; align-items: center;
  border-bottom: 2px solid var(--gold);
}
.ticker-track { display: inline-flex; white-space: nowrap; will-change: transform;
  animation: scroll 90s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 16px;
  font-size: 11.5px; border-right: 1px solid #222; font-family: var(--mono); cursor: pointer; }
.tk:hover b { color: #fff; }
.tk b { color: #d9d9d9; font-weight: 700; letter-spacing: .4px; }
.tk .tk-px { color: #fff; }
.tk em { font-style: normal; font-weight: 600; }
.tk em.up { color: #25d366; } .tk em.down { color: #ff5a5f; } .tk em.flat { color: #999; }
.tk.tk-empty { color: #777; cursor: default; }

/* ---------------- app shell ---------------- */
.shell { padding-top: 32px; min-height: 100vh; }
.sidebar {
  position: fixed; top: 32px; bottom: 0; left: 0; width: 212px; z-index: 60;
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 12px 0 10px; overflow-y: auto;
}

/* search trigger */
.searchbtn {
  margin: 0 12px 8px; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 10px; cursor: pointer; color: var(--muted); font: 500 12px/1 var(--sans);
  text-align: left;
}
.searchbtn .ico { font-size: 14px; line-height: 1; color: var(--faint); }
.searchbtn kbd { margin-left: auto; }
.searchbtn:hover { border-color: var(--gold); color: var(--text); }

nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 1px; }
nav a {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 5px;
  font-size: 12.5px; color: var(--muted); font-weight: 500;
  border-left: 2px solid transparent; white-space: nowrap;
}
nav a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
nav a:hover { background: var(--panel2); color: var(--text); }
nav a.active { color: var(--text); font-weight: 700; background: var(--panel2);
  border-left-color: var(--gold); }
nav a.active .dot { background: var(--gold); }
nav a .cnt { margin-left: auto; font: 700 9.5px/1 var(--mono); color: var(--faint);
  background: var(--panel2); border-radius: 8px; padding: 2px 6px; }
nav a.active .cnt { color: var(--gold); }
/* section anchors shown under "Markets" while that route is active */
nav .sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 12px;
  padding-left: 8px; border-left: 1px solid var(--hairline); }
nav .sub a { font-size: 11.5px; padding: 5px 9px; }
nav .sub a .dot { width: 5px; height: 5px; }
nav .sub a.active { background: transparent; border-left-color: transparent; color: var(--text); }
nav .sub a.active .dot { background: var(--gold); box-shadow: 0 0 0 2px rgba(154,85,0,.18); }

.sidefoot { margin-top: auto; padding: 12px 18px 4px; border-top: 1px solid var(--hairline);
  color: var(--muted); font-size: 11px; }
.clockrow { font-family: var(--mono); font-size: 11px; margin-bottom: 3px; }
.clockrow b { color: var(--text); }
.theme-toggle {
  margin-top: 10px; width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* market-regime chip (filled by main.js from /api/regime) */
.regime { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font: 700 9.5px/1.3 var(--mono); letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 5px 8px;
  cursor: help; }
.regime .rg-k { color: var(--faint); flex: none; }
.regime .rg-v { white-space: normal; }
.regime.on { color: var(--green); border-color: var(--green); }
.regime.off { color: var(--red); border-color: var(--red); }
.regime.neutral { color: var(--gold); border-color: var(--gold); }
.regime.loading .rg-v { opacity: .5; }

/* ---------------- header ---------------- */
.topbar {
  position: sticky; top: 32px; z-index: 50; margin-left: 212px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--topbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); margin-bottom: 6px; padding: 10px 26px;
}
.brandmark { display: flex; align-items: center; gap: 11px; }
.brandmark:hover { color: inherit; }
.logo { width: 34px; height: 34px; flex: none; border-radius: 5px; }
.brand { font-weight: 800; font-size: 13px; letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; }
.brand small { display: block; color: var(--gold); font-family: var(--mono);
  font-size: 8px; letter-spacing: 2px; font-weight: 400; margin-top: 3px; }
.live { font-size: 9.5px; font-weight: 700; color: var(--green); letter-spacing: 1.5px;
  border: 1px solid var(--green); border-radius: 10px; padding: 2px 9px; }
.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 5px; animation: pulse 1.6s infinite; vertical-align: 1px; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
.updated { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.updated b { color: var(--text); }
.tf { margin-left: auto; display: flex; gap: 2px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px; }
.tf button { background: none; border: 0; color: var(--muted);
  font: 600 11px/1 var(--mono); padding: 5px 9px; border-radius: 3px;
  cursor: pointer; letter-spacing: .3px; }
.tf button:hover { color: var(--text); }
.tf button.active { background: var(--gold); color: #fff; }

/* ---------------- main canvas ---------------- */
main#view { margin-left: 212px; display: block; }

/* ---------------- command palette ---------------- */
#palette { position: fixed; inset: 0; z-index: 300; }
.pal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pal-box { position: relative; margin: 9vh auto 0; width: min(640px, calc(100% - 32px));
  max-height: 74vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.pal-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline); }
.pal-input .ico { color: var(--faint); font-size: 16px; }
.pal-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text);
  font: 15px/1.3 var(--mono); -webkit-appearance: none; }
.pal-input input::placeholder { color: var(--faint); }
.pal-input input::-webkit-search-cancel-button, .pal-input input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.pal-input .esc { flex: none; }
.pal-input .close { display: none; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.pal-list { overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
.pal-group { font: 700 9.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); padding: 10px 10px 5px; }
.pal-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px;
  cursor: pointer; color: var(--text); min-height: 36px; }
.pal-row:hover { background: var(--hover); }
.pal-row.sel { background: var(--panel2); box-shadow: inset 2px 0 0 var(--gold); }
.pal-row .sym { font: 700 12.5px/1 var(--mono); min-width: 68px; letter-spacing: .3px; }
.pal-row .nm { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-row .badge { flex: none; font: 700 9px/1 var(--mono); letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; color: var(--muted); }
.pal-row .badge.stock, .pal-row .badge.etf { color: var(--green); border-color: var(--green); }
.pal-row .badge.crypto { color: var(--gold); border-color: var(--gold); }
.pal-row .badge.forex, .pal-row .badge.commodity, .pal-row .badge.index, .pal-row .badge.bond, .pal-row .badge.futures, .pal-row .badge.fund { color: var(--muted); }
.pal-row .ex { flex: none; font: 10.5px/1 var(--mono); color: var(--faint); min-width: 52px; text-align: right; }
.pal-row .sym .exs { display: block; font: 9.5px/1.2 var(--mono); font-weight: 400; color: var(--faint); letter-spacing: .02em; margin-top: 2px; }
.pal-row .act-ico { width: 20px; text-align: center; color: var(--gold); font-weight: 700; flex: none; }
.pal-row .lbl { flex: 1; font-size: 12.5px; }
.pal-row kbd { flex: none; }
.pal-row.note { color: var(--faint); font-size: 12px; cursor: default; }
.pal-row.note:hover { background: none; }
.pal-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 7px 14px; border-top: 1px solid var(--hairline);
  color: var(--faint); font-size: 10.5px; }
.pal-foot span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------------- toasts ---------------- */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 400; display: flex; flex-direction: column;
  gap: 8px; width: min(380px, calc(100% - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-left: 3px solid var(--muted); border-radius: 6px; padding: 10px 12px;
  box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.4; animation: toastIn .18s ease-out; }
.toast.ok { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--gold); }
.toast.err { border-left-color: var(--red); }
.toast .msg { flex: 1; min-width: 0; word-break: break-word; }
.toast .act { flex: none; background: none; border: 1px solid var(--gold); color: var(--gold);
  border-radius: 4px; padding: 4px 9px; cursor: pointer; font: 700 10.5px/1 var(--sans); letter-spacing: .3px; }
.toast .act:hover { background: var(--gold); color: #fff; }
.toast .x { flex: none; background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.toast .x:hover { color: var(--text); }
.toast.leaving { animation: toastOut .18s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }

/* ---------------- tooltip (single positioned element) ---------------- */
#tooltip { position: fixed; z-index: 500; left: 0; top: 0; max-width: 280px; pointer-events: none;
  background: var(--text); color: var(--bg); font: 11px/1.45 var(--sans);
  padding: 6px 9px; border-radius: 4px; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .1s; white-space: pre-line; }
#tooltip.show { opacity: 1; }
[data-tip] { cursor: help; }

/* ---------------- overlays: help, PIN, confirm ---------------- */
.overlay { position: fixed; inset: 0; z-index: 350; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay-box { background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.35); width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px;
  border-bottom: 1px solid var(--hairline); }
.overlay-head h3 { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.overlay-x { background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  width: 28px; height: 28px; font-size: 15px; cursor: pointer; color: var(--muted); line-height: 1; }
.overlay-x:hover { color: var(--gold); border-color: var(--gold); }
.overlay-body { padding: 14px 18px 18px; }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.help-h { grid-column: 1 / -1; font: 700 9.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); margin: 12px 0 6px; }
.help-h:first-child { margin-top: 0; }
.help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0;
  border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.help-row .keys { display: inline-flex; gap: 4px; flex: none; }
.help-row .keys kbd { font-size: 10.5px; padding: 3px 6px; }

.pin-box { width: min(340px, 100%); text-align: center; }
.pin-box .overlay-body { padding: 18px 22px 22px; }
.pin-box p { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
.pin-box input { width: 100%; text-align: center; font: 700 26px/1.2 var(--mono); letter-spacing: 12px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 6px; outline: none; -webkit-appearance: none; }
.pin-box input:focus { border-color: var(--gold); }
.pin-box .pin-err { color: var(--red); font-size: 11.5px; min-height: 16px; margin-top: 8px; }
.btnrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 14px; cursor: pointer; font: 600 11.5px/1 var(--sans); letter-spacing: .3px; }
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.primary:hover { color: #fff; filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.confirm-box { width: min(420px, 100%); }
.confirm-box .overlay-body p { font-size: 13.5px; line-height: 1.5; }

/* ---------------- responsive: tablet & phone ---------------- */
@media (max-width: 920px) {
  .shell { display: flex; flex-direction: column; }
  /* the rail dissolves: nav + sidefoot become direct children of .shell so the
     sticky pill nav's containing block is the whole page (it stays pinned under
     the ticker while scrolling) instead of the short sidebar box */
  .sidebar { display: contents; }
  .topbar { order: 1; margin-left: 0; position: static; margin-bottom: 0; }
  nav { order: 2; }
  .sidefoot { order: 3; }
  main#view { order: 4; margin-left: 0; }
  .clockrow { white-space: nowrap; }
  .searchbtn { display: none; }
  /* single-row, horizontally-scrolling pill nav, sticky under the ticker */
  nav { flex-direction: row; flex-wrap: nowrap; gap: 6px; padding: 8px 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    position: sticky; top: 32px; z-index: 40; background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border); }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border);
    border-radius: 999px; padding: 7px 13px; }
  nav a .dot { display: none; }
  nav a.active { background: var(--gold); color: #fff; border-color: var(--gold); }
  nav a.active .cnt { color: #fff; background: rgba(255,255,255,.2); }
  nav .sub { display: contents; }
  nav .sub a { font-size: 12px; padding: 7px 13px; }
  nav .sub a.active { background: var(--gold); color: #fff; }
  .sidefoot { margin-top: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
    padding: 8px 14px; border-top: 0; border-bottom: 1px solid var(--border); background: var(--sidebar-bg); }
  .clockrow { margin: 0; }
  .regime { margin: 0; }
  .regime .rg-v { white-space: nowrap; }
  .sidefoot .theme-toggle { width: auto; margin: 0 0 0 auto; padding: 6px 11px; }
}

@media (max-width: 640px) {
  .topbar { padding: 8px 14px; gap: 8px; }
  .logo { width: 30px; height: 30px; }
  .brand { font-size: 12px; }
  .brand small { font-size: 7.5px; }
  .live { display: none; }
  .updated { margin-left: auto; font-size: 10.5px; }
  .tf { margin-left: 0; width: 100%; overflow-x: auto; }
  /* phone: one compact utility row — clocks · regime · theme — instead of a 100px stack */
  .sidefoot { flex-wrap: nowrap; gap: 8px; padding: 6px 12px; }
  .clockrow { font-size: 10px; }
  .clockrow + .clockrow { display: none; }              /* only Dubai time on phones */
  .regime { flex: 1 1 auto; min-width: 0; font-size: 10px; padding: 4px 8px; }
  .regime .rg-v { overflow: hidden; text-overflow: ellipsis; }
  .sidefoot .theme-toggle { font-size: 11px; flex: none; padding: 5px 9px; }
  .sidefoot .theme-toggle span { display: none; }       /* icon only */
  /* palette becomes a full-screen sheet */
  .pal-box { margin: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0;
    border-top: 3px solid var(--gold); }
  .pal-input { padding: 12px 14px; }
  .pal-input .esc { display: none; }
  .pal-input .close { display: block; }
  .pal-list { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .pal-foot { display: none; }
  .pal-row .ex { display: none; }
  #toasts { right: 50%; transform: translateX(50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .help-grid { grid-template-columns: 1fr; }
}

/* back-to-top */
.totop { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font: 700 16px/1 var(--mono); box-shadow: var(--shadow); cursor: pointer; }
.totop:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) { .totop { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* phone search button in the header (the rail's search box is hidden ≤920 and "/" needs a keyboard) */
.searchbtn-m { display: none; }
@media (max-width: 920px) {
  .searchbtn-m { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
    background: var(--panel); border: 1px solid var(--gold); color: var(--gold); border-radius: 999px;
    padding: 6px 12px; font: 700 11px/1 var(--sans); letter-spacing: .4px; text-transform: uppercase; cursor: pointer; }
  .searchbtn-m .ico { font-size: 14px; line-height: 1; }
}
@media (max-width: 640px) {
  .updated { margin-left: auto; }
  .searchbtn-m { padding: 6px 10px; }
}