/* BTLLC Spot Pages — single stylesheet for all metal pages + dashboard.
   Replaces ~1,385 lines of per-page inline CSS from the old plugin. */

.btllc-spot {
	--accent: #8f6a08;
	--accent-soft: #fdf3d7;
	--pos: #1a7f43;
	--neg: #c0392b;
	--ink: #1f2937;
	--muted: #6b7280;
	--card: #ffffff;
	--border: #e5e7eb;
	--radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	max-width: 1200px;
	margin: 0 auto;
	line-height: 1.55;
}
.btllc-spot--silver    { --accent: #64748b; --accent-soft: #eef2f7; }
.btllc-spot--platinum  { --accent: #4a6d8c; --accent-soft: #e9f0f6; }
.btllc-spot--palladium { --accent: #7c5f9e; --accent-soft: #f1ecf8; }

.btllc-spot * { box-sizing: border-box; }
.btllc-spot section { margin: 24px 0; }

/* ---- header + prose ---- */
.btllc-spot__header { text-align: center; padding: 28px 16px 4px; }
.btllc-spot__header h1 { font-size: 2.1em; margin: 0 0 10px; line-height: 1.2; }
.btllc-spot__subtitle { color: var(--muted); font-size: 1.05em; margin: 0; }
.btllc-spot__prose {
	background: var(--accent-soft);
	border-left: 4px solid var(--accent);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 18px 0;
	font-size: 1.02em;
}
.btllc-spot__prose:empty { display: none; }

.btllc-spot__intro { color: #374151; font-size: 1.02em; max-width: 900px; margin: 14px auto; text-align: center; }
.btllc-spot__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- price panel ---- */
.btllc-spot__pricepanel {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 34px;
}
.btllc-spot__bigprice { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.btllc-spot__amount { font-size: 2.4em; font-weight: 700; letter-spacing: -0.5px; }
.btllc-spot__per { color: var(--muted); }
.btllc-spot__chg { font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #eef7f0; }
.btllc-spot__chg.is-pos { color: var(--pos); background: #e8f6ed; }
.btllc-spot__chg.is-neg { color: var(--neg); background: #fceceb; }
/* Ask headline (owner #17, #22, 2026-10-21): "ASK $4,127.63 per troy ounce", with a one-line explanation. */
.btllc-spot__side { align-self: center; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; cursor: help; }
.btllc-spot__asknote { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 0.9em; }
.btllc-spot__asknote a { color: var(--accent); font-weight: 600; }
.btllc-spot__convnote { margin: 4px 0 0; color: var(--muted); font-size: 0.85em; }
.btllc-spot__updated { color: var(--muted); font-size: 0.88em; margin: 8px 0 0; width: 100%; }
.btllc-spot__pricepanel .btllc-spot__updated { width: auto; margin-left: auto; }

/* ---- stats ---- */
.btllc-spot__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}
.btllc-spot__stat {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	text-align: center;
}
.btllc-spot__statlabel { display: block; margin: 0 0 6px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.btllc-spot__statval { font-size: 1.15em; font-weight: 700; }
.btllc-spot__statval.is-pos { color: var(--pos); }
.btllc-spot__statval.is-neg { color: var(--neg); }

/* ---- chart ---- */
.btllc-spot__chartcard {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
}
.btllc-spot__chartbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.btllc-spot__ranges { display: flex; gap: 6px; flex-wrap: wrap; }
.btllc-spot__range {
	border: 1px solid var(--border);
	background: #fff;
	color: var(--ink);
	border-radius: 8px;
	padding: 6px 13px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
}
.btllc-spot__range.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btllc-spot__export {
	border: 1px solid var(--border);
	background: #fff;
	border-radius: 8px;
	padding: 6px 13px;
	font-size: 0.9em;
	cursor: pointer;
	color: var(--muted);
}
.btllc-spot__export:hover, .btllc-spot__range:hover:not(.is-active) { border-color: var(--accent); color: var(--accent); }
.btllc-spot__chart { height: 420px; width: 100%; position: relative; }
.btllc-spot__cornerlogo {
	position: absolute;
	left: 10px;
	bottom: 32px; /* above the time axis */
	height: 34px;
	width: auto;
	opacity: 1;
	pointer-events: none;
	z-index: 3;
}
@media (max-width: 768px) {
	.btllc-spot__cornerlogo { height: 24px; bottom: 28px; }
}
.btllc-spot__chartsource { color: var(--muted); font-size: 0.8em; text-align: center; margin: 10px 0 0; }

/* ---- converter ---- */
.btllc-spot__converter {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 24px;
}
.btllc-spot__converter h2 { margin: 0 0 14px; font-size: 1.25em; }
.btllc-spot__convgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.btllc-spot__convgrid label { display: block; font-size: 0.85em; font-weight: 600; color: var(--muted); }
.btllc-spot__convgrid select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font-size: 1em;
}
.btllc-spot__convout {
	margin: 16px 0 0;
	padding: 12px 16px;
	background: var(--accent-soft);
	border-radius: 8px;
	font-size: 1.25em;
	font-weight: 700;
	text-align: center;
}

/* ---- tables ---- */
.btllc-spot__tablewrap {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 24px;
	overflow-x: auto;
}
.btllc-spot__tablewrap h2 { margin: 0 0 12px; font-size: 1.25em; }
.btllc-spot__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.btllc-spot__table th, .btllc-spot__table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.btllc-spot__table thead th { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.btllc-spot__table tbody th { font-weight: 600; }
.btllc-spot__table tr:last-child td { border-bottom: 0; }
.btllc-spot__table .is-pos { color: var(--pos); font-weight: 600; }
.btllc-spot__table .is-neg { color: var(--neg); font-weight: 600; }
.btllc-spot__tablenote { color: var(--muted); font-size: 0.82em; margin: 10px 0 0; }

/* ---- info + FAQ ---- */
.btllc-spot__info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.btllc-spot__infobox {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.btllc-spot__infobox h2 { margin: 0 0 10px; font-size: 1.1em; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.btllc-spot__infobox p { margin: 0; color: #374151; }
.btllc-spot__faq h2 { font-size: 1.35em; }
.btllc-spot__faqitem {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin: 8px 0;
	padding: 0 18px;
}
.btllc-spot__faqitem summary { padding: 14px 0; font-weight: 600; cursor: pointer; }
.btllc-spot__faqitem p { margin: 0 0 14px; color: #374151; }

/* ---- crosslinks + disclaimer ---- */
.btllc-spot__crosslinks { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 6px 2px; }
.btllc-spot__crosslinks a { color: var(--accent); font-weight: 600; text-decoration: none; }
.btllc-spot__crosslinks a:hover { text-decoration: underline; }
.btllc-spot__disclaimer {
	color: var(--muted);
	font-size: 0.82em;
	text-align: center;
	background: #f8f9fa;
	border-radius: 8px;
	padding: 14px;
}

/* ---- dashboard ---- */
.btllc-spot__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.btllc-spot__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--card);
	border: 1px solid var(--border);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 20px 22px;
	text-decoration: none;
	color: var(--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btllc-spot__card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.btllc-spot__card h2 { margin: 0; font-size: 1.1em; }
.btllc-spot__card .btllc-spot__amount { font-size: 1.7em; }
.btllc-spot__card--gold      { --accent: #8f6a08; }
.btllc-spot__card--silver    { --accent: #64748b; }
.btllc-spot__card--platinum  { --accent: #4a6d8c; }
.btllc-spot__card--palladium { --accent: #7c5f9e; }
.btllc-spot__cardlink { color: var(--accent); font-weight: 600; font-size: 0.9em; margin-top: auto; }

/* ---- responsive ---- */
@media (max-width: 768px) {
	.btllc-spot__header h1 { font-size: 1.55em; }
	.btllc-spot__amount { font-size: 1.9em; }
	.btllc-spot__pricepanel { padding: 16px; gap: 12px 20px; }
	.btllc-spot__chart { height: 300px; }
	.btllc-spot__tablewrap, .btllc-spot__converter { padding: 14px 16px; }
}

/* 1.1.0: market-closed note under the chart */
.btllc-spot__chart-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #6b7280; }

/* ---- feed status (O1, 2026-10-22) ----
   spot.js shows it only while the price feed has failed or is stale (or the page has no prices at all). Pinned to the
   bottom of the viewport so showing or hiding it never moves the page: in the flow it pushed the hero and chart down
   and back up (ratio page CLS 0.03-0.09 on every load; 0.04 on the other chart pages whenever the feed failed).
   It stays until a poll succeeds; the Retry button polls at once. The attribute selector outranks the theme's in-flow
   styling (cartify btllc-premium-tools.css); z-index stays under the site's menus and drawers (999+). */
.btllc-spot__feed-status[data-spot-feed-status] {
	position: fixed;
	z-index: 990;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 12px 14px 12px 18px;
	background: var(--bt-paper, #f1f5f3);
	color: var(--bt-ink, #182b2b);
	border: 1px solid var(--bt-line, #dce5e0);
	border-radius: var(--bt-radius-card, 12px);
	box-shadow: 0 10px 30px rgba(24, 43, 43, 0.18);
	font-family: var(--bt-font-body, Satoshi, Arial, sans-serif);
	text-align: left;
}
.btllc-spot__feed-status[data-spot-feed-status][hidden],
.btllc-spot__feed-status[data-spot-feed-status] [hidden] { display: none; }
.btllc-spot__feed-status[data-spot-feed-status] p {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.5;
}
.btllc-spot__feed-status[data-spot-feed-status] button {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 10px 15px;
	border: 1px solid var(--bt-line, #dce5e0);
	border-radius: var(--bt-radius, 8px);
	background: var(--bt-surface, #fff);
	color: var(--bt-ink, #182b2b);
	font: 600 14px/1.4 var(--bt-font-body, Satoshi, Arial, sans-serif);
	cursor: pointer;
}
.btllc-spot__feed-status[data-spot-feed-status] button:hover:not(:disabled) { border-color: var(--bt-primary, #185c53); color: var(--bt-primary, #185c53); }
.btllc-spot__feed-status[data-spot-feed-status] button:disabled { opacity: 0.6; cursor: default; }
.btllc-spot__feed-status[data-spot-feed-status] button:focus-visible { outline: 2px solid var(--bt-focus, #a87b30); outline-offset: 2px; }
@media (max-width: 767px) {
	.btllc-spot__feed-status[data-spot-feed-status] { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px 12px; padding: 10px 10px 10px 14px; }
	.btllc-spot__feed-status[data-spot-feed-status] p { flex-basis: 170px; font-size: 13px; }
}
@media print { .btllc-spot__feed-status[data-spot-feed-status] { display: none; } }

/* ---- link to the karat & unit values (buy-prices hub), what $2,500 and $10,000 buy, embed this price
   (PLAN.md #194, owner 24 Oct 2026; #198, 28 Oct). Same card as the other tables (.btllc-spot__tablewrap, so the
   theme's tool-page padding applies). Every number is server-rendered and spot.js only replaces the buys columns'
   content, so nothing moves after load. Links people tap are at least 44 px tall (owner #198). */
.btllc-spot__lede { margin: -4px 0 14px; color: var(--muted); font-size: 0.92em; }
.btllc-spot__valuelink { margin: 0; }
.btllc-spot__valuelink a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.btllc-spot__valuelink a:hover { text-decoration: underline; }

.btllc-spot__buysgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 32px; }
.btllc-spot__buyscol h3 { margin: 0 0 4px; font-size: 1.05em; }
.btllc-spot__buyslist { list-style: none; margin: 0; padding: 0; }
.btllc-spot__buy { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 12px; border-top: 1px solid var(--border); }
.btllc-spot__buykind { font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.btllc-spot__buyname { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: none; line-height: 1.3; }
.btllc-spot__buyname:hover { text-decoration: underline; }
.btllc-spot__buyprice, .btllc-spot__buyfit { font-size: 0.9em; font-variant-numeric: tabular-nums; }
.btllc-spot__buyfit { color: var(--muted); }
.btllc-spot__buynote, .btllc-spot__buynone { margin: 8px 0 0; color: var(--muted); font-size: 0.85em; }
.btllc-spot__buysnote { margin-top: 14px; }
.btllc-spot__buysnote a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }


.btllc-spot__embedgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 32px; align-items: start; }
.btllc-spot__embedmetals { display: flex; flex-wrap: wrap; gap: 0 18px; min-width: 0; margin: 0 0 10px; padding: 0; border: 0; }
.btllc-spot__embedmetals legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-size: 0.85em; font-weight: 600; color: var(--muted); }
.btllc-spot__embedcheck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; cursor: pointer; }
.btllc-spot__embedcheck input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.btllc-spot__embedlabel { display: block; margin: 0 0 6px; font-size: 0.85em; font-weight: 600; color: var(--muted); }
.btllc-spot__embedcode { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.btllc-spot__embedactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 0; font-size: 0.92em; }
.btllc-spot__embedactions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.btllc-spot__embedbtn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.btllc-spot__embedbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btllc-spot__embedstatus { min-width: 4.5em; color: var(--pos); font-weight: 700; }
.btllc-spot__embedoutside { margin: 6px 0 0; font-size: 13px; }
.btllc-spot__embedoutside a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
/* The preview's own credit link: a 44 px target on this page only (the real widget keeps its one-line credit). */
.btllc-spot__embedpreview .btllc-pw__credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- price widget: the embed view (/charts/{metal}-price/embed/) and its preview above. Fixed colours: it sits on
   other people's pages. Row and base heights match EMBED_ROW / EMBED_BASE in class-price-extras.php. ---- */
.btllc-pw { box-sizing: border-box; max-width: 420px; padding: 10px 14px 12px; border: 1px solid #dce5e0; border-radius: 12px; background: #fff; color: #182b2b; font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; text-align: left; }
.btllc-pw * { box-sizing: border-box; }
.btllc-pw__list { list-style: none; margin: 0; padding: 0; }
.btllc-pw__row { display: flex; align-items: baseline; gap: 8px; height: 42px; padding: 9px 0 0; margin: 0; border-bottom: 1px solid #eef2f0; }
.btllc-pw__row[hidden] { display: none; }
.btllc-pw__label { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.btllc-pw__price { font-size: 1.25em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btllc-pw__chg { flex: 0 0 4.4em; text-align: right; font-size: 0.86em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #56645f; }
.btllc-pw__chg.is-pos { color: #1a7f43; }
.btllc-pw__chg.is-neg { color: #c0392b; }
.btllc-pw__meta { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #56645f; }
.btllc-pw__status { font-weight: 700; color: #1a7f43; }
.btllc-pw__status.is-delayed { color: #8a5a00; }
.btllc-pw__credit { margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.btllc-pw__credit a { color: #185c53; font-weight: 700; text-decoration: underline; }