/* =============================================================================
   PORTAL HOME v2 — "one glance for everything"
   Cellar-web calm + Connect motion. Layered on top of styles.css; overrides
   the home-only classes (.p-hero/.p-stats-band/.p-briefing/.p-apps/.p-featured/
   .p-feed) so dashboard-wire.js and the inline app-filter keep working untouched.
   ========================================================================== */
.p-stage.h2 { max-width: 1180px; padding: 28px 40px 110px; }
.h2 .h2-cap, .h2 .p-section-cap, .h2 .p-briefing-cap {
  font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0;
}
.h2 .h2-cap::before, .h2 .p-section-cap::before { content:""; display:inline-block; width: 18px; height: 1px; background: var(--gold); opacity:.6; vertical-align: middle; margin-right: 10px; }
@keyframes h2rise { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform:none;} }
.h2 > * { animation: h2rise .8s cubic-bezier(.16,1,.3,1) both; }
.h2 > *:nth-child(1) { animation-delay: .05s } .h2 > *:nth-child(2) { animation-delay: .15s } .h2 > *:nth-child(3) { animation-delay: .25s }
.h2 > *:nth-child(4) { animation-delay: .35s } .h2 > *:nth-child(5) { animation-delay: .45s } .h2 > *:nth-child(6) { animation-delay: .55s }

/* ---- greeting ---- */
.h2 .h2-hero { padding: 26px 0 8px; }
.h2 .h2-eye { display:flex; align-items:center; gap: 12px; font: 600 10.5px/1 'Inter'; letter-spacing:.18em; text-transform:uppercase; color: var(--text-dim); }
.h2 .h2-h1 { margin: 22px 0 10px; font: 400 58px/1.02 'Crimson Pro', serif; letter-spacing: -0.03em; color: var(--text); text-transform: none; }
.h2 .h2-h1 #greetWord, .h2 .h2-h1 #userFirstName { text-transform: none; font: inherit; letter-spacing: inherit; }
.h2 .h2-comma { font-size: 34px; margin-left: 2px; vertical-align: 6px; }
.h2 .h2-sub { margin: 0; font: 400 20px/1.5 'Crimson Pro', serif; color: var(--text-muted); max-width: 64ch; }
.h2 .h2-cap-line { margin-top: 10px; font: 500 12.5px/1 'Inter'; color: var(--text-dim); }
.h2 .h2-cap-line em { color: var(--accent); font-style: normal; font-weight: 500; }
@media (max-width: 720px) { .h2 .h2-h1 { font-size: 40px; } }

/* ---- SEVRIC brief ---- */
.h2 .h2-brief { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin: 26px 0 0; padding: 22px 26px 22px 22px;
  border: 1px solid var(--accent-line); border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--bg-elev);
  box-shadow: 0 18px 50px -30px rgba(46,86,148,.35); }
.h2 .h2-brief[hidden] { display: none; }
.h2 .h2-brief-mark { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: #fff; display:grid; place-items:center; }
.h2 .h2-brief-mark svg { width: 24px; height: 24px; }
.h2 .h2-brief-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8px; }
.h2 .h2-brief-text { margin: 0; font: 400 19px/1.55 'Crimson Pro', serif; color: var(--text); max-width: 78ch; }
.h2 .h2-brief-text b { font-weight: 500; }

/* ---- numbers ---- */
.h2 .h2-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 0; background: transparent; border: 0; box-shadow: none; }
.h2 .h2-numbers .cell { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); padding: 18px 20px 16px; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s; }
.h2 .h2-numbers .cell:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.h2 .h2-numbers .lbl { font: 600 10px/1 'Inter'; letter-spacing:.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.h2 .h2-numbers .v { font: 300 40px/1 'Crimson Pro', serif; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.h2 .h2-numbers .v em { color: var(--accent); font-style: normal; font-weight: 300; }
.h2 .h2-numbers .delta { font: 500 11.5px/1 'Inter'; color: var(--text-dim); margin-top: 8px; }
.h2 .h2-numbers .delta.up { color: var(--ok); }

/* ---- apps ---- */
.h2 .h2-section { margin-top: 44px; }
.h2 .h2-section-head { margin-bottom: 18px; }
.h2 .h2-title { margin: 10px 0 0; font: 400 32px/1.1 'Crimson Pro', serif; letter-spacing: -0.02em; }
.h2 .h2-title em { color: var(--accent); font-style: normal; font-weight: 400; }
.h2 .h2-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.h2 .h2-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 18px 18px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-elev);
  text-decoration: none; color: inherit; min-height: 188px; position: relative; overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .45s cubic-bezier(.16,1,.3,1); }
.h2 .h2-card::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 60% at 100% 0%, var(--accent-soft), transparent 70%); opacity:0; transition: opacity .4s; }
.h2 .h2-card::after { content:none; }
.h2 .h2-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 30px 60px -28px rgba(46,86,148,.35); }
.h2 .h2-card:hover::before { opacity: 1; }
.h2 .h2-card > * { position: relative; }
.h2 .h2-card .cap { display:flex; justify-content: space-between; align-items:center; font: 600 10px/1 'Inter'; letter-spacing:.16em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.h2 .h2-card .cap .pill { font: 600 9px/1 'Inter'; letter-spacing:.1em; padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.h2 .h2-card .name { font: 400 22px/1.1 'Crimson Pro', serif; letter-spacing: -0.015em; margin: 4px 0 0; }
.h2 .h2-card .name em { color: var(--accent); font-style: normal; }
.h2 .h2-card .stat { align-self: end; display:flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.h2 .h2-card .stat .num { font: 300 38px/1 'Crimson Pro', serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h2 .h2-card .stat .lbl { font: 500 11.5px/1 'Inter'; color: var(--text-dim); }
.h2 .h2-card .arr { display:flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.h2 .h2-card .arr .cv-mini { font: 700 15px/1 'Caveat', cursive; color: var(--accent); transform: rotate(-1.5deg); display:inline-block; }
.h2 .h2-card .arr .arr-r { font: 500 12px/1 'Inter'; color: var(--text-dim); transition: color .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.h2 .h2-card:hover .arr .arr-r { color: var(--accent); transform: translateX(3px); }

/* ---- in focus ---- */
.h2 .h2-focus { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; margin-top: 44px; padding: 28px 30px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg-elev); }
.h2 .h2-focus h2 { margin: 12px 0 0; font: 400 34px/1.05 'Crimson Pro', serif; letter-spacing: -0.02em; }
.h2 .h2-focus h2 em { color: var(--accent); font-style: normal; }
.h2 .h2-focus p { margin: 10px 0 0; font: 400 18px/1.5 'Crimson Pro', serif; color: var(--text-muted); max-width: 44ch; }
.h2 .h2-actions { display:flex; gap: 10px; margin-top: 18px; }
.h2 .h2-focus-vis { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); }
.h2 .h2-focus-vis .num { font: 300 64px/1 'Crimson Pro', serif; letter-spacing: -0.03em; margin: 12px 0 14px; }
.h2 .h2-focus-vis .breakdown { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.h2 .h2-focus-vis .breakdown .cell { border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); }
@media (max-width: 860px) { .h2 .h2-focus { grid-template-columns: 1fr; } }

/* ---- needs you / activity ---- */
.h2 .h2-row { grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .h2 .h2-row { grid-template-columns: 1fr; } }
.h2 .h2-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--bg-elev); padding: 18px 22px 8px; }
.h2 .h2-feed-head { margin-bottom: 6px; }
.h2 .h2-feed-head h3 { font: 400 22px/1.1 'Crimson Pro', serif; }
.h2 .h2-feed .p-feed-item { padding: 14px 0; }
.h2 .h2-feed .p-feed-item .body { font: 400 15px/1.45 'Crimson Pro', serif; }
.h2 .h2-feed .p-feed-item .body small { display:block; font: 400 11.5px/1.4 'Inter'; color: var(--text-dim); margin-top: 2px; }
.h2 .h2-feed .p-feed-item .when { font: 500 11px/1 'Inter'; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---- overrides against legacy home rules ---- */
.h2 .h2-eye.p-eyebrow { background: transparent; border: 0; padding: 0; box-shadow: none; }
.h2 .h2-numbers.p-stats-band { margin: 18px 0 0; }
.h2 .h2-card.p-app-card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
.h2 .h2-card .stat .lbl { text-transform: none; letter-spacing: 0; white-space: nowrap; font: 500 11.5px/1 'Inter'; color: var(--text-dim); }
.h2 .h2-card .name { white-space: nowrap; }
.h2 .h2-focus.p-featured { min-height: 0; margin-top: 44px; }
.h2 .h2-focus-vis.p-featured-vis { min-height: 0; }
.h2 .h2-focus-vis .num { margin: 8px 0 12px; }
.h2 .h2-focus-vis .breakdown .cell { padding: 10px 12px; }
.h2 .h2-section { margin-top: 40px; }
.h2 .h2-section.p-section { padding-top: 0; margin-top: 34px; }
.h2 .h2-card .arr .cv-mini { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.h2 .h2-focus { align-items: stretch; }
.h2 .h2-focus-copy { display:flex; flex-direction:column; justify-content:center; }
.h2 .h2-focus-vis { display:flex; flex-direction:column; }
.h2 .h2-focus-vis .num { margin: 10px 0 auto; }