/* ---- Dividend Talk stock card directory. Loads after stock-card.css and reuses its tokens
   (--dtc-blue, --dtc-line, badges, buttons), so the list and the card read as one product.
   Everything is scoped under .dtl, with resets for the theme's button/input/label styles. */

.dtl { --dtl-rail: 244px; }
/* Width like the archives: .dts-wrap (1240px, 24px gutters) does the sizing, not the card's 1120px; the page's boxed
   Elementor section around the shortcode is opened up so it doesn't cap it at 1140px. */
.dtl-wrap { padding-top:32px; padding-bottom:64px; }
.dtl-wrap > .dtc.dtl { max-width:none; margin:0; padding:0; background:transparent; }
.e-con-inner:has(> .elementor-widget-shortcode .dtl-wrap) { max-width:none; padding:0; }
.e-con:has(> .e-con-inner > .elementor-widget-shortcode .dtl-wrap) { padding-left:0; padding-right:0; padding-top:0; }
.dtl button, .dtl button:hover, .dtl button:focus { font:inherit; color:inherit; background:none; border:0; border-radius:0;
  padding:0; margin:0; box-shadow:none; text-transform:none; letter-spacing:normal; line-height:inherit; cursor:pointer; }
.dtl label { display:block; line-height:inherit; vertical-align:baseline; }
.dtl fieldset { border:0; margin:0; padding:0; min-width:0; }
.dtl ul, .dtl ol { list-style:none; margin:0; padding:0; }
.dtl [hidden] { display:none !important; }
.dtl .dtl-fallback { list-style:disc; padding-left:1.2em; }

/* ---------------------------------------------------------------- header + search
   Matches the archive header (.dts-archive-head, .dts-tabs, "Only my stocks" in articles.css): title and line left,
   search right, then quick picks and the switch. Button styles name :hover and :focus too, so the .dtl reset above
   (which also covers :hover) can't strip their padding and corners. */
.dtl .dtl-top { margin-bottom:20px; }
.dtl .dtl-top-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dtl .dtl-top h1 { margin:0; font-size:2rem; font-weight:800; line-height:1.15; color:var(--dtc-ink); letter-spacing:-.01em; }
.dtl .dtl-top p { margin:4px 0 0; color:var(--dtc-muted); }   /* one line, like the archives, so the search sits at the same height */

.dtl .dtl-search { position:relative; display:flex; align-items:center; flex:0 1 380px; min-width:280px; color:var(--dtc-muted); }
.dtl .dtl-search > svg { position:absolute; left:12px; pointer-events:none; }
/* the design system's field style (tokens.css), as on the archive and My stocks searches */
.dtl .dtl-search input[type="search"] { width:100%; height:44px; border:1px solid var(--field-line, #666); border-radius:var(--field-radius, 3px); background:var(--dtc-surface);
  padding:0 40px 0 40px; font:inherit; font-size:1rem; color:var(--dtc-ink); box-shadow:none; }
.dtl .dtl-search input[type="search"]:focus { outline:2px solid var(--dtc-blue); outline-offset:1px; border-color:var(--dtc-blue); }
.dtl .dtl-search input::placeholder { color:var(--dtc-muted); }
.dtl .dtl-search input::-webkit-search-cancel-button { cursor:pointer; }
.dtl .dtl-hint { position:absolute; right:12px; pointer-events:none; }
.dtl .dtl-hint kbd { font:inherit; font-size:.78rem; font-weight:700; border:1px solid var(--dtc-line); border-bottom-width:2px; border-radius:5px;
  padding:0 6px; color:var(--dtc-muted); background:var(--dtc-soft); }

.dtl .dtl-tools { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.dtl .dtl-presets { display:flex; flex-wrap:wrap; gap:8px; }
.dtl .dtl-tools-end { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-left:auto; }
.dtl .dtl-calc { font-size:.9rem; font-weight:600; color:var(--dtc-blue); white-space:nowrap; }
.dtl .dtl-preset, .dtl .dtl-preset:hover, .dtl .dtl-preset:focus { font-size:.88rem; font-weight:600; padding:7px 14px; border-radius:16px; white-space:nowrap;
  background:var(--dtc-surface); border:1px solid var(--dtc-line); color:var(--dtc-body); }
.dtl .dtl-preset:hover { border-color:var(--dtc-ink); color:var(--dtc-ink); }
.dtl .dtl-preset[aria-pressed="true"], .dtl .dtl-preset[aria-pressed="true"]:hover, .dtl .dtl-preset[aria-pressed="true"]:focus { background:var(--dtc-ink); color:#fff; border-color:var(--dtc-ink); }
.dtl .dtl-preset:focus-visible, .dtl .dtl-switch:focus-visible, .dtl .dtl-col:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:2px; }

.dtl .dtl-switch, .dtl .dtl-switch:hover, .dtl .dtl-switch:focus { display:inline-flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color:var(--dtc-ink);
  background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:18px; padding:6px 14px 6px 8px; min-height:36px; }
.dtl .dtl-switch:hover { border-color:var(--dtc-ink); }
.dtl .dtl-knob { width:30px; height:18px; border-radius:9px; background:var(--dtc-track); position:relative; flex-shrink:0; }
.dtl .dtl-knob::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
.dtl .dtl-switch[aria-pressed="true"] .dtl-knob { background:var(--dtc-blue); }
.dtl .dtl-switch[aria-pressed="true"] .dtl-knob::after { left:14px; }

/* ---------------------------------------------------------------- layout */
.dtl .dtl-layout { display:grid; grid-template-columns:var(--dtl-rail) minmax(0, 1fr); gap:20px; align-items:start; }
.dtl .dtl-scrim { display:none; }

/* ---------------------------------------------------------------- filters rail */
.dtl .dtl-filters { position:sticky; top:calc(var(--dtc-sticky-top) + 16px); max-height:calc(100vh - var(--dtc-sticky-top) - 32px);
  overflow-y:auto; background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:var(--dtc-radius); padding:16px 18px 18px;
  overscroll-behavior:contain; }
.dtl .dtl-filters-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.dtl .dtl-filters-head h2 { font-size:1rem; font-weight:700; color:var(--dtc-ink); margin:0 auto 0 0; }
.dtl .dtl-close { display:none; }

.dtl .dtl-facet { padding:14px 0; border-top:1px solid var(--dtc-line); }
.dtl .dtl-filters-head + .dtl-facet { border-top:0; padding-top:8px; }
.dtl .dtl-facet legend { font-size:.88rem; font-weight:700; color:var(--dtc-ink); padding:0; margin-bottom:8px; float:left; width:100%; }
.dtl .dtl-facet legend + * { clear:both; }
.dtl .dtl-opt { position:relative; }
.dtl .dtl-opt input { position:absolute; left:0; top:7px; width:16px; height:16px; margin:0; accent-color:var(--dtc-blue); cursor:pointer; }
.dtl .dtl-opt label { display:flex; align-items:center; gap:8px; padding:4px 0 4px 26px; font-size:.88rem; color:var(--dtc-body); cursor:pointer; }
.dtl .dtl-opt-name { flex:1; min-width:0; }
.dtl .dtl-opt-count { font-size:.78rem; color:var(--dtc-muted); font-variant-numeric:tabular-nums; }
.dtl .dtl-opt.is-zero label { color:#a3aab3; }
.dtl .dtl-opt.is-checked label { color:var(--dtc-ink); font-weight:600; }
.dtl .dtl-opt input:focus-visible + label { outline:2px solid var(--dtc-blue); outline-offset:1px; border-radius:4px; }
.dtl .dtl-facet:not(.is-expanded) .dtl-extra:not(.is-checked) { display:none; }
.dtl .dtl-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

.dtl .dtl-link { color:var(--dtc-blue); font-size:.84rem; font-weight:600; margin-top:4px; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:transparent; }
.dtl .dtl-link:hover { color:var(--dtc-blue); text-decoration-color:currentColor; }
.dtl .dtl-link:focus-visible, .dtl .dtl-chip:focus-visible, .dtl .dtl-more-btn:focus-visible, .dtl .dtl-filter-toggle:focus-visible,
.dtl .dtl-icon-btn:focus-visible, .dtl .dtl-apply-btn:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:2px; }

.dtl .dtl-num-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dtl .dtl-num-field { font-size:.8rem; color:var(--dtc-muted); }
.dtl .dtl-num-field + .dtl-num-field { margin-top:10px; }
.dtl .dtl-num-row .dtl-num-field + .dtl-num-field { margin-top:0; }
.dtl .dtl-num-field > span:first-child { display:block; margin-bottom:4px; }
.dtl .dtl-num-wrap { position:relative; display:block; }
.dtl .dtl-num-wrap input[type="number"] { width:100%; height:38px; border:1px solid var(--dtc-line); border-radius:8px; background:var(--dtc-surface);
  padding:0 38px 0 10px; font:inherit; font-size:.9rem; color:var(--dtc-ink); box-shadow:none; -moz-appearance:textfield; }
.dtl .dtl-num-wrap input::-webkit-outer-spin-button, .dtl .dtl-num-wrap input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dtl .dtl-num-wrap input:focus { outline:none; border-color:var(--dtc-blue); box-shadow:0 0 0 3px var(--dtc-tint); }
.dtl .dtl-unit { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:.8rem; color:var(--dtc-muted); pointer-events:none; }
.dtl .dtl-apply { display:none; }

/* ---------------------------------------------------------------- results */
.dtl .dtl-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; min-height:38px; }
.dtl .dtl-count { margin:0 auto 0 0; font-size:.92rem; color:var(--dtc-body); font-weight:600; }
.dtl .dtl-sort { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--dtc-muted); }
.dtl .dtl-sort select { height:38px; border:1px solid var(--dtc-line); border-radius:8px; background-color:var(--dtc-surface);
  padding:0 30px 0 10px; font:inherit; font-size:.88rem; color:var(--dtc-ink); cursor:pointer; box-shadow:none; }
.dtl .dtl-sort select:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:1px; }
.dtl .dtl-filter-toggle, .dtl .dtl-filter-toggle:hover, .dtl .dtl-filter-toggle:focus { display:none; align-items:center; gap:8px; height:38px; padding:0 14px; border:1px solid var(--dtc-line);
  border-radius:8px; background:var(--dtc-surface); color:var(--dtc-ink); font-weight:700; font-size:.88rem; }
.dtl .dtl-badge-n:not(:empty) { background:var(--dtc-blue); color:#fff; border-radius:10px; min-width:20px; height:20px; padding:0 6px;
  font-size:.74rem; display:inline-grid; place-items:center; }

.dtl .dtl-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:12px; }
.dtl .dtl-chip, .dtl .dtl-chip:hover, .dtl .dtl-chip:focus { display:inline-flex; align-items:center; gap:6px; background:var(--dtc-tint); color:var(--dtc-blue); border-radius:14px;
  padding:5px 10px 5px 12px; font-size:.82rem; font-weight:600; }
.dtl .dtl-chip:hover { background:#dbe7fc; }
.dtl .dtl-chips .dtl-link { margin:0 0 0 4px; }

.dtl .dtl-upsell { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--dtc-tint);
  border-radius:var(--dtc-radius); padding:12px 16px; margin-bottom:12px; }
.dtl .dtl-upsell p { margin:0; color:var(--dtc-ink); font-size:.9rem; }
.dtl .dtl-upsell .dtc-button { margin:0; }

/* the table: one surface with row dividers, columns that line up down the page */
.dtl .dtl-table { --dtl-cols: minmax(0, 1fr) 150px 60px 64px 72px 118px;   /* company, safety, yield, growth, CAGR, valuation */
  background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:var(--dtc-radius); overflow:hidden; }
.dtl .dtl-table.dtl-basic { --dtl-cols: minmax(0, 1fr) 80px 90px 96px; }
.dtl .dtl-head, .dtl .dtl-row { display:grid; grid-template-columns:var(--dtl-cols); gap:12px; align-items:center; padding:0 18px; }
.dtl .dtl-head { height:40px; background:var(--dtc-soft); border-bottom:1px solid var(--dtc-line); font-size:.76rem; font-weight:600; color:var(--dtc-muted); }
.dtl .dtl-table:not(.dtl-basic) .dtl-head span:nth-child(3), .dtl .dtl-table:not(.dtl-basic) .dtl-head span:nth-child(4), .dtl .dtl-table:not(.dtl-basic) .dtl-head span:nth-child(5),
.dtl .dtl-basic .dtl-head span:nth-child(2), .dtl .dtl-basic .dtl-head span:nth-child(3), .dtl .dtl-basic .dtl-head span:nth-child(4) { text-align:right; }
/* column headers sort the list: click once for that column, again to reverse */
.dtl .dtl-col, .dtl .dtl-col:hover, .dtl .dtl-col:focus { display:inline-flex; align-items:center; gap:4px; font-size:.76rem; font-weight:600; color:var(--dtc-muted);
  border-radius:4px; padding:2px 0; white-space:nowrap; }
.dtl .dtl-col:hover { color:var(--dtc-ink); text-decoration:underline; text-underline-offset:2px; }
.dtl .dtl-col.is-on, .dtl .dtl-col.is-on:hover { color:var(--dtc-ink); font-weight:700; }
.dtl .dtl-col-dir { min-width:.7em; color:var(--dtc-blue); font-weight:800; }

.dtl .dtl-list > li + li { border-top:1px solid var(--dtc-line); }
.dtl a.dtl-row, .dtl a.dtl-row:hover, .dtl a.dtl-row:visited { color:var(--dtc-body); text-decoration:none; }
.dtl .dtl-row { padding-top:12px; padding-bottom:12px; }
.dtl .dtl-row:hover { background:#f8fafe; }
.dtl .dtl-row:hover .dtl-name { color:var(--dtc-blue); }
.dtl .dtl-row:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:-2px; background:#f8fafe; }

.dtl .dtl-co { display:flex; align-items:center; gap:12px; min-width:0; }
.dtl .dtl-avatar { width:40px; height:40px; border-radius:50%; background:var(--dtc-tint); color:var(--dtc-blue); flex-shrink:0;
  display:grid; place-items:center; font-weight:800; font-size:1rem; }
.dtl .dtl-avatar-logo { background:#fff; border:1px solid var(--dtc-line); overflow:hidden; padding:5px; }
.dtl .dtl-avatar-logo img { width:100%; height:100%; object-fit:contain; }
.dtl .dtl-avatar-logo.is-fill { padding:0; }   /* square brand icon: fills the circle */
.dtl .dtl-avatar-logo.is-fill img { object-fit:cover; }
.dtl .dtl-co-text { min-width:0; display:flex; flex-direction:column; gap:1px; }
.dtl .dtl-name { font-weight:700; color:var(--dtc-ink); font-size:.98rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dtl .dtl-sub { display:flex; flex-wrap:wrap; column-gap:12px; font-size:.8rem; color:var(--dtc-muted); line-height:1.4; }
.dtl .dtl-tk { font-weight:700; color:var(--dtc-body); font-variant-numeric:tabular-nums; }
.dtl .dtl-sub.dtl-rev { display:block; font-size:.76rem; color:#8a929c; }
.dtl .dtl-due { margin-left:8px; color:#a15c00; font-weight:600; white-space:nowrap; }
.dtl mark { background:#fff1b8; color:inherit; border-radius:2px; padding:0; }

.dtl .dtl-cell { font-size:.92rem; color:var(--dtc-ink); }
.dtl .dtl-n { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.dtl .dtl-lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* dividend safety is what the eye meets first: a bold ring and verdict; valuation is a quiet outlined pill */
.dtl .dtl-safety { display:flex; align-items:center; gap:10px; }
.dtl .dtl-ring { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.dtl .dtl-ring > span { width:31px; height:31px; border-radius:50%; background:var(--dtc-surface); display:grid; place-items:center;
  font-size:.86rem; font-weight:800; color:var(--dtc-ink); font-variant-numeric:tabular-nums; }
.dtl .dtl-verdict { font-size:.92rem; font-weight:700; color:var(--dtc-ink); line-height:1.2; }
.dtl .dtl-val .dtc-badge { margin:0; font-size:.76rem; padding:3px 10px; white-space:nowrap; }
.dtl .dtl-val .dtc-badge.dtl-vpill { background:var(--dtc-surface); color:var(--dtc-body); font-weight:600; border:1.5px solid var(--c, var(--dtc-line)); box-shadow:none; }

.dtl .dtl-empty { background:var(--dtc-surface); border:1px dashed var(--dtc-line); border-radius:var(--dtc-radius); padding:28px 22px; text-align:center; }
.dtl .dtl-empty p { margin:0; color:var(--dtc-ink); font-weight:600; }
.dtl .dtl-empty-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:8px; }
/* "Request a stock card" when a search finds nothing */
.dtl .dtl-request { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:12px; }
.dtl .dtl-request span { font-size:.9rem; color:var(--dtc-body); }
.dtl .dtl-request button, .dtl .dtl-request button:hover, .dtl .dtl-request button:focus { background:var(--dtc-blue); color:#fff; border-radius:8px;
  padding:8px 16px; min-height:40px; font-size:.9rem; font-weight:700; }
.dtl .dtl-request button:hover { background:#0d4fb0; }
.dtl .dtl-request button:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:2px; }
.dtl .dtl-request button:disabled { opacity:.6; cursor:default; }
.dtl .dtl-empty p.dtl-request-done { display:inline-block; margin:12px auto 0; font-size:.9rem; font-weight:400; color:var(--dtc-ink); background:var(--dtc-tint); border-radius:10px; padding:8px 12px; }

.dtl .dtl-more { text-align:center; margin-top:16px; }
.dtl .dtl-more-btn, .dtl .dtl-more-btn:hover, .dtl .dtl-more-btn:focus { background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:8px; padding:10px 20px; font-weight:700;
  font-size:.9rem; color:var(--dtc-blue); }
.dtl .dtl-more-btn:hover { background:var(--dtc-tint); }
.dtl .dtl-foot { font-size:.8rem; color:var(--dtc-muted); margin:22px 0 0; }

/* ---------------------------------------------------------------- tablet: narrower columns */
@media (max-width: 1080px) {
  .dtl .dtl-table { --dtl-cols: minmax(0, 1fr) 118px 56px 60px 70px 108px; }
  .dtl .dtl-ring { width:36px; height:36px; }
  .dtl .dtl-ring > span { width:27px; height:27px; font-size:.78rem; }
  .dtl .dtl-verdict { font-size:.84rem; }
}

/* ---------------------------------------------------------------- mobile: drawer + stacked rows */
@media (max-width: 900px) {
  .dtl .dtl-layout { grid-template-columns:minmax(0, 1fr); }
  .dtl .dtl-filter-toggle { display:inline-flex; }
  .dtl .dtl-filters { position:fixed; top:0; right:0; bottom:0; width:min(360px, 92vw); max-height:none; z-index:100001; border-radius:0;
    border:0; padding:16px 20px 0; transform:translateX(100%); visibility:hidden; transition:transform .22s ease, visibility 0s .22s;
    display:flex; flex-direction:column; }
  .dtl.is-filtering .dtl-filters { transform:none; visibility:visible; transition:transform .22s ease; box-shadow:-8px 0 30px rgba(20,30,50,.18); }
  .dtl.is-filtering .dtl-scrim { display:block; position:fixed; inset:0; background:rgba(20,30,50,.45); z-index:100000; }
  .dtl .dtl-close, .dtl .dtl-close:hover, .dtl .dtl-close:focus { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; color:var(--dtc-ink); }
  .dtl .dtl-close:hover { background:var(--dtc-soft); color:var(--dtc-ink); }
  .dtl .dtl-apply { display:block; position:sticky; bottom:0; margin:auto -20px 0; padding:12px 20px 16px; background:var(--dtc-surface);
    border-top:1px solid var(--dtc-line); }
  .dtl .dtl-apply-btn, .dtl .dtl-apply-btn:hover { width:100%; height:46px; border-radius:8px; background:var(--dtc-blue); color:#fff; font-weight:700; }
  html.dtl-lock, html.dtl-lock body { overflow:hidden; }
}
@media (max-width: 640px) {
  .dtl .dtl-top h1 { font-size:1.6rem; }
  .dtl .dtl-search { flex-basis:100%; min-width:0; }
  .dtl .dtl-search input[type="search"] { padding-right:12px; }
  .dtl .dtl-hint { display:none; }
  .dtl .dtl-presets { gap:6px; }   /* wrap onto two lines: a sideways row hid two of the four (11 Oct 2026) */
  .dtl .dtl-preset, .dtl .dtl-preset:hover, .dtl .dtl-preset:focus { font-size:.82rem; padding:6px 12px; }
  .dtl .dtl-count { order:3; width:100%; }
  .dtl .dtl-sort { margin-left:auto; }
  .dtl .dtl-sort span { display:none; }

  .dtl .dtl-head { display:none; }
  .dtl .dtl-row, .dtl .dtl-table.dtl-basic .dtl-row { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px 8px; padding:14px 16px; align-items:start; }
  .dtl .dtl-co { grid-column:1 / -1; align-items:flex-start; }   /* logo level with the name, not centred on four lines */
  .dtl .dtl-val .dtc-badge { margin-top:5px; padding:3px 8px; }   /* centre the pill on the safety ring beside it */
  .dtl .dtl-name { white-space:normal; }
  .dtl .dtl-n { grid-column:span 2; text-align:left; }
  .dtl .dtl-safety { grid-column:span 4; } .dtl .dtl-val { grid-column:span 2; }   /* valuation in line with the third figure below: one 3-column grid */
  .dtl .dtl-safety { order:1; } .dtl .dtl-val { order:2; } .dtl .dtl-n { order:3; }   /* safety and valuation on the first line under the name */
  .dtl .dtl-verdict { display:inline; }
  .dtl .dtl-lbl { position:static; width:auto; height:auto; clip:auto; display:block; font-size:.72rem; font-weight:500; color:var(--dtc-muted); }
  .dtl .dtl-safety { flex-wrap:wrap; column-gap:8px; row-gap:2px; }
  .dtl .dtl-safety .dtl-lbl { width:100%; }
  .dtl .dtl-ring { width:34px; height:34px; }
  .dtl .dtl-ring > span { width:26px; height:26px; font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce) { .dtl .dtl-filters { transition:none !important; } }

/* "Add to My stocks" beside each row (members): a separate button, outside the row link */
.dtl .dtl-table.dtl-has-follow .dtl-head { padding-right:62px; }
.dtl .dtl-has-follow .dtl-list > li { display:grid; grid-template-columns:minmax(0, 1fr) 44px; align-items:center; padding-right:14px; }
/* hover on the whole row, the follow button's column included */
.dtl .dtl-has-follow .dtl-list > li:hover { background:#f8fafe; }
.dtl .dtl-has-follow .dtl-list > li .dtl-row:hover { background:transparent; }
.dtl button.dtl-follow { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; padding:0; font:inherit; font-size:1.05rem; font-weight:800; line-height:1;
  color:var(--dtc-blue); background:var(--dtc-surface); border:1.5px solid var(--dtc-blue); cursor:pointer; }
.dtl button.dtl-follow:hover { background:var(--dtc-tint); }
/* in the portfolio: filled ✓; on the watchlist: an eye on the tint (follow-menu.js changes either) */
.dtl button.dtl-follow[data-status="own"] { color:#fff; background:var(--dtc-blue); }
.dtl button.dtl-follow[data-status="watch"] { color:var(--dtc-blue); background:var(--dtc-tint); }
.dtl button.dtl-follow:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:2px; }
/* phones: the button is pinned to the top-right corner, level with the name, so safety, valuation and the
   figures below use the full width instead of stopping at a 58px button column (11 Oct 2026). Only the name
   line keeps room for it. Edge 155 ignores margin on these buttons: position it, don't push it. */
@media (max-width: 640px) {
  .dtl .dtl-has-follow .dtl-list > li { display:block; position:relative; padding-right:0; }
  .dtl .dtl-has-follow .dtl-list > li > .dtl-follow { position:absolute; top:7px; right:16px; }   /* right edge in line with the columns */
  .dtl .dtl-has-follow .dtl-co { padding-right:40px; }
}