/* ---- Dividend Talk stock card. Everything is scoped under .dtc so the theme's
   styles and this card's styles can't leak into each other. Colours are the Dividend Talk
   design system tokens (blue darkened to #1264df and muted to #646c78 for contrast). */
.dtc {
  --dtc-blue:#1264df; --dtc-blue-2:#6fb1f7; --dtc-orange:#eb6834; --dtc-teal:#1baf7a; --dtc-amber:#eda100;
  --dtc-green:#2ca24d; --dtc-red:#e05252; --dtc-grey:#8e8e8e;
  --dtc-page:#f6f8fb; --dtc-surface:#ffffff; --dtc-soft:#f2f3f5; --dtc-tint:#eaf1fd;
  --dtc-ink:#1a1a1a; --dtc-body:#3d434b; --dtc-muted:#646c78; --dtc-line:#e3e7ed; --dtc-track:#e2e2e2;
  --dtc-radius:10px; --dtc-sticky-top: var(--dts-header-bottom, 0px);   /* below the sticky site header (frame.js measures it) */
  font-family: inherit; color: var(--dtc-body); background: var(--dtc-page);
  max-width: 1120px; margin: 0 auto; padding: 16px 20px 48px; line-height: 1.5; font-size: 16px;
}
.dtc *, .dtc *::before, .dtc *::after { box-sizing: border-box; }
.dtc a:focus-visible, .dtc button:focus-visible { outline: 2px solid var(--dtc-blue); outline-offset: 2px; }

/* nav */
.dtc-nav { position: sticky; top: var(--dtc-sticky-top); z-index: 5; background: var(--dtc-page);
  padding: 10px 0; margin-bottom: 8px; }
.dtc-nav-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.dtc-brand { font-weight:800; font-size:1.05rem; color:var(--dtc-ink); }
.dtc-view { color:var(--dtc-muted); font-size:.8rem; }
.dtc-pills { display:flex; flex-wrap:wrap; gap:8px; }
.dtc-pills::-webkit-scrollbar { display:none; }
.dtc .dtc-pills a { text-decoration:none; color:var(--dtc-blue); background:var(--dtc-tint); padding:6px 14px;
  border-radius:16px; font-size:.82rem; font-weight:600; white-space:nowrap; transition: background .15s, color .15s; }
.dtc .dtc-pills a[aria-current="true"] { background:var(--dtc-blue); color:#fff; }
/* section pills left, "Years in charts" right; on a phone the pills scroll sideways on one line, the switch below them */
.dtc-nav-row { display:flex; align-items:center; gap:12px; }
.dtc-nav-row .dtc-pills { flex:1 1 auto; min-width:0; }
.dtc-nav .dtc-years { margin:0; flex:none; gap:8px; flex-wrap:nowrap; }
@media (max-width: 760px) {
  .dtc-nav-row { flex-wrap:wrap; gap:8px; }
  .dtc-nav-row .dtc-pills { flex-wrap:nowrap; overflow-x:auto; flex-basis:100%; scrollbar-width:none; }
  .dtc-nav .dtc-years { margin-left:auto; }
  .dtc-nav .dtc-seg button { padding:6px 11px; }
}

/* header */
.dtc-hero { background: linear-gradient(135deg, var(--dtc-blue) 0%, var(--dtc-blue-2) 100%); padding:20px 24px;
  border-radius:var(--dtc-radius); display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:8px; }
.dtc-hero h1 { color:#fff; font-size:clamp(1.25rem, 3vw, 1.6rem); font-weight:800; margin:0; line-height:1.2; }
.dtc-hero p { color:#dce8fd; font-size:.92rem; margin:4px 0 0; }
.dtc-avatar { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.28); display:flex;
  align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.15rem; flex-shrink:0; }

/* sections */
.dtc-section { scroll-margin-top: calc(var(--dtc-sticky-top) + 96px); }
.dtc-h2 { border-bottom:2px solid var(--dtc-blue); padding-bottom:6px; margin:2rem 0 1rem; color:var(--dtc-blue);
  font-weight:700; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; }
.dtc-first { padding-top:8px; }
.dtc-card { background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:var(--dtc-radius); padding:16px 18px; }
.dtc-card h3 { font-size:1rem; font-weight:700; color:var(--dtc-ink); margin:0 0 12px; }
.dtc-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-bottom:16px; }
.dtc-grid > * { min-width:0; }
.dtc-caption { font-size:.8rem; color:var(--dtc-muted); margin:8px 0 0; }
.dtc-calc-link { font-size:.88rem; font-weight:600; margin:10px 0 0; }
.dtc-prose { color:var(--dtc-body); }
.dtc-prose p { margin:0 0 .7em; } .dtc-prose p:last-child { margin-bottom:0; }
.dtc-prose ul { margin:0; padding-left:1.2em; } .dtc-prose li { margin-bottom:.35em; }

/* snapshot */
.dtc-status { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.dtc-badge { padding:6px 14px; border-radius:14px; font-size:.82rem; font-weight:700; display:inline-block; margin:0 8px 6px 0; color:#1a1a1a; }
.dtc-meta { font-size:.8rem; color:var(--dtc-muted); }
.dtc-metrics { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:14px 18px; margin:12px 0 18px; }
/* Where figures come from: "Updated every night" (pipeline) or "From our review · date", said in words, apart by tint */
.dtc-src { display:inline-flex; align-items:center; font-size:.76rem; font-weight:700; line-height:1.3; border-radius:12px; padding:3px 10px; white-space:nowrap; }
.dtc-src.is-live { background:var(--dtc-tint); color:var(--dtc-blue); }
.dtc-src.is-review { background:var(--dtc-soft); color:var(--dtc-body); }
.dtc-mgroups { display:flex; flex-wrap:wrap; gap:6px 32px; margin:12px 0 18px; }
.dtc-mgroup { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.dtc-mgroup.is-live { flex:3 1 420px; }
.dtc-mgroup.is-review { flex:2 1 280px; }
.dtc-mgroup .dtc-metrics { width:100%; margin:8px 0 0; }
.dtc-fo-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.dtc-fo-head h3 { margin:0; font-size:1rem; color:var(--dtc-ink); }
.dtc-fo-part .dtc-metrics { margin:10px 0 6px; }
.dtc-fo-part .dtc-caption { margin:0 0 4px; }
.dtc-fo-charts { margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--dtc-line); }
.dtc-metric-label { font-size:.8rem; color:var(--dtc-muted); }
.dtc-metric-value { font-size:1.45rem; font-weight:700; color:var(--dtc-ink); line-height:1.25; font-variant-numeric: tabular-nums; }
/* Valuation section: share price, our fair value and the gap, side by side */
.dtc-val-strip { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px 18px; margin-bottom:16px; }
.dtc-val-strip > div + div { border-left:1px solid var(--dtc-line); padding-left:18px; }
.dtc-val-gap-note { font-size:.82rem; color:var(--dtc-muted); margin-top:2px; }
@media (max-width: 560px) { .dtc-val-strip { grid-template-columns:1fr 1fr; } .dtc-val-gap { grid-column:1 / -1; border-left:0 !important; padding-left:0 !important; border-top:1px solid var(--dtc-line); padding-top:12px; } }

.dtc-gauge-row { display:flex; align-items:center; gap:22px; }
.dtc-gauge { position:relative; width:130px; height:130px; border-radius:50%; flex-shrink:0; }
.dtc-gauge-inner { position:absolute; inset:12px; background:var(--dtc-surface); border-radius:50%; display:flex;
  flex-direction:column; align-items:center; justify-content:center; }
.dtc-gauge-num { font-size:2rem; font-weight:800; color:var(--dtc-ink); line-height:1; }
.dtc-gauge-of { font-size:.75rem; color:var(--dtc-muted); }
.dtc-verdict { font-size:1.1rem; font-weight:700; color:var(--dtc-ink); display:flex; align-items:center; gap:8px; }
.dtc-swatch { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.dtc-desc { font-size:.9rem; color:var(--dtc-body); }
.dtc-source { font-size:.74rem; color:var(--dtc-muted); margin-top:6px; }

.dtc-dumbbell { position:relative; height:112px; margin:6px 8px 0; }
.dtc-db-row { position:absolute; left:0; right:0; height:1px; }
.dtc-db-row span.lbl { position:absolute; left:0; top:-10px; font-size:.78rem; color:var(--dtc-muted); }
.dtc-db-track { position:absolute; left:0; right:0; top:62px; height:2px; background:var(--dtc-line); }
.dtc-db-link { position:absolute; top:61px; height:4px; border-radius:2px; opacity:.35; }
.dtc-db-dot { position:absolute; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); top:63px; }
.dtc-db-val { position:absolute; transform:translateX(-50%); font-weight:700; color:var(--dtc-ink); font-size:.9rem; white-space:nowrap; }
.dtc-db-key { position:absolute; transform:translateX(-50%); font-size:.75rem; color:var(--dtc-muted); white-space:nowrap; }

.dtc-chips { display:flex; flex-wrap:wrap; gap:6px; }
.dtc .dtc-chips a { text-decoration:none; background:var(--dtc-soft); color:var(--dtc-ink); padding:6px 12px; border-radius:14px;
  font-size:.8rem; font-weight:600; }
.dtc .dtc-chips a:hover { background:var(--dtc-tint); color:var(--dtc-blue); }

/* years control */
.dtc-years { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 4px; }
.dtc-years-label { font-size:.85rem; color:var(--dtc-body); font-weight:600; }
.dtc-seg { display:inline-flex; border:1px solid var(--dtc-line); border-radius:8px; overflow:hidden; background:var(--dtc-surface); }
.dtc-seg button { font:inherit; font-size:.85rem; border:0; background:transparent; color:var(--dtc-body); padding:6px 14px; cursor:pointer; }
.dtc-seg button + button { border-left:1px solid var(--dtc-line); }
.dtc-seg button[aria-pressed="true"] { background:var(--dtc-tint); color:var(--dtc-blue); font-weight:700; }

/* charts */
.dtc-live { display:inline-flex; align-items:center; gap:4px; background:rgba(44,162,77,.14); color:var(--dtc-green);
  font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:12px; letter-spacing:.03em; }
.dtc-chart-title { background:var(--dtc-tint); border-radius:6px; padding:6px 10px; margin-bottom:10px; color:var(--dtc-blue);
  font-weight:700; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; }
.dtc-canvas { position:relative; height:240px; min-width:0; }
.dtc-canvas canvas { max-width:100%; }
.dtc-canvas.tall { height:300px; }
.dtc-empty { font-size:.85rem; color:var(--dtc-muted); padding:24px 0; }
.dtc-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.78rem; color:var(--dtc-muted); margin-top:8px; }
.dtc-legend i { display:inline-block; width:14px; height:0; border-top:2px dashed; vertical-align:middle; margin-right:5px; }
.dtc-legend i.solid { border-top-style:solid; }

.dtc-avatar-logo { background:#fff; overflow:hidden; padding:6px; }
.dtc-avatar-logo img { width:100%; height:100%; object-fit:contain; }
.dtc-avatar-logo.is-fill { padding:0; }   /* square brand icon: fills the circle */
.dtc-avatar-logo.is-fill img { object-fit:cover; }
.dtc-quality-solo { grid-template-columns: 1fr !important; }
.dtc-quality { display:grid; grid-template-columns: 140px 1fr; gap:20px; align-items:center; margin-top:8px; }
.dtc-q-score { font-size:2rem; font-weight:800; color:var(--dtc-ink); line-height:1; }
.dtc-q-score small { font-size:.9rem; color:var(--dtc-muted); font-weight:600; }
.dtc-q-bar { margin-bottom:10px; }
.dtc-q-bar-top { display:flex; justify-content:space-between; font-size:.8rem; color:var(--dtc-body); margin-bottom:3px; }
.dtc-q-track { height:8px; border-radius:4px; background:var(--dtc-soft); overflow:hidden; }
.dtc-missing { color:var(--dtc-muted); font-style:normal; }
.dtc-q-fill { height:100%; border-radius:4px; background:var(--dtc-blue); }

/* Selectors start with ".dtc a" so they outrank the theme's site-wide link colour (".elementor-kit-N a"). */
.dtc a.dtc-button, .dtc a.dtc-button:visited { display:inline-block; margin-top:10px; background:var(--dtc-blue); color:#fff; text-decoration:none; font-weight:700;
  font-size:.9rem; padding:9px 18px; border-radius:8px; }
.dtc a.dtc-button-quiet, .dtc a.dtc-button-quiet:visited { background:var(--dtc-tint); color:var(--dtc-blue); }
.dtc a.dtc-button:hover, .dtc a.dtc-button:focus { filter:brightness(1.08); color:#fff; }
.dtc a.dtc-button-quiet:hover, .dtc a.dtc-button-quiet:focus { color:var(--dtc-blue); }
.dtc-tags { display:flex; flex-wrap:wrap; margin-top:12px; }
.dtc-tag { background:var(--dtc-soft); border-radius:14px; padding:5px 12px; margin:0 6px 6px 0; font-size:.82rem; color:var(--dtc-body); }
.dtc-tag b { color:var(--dtc-ink); font-weight:700; margin-right:4px; }
/* Country, Sector, Industry: open the directory filtered to that value (an underline and arrow, not colour alone) */
a.dtc-tag-link, a.dtc-tag-link:visited { display:inline-block; color:var(--dtc-blue); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:2px; }
a.dtc-tag-link::after { content:"\2192"; margin-left:4px; }
a.dtc-tag-link:hover, a.dtc-tag-link:focus-visible { background:var(--chip-hover, #dbe7fc); color:var(--dtc-blue); text-decoration-color:currentColor; }
a.dtc-tag-link:focus-visible { outline:2px solid var(--dtc-blue); outline-offset:2px; }

/* verdict glyphs (design system): every badge carries a mark, so the verdict never depends on colour */
.dtc-badge[data-verdict] { display:inline-flex; align-items:center; gap:6px; }
.dtc-badge[data-verdict]::before { font-size:.78em; line-height:1; letter-spacing:-.05em; }
.dtc-badge[data-verdict="Very Safe"]::before, .dtc-badge[data-verdict="Excellent"]::before { content:"\2713\2713"; content:"\2713\2713" / ""; }
.dtc-badge[data-verdict="Safe"]::before, .dtc-badge[data-verdict="Good"]::before { content:"\2713"; content:"\2713" / ""; }
.dtc-badge[data-verdict="Questionable"]::before { content:"?"; content:"?" / ""; }
.dtc-badge[data-verdict="Average"]::before { content:"~"; content:"~" / ""; }
.dtc-badge[data-verdict="Unsafe"]::before, .dtc-badge[data-verdict="Risky"]::before { content:"!"; content:"!" / ""; }
.dtc-badge[data-verdict="Very Unsafe"]::before { content:"!!"; content:"!!" / ""; }
/* Valuation (and Not Rated) badges are text only: a ▼ on "Overvalued" read as a dropdown chevron, and the word already says it. */

/* hero right side: Add to My stocks + logo */
.dtc-hero-side { display:flex; align-items:center; gap:12px; flex-shrink:0; }
/* spelled out here (not only .dts-btn-*) so the theme's site-wide button style cannot override it */
.dtc button.dtc-follow { white-space:nowrap; font:inherit; font-size:.88rem; font-weight:700; line-height:1.2; min-height:36px; padding:6px 14px;
  border-radius:8px; cursor:pointer; text-transform:none; letter-spacing:0; box-shadow:none; }
/* "+ Add to My stocks" is the call to action: solid white, a little larger, so it doesn't melt into the blue bar */
.dtc button.dtc-follow.is-add, .dtc button.dtc-follow.is-add:hover, .dtc button.dtc-follow.is-add:focus { background:#fff; color:var(--dtc-blue); border:1px solid #fff;
  min-height:40px; padding:8px 18px; font-size:.92rem; box-shadow:0 2px 8px rgba(10,30,70,.25); }
.dtc button.dtc-follow.is-add:hover { background:var(--dtc-tint); border-color:var(--dtc-tint); }
/* "✓ In My stocks": done, so it steps back */
.dtc button.dtc-follow.is-following, .dtc button.dtc-follow.is-following:hover, .dtc button.dtc-follow.is-following:focus { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.6); }
.dtc button.dtc-follow.is-following:hover { background:rgba(255,255,255,.24); }
.dtc button.dtc-follow:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.dtc button.dtc-follow:disabled { opacity:.6; cursor:wait; }
@media (max-width: 560px) { .dtc-hero { flex-wrap:wrap; } .dtc-hero-side { width:100%; justify-content:space-between; } }

/* "Add to My stocks" menu (follow-menu.js): I own it / Watching; Move to my portfolio; Remove */
.dtc-fmenu { position:fixed; z-index:9999; min-width:230px; max-width:calc(100vw - 16px); background:var(--dtc-surface, #fff); border:1px solid var(--dtc-line, #e3e7ed);
  border-radius:10px; box-shadow:0 12px 32px rgba(20,30,50,.16); padding:6px; font-family:var(--font-sans, system-ui, sans-serif); }
.dtc-fmenu-head { margin:4px 10px 6px; font-size:.76rem; font-weight:600; color:var(--dtc-muted, #646c78); }
.dtc-fmenu button, .dtc-fmenu a { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; font:inherit; font-size:.9rem;
  background:none; border:0; border-radius:8px; padding:9px 10px; min-height:44px; justify-content:center; cursor:pointer; color:var(--dtc-ink, #1a1a1a);
  text-transform:none; letter-spacing:0; box-shadow:none; text-decoration:none; box-sizing:border-box; }
.dtc-fmenu button b { font-weight:700; }
.dtc-fmenu button span { font-size:.78rem; color:var(--dtc-muted, #646c78); }
/* hover and focus spelled out with colour: the theme turns focused buttons white text on its own colour */
.dtc-fmenu button:hover, .dtc-fmenu button:focus, .dtc-fmenu a:hover, .dtc-fmenu a:focus { background:var(--dtc-tint, #eaf1fd); color:var(--dtc-ink, #1a1a1a); outline:none; }
.dtc-fmenu a:hover, .dtc-fmenu a:focus { color:var(--dtc-blue, #1264df); }
.dtc-fmenu button:focus-visible, .dtc-fmenu a:focus-visible { outline:2px solid var(--dtc-blue, #1264df); outline-offset:-2px; }
.dtc-fmenu button.is-remove b { font-weight:600; color:var(--dtc-body, #3d434b); }
.dtc-fmenu a { color:var(--dtc-blue, #1264df); font-weight:600; border-top:1px solid var(--dtc-line, #e3e7ed); border-radius:0 0 8px 8px; margin-top:4px; }
.dtc-fmenu button:disabled { opacity:.6; cursor:wait; }

/* company hub: What changed and All our analysis (cards use the design system's .dts-post and .dts-change) */
.dtc-grid-1 { grid-template-columns: minmax(0, 1fr); }
.dtc .dts-post, .dtc a.dts-post { color: var(--dtc-body); text-decoration: none; }
.dtc-hub-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.dtc .dtc-new { background:var(--dtc-blue); color:#fff; }
.dtc-hub-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.dtc .dtc-hub-filters button { font:inherit; font-size:.82rem; font-weight:600; min-height:36px; padding:6px 14px; border-radius:16px; border:0; cursor:pointer;
  background:var(--dtc-tint); color:var(--dtc-blue); text-transform:none; letter-spacing:0; }
.dtc .dtc-hub-filters button[aria-pressed="true"] { background:var(--dtc-blue); color:#fff; font-weight:700; }
.dtc-hub-filters button span { opacity:.75; font-weight:600; margin-left:2px; }
.dtc-hub-list { background:var(--dtc-surface); border:1px solid var(--dtc-line); border-radius:var(--dtc-radius); overflow:hidden; }
.dtc a.dtc-hub-row { display:grid; grid-template-columns:110px minmax(0,1fr) 20px; gap:16px; align-items:start; padding:14px 18px;
  text-decoration:none; color:var(--dtc-body); }
.dtc a.dtc-hub-row + a.dtc-hub-row { border-top:1px solid var(--dtc-line); }
.dtc a.dtc-hub-row:hover { background:var(--dtc-page); }
.dtc a.dtc-hub-row:hover .dtc-hub-title { color:var(--dtc-blue); }
.dtc-hub-date { font-size:.82rem; color:var(--dtc-muted); font-variant-numeric:tabular-nums; padding-top:3px; }
.dtc-hub-main { display:flex; flex-direction:column; gap:5px; min-width:0; }
.dtc-hub-main .dtc-hub-top { justify-content:flex-start; }
.dtc-hub-sub { font-size:.8rem; color:var(--dtc-muted); }
.dtc-hub-title { font-weight:700; color:var(--dtc-ink); }
.dtc-hub-note { font-size:.9rem; color:var(--dtc-body); }
.dtc-hub-arrow { color:var(--dtc-blue); font-weight:700; padding-top:2px; }
@media (max-width: 640px) { .dtc a.dtc-hub-row { grid-template-columns:minmax(0,1fr) 16px; } .dtc-hub-date { grid-column:1 / -1; padding:0; } }

/* newsletter mentions: last, quieter */
.dtc-hub-group { padding:10px 18px 6px; border-top:1px solid var(--dtc-line); background:var(--dtc-page); font-size:.76rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--dtc-muted); }
.dtc-hub-list > .dtc-hub-group:first-child { border-top:0; }
.dtc a.dtc-hub-row.dtc-hub-compact { padding:10px 18px; }
.dtc a.dtc-hub-compact .dtc-hub-title { font-weight:600; font-size:.92rem; }
.dtc a.dtc-hub-compact .dtc-hub-note { font-size:.85rem; color:var(--dtc-muted); }
.dtc a.dtc-hub-compact .dts-type { display:none; }
.dtc .dtc-hub-more { display:block; width:100%; font:inherit; font-size:.88rem; font-weight:600; color:var(--dtc-blue); background:var(--dtc-surface);
  border:0; border-top:1px solid var(--dtc-line); padding:12px 18px; cursor:pointer; text-align:left; text-transform:none; letter-spacing:0; }
.dtc .dtc-hub-more:hover { background:var(--dtc-page); }
.dtc-grid-gap { margin-top:16px; }
.dtc-calc-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.dtc-calc-bar p { margin:0 auto 0 0; color:var(--dtc-body); }
.dtc .dtc-calc-bar a.dtc-button { margin-top:0; }

.dtc-data-issue { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px; margin-top:24px; }
.dtc-data-issue h3 { margin:0 0 4px; }
.dtc-data-issue p { margin:0; font-size:.92rem; }
.dtc-data-issue .dtc-button { margin-top:0; }

/* locked card for visitors (built server side from public fields only) */
.dtc-locked .dtc-status { margin-top:12px; }
.dtc-lock-wrap { position:relative; }
.dtc-lock-ghost { -webkit-mask-image:linear-gradient(#000 20%, transparent 85%); mask-image:linear-gradient(#000 20%, transparent 85%); pointer-events:none; }
.dtc-ghost-line { height:22px; width:70%; margin-top:6px; border-radius:6px; background:var(--dtc-soft); }
.dtc-ghost-block { height:110px; border-radius:8px; background:var(--dtc-soft); }
.dtc-lock-card { position:relative; max-width:640px; margin:-80px auto 0; background:var(--dtc-surface); border:1px solid var(--dtc-line);
  border-radius:var(--dtc-radius); padding:28px; text-align:center; box-shadow:0 8px 28px rgba(26,26,26,.08); }
.dtc-lock-card h2 { font-size:1.35rem; line-height:1.25; font-weight:800; color:var(--dtc-ink); margin:10px 0 8px; }
.dtc-lock-card p { margin:0 auto; max-width:480px; }
.dtc-lock-type { display:inline-block; font-size:.76rem; font-weight:700; color:var(--dtc-blue); background:var(--dtc-tint); border-radius:12px; padding:3px 10px; }
.dtc-lock-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
.dtc-lock-actions .dtc-button { margin-top:0; }
.dtc-checks { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.dtc-checks li { position:relative; padding-left:26px; }
.dtc-checks li::before { content:"\2713"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:var(--dtc-tint);
  color:var(--dtc-blue); font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:3px; }

@media (max-width: 760px) {
  .dtc { padding: 8px 14px 40px; }
  .dtc-grid { grid-template-columns: minmax(0, 1fr); }
  .dtc-quality { grid-template-columns: 1fr; }
  .dtc-gauge { width:110px; height:110px; }
}
@media (prefers-reduced-motion: reduce) { .dtc * { transition:none !important; scroll-behavior:auto !important; } }
.dtc-open-year { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--dtc-blue); background: var(--dtc-tint); border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--dtc-ink); }
/* review age: cards older than a year, and "Request a refresh" */
.dtc-meta.is-stale { color: var(--dtc-ink); font-weight: 600; }
.dtc-stale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 0; padding: 12px 16px;
  background: var(--form-error-bg, #fdeee6); border: 1px solid var(--safety-unsafe, #f0a04b); border-left: 4px solid var(--safety-very-unsafe, #dc6430); border-radius: 8px; color: var(--dtc-ink); }
.dtc-stale p { margin: 0; flex: 1 1 320px; font-size: .95rem; }
.dtc-refresh-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: 10px; }
.dtc-stale .dtc-refresh-slot { margin-left: 0; }
.dtc button.dtc-refresh { font: inherit; font-size: .85rem; font-weight: 700; color: var(--dtc-blue); background: var(--dtc-surface); border: 1px solid var(--dtc-blue);
  border-radius: 16px; padding: 4px 12px; cursor: pointer; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.dtc button.dtc-refresh:hover { background: var(--dtc-tint); }
.dtc button.dtc-refresh:disabled { opacity: .6; cursor: default; }
.dtc-refresh.is-done { font-size: .85rem; font-weight: 700; color: var(--dtc-ink); }
.dtc-refresh-count { font-size: .82rem; color: var(--dtc-muted); }