/* Portfolio Doctor page. Shares the hero, bands, controls and accordion styles with the Sustainable Dividend
   page (css/sustainable-dividends.css) and the scorecard rows, dots and rating tags with the Earnings Quality
   page (css/earnings-quality.css); this file adds the input card, the findings list, the bars and the crash lines. */

.pd-band--blue{ background: radial-gradient(140% 160% at 85% -10%, #20264E 0%, #181C36 45%, #0C0E1A 100%); }

/* ---------------- the input card ---------------- */
.pd-input{
  padding:22px 24px 20px; border-radius:22px; margin-bottom:22px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px);
}
.pd-input-lbl, .pd-mode label{ display:block; margin-bottom:8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.pd-input textarea{
  width:100%; min-height:150px; resize:vertical; padding:14px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,0.16); background: rgba(8,10,20,0.6); color:#fff;
  font:500 14.5px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.pd-input textarea::placeholder{ color: rgba(255,255,255,0.35); }
.pd-input textarea:focus-visible, .pd-mode select:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.pd-input-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 20px; margin-top:14px; }
.pd-mode select{
  height:42px; padding:0 30px 0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.16); background: rgba(8,10,20,0.6);
  color:#fff; font-size:14px; font-weight:600; font-family:inherit;
}
.pd-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-btn{
  height:42px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); background:transparent; color:#fff;
  font:700 13.5px/1 inherit; font-family:inherit; cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pd-btn:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.pd-btn--primary{ background:#fff; color:#11161A; border-color:#fff; }
.pd-btn--primary:hover{ background:#E9E6FF; }
.pd-btn--ghost{ border-color:transparent; color: rgba(255,255,255,0.6); }
.pd-btn:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.pd-understood{ min-height:1.4em; margin:12px 2px 0; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.78); }
.pd-understood b{ color:#fff; }
.pd-privacy{ margin:6px 2px 0; font-size:12px; line-height:1.55; color: rgba(255,255,255,0.5); }
.pd-privacy strong{ color: rgba(255,255,255,0.75); }

/* ---------------- tiles ---------------- */
.pd-tiles{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin:0 0 28px; }
.pd-tiles--3{ grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:30px; }
.pd-tile{ display:flex; flex-direction:column; gap:5px; min-width:0; padding:16px 18px; border-radius:16px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.pd-tile-l{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.pd-tile b{ font-family:'Instrument Sans', sans-serif; font-size:clamp(24px, 3vw, 32px); font-weight:600; line-height:1.1; color:#fff; font-variant-numeric: tabular-nums; overflow-wrap:anywhere; }
.pd-tile small{ font-size:12px; line-height:1.4; color: rgba(255,255,255,0.52); }

/* ---------------- findings ---------------- */
.pd-findings{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,0.1); }
.pd-find{ display:grid; grid-template-columns: 26px minmax(0,1fr); gap:14px; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
.pd-find .eq-dot{ margin-top:2px; width:22px; height:22px; font-size:12px; }
.pd-find div{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pd-find b{ font-size:15.5px; font-weight:700; color:#fff; line-height:1.35; }
.pd-find span{ font-size:13.5px; line-height:1.6; color: rgba(255,255,255,0.68); }
.pd-find--ok b{ font-weight:600; color: rgba(255,255,255,0.86); }
.pd-find--info .eq-dot{ font-family:'Instrument Sans', sans-serif; font-style:italic; }
.pd-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.pd-chip{ height:26px; padding:0 11px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); color:#fff; font:800 11.5px/1 inherit; font-family:inherit; letter-spacing:.02em; cursor:pointer; }
.pd-chip:hover{ background:#fff; color:#11161A; border-color:#fff; }
.pd-chip:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.pd-chip-more{ align-self:center; font-size:11.5px; color: rgba(255,255,255,0.5); }

/* ---------------- the holdings table (rows come from the Earnings Quality page) ---------------- */
.pd-table .eq-head-row, .pd-table .eq-row{ grid-template-columns: 74px minmax(190px, 1.4fr) repeat(5, minmax(92px, 1fr)) 116px; }
.pd-w{ display:flex; flex-direction:column; gap:6px; }
.pd-w b{ font-family:'Instrument Sans', sans-serif; font-size:21px; font-weight:600; color:#fff; font-variant-numeric: tabular-nums; line-height:1; }
.pd-wbar{ display:block; height:5px; border-radius:3px; background: rgba(255,255,255,0.1); overflow:hidden; }
.pd-wbar i{ display:block; height:100%; border-radius:3px; background:#8B7FFF; }

/* ---------------- bars and stacks ---------------- */
.pd-two{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:30px 44px; }
.pd-h3{ margin:0 0 12px; font-family:'Instrument Sans', sans-serif; font-size:19px; font-weight:600; color:#fff; }
.pd-bars{ display:flex; flex-direction:column; gap:10px; }
.pd-bar-row{ display:grid; grid-template-columns: minmax(96px, 0.9fr) minmax(0, 2fr) 46px; align-items:center; gap:12px; font-size:13px; }
.pd-bar-l{ display:flex; flex-direction:column; min-width:0; color:#fff; font-weight:700; }
.pd-bar-l small{ font-size:11px; font-weight:500; color: rgba(255,255,255,0.46); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-bar-t{ display:block; height:10px; border-radius:5px; background: rgba(255,255,255,0.08); overflow:hidden; }
.pd-bar-t i{ display:block; height:100%; border-radius:0 5px 5px 0; background:#8B7FFF; }
.pd-bar-t i.pd-bar-fill--sector{ background:#5EC8F2; }
.pd-bar-row b{ text-align:right; font-variant-numeric: tabular-nums; color:#fff; }
.pd-stacks{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:26px 44px; margin-top:34px; }
.pd-stack-title{ margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.pd-stack{ display:flex; gap:2px; height:32px; }
.pd-seg{ display:flex; align-items:center; justify-content:center; min-width:4px; }
.pd-stack .pd-seg:first-child{ border-radius:8px 3px 3px 8px; }
.pd-stack .pd-seg:last-child{ border-radius:3px 8px 8px 3px; }
.pd-stack .pd-seg:only-child{ border-radius:8px; }
.pd-seg b{ font-size:12px; font-weight:800; color:#10141A; }
.pd-seg--ok{ background:#2FD678; } .pd-seg--watch{ background:#FFC257; } .pd-seg--flag{ background:#FF6B57; } .pd-seg--na{ background:#8E93A8; }
.pd-stack-key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:10px 0 0; font-size:12px; color: rgba(255,255,255,0.62); }
.pd-stack-key span{ white-space:nowrap; }
.pd-stack-key .pd-seg{ display:inline-block; width:9px; height:9px; min-width:0; border-radius:3px; margin-right:6px; vertical-align:baseline; }

/* ---------------- overlap ---------------- */
.pd-pairs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pd-pairs li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:13px; color: rgba(255,255,255,0.7); }
.pd-pairs b{ font-variant-numeric: tabular-nums; color:#fff; }
.pd-note{ margin:14px 0 0; font-size:12px; line-height:1.6; color: rgba(255,255,255,0.5); }

/* ---------------- crashes ---------------- */
.pd-crashes{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.pd-crash{ padding:18px 20px; border-radius:18px; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.pd-crash-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.pd-crash-head b{ font-family:'Instrument Sans', sans-serif; font-size:19px; font-weight:600; color:#fff; }
.pd-crash-head small{ font-size:12px; color: rgba(255,255,255,0.5); }
.pd-crash-lines{ display:flex; flex-direction:column; gap:8px; }
.pd-crash-line{ display:grid; grid-template-columns: 72px minmax(0,1fr) 46px; align-items:center; gap:10px; font-size:13px; color:#fff; }
.pd-crash-line > span:first-child{ color: rgba(255,255,255,0.72); font-weight:600; }
.pd-crash-line b{ text-align:right; font-variant-numeric: tabular-nums; }
.pd-dbar{ position:relative; display:block; height:9px; border-radius:5px; background: rgba(255,255,255,0.08); }
.pd-dbar::after{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background: rgba(255,255,255,0.35); }
.pd-dbar-fill{ position:absolute; top:0; bottom:0; border-radius:5px; }
.pd-dbar-fill--neg{ background:#FF8A75; }
.pd-dbar-fill--pos{ background:#2FD678; }
.pd-crash-line--spy .pd-dbar-fill--neg{ background:#B8B8D4; }
.pd-crash-sub{ margin:12px 0 0; font-size:12px; line-height:1.55; color: rgba(255,255,255,0.55); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px){
  .pd-table .eq-head-row, .pd-table .eq-row{ grid-template-columns: 66px minmax(150px, 1.3fr) repeat(5, minmax(78px, 1fr)) 100px; column-gap:10px; }
}
@media (max-width: 960px){
  .pd-table .eq-row{ grid-template-columns: 52px minmax(0,1fr) auto; }
  .pd-table .pd-w{ grid-area: rank; }
  .pd-tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pd-two, .pd-stacks, .pd-crashes{ grid-template-columns: minmax(0,1fr); }
  .pd-tiles--3{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px){
  .pd-input{ padding:16px; }
  .pd-actions .pd-btn{ flex:1 1 auto; }
  .pd-bar-row{ grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) 42px; gap:8px; }
  .pd-crash-line{ grid-template-columns: 64px minmax(0,1fr) 42px; }
}

/* Phone pass (2026-10-17) */
@media (max-width: 720px){
  .pd-chip{ height:40px; padding:0 14px; }
}