/* Deliberately minimal. Layout only, plus variables the theme overrides.
   The design system owns colour, type and spacing: set the variables below
   in the theme stylesheet and nothing here needs editing. */

.hs-ticker,
.hs-quote,
.hs-chart {
	--hs-up: #157347;
	--hs-down: #b32d2e;
	--hs-flat: #5E6E66;
	--hs-label: #5E6E66;
	--hs-value: inherit;
	--hs-gap: 24px;
	--hs-border: rgba(0, 0, 0, 0.1);
}

/* Ticker ribbon */
.hs-ticker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hs-gap);
	font-size: 14px;
	line-height: 1.4;
}
.hs-ticker__symbol { font-weight: 700; }
.hs-ticker__item { display: inline-flex; align-items: baseline; gap: 6px; }
.hs-ticker .hs-label { color: var(--hs-label); }
.hs-ticker .hs-value { color: var(--hs-value); font-variant-numeric: tabular-nums; }
.hs-arrow {
	display: inline-block;
	vertical-align: baseline;
	width: 0.72em;
	height: 0.72em;
	flex: none;
}
.hs-arrow--flat { opacity: 0.6; }

.hs-ticker.hs-up .hs-ticker__change .hs-value { color: var(--hs-up); }
.hs-ticker.hs-down .hs-ticker__change .hs-value { color: var(--hs-down); }
.hs-ticker.hs-flat .hs-ticker__change .hs-value { color: var(--hs-flat); }

/* Quote block */
.hs-quote__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--hs-border);
	margin-bottom: 12px;
}
.hs-quote__symbol { font-weight: 700; }
.hs-quote__updated { color: var(--hs-label); font-size: 13px; }

.hs-quote__list { margin: 0; }
.hs-quote__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hs-border);
}
.hs-quote__row:last-child { border-bottom: 0; }
.hs-quote__row dt { margin: 0; color: var(--hs-label); }
.hs-quote__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hs-quote__row.hs-up dd { color: var(--hs-up); }
.hs-quote__row.hs-down dd { color: var(--hs-down); }
.hs-quote__row.hs-flat dd { color: var(--hs-flat); }

/* Colour the arrow independently of the number if the design calls for it:
   .hs-quote__row.hs-up .hs-arrow { color: var(--hs-up); } */

/* Chart.
   The line, fill, grid and axis labels are drawn in canvas, so they are set
   through these variables rather than ordinary properties. Everything else is
   normal CSS. */
.hs-chart {
	--hs-chart-line: #007887;
	--hs-chart-line-width: 2;
	--hs-chart-fill-top: 0.22;      /* opacity at the top of the area fill */
	--hs-chart-fill-bottom: 0.02;
	--hs-chart-text: #5C666E;       /* axis labels */
	--hs-chart-grid: rgba(0,0,0,0.06);
	--hs-chart-accent: #007887;     /* selected range button */
	--hs-chart-radius: 0;           /* corner radius on the range buttons */

	/* Fill the container. min-width matters: inside a flex or grid parent a
	   child sizes to its content and would otherwise push the layout wide. */
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.hs-chart__controls { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

.hs-chart__range,
.elementor .hs-chart__range {
	font: inherit;
	font-size: 12px;
	letter-spacing: .08em;
	font-weight: 700;
	padding: 7px 16px;
	color: var(--hs-label);
	background: transparent;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-chart-radius, 0);
	cursor: pointer;
	min-height: 34px;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.hs-chart__range:hover,
.elementor .hs-chart__range:hover {
	color: var(--hs-chart-accent);
	border-color: var(--hs-chart-accent);
	background: transparent;
}
/* The selected range. Previously this set the background to currentColor and
   the text to inherit, which made both the same colour and hid the label. */
.hs-chart__range.is-active,
.elementor .hs-chart__range.is-active {
	background: var(--hs-chart-accent);
	border-color: var(--hs-chart-accent);
	color: #fff;
}
.hs-chart__range:focus-visible {
	outline: 3px solid var(--hs-chart-accent);
	outline-offset: 2px;
}

.hs-chart__canvas {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;   /* the canvas is sized in JS; this stops a brief overhang */
}
.hs-chart__canvas > div { width: 100% !important; }
.hs-chart__canvas[aria-busy="true"] { opacity: .55; transition: opacity .2s ease; }

/* Shared */
.hs-note { font-size: 12px; line-height: 1.5; color: var(--hs-label); margin: 12px 0 0; }

.hs-screen-reader {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.hs-ticker { --hs-gap: 14px; font-size: 13px; }
	.hs-ticker .hs-label { display: none; }
}

/* Optional: hide arrows entirely from the design without touching the shortcode.
.hs-arrow { display: none; }
*/

/* Inline values from [hycroft_stock_value] */
.hs-inline { display: inline-flex; align-items: baseline; gap: 0.3em; }
.hs-inline.hs-up { color: var(--hs-up, #157347); }
.hs-inline.hs-down { color: var(--hs-down, #b32d2e); }
.hs-inline.hs-flat { color: var(--hs-flat, #5E6E66); }

/* Last updated timestamp */
.hs-updated { font-variant-numeric: tabular-nums; }

/* Market state, set automatically on the ticker, quote block and timestamp:
   .hs-state-live      quote is from the current session
   .hs-state-close     today's session has finished
   .hs-state-previous  showing an earlier session (weekend, holiday, pre-open)

   Nothing is styled by default. Examples if the design wants to use it:

   .hs-state-live .hs-ticker__last .hs-value { position: relative; }
   .hs-state-previous .hs-updated { opacity: .75; }
*/