/* =============================================================================
 * SG Group — Lot Calculator: full-bleed shortcode shell + icon / badge system
 * v1.1.0
 *
 * SCOPE CONTRACT (enforced by tests/test_v110_shortcode_fullwidth.php):
 *   - Every selector in this file starts with .sglcd-shortcode-shell (or another
 *     .sglcd-* / .sg-lot-* plugin class).
 *   - No html, body, :root, .site, .container, .wrapper, .content, header, nav,
 *     footer, table, button, a or input is styled globally.
 *   - Nothing here targets the theme, the grand/global/drawer menu, the header,
 *     the footer, the sidebar, breadcrumbs, the WordPress admin bar, CookieYes
 *     (.cky-*), Stripe's <stripe-pricing-table> internals, other SG Group
 *     plugins, or ordinary post content.
 *   - No !important on any theme container, no fixed positioning, no z-index
 *     above the theme header.
 *   - The full-bleed effect is produced ONLY by this element's own width and
 *     logical margins. The theme is never modified.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. The shell root
 * ------------------------------------------------------------------------- */
.sglcd-shortcode-shell {
	/* Scrollbar-width correction. Left at 0px for overlay-scrollbar platforms;
	   sggroup-lcd-shell.js measures it and sets it on THIS element only, so a
	   classic Windows scrollbar can never create horizontal overflow. */
	--sglcd-sbw: 0px;
	--sglcd-vw: calc(100vw - var(--sglcd-sbw));
	--sglcd-gutter: clamp(12px, 3vw, 48px);
	--sglcd-inner-max: 2400px;

	--sglcd-ink: #16202c;
	--sglcd-ink-soft: #4a5a6b;
	--sglcd-line: #d7dee6;
	--sglcd-line-soft: #e8edf2;
	--sglcd-bg: #ffffff;
	--sglcd-bg-soft: #f5f8fb;
	--sglcd-navy: #1f3a5f;
	--sglcd-navy-ink: #ffffff;
	--sglcd-ok: #14603a;
	--sglcd-ok-bg: #e6f4ec;
	--sglcd-warn: #7a4c00;
	--sglcd-warn-bg: #fdf1dc;
	--sglcd-err: #8a1c1c;
	--sglcd-err-bg: #fbe9e9;
	--sglcd-lock: #43506b;
	--sglcd-lock-bg: #eceff6;
	--sglcd-unset: #5b6472;
	--sglcd-unset-bg: #eef1f4;
	--sglcd-radius: 12px;

	box-sizing: border-box;
	display: block;
	inline-size: var(--sglcd-vw);
	max-inline-size: var(--sglcd-vw);
	/*
	 * The classic `50% - 50vw` breakout only lands correctly when the theme's
	 * content column is CENTRED in the viewport. Themes with a sidebar put the
	 * column off-centre, and the shell would then start part-way across the page.
	 *
	 * So the fallback below stays for the no-JavaScript case, and
	 * sggroup-lcd-shell.js measures the shell's own natural position and writes
	 * the exact offset into --sglcd-bleed-start. It only ever reads and writes
	 * this element — the theme is never touched.
	 */
	margin-inline-start: var(--sglcd-bleed-start, calc(50% - (var(--sglcd-vw) / 2)));
	margin-inline-end: var(--sglcd-bleed-end, calc(50% - (var(--sglcd-vw) / 2)));
	/* Vertical rhythm only; never touches surrounding theme spacing rules. */
	margin-block: 1.5rem;
	color: var(--sglcd-ink);
	text-align: start;
	/* Long words / long symbols must never force the page to scroll sideways. */
	overflow-wrap: break-word;
}

/*
 * v1.1.1 (finding PROD-001). WordPress's own block-layout stylesheet centres
 * every constrained child with
 *
 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 *       margin-left: auto !important; margin-right: auto !important;
 *   }
 *
 * In a block theme that rule beat the breakout above, so the shell kept its
 * full-viewport width but stayed inside the padded column: it hung off the
 * right edge and every page carrying a shortcode scrolled sideways — measured
 * at 30-50px in Chromium, Firefox and WebKit alike, at all eight viewports.
 *
 * The answer to an `!important` is an `!important`, and it is confined to this
 * element: the doubled class raises the specificity above WordPress's rule so
 * source order cannot decide the outcome, and nothing outside the shell is
 * touched.
 */
.sglcd-shortcode-shell.sglcd-full-bleed {
	inline-size: var(--sglcd-vw) !important;
	max-inline-size: var(--sglcd-vw) !important;
	margin-inline-start: var(--sglcd-bleed-start, calc(50% - (var(--sglcd-vw) / 2))) !important;
	margin-inline-end: var(--sglcd-bleed-end, calc(50% - (var(--sglcd-vw) / 2))) !important;
}

.sglcd-shortcode-shell *,
.sglcd-shortcode-shell *::before,
.sglcd-shortcode-shell *::after {
	box-sizing: border-box;
}

.sglcd-shell__inner {
	inline-size: 100%;
	max-inline-size: var(--sglcd-inner-max);
	margin-inline: auto;
	padding-inline: var(--sglcd-gutter);
}

/* ---------------------------------------------------------------------------
 * v1.1.4 — per-surface measure.
 *
 * SGGroup_LCD_Surface already emits .sglcd-surface--<name> on the shell root and
 * nothing styled it. It is the intended hook, so the reading width of each
 * surface is decided here rather than by a single cap buried in the content
 * stylesheet.
 *
 * A login form does not become more usable at 3840px, so it keeps a readable
 * measure and the SURFACE around it goes full width. A dashboard is a working
 * area and gets the room.
 * ------------------------------------------------------------------------- */
.sglcd-surface--login .sglcd-shell__inner     { --sglcd-inner-max: 1280px; }
.sglcd-surface--account .sglcd-shell__inner   { --sglcd-inner-max: 1680px; }
.sglcd-surface--checkout .sglcd-shell__inner  { --sglcd-inner-max: 1280px; }
.sglcd-surface--free .sglcd-shell__inner      { --sglcd-inner-max: 1440px; }
.sglcd-surface--plans .sglcd-shell__inner     { --sglcd-inner-max: 1440px; }
.sglcd-surface--dashboard .sglcd-shell__inner { --sglcd-inner-max: 2000px; }

/* The login form itself stays at a readable measure inside its full-width
 * surface. Stretching an email field across 4K is not a feature. */
.sglcd-surface--login .sglcd-login__form {
	inline-size: 100%;
	max-inline-size: 460px;
}

/* Anything wide (tables, code, diagrams) scrolls INSIDE its own component. */
.sglcd-shortcode-shell .sglcd-scroll-x {
	inline-size: 100%;
	max-inline-size: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

.sglcd-shortcode-shell img,
.sglcd-shortcode-shell svg,
.sglcd-shortcode-shell canvas {
	max-inline-size: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. Icons
 * ------------------------------------------------------------------------- */
.sglcd-shortcode-shell .sglcd-i {
	display: inline-block;
	vertical-align: -0.18em;
	flex: 0 0 auto;
	color: currentColor;
}

.sglcd-shortcode-shell .sglcd-h {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.6em;
	line-height: 1.35;
	font-weight: 700;
	color: var(--sglcd-ink);
}

.sglcd-shortcode-shell .sglcd-h__i {
	color: var(--sglcd-navy);
}

.sglcd-shortcode-shell .sglcd-h__t {
	min-inline-size: 0;
}

/* ---------------------------------------------------------------------------
 * 3. State badges — icon + TEXT. Meaning never depends on colour or icon alone.
 * ------------------------------------------------------------------------- */
.sglcd-shortcode-shell .sglcd-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.6;
	/*
	 * A short badge ("PASS", "設定済み") never wraps because it never has to.
	 * A long English state ("Re-verification required after a calculation
	 * change") must be allowed to wrap on a 320px phone rather than push the
	 * page sideways, so the badge stays inside whatever box holds it.
	 */
	max-width: 100%;
	min-width: 0;
}

.sglcd-shortcode-shell .sglcd-badge > svg {
	flex: 0 0 auto;
}

.sglcd-shortcode-shell .sglcd-badge__t {
	min-width: 0;
	/*
	 * break-word, not anywhere: a word is only broken when it genuinely does
	 * not fit, and the badge's minimum width stays "the longest word" — with
	 * `anywhere` a narrow column would squeeze the label into a single column
	 * of characters.
	 */
	overflow-wrap: break-word;
}

.sglcd-shortcode-shell .sglcd-badge--ok,
.sglcd-shortcode-shell .sglcd-badge--set,
.sglcd-shortcode-shell .sglcd-badge--on,
.sglcd-shortcode-shell .sglcd-badge--pass {
	color: var(--sglcd-ok);
	background: var(--sglcd-ok-bg);
	border-color: #b9dcc8;
}

.sglcd-shortcode-shell .sglcd-badge--warn,
.sglcd-shortcode-shell .sglcd-badge--caution,
.sglcd-shortcode-shell .sglcd-badge--mismatch,
.sglcd-shortcode-shell .sglcd-badge--review {
	color: var(--sglcd-warn);
	background: var(--sglcd-warn-bg);
	border-color: #e8cf9d;
}

.sglcd-shortcode-shell .sglcd-badge--error,
.sglcd-shortcode-shell .sglcd-badge--fail,
.sglcd-shortcode-shell .sglcd-badge--unsafe {
	color: var(--sglcd-err);
	background: var(--sglcd-err-bg);
	border-color: #e6bcbc;
}

.sglcd-shortcode-shell .sglcd-badge--lock,
.sglcd-shortcode-shell .sglcd-badge--locked {
	color: var(--sglcd-lock);
	background: var(--sglcd-lock-bg);
	border-color: #c6cede;
}

.sglcd-shortcode-shell .sglcd-badge--unset,
.sglcd-shortcode-shell .sglcd-badge--off {
	color: var(--sglcd-unset);
	background: var(--sglcd-unset-bg);
	border-color: #d2d8de;
}

.sglcd-shortcode-shell .sglcd-badge--external,
.sglcd-shortcode-shell .sglcd-badge--info {
	color: #1c4a6e;
	background: #e7f1f8;
	border-color: #b9d4e6;
}

/* ---------------------------------------------------------------------------
 * 4. Cards / sections used by the visualised surfaces
 * ------------------------------------------------------------------------- */
.sglcd-shortcode-shell .sglcd-card {
	background: var(--sglcd-bg);
	border: 1px solid var(--sglcd-line);
	border-radius: var(--sglcd-radius);
	padding: clamp(14px, 2vw, 22px);
}

.sglcd-shortcode-shell .sglcd-card--soft {
	background: var(--sglcd-bg-soft);
}

.sglcd-shortcode-shell .sglcd-grid {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.sglcd-shortcode-shell .sglcd-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.sglcd-shortcode-shell .sglcd-stack {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.6vw, 20px);
}

.sglcd-shortcode-shell .sglcd-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
}

/* Step list used by the free calculator ("計算手順"). */
.sglcd-shortcode-shell .sglcd-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.sglcd-shortcode-shell .sglcd-steps li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.8em;
	border: 1px solid var(--sglcd-line);
	border-radius: 999px;
	background: var(--sglcd-bg-soft);
	font-size: 0.9em;
	line-height: 1.5;
}

.sglcd-shortcode-shell .sglcd-steps li b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5em;
	block-size: 1.5em;
	border-radius: 50%;
	background: var(--sglcd-navy);
	color: var(--sglcd-navy-ink);
	font-size: 0.85em;
}

/* Table wrapper: horizontal scrolling is confined to the component. */
.sglcd-shortcode-shell .sglcd-tablewrap {
	inline-size: 100%;
	overflow-x: auto;
	border: 1px solid var(--sglcd-line);
	border-radius: var(--sglcd-radius);
}

.sglcd-shortcode-shell .sglcd-tablewrap > table {
	inline-size: 100%;
	border-collapse: collapse;
	min-inline-size: 480px;
}

.sglcd-shortcode-shell .sglcd-tablewrap th,
.sglcd-shortcode-shell .sglcd-tablewrap td {
	padding: 0.55em 0.75em;
	border-block-end: 1px solid var(--sglcd-line-soft);
	text-align: start;
	vertical-align: top;
	font-size: 0.92em;
}

.sglcd-shortcode-shell .sglcd-tablewrap thead th {
	background: var(--sglcd-bg-soft);
	font-weight: 700;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 5. Accessibility
 * ------------------------------------------------------------------------- */
.sglcd-shortcode-shell a:focus-visible,
.sglcd-shortcode-shell button:focus-visible,
.sglcd-shortcode-shell input:focus-visible,
.sglcd-shortcode-shell select:focus-visible,
.sglcd-shortcode-shell textarea:focus-visible,
.sglcd-shortcode-shell summary:focus-visible,
.sglcd-shortcode-shell [tabindex]:focus-visible {
	outline: 3px solid #0b4c8c;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Comfortable hit areas for anything that behaves like a control. */
.sglcd-shortcode-shell .sglcd-tap,
.sglcd-shortcode-shell .sglcd-nav a,
.sglcd-shortcode-shell .sglcd-nav button {
	min-block-size: 44px;
	min-inline-size: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.sglcd-shortcode-shell .sglcd-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sglcd-shortcode-shell *,
	.sglcd-shortcode-shell *::before,
	.sglcd-shortcode-shell *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Narrow viewports (down to 320px)
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sglcd-shortcode-shell {
		--sglcd-gutter: 12px;
	}

	.sglcd-shortcode-shell .sglcd-grid,
	.sglcd-shortcode-shell .sglcd-grid--wide {
		grid-template-columns: 1fr;
	}

	/* Never let a label collapse into a one-character-per-line column. */
	.sglcd-shortcode-shell .sglcd-h,
	.sglcd-shortcode-shell .sglcd-badge,
	.sglcd-shortcode-shell .sglcd-steps li {
		min-inline-size: 0;
	}

	.sglcd-shortcode-shell .sglcd-badge {
		white-space: normal;
	}
}