/* Home-page portfolio cards (js/portfolio-cards.js): the analysis from across the site on each pick. */

#stockGrid.stock-grid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); gap:22px; align-items:stretch; }

.stock-card.pfc{ display:flex; flex-direction:column; gap:11px; padding:18px 20px 14px; }
.stock-card--dual.pfc{ padding-top:46px; }
.pfc-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.pfc .rank{ position:static; font-size:12px; margin:0; }
.stock-card--dual.pfc .rank{ top:auto; }
.pfc-head{ display:flex; align-items:center; gap:12px; }
.pfc-head .stock-names{ min-width:0; }
.pfc-head .company{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfc-price{ margin-left:auto; text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.pfc-price-v{ font-family:'Instrument Sans', sans-serif; font-size:23px; font-weight:600; line-height:1; }
.pfc .stock-sector{ margin:0; padding:3px 9px; font-size:11px; }
.pfc-meta .pfc-chips{ margin-left:auto; }
.pfc-why{ margin:0; font-size:13px; line-height:1.5; color: var(--ink); }
.pfc-lbl{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
.pfc-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* one-year trend */
.pfc-spark-wrap{ position:relative; }
.pfc-spark svg{ display:block; width:100%; height:50px; }
.pfc-spark-line{ fill:none; stroke: var(--indigo); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.pfc-spark-sma{ fill:none; stroke: var(--ink-soft); stroke-width:1.2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; opacity:.75; }
.pfc-spark-area{ fill: var(--indigo); opacity:.10; }
.pfc-spark-dot{ position:absolute; right:1%; width:9px; height:9px; margin:-4.5px -4px 0 0; border-radius:50%; background: var(--indigo); box-shadow: 0 0 0 2px var(--cream); }
.pfc-spark-meta{ display:flex; justify-content:space-between; gap:10px; margin-top:4px; font-size:11.5px; color: var(--ink-soft); }
.pfc-spark-cap.up{ color: var(--pos-text); font-weight:700; }
.pfc-spark-cap.down{ color: var(--neg-text); font-weight:700; }

/* price vs DCF value */
.pfc-val{ display:flex; flex-direction:column; gap:7px; }
.pfc-val-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pfc-val-note{ font-size:11px; color: var(--ink-soft); text-align:right; }
.pfc-bar{ position:relative; height:10px; border-radius:5px; background: rgba(255,255,255,0.08); }
.pfc-bar-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; background: var(--indigo); }
.pfc-bar-iv{ position:absolute; top:-4px; width:3px; height:18px; margin-left:-1px; border-radius:2px; background: var(--gold); }
.pfc-val-text{ font-size:12.5px; color: var(--ink-soft); line-height:1.5; }
.pfc-val-text b{ color: var(--ink); }
.pfc-tone{ font-weight:700; }
.pfc-tone--good{ color: var(--pos-text); }
.pfc-tone--bad{ color: var(--neg-text); }
.pfc-tone--mid{ color: var(--ink-soft); }

/* 52-week range */
.pfc-range-lbls{ display:flex; justify-content:space-between; font-size:11px; color: var(--ink-soft); }
.pfc-range-track{ position:relative; height:4px; margin:7px 0 6px; border-radius:2px; background: linear-gradient(90deg, rgba(255,138,117,0.45), rgba(255,255,255,0.12) 50%, rgba(47,214,120,0.4)); }
.pfc-range-dot{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background: var(--ink); box-shadow: 0 0 0 2px var(--cream); }
.pfc-range-note{ font-size:11.5px; color: var(--ink-soft); }

/* metric tiles */
.pfc-tiles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
.pfc-tile{ display:flex; flex-direction:column; gap:1px; min-width:0; padding:7px 9px; border-radius:10px; background: var(--white); border:1px solid var(--line); cursor:help; }
.pfc-tile-l{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfc-tile-v{ font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; line-height:1.2; }
.pfc-tile-s{ font-size:11px; color: var(--ink-soft); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfc-tile--good .pfc-tile-v{ color: var(--pos-text); }
.pfc-tile--bad .pfc-tile-v{ color: var(--neg-text); }

/* checklists */
.pfc-checks{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.pfc-filters{ display:flex; align-items:center; gap:10px; cursor:help; }
.pfc-filters b{ font-size:13px; font-variant-numeric: tabular-nums; }
.pfc-fdots{ display:inline-flex; gap:5px; }
.pfc-fdot{ width:10px; height:10px; border-radius:50%; background: var(--pos-text); }
.pfc-fdot.bad{ background:transparent; box-shadow: inset 0 0 0 2px var(--neg-text); }
.pfc-fdot.na{ background:transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
.pfc-phil{ margin:0; }

/* the analysis rows */
.pfc-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.pfc-row{ display:grid; grid-template-columns: 20px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.pfc-row-ic{ width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1; background: rgba(255,255,255,0.08); color: var(--ink-soft); }
.pfc-row--ok .pfc-row-ic{ background: var(--mint-soft); color: var(--pos-text); }
.pfc-row--warn .pfc-row-ic{ background: var(--gold-soft); color: var(--warn-text); }
.pfc-row--bad .pfc-row-ic{ background: var(--coral-soft); color: var(--neg-text); }
.pfc-row-l{ color: var(--ink-soft); min-width:0; }
.pfc-row-v{ font-weight:700; text-align:right; color: var(--ink); min-width:0; }

.pfc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pfc-chip{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background: rgba(255,255,255,0.07); color: var(--ink-soft); cursor:help; }
.pfc-chip--good{ background: var(--mint-soft); color: var(--pos-text); }
.pfc-chip--warn{ background: var(--gold-soft); color: var(--warn-text); }

.pfc-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.pfc-actions{ display:flex; align-items:center; gap:14px; }
.pfc-detail-btn{ display:inline-block; text-decoration:none; border:1px solid var(--line); background:transparent; color: var(--ink); font:inherit; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
.pfc-detail-btn:hover{ border-color: var(--indigo); background: var(--indigo-soft); }
.pfc-detail-btn:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.pfc-alloc{ font-size:12px; color: var(--ink-soft); }
.pfc-alloc b{ color: var(--ink); font-size:14px; }

@media (max-width: 560px){
  .stock-card.pfc{ padding:18px 16px 14px; }
  .stock-card--dual.pfc{ padding-top:46px; }   /* the rule above is later and as specific, so it would put the card content back under the ribbon */
  .pfc-price-v{ font-size:21px; }
  .pfc-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* the Buffett / Lynch badges sit beside the filter dots instead of filling a row */
.pfc-phil{ margin:0; gap:6px; flex:none; }
.pfc-phil .philosophy-badge{ flex:none; width:auto; padding:5px 11px; font-size:11.5px; white-space:nowrap; }
.pfc-phil .philosophy-tooltip{ white-space:normal; text-align:left; }     /* the badge text must not wrap, but the popup inside it must */

.pf-legend{ max-width:860px; margin:0 0 22px; font-size:13px; line-height:1.65; color: var(--ink-soft); }
.pf-legend strong{ color: var(--ink); }

/* Phone pass (2026-10-17) */
@media (max-width: 720px){
  .pfc-detail-btn{ min-height:44px; padding:0 16px; display:inline-flex; align-items:center; }
}