/* Veduta for the web: Veduta Lite's styles (/app/app.css, same tokens, same
   rules) laid out for a computer.
   - from 1100 px: the sections in a sidebar on the left, the watchlist and
     the stock side by side to its right
   - from 1380 px: the stock's facts and headlines in a column beside it
   - below 1100 px it falls back to Lite's bar on top, and below 700 px to
     the tabs at the bottom, with five sections instead of four
   No shadows, no glows, no motion on hover. */

.side-foot { display: none; }
kbd { font: 500 12px/1 var(--f-mono); padding: 2px 5px; border: 1px solid var(--rule); border-radius: 2px;
      color: var(--ink-2); background: var(--sheet); }

/* the current section without Lite's sliding line */
@media (min-width: 700px) and (max-width: 1099px) {
  .tabs a[aria-current="page"] { border-bottom-color: var(--ink); }
}
/* 3.0.3 (review): beside the mark, "for the web" would wrap onto two lines
   in a bar this narrow; the name alone is shown */
@media (min-width: 700px) and (max-width: 799px) {
  .brand span { display: none; }
}
@media (max-width: 699px) {
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabs a { font-size: 13px; }
  .tabs a[aria-current="page"] { border-top-color: var(--ink); }
}

@media (min-width: 1100px) {
  :root { --side: 216px; --bar-h: 0px; }
  .bar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--side);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px;
    padding: 22px 14px 18px max(16px, env(safe-area-inset-left));
    border-bottom: 0; border-right: 1px solid var(--rule); overflow-y: auto; min-height: 0;
  }
  .brand { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 5px; min-height: 0; padding-left: 10px; }
  .brand span { grid-column: 2; }
  .tabs { flex-direction: column; gap: 2px; }
  .tabs a { justify-content: flex-start; min-height: 40px; padding: 0 10px; border-bottom: 0; border-radius: var(--r); }
  .tabs a[aria-current="page"] { background: var(--band-wash); color: var(--ink); font-weight: 600; }
  .side-foot { display: grid; gap: 4px; margin-top: auto; padding-left: 10px; font-size: 13px; color: var(--ink-3); }
  .side-foot a { color: var(--ink-2); }
  .side-keys { padding-bottom: 6px; }
  .main, .foot { margin-left: var(--side); }
  .main { max-width: none; padding-left: 28px; padding-right: 28px; }
  .foot { max-width: none; padding-left: 28px; }
  body.v-watch .split, body.v-stock .split { grid-template-columns: 320px minmax(0, 1fr); }
  body.v-watch .list, body.v-stock .list { top: 0; max-height: 100vh; max-height: 100dvh; }
  .v-other .detail, .v-welcome .detail { max-width: 1100px; }
  .toast { left: calc(50% + var(--side) / 2); }
}

/* ── a stock: facts and headlines beside it on a wide screen (the sections'
   own styles moved to /app/app.css in 3.0.3, for Veduta Lite too) ──────── */
@media (min-width: 1380px) {
  .stock { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 32px; align-items: start; }
  .stock > * { grid-column: 1; }
  .stock > .s-head { grid-column: 1 / -1; }
  .stock > .s-aside { grid-column: 2; grid-row: 2 / span 4; border-top: 1px solid var(--ink); padding-top: 0;
                      position: sticky; top: 16px; }
}

/* the portfolio's styles moved to /app/app.css in 3.0.3, for Veduta Lite too */