/* Smart Income design layer: tokens, accessibility, mobile ergonomics. Loaded last on every page. Presentation only: no data, no logic. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --r-sm:10px;--r-md:14px;--r-lg:20px;
  --fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:clamp(26px,7vw,34px);
  --focus:#f2d18a;--up:#65c98a;--down:#f08a8a;
  --shadow-1:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root:not([data-theme="dark"]){--focus:#765215;--up:#1d7a48;--down:#b42f2f;--shadow-1:0 1px 2px rgba(35,30,20,.08),0 8px 22px rgba(35,30,20,.07)}

/* Keyboard and screen readers */
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:1000;padding:10px 16px;border-radius:var(--r-sm);background:var(--text);color:var(--bg);font-weight:800;font-size:var(--fs-sm);transform:translateY(-200%);transition:transform .15s var(--ease)}
.skip-link:focus{transform:none}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
:where(a,button,summary,select,input[type=checkbox],input[type=radio],[role=button]){-webkit-tap-highlight-color:transparent}
main{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Numbers read as numbers: prices, premiums, percentages align and do not jitter */
.ticker,.stat strong,.price-line b,.contract-line em,.positive,.negative,.mb-sum b,.mb-day-total,time,td,[dir=ltr]{font-variant-numeric:tabular-nums}
.positive{color:var(--up)}.negative{color:var(--down)}

/* Cards: one radius, one border, one elevation across the platform */
.opportunity-card,.hero-card,.stat,.panel-section,.overview-section,.pulse-card,.locked-state{border-radius:var(--r-lg)}
.opportunity-card{box-shadow:var(--shadow-1)}
.opportunity-card p,.lead{max-width:68ch}

/* Buttons: every target at least 44px, clear pressed state */
.button{min-height:44px;transition:transform .12s var(--ease),filter .12s var(--ease)}
.button:active{transform:scale(.98);filter:brightness(.95)}
.theme-toggle{min-width:44px;min-height:44px}

@media (max-width:800px){
  /* Header: the brand shrinks, controls never overlap it */
  .topbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:nowrap}
  .topbar .brand{flex:1 1 auto;min-width:0;overflow:hidden}
  .topbar .brand span{min-width:0;overflow:hidden}
  .topbar .brand b,.topbar .brand small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .brand small{font-size:10px;letter-spacing:.04em}
  .topbar .brand span{display:none}
  .topbar .top-links{flex:0 0 auto;gap:6px;margin:0}
  .topbar .top-links a{width:40px;height:40px}
  .topbar>.button{flex:0 0 auto;min-height:40px;padding-inline:12px;font-size:var(--fs-sm);white-space:nowrap}
  .topbar .mobile-account-link{display:none!important}

  /* Hero: shorter, the main action first and full width */
  .hero h1{font-size:var(--fs-xl);line-height:1.2}
  .hero-copy .lead{font-size:var(--fs-md)}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
  .hero-actions .button{width:100%;min-height:48px;justify-content:center;text-align:center}

  /* Bottom navigation: readable labels, 48px targets, icon above label */
  .mobile-nav{padding-top:6px}
  .mobile-nav a,.mobile-nav button{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.15}
  .mobile-nav.nav-six a,.mobile-nav.six-items a,.mobile-nav.six-items button{font-size:11px!important;font-weight:700}
  .mobile-nav span{font-size:18px;line-height:1}
  .mobile-nav .active{position:relative}
  .mobile-nav .active::after{content:"";position:absolute;inset-block-start:-6px;inset-inline:30%;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  :where(.opportunity-card,.hero-card){padding:var(--space-4)}
  .opportunity-meta span,.price-line span{font-size:var(--fs-xs)}
  .contract-line span,.update-note b{font-size:var(--fs-xs)}
  .risk-details summary,.opportunity-card summary{min-height:44px;display:flex;align-items:center;font-size:var(--fs-sm)}
}
@media (min-width:480px) and (max-width:800px){.topbar .brand span{display:block}}
@media (max-width:360px){.mobile-nav.nav-six a,.mobile-nav.six-items a{font-size:10px!important}}
@media (min-width:801px){.skip-link{inset-inline-start:24px}}

/* Header icon links keep a readable gold on every page and theme */
:root[data-theme="dark"] .topbar .top-links a{color:#e4bf70;background:#141311;border-color:#3a342b}
:root[data-theme="dark"] .top-links a{display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--gold2)}
.top-links svg{width:20px;height:20px;fill:currentColor}
/* The tour button floats above the bottom bar without covering page content */
.tour-launch{right:auto;left:12px;min-height:44px;padding:8px 14px;bottom:calc(88px + env(safe-area-inset-bottom))}
@media (max-width:800px){.statistics-hero{padding-inline:var(--space-4)!important}}

/* Compass cards (mobile): one column, direction + strength first, evidence as one quiet row. DOM and data untouched. */
@media (max-width:650px){
  .featured{grid-template-columns:1fr!important;gap:var(--space-3)}
  .featured .tile:first-child{grid-column:auto}
  .v3-card{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"top score" "status status" "layers layers" "axes axes" "change change" "acts acts" "foot foot";column-gap:var(--space-3);row-gap:var(--space-2);padding:var(--space-4)!important;border-top-width:5px}
  .v3-card .v3-ribbon{display:none}
  .v3-card .top{grid-area:top;align-self:center;flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .v3-card .ticker{font-size:var(--fs-xl);line-height:1.1}
  .v3-card .badge{font-size:var(--fs-sm);padding:2px 10px}
  .v3-card .v3-score{grid-area:score;margin:0;flex-direction:column;align-items:center;gap:0}
  .v3-card .v3-score strong{font-size:44px}
  .v3-card .v3-score span{font-size:var(--fs-xs)}
  .v3-card .v3-score small{display:none}
  .v3-card .reading-status{grid-area:status;margin:0}
  .v3-card>p{display:none}
  .v3-card .mini-layers{grid-area:layers;margin:0;gap:var(--space-2)}
  .v3-card .mini-layers span{font-size:var(--fs-xs);padding:4px 10px}
  .v3-card .mini-layers b{font-size:var(--fs-sm)}
  .v3-card .v2-card-axes{grid-area:axes;margin:0;gap:var(--space-2)}
  .v3-card .v2-card-axes span{font-size:var(--fs-xs);padding:var(--space-2)}
  .v3-card .daily-change{grid-area:change;font-size:var(--fs-xs)}
  .v3-card .v3-card-actions{grid-area:acts;margin:0}
  .v3-card .watch-button,.v3-card .linked-opportunity{min-height:44px;font-size:var(--fs-sm)}
  .v3-card footer{grid-area:foot;display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:var(--fs-sm)}
  .v3-card .card-strength{font-size:var(--fs-md)}
  .v3-card:after{display:none}
  dialog#readingDialog>button{float:none;display:block;margin:12px auto -56px 12px;width:44px;height:44px}
}

/* Home: "حلل سهمك" quick-analysis entry (prominent search box, above the hero) */
.quick-analyze{display:grid;gap:14px;margin:0 0 20px;padding:20px;border:1px solid var(--gold,#d8ad55);border-radius:22px;background:var(--panel,#fff);box-shadow:var(--shadow-1)}
.quick-analyze small{color:var(--gold,#9b7028);font-weight:800;letter-spacing:.04em}.quick-analyze h2{margin:2px 0 6px;font-size:26px}.quick-analyze p{margin:0;color:var(--muted,#777);font-size:14px}
.qa-form{display:flex;gap:8px}.qa-form input{flex:1;min-width:0;min-height:52px;padding:0 16px;border:1px solid var(--line,#ddd);border-radius:14px;background:var(--panel2,#f3f3f3);color:var(--text,#111);font-size:18px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;direction:ltr;text-align:left}
.qa-form .button{min-height:52px;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(min-width:720px){.quick-analyze{grid-template-columns:1.2fr 1fr;align-items:center}}
.quick-analyze>*,.qa-form input{min-width:0}

/* the momentum page is the core of the platform (owner 2026-10-21): the home card stands out from the other quick cards */
.quick-analyze.featured{border-width:2px;box-shadow:0 12px 36px rgba(192,154,88,.28)}
.quick-analyze.featured h2{font-size:1.9rem}