/* Member app (AppLayout + PortfolioTodayView). Phone first; two columns from 960px.
   Uses the tokens and resets from public.css (.ss-public) and adds ss-app classes. */

.ss-app { min-height: 100vh; }

.ss-app__shell { max-width: 1120px; margin: 0 auto; padding: 16px 16px 108px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Top bar ---------- */
.ss-app__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-app__title { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.ss-app__date { font-size: 13px; font-weight: 600; color: var(--ss-muted); }
.ss-app__h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ss-app__topnav { display: none; }
.ss-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ss-ink); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; text-decoration: none; }

/* ---------- Grid ---------- */
.ss-app__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* ---------- Portfolio value ---------- */
.ss-worth { background: var(--ss-ink); color: #FFFFFF; border-radius: var(--ss-radius); padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.ss-public .ss-worth__label { font-size: 14px; font-weight: 700; color: #AEB8C6; }
.ss-worth__amount { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.ss-worth__gain { font-size: 15px; font-weight: 700; }
.ss-worth__gain.is-up { color: #5FD3A2; }
.ss-worth__gain.is-down { color: #F6C7A6; }
.ss-public .ss-worth__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #24344D; }
.ss-worth__facts dt { font-size: 12px; font-weight: 600; color: #AEB8C6; }
.ss-worth__facts dd { font-size: 15px; font-weight: 800; }
.ss-worth__sub { display: block; font-size: 12px; font-weight: 600; color: #AEB8C6; }

/* ---------- Cards ---------- */
.ss-card { background: var(--ss-surface); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ss-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ss-card__title { font-size: 16px; font-weight: 800; }

/* ---------- Trades and holdings ---------- */
.ss-trades, .ss-holdings { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ss-trades__row, .ss-holdings__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 44px; border-top: 1px solid var(--ss-track); }
.ss-trades > li:first-child, .ss-holdings > li:first-child .ss-holdings__row { border-top: 0; padding-top: 4px; }
.ss-holdings__row { color: var(--ss-ink) !important; text-decoration: none; }
.ss-side { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.ss-side--buy { background: var(--ss-green-soft); color: #0B5E41; }
.ss-side--sell { background: #FDECE1; color: #9A3412; }
.ss-trades__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-trades__symbol { font-size: 17px; font-weight: 800; }
.ss-trades__company { font-size: 13px; color: var(--ss-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-trades__qty { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 15px; }
.ss-up { font-size: 13px; font-weight: 700; color: var(--ss-green); }
.ss-down { font-size: 13px; font-weight: 700; color: #9A3412; }

/* ---------- Market model ---------- */
.ss-mood { font-size: 22px; font-weight: 800; }
.ss-mood--calm { color: var(--ss-green); }
.ss-mood--neutral { color: var(--ss-ink); }
.ss-mood--stressed { color: #9A3412; }
.ss-mood--unknown { color: var(--ss-muted); font-size: 18px; }
.ss-gauge { position: relative; height: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ss-gauge__seg--calm { background: #BFE3D1; border-radius: 999px 0 0 999px; }
.ss-gauge__seg--neutral { background: #E3E7EB; }
.ss-gauge__seg--stressed { background: #F2D3BD; border-radius: 0 999px 999px 0; }
.ss-gauge__marker { position: absolute; top: -5px; width: 6px; height: 20px; border-radius: 3px; background: var(--ss-ink); box-shadow: 0 0 0 2px #FFFFFF; transform: translateX(-50%); }
.ss-gauge__labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ss-muted); }

/* ---------- Plan ---------- */
.ss-plan__price { font-size: 16px; font-weight: 600; color: var(--ss-muted); }
.ss-plan__price span { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ss-ink); }
.ss-plan__note { background: var(--ss-green-soft); border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.5; }

.ss-app__note { font-size: 13px; line-height: 1.5; color: var(--ss-muted); }

/* ---------- Bottom tab bar (phones) ---------- */
.ss-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--ss-surface); border-top: 1px solid var(--ss-line); }
.ss-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: 12px; font-weight: 700; color: var(--ss-muted) !important; text-decoration: none; }
.ss-tabbar__item[aria-current="page"] { color: var(--ss-ink) !important; font-weight: 800; }
.ss-tabbar__badge { position: absolute; top: 2px; left: 54%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #C2410C; color: #FFFFFF; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ss-tabbar__item:focus-visible, .ss-app__topnav a:focus-visible, .ss-holdings__row:focus-visible { outline: 3px solid var(--ss-blue); outline-offset: 2px; }

/* ---------- Desktop ---------- */
@media (min-width: 960px) {
    .ss-app__shell { padding: 24px 24px 48px; gap: 20px; }
    .ss-app__h1 { font-size: 30px; }
    .ss-app__topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
    .ss-app__topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--ss-ink-2) !important; text-decoration: none; border-radius: 10px; }
    .ss-app__topnav a[aria-current="page"] { color: var(--ss-ink) !important; font-weight: 800; background: var(--ss-surface); }
    .ss-tabbar { display: none; }
    .ss-app__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas:
            "worth market"
            "trades holdings"
            "plan holdings";
        align-items: start;
        gap: 20px;
    }
    .ss-app__area-worth { grid-area: worth; }
    .ss-app__area-market { grid-area: market; }
    .ss-app__area-trades { grid-area: trades; }
    .ss-app__area-holdings { grid-area: holdings; }
    .ss-app__area-plan { grid-area: plan; }
    .ss-worth { padding: 24px; }
    .ss-worth__amount { font-size: 44px; }
}