/*
 * The stock card.
 *
 * One card, two surfaces. Portfolio Blueprint draws it for an instrument the
 * selection engine has proposed; Portfolio Insights draws it for a position the
 * investor already holds and is being asked to change. They are the same card
 * because they are the same object in the investor's head — "this holding, and
 * what I am being told about it" — and a product that renders that object two
 * different ways is asking its user to learn it twice.
 *
 * Everything the card needs is here, including the small shared pieces it uses
 * inside itself (`.holding-meta`, `.explain`, `.score-chip`). Nothing here
 * depends on a CSS custom property from either host, because one of the two
 * hosts does not define them.
 */

.holding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 10px;
}

.holding-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 196px;
  padding: 0;
  border: 1px solid #e8e0d7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(33, 24, 13, .035);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  color: #0f172a;
}

/* Tone follows the verdict rather than the surface, so an urgent card reads the
   same in the monitor as it does in the blueprint. */
.holding-card.tone-urgent { border-color: #f0cdbb; }
.holding-card.tone-watch { border-color: #ecdcc0; }

.instrument-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(170px, .85fr);
  gap: 0;
  padding: 15px 16px 12px;
}

.instrument-kind { display: flex; align-items: center; gap: 7px; color: #53698f; font-size: 10px; font-weight: 700; }
.instrument-kind-icon { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 5px; background: #eee8ff; color: #6032b5; }

.holding-card .holding-name {
  margin: 7px 0 12px;
  color: #071a49;
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
}

.instrument-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.instrument-primary > div,
.instrument-side > div { padding-left: 10px; border-left: 1px solid #e8ebf1; color: #6a7b9a; font-size: 9px; line-height: 1.35; }
.instrument-primary > div:first-child { padding-left: 0; border-left: 0; }
.instrument-primary b,
.instrument-side b { display: block; margin-top: 4px; color: #071a49; font-size: 12px; }

.instrument-status {
  display: inline-flex !important;
  width: max-content;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 4px;
  background: #e5f7e9;
  color: #18944b !important;
  font-size: 9px !important;
  text-transform: uppercase;
}
.instrument-status.is-confirmed { background: #e7edff; color: #2f49b8 !important; }
.instrument-status.is-held { background: #f1f3f8; color: #5c6785 !important; }
.instrument-status.is-watch { background: #fdf3e6; color: #a95700 !important; }
.instrument-status.is-urgent { background: #fdecea; color: #c11717 !important; }

.instrument-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.instrument-why {
  position: relative;
  grid-column: 1/-1 !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  color: #53698f !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}
.instrument-why b { margin: 0 0 3px; font-size: 10px; }
.instrument-why-text {
  display: -webkit-box;
  width: 100%;
  max-height: 7.5em;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  cursor: pointer;
}
.instrument-why-text:after { content: ""; }
.instrument-why-text:hover,
.instrument-why-text:focus-visible { color: #3f2388; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; outline: 0; }
.instrument-why-tooltip {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  z-index: 15;
  display: none;
  padding: 11px 12px;
  border: 1px solid #d8c9ef;
  border-radius: 9px;
  background: #fff;
  color: #273252;
  box-shadow: 0 12px 30px rgba(45, 29, 74, .16);
  font-size: 10px;
  line-height: 1.55;
}
.instrument-why:hover .instrument-why-tooltip,
.instrument-why:focus-within .instrument-why-tooltip { display: block; }

.instrument-menu-button {
  position: absolute;
  right: 11px;
  top: 10px;
  z-index: 3;
  width: 31px;
  height: 31px;
  border: 1px solid #e4e8ef;
  border-radius: 50%;
  background: #fff;
  color: #53698f;
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
}
.instrument-menu-button:hover,
.instrument-menu-button[aria-expanded="true"] { border-color: #8c6bd3; background: #f7f3ff; color: #4b229c; }

.instrument-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: auto;
  padding: 9px 12px;
  border-top: 1px solid #edf0f5;
  color: #53698f;
  font-size: 9px;
}
.instrument-horizon { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.instrument-horizon b { color: #071a49; font-size: 10px; }

.entry-exit-button {
  flex: 0 0 auto;
  border: 1px solid #bfa9ea;
  border-radius: 7px;
  background: #f8f5ff;
  color: #4b229c;
  padding: 7px 10px;
  font: 700 9px 'Plus Jakarta Sans', Inter, sans-serif;
  cursor: pointer;
}
.entry-exit-button:hover { background: #eee7ff; }
.entry-exit-button:disabled { border-color: #dde2ea; background: #f7f8fa; color: #8996aa; cursor: not-allowed; }

.confirm-buy-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #a8ddc2;
  border-radius: 7px;
  background: #edfaf3;
  color: #0f7a45;
  padding: 7px 11px;
  font: 700 9px 'Plus Jakarta Sans', Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.confirm-buy-button:hover:not(:disabled) { background: #e0f5ea; border-color: #7fcfa8; }
.confirm-buy-button.is-confirmed { border-color: #ccdcff; background: #f2f5ff; color: #2f49b8; cursor: default; }
.confirm-buy-button:disabled:not(.is-confirmed) { border-color: #dde2ea; background: #f7f8fa; color: #8996aa; cursor: not-allowed; }

.broker-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.broker-label { color: #8390a6; font-size: 8px; text-transform: uppercase; }
.broker-link { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #ddd7cf; border-radius: 6px; background: #fff; text-decoration: none; }
.broker-link svg { width: 19px; height: 19px; display: block; }
.broker-link:hover { border-color: #8665c6; box-shadow: 0 3px 8px rgba(65, 39, 111, .12); }

.instrument-overflow {
  display: none;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid #e5e9f1;
  border-radius: 10px;
  background: #f8fafc;
}
.instrument-overflow.open { display: block; animation: instrument-reveal .2s ease-out; }
.instrument-overflow .holding-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 10px; }
.instrument-overflow > .explain { margin-top: 9px; }

.holding-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.holding-meta div { border-top: 1px solid #f1f5f9; padding-top: 6px; font-size: 11px; color: #64748b; }
.holding-meta b { display: block; color: #0f172a; margin-top: 3px; }

.explain { border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; padding: 9px 11px; }
.explain summary { cursor: pointer; color: #1d6bf3; font-weight: 700; font-size: 11px; }
.explain p { color: #475569; font-size: 12px; line-height: 1.5; }
.source-note { color: #64748b; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.score-list { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.score-chip { font-size: 11px; padding: 4px 7px; border-radius: 7px; background: #f3e8ff; color: #7c3aed; border: 1px solid #ddd6fe; }

/* The card's own result line. The blueprint has no equivalent today; the
   monitor needs one, and putting it on the shared card keeps the two from
   growing different anatomies for the same sentence. */
.instrument-result { margin: 0 16px 12px; color: #263250; font-size: 11px; line-height: 1.5; }
.instrument-result b { color: #071a49; }

@keyframes instrument-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1350px) { .holding-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .holding-grid { grid-template-columns: 1fr; }
  .instrument-card-main { grid-template-columns: 1fr; }
  .instrument-side { margin-top: 12px; }
  .instrument-horizon { flex: 1 1 100%; }
  .instrument-overflow .holding-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The entry & exit decision drawer ────────────────────────────────────────
 *
 * The drawer itself belongs to the card, so both surfaces get the same toggle,
 * the same chevron and the same slide. What each surface puts *inside* it is
 * deliberately different: the blueprint answers "is this worth buying" from a
 * valuation model, and the monitor answers "what should I do with what I
 * already hold" from the portfolio. Same drawer, different answer.
 */
.holding-card.decision-host { position: relative; }
.holding-card:has(.decision-panel.open) { grid-column: 1/-1; }

.decision-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 14px;
  border: 1px solid #d6e0f1;
  border-radius: 9px;
  background: linear-gradient(100deg, #f5f9ff, #eef6ff);
  color: #081a49;
  font: 800 12px 'Plus Jakarta Sans', Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.decision-toggle:hover,
.decision-toggle[aria-expanded="true"] { border-color: #8fb7f3; background: linear-gradient(100deg, #f8fbff, #eaf4ff); box-shadow: 0 3px 12px rgba(31, 93, 184, .08); }
.decision-toggle small { display: block; margin-top: 3px; color: #667493; font-size: 10px; font-weight: 600; line-height: 1.4; }
.decision-toggle .chev {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #79aaf1;
  border-radius: 50%;
  background: #fff;
  color: #075fe2;
  font-size: 11px;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.decision-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.slide-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-7px);
  transition: grid-template-rows .38s cubic-bezier(.2, .8, .2, 1), opacity .28s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}
.slide-panel.open { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.slide-panel-inner { min-height: 0; overflow: hidden; }
.decision-panel { margin-top: 7px; }

/* Clicking the clamped explanation un-clamps it in place. A surface that would
   rather open a dialogue simply does not add this class. */
.instrument-why-text.is-expanded { -webkit-line-clamp: unset; max-height: none; }

/* The drawer lives inside the card's detail panel. A surface that renders its
   own drawer may still emit one as a direct child of the card; that copy is
   hidden rather than shown twice. */
.holding-card > .decision-toggle,
.holding-card > .decision-panel { display: none; }