/*
 * assets/utilities.css — atomic utility layer (X2 Stage C).
 *
 * GENERATED by tools/gen_utilities.php from the inline style="" backlog.
 * One class per distinct declaration, body IDENTICAL to the inline style it
 * replaces — so migrating style="a:b;c:d" to class="u-a-b u-c-d" leaves the
 * computed style unchanged. Loaded LAST so these win on equal specificity
 * (an inline style had specificity 1000; a single class is 010 — load order
 * covers the common case, spot-check anything with a competing class rule).
 *
 * After Stage C completes this file is hand-maintained; add a utility here
 * rather than writing a new inline style="" (CspStyleFreezeTest enforces it).
 */

/* accent-color */
.u-accent-color-accent{accent-color:var(--accent)}
.u-accent-color-amber{accent-color:var(--amber)}

/* align-items */
.u-align-items-baseline{align-items:baseline}
.u-align-items-center{align-items:center}
.u-align-items-flex-start{align-items:flex-start}
.u-align-items-start{align-items:start}

/* align-self */
.u-align-self-start{align-self:start}

/* background */
.u-background-x16a34a{background:#16a34a}
.u-background-x22c55e{background:#22c55e}
.u-background-x3b82f6{background:#3b82f6}
.u-background-x4f8ef7{background:#4f8ef7}
.u-background-xe6e8ec{background:#e6e8ec}
.u-background-xef4444{background:#ef4444}
.u-background-xf0f2f5{background:#f0f2f5}
.u-background-xf59e0b{background:#f59e0b}
.u-background-none{background:none}
.u-background-rgba-0-0-0-6{background:rgba(0,0,0,.6)}
.u-background-rgba-0-0-0-65{background:rgba(0,0,0,.65)}
.u-background-rgba-220-38-38-08{background:rgba(220,38,38,.08)}
.u-background-accent-dim{background:var(--accent-dim)}
.u-background-amber-dim{background:var(--amber-dim)}
.u-background-amber-dim-xfef3c7{background:var(--amber-dim,#fef3c7)}
.u-background-amber-dim-rgba-255-180-0-1{background:var(--amber-dim,rgba(255,180,0,.1))}
.u-background-brand-cyan{background:var(--brand-cyan)}
.u-background-brand-navy{background:var(--brand-navy)}
.u-background-navy{background:var(--navy)}
.u-background-ok-bg{background:var(--ok-bg)}
.u-background-surface{background:var(--surface)}
.u-background-surface-alt{background:var(--surface-alt)}
.u-background-surface2{background:var(--surface2)}
.u-background-surface3{background:var(--surface3)}
.u-background-warn-bg{background:var(--warn-bg)}

/* border */
.u-border-0{border:0}
.u-border-1px-solid-xdc2626{border:1px solid #dc2626}
.u-border-1px-solid-rgba-79-142-247-25{border:1px solid rgba(79,142,247,.25)}
.u-border-1px-solid-amber{border:1px solid var(--amber)}
.u-border-1px-solid-border{border:1px solid var(--border)}
.u-border-1px-solid-border2{border:1px solid var(--border2)}
.u-border-none{border:none}

/* border-bottom */
.u-border-bottom-1px-dotted-text3{border-bottom:1px dotted var(--text3)}
.u-border-bottom-1px-solid-border{border-bottom:1px solid var(--border)}
.u-border-bottom-none{border-bottom:none}

/* border-left */
.u-border-left-3px-solid-accent{border-left:3px solid var(--accent)}
.u-border-left-3px-solid-amber{border-left:3px solid var(--amber)}
.u-border-left-3px-solid-green{border-left:3px solid var(--green)}
.u-border-left-3px-solid-red{border-left:3px solid var(--red)}
.u-border-left-3px-solid-text3{border-left:3px solid var(--text3)}
.u-border-left-4px-solid-xf05252{border-left:4px solid #f05252}
.u-border-left-4px-solid-amber{border-left:4px solid var(--amber)}

/* border-radius */
.u-border-radius-10px{border-radius:10px}
.u-border-radius-3px{border-radius:3px}
.u-border-radius-6px{border-radius:6px}
.u-border-radius-8px{border-radius:8px}
.u-border-radius-radius{border-radius:var(--radius)}
.u-border-radius-radius-sm{border-radius:var(--radius-sm)}

/* border-top */
.u-border-top-1px-solid-border{border-top:1px solid var(--border)}
.u-border-top-1px-solid-border2{border-top:1px solid var(--border2)}

/* bottom */
.u-bottom-0{bottom:0}

/* box-shadow */
.u-box-shadow-0-8px-24px-rgba-0-0-0-25{box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.u-box-shadow-0-20px-60px-rgba-0-0-0-6{box-shadow:0 20px 60px rgba(0,0,0,.6)}
.u-box-shadow-0-8px-24px-rgba-0-0-0-12{box-shadow:0 8px 24px rgba(0,0,0,.12)}
.u-box-shadow-0-8px-24px-rgba-0-0-0-18{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.u-box-shadow-shadow-md{box-shadow:var(--shadow-md)}

/* color */
.u-color-x000{color:#000}
.u-color-x1db6f0{color:#1DB6F0}
.u-color-x222{color:#222}
.u-color-x2563eb{color:#2563eb}
.u-color-x333{color:#333}
.u-color-x4f8ef7{color:#4f8ef7}
.u-color-x555{color:#555}
.u-color-x666{color:#666}
.u-color-x6b7280{color:#6b7280}
.u-color-x6ba3ff{color:#6ba3ff}
.u-color-x999{color:#999}
.u-color-x9ca3af{color:#9ca3af}
.u-color-xdc2626{color:#dc2626}
.u-color-xfff{color:#fff}
.u-color-inherit{color:inherit}
.u-color-accent{color:var(--accent)}
.u-color-amber{color:var(--amber)}
.u-color-amber-x92400e{color:var(--amber,#92400e)}
.u-color-brand-cyan-dark{color:var(--brand-cyan-dark)}
.u-color-danger{color:var(--danger)}
.u-color-green{color:var(--green)}
.u-color-ink{color:var(--ink)}
.u-color-muted{color:var(--muted)}
.u-color-ok-text{color:var(--ok-text)}
.u-color-orange-xe0a800{color:var(--orange,#e0a800)}
.u-color-red{color:var(--red)}
.u-color-red-xc0392b{color:var(--red,#c0392b)}
.u-color-text{color:var(--text)}
.u-color-text-2{color:var(--text-2)}
.u-color-text-3{color:var(--text-3)}
.u-color-text2{color:var(--text2)}
.u-color-text2-x374151{color:var(--text2,#374151)}
.u-color-text3{color:var(--text3)}
.u-color-warn-text{color:var(--warn-text)}

/* cursor */
.u-cursor-default{cursor:default}
.u-cursor-not-allowed{cursor:not-allowed}
.u-cursor-pointer{cursor:pointer}

/* display */
.u-display-flex{display:flex}
.u-display-grid{display:grid}
.u-display-inline{display:inline}
.u-display-inline-flex{display:inline-flex}
.u-display-none{display:none}

/* flex */
.u-flex-1{flex:1}

/* flex-direction */
.u-flex-direction-column{flex-direction:column}

/* flex-shrink */
.u-flex-shrink-0{flex-shrink:0}

/* flex-wrap */
.u-flex-wrap-wrap{flex-wrap:wrap}

/* font */
.u-font-inherit{font:inherit}

/* font-family */
.u-font-family-arial-helvetica-sans-serif{font-family:Arial,Helvetica,sans-serif}
.u-font-family-sans-serif{font-family:sans-serif}
.u-font-family-font{font-family:var(--font)}
.u-font-family-mono{font-family:var(--mono)}

/* font-size — legacy pixel utilities PRUNED after the .fs-* migration
   (X-typography 2026-06-24): every page now uses the semantic scale below.
   Only 48px is kept — it has no semantic rung (hero / KPI figure). */
.u-font-size-48px{font-size:48px}

/* ── Semantic type scale (X-typography 2026-06-24) ─────────────────────
 * Hand-maintained. PREFER these over the pixel-named .u-font-size-* atomics
 * above: they map to the --fs-* tokens in :root, so the scale stays
 * consistent and re-themeable. See docs/design-system.md → Typography and
 * ?page=styleguide. New code should use .fs-* / .lh-*; the .u-font-size-*px
 * classes are a migration legacy and will be retired as pages adopt these. */
.fs-2xs{font-size:var(--fs-2xs)}
.fs-xs{font-size:var(--fs-xs)}
.fs-sm{font-size:var(--fs-sm)}
.fs-base{font-size:var(--fs-base)}
.fs-md{font-size:var(--fs-md)}
.fs-lg{font-size:var(--fs-lg)}
.fs-xl{font-size:var(--fs-xl)}
.fs-2xl{font-size:var(--fs-2xl)}
.fs-3xl{font-size:var(--fs-3xl)}
.lh-tight{line-height:var(--lh-tight)}
.lh-snug{line-height:var(--lh-snug)}
.lh-base{line-height:var(--lh-base)}

/* font-weight */
.u-font-weight-400{font-weight:400}
.u-font-weight-500{font-weight:500}
.u-font-weight-600{font-weight:600}
.u-font-weight-700{font-weight:700}
.u-font-weight-normal{font-weight:normal}

/* gap */
.u-gap-10px{gap:10px}
.u-gap-12px{gap:12px}
.u-gap-14px{gap:14px}
.u-gap-16px{gap:16px}
.u-gap-18px{gap:18px}
.u-gap-24px{gap:24px}
.u-gap-28px{gap:28px}
.u-gap-4px{gap:4px}
.u-gap-6px{gap:6px}
.u-gap-6px-12px{gap:6px 12px}
.u-gap-6px-16px{gap:6px 16px}
.u-gap-8px{gap:8px}
.u-gap-8px-16px{gap:8px 16px}

/* grid-column */
.u-grid-column-1-1{grid-column:1/-1}
.u-grid-column-span-2{grid-column:span 2}

/* grid-template-columns */
.u-grid-template-columns-1fr-1fr{grid-template-columns:1fr 1fr}
.u-grid-template-columns-1fr-280px{grid-template-columns:1fr 280px}
.u-grid-template-columns-1fr-auto{grid-template-columns:1fr auto}
.u-grid-template-columns-auto-1fr{grid-template-columns:auto 1fr}
.u-grid-template-columns-repeat-2-1fr{grid-template-columns:repeat(2,1fr)}
.u-grid-template-columns-repeat-4-1fr{grid-template-columns:repeat(4,1fr)}
.u-grid-template-columns-repeat-auto-fit-minmax-240px-1fr{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* height */
.u-height-15px{height:15px}
.u-height-16px{height:16px}
.u-height-36px{height:36px}
.u-height-80px{height:80px}
.u-height-auto{height:auto}

/* inset */
.u-inset-0{inset:0}

/* justify-content */
.u-justify-content-center{justify-content:center}
.u-justify-content-flex-end{justify-content:flex-end}
.u-justify-content-space-between{justify-content:space-between}

/* left */
.u-left-0{left:0}

/* letter-spacing */
.u-letter-spacing-0-3px{letter-spacing:-0.3px}
.u-letter-spacing-1px{letter-spacing:-1px}
.u-letter-spacing-3px{letter-spacing:.3px}
.u-letter-spacing-4px{letter-spacing:.4px}
.u-letter-spacing-5px{letter-spacing:.5px}
.u-letter-spacing-6px{letter-spacing:.6px}
.u-letter-spacing-0{letter-spacing:0}

/* line-height */
.u-line-height-1-4{line-height:1.4}
.u-line-height-1-5{line-height:1.5}
.u-line-height-1-55{line-height:1.55}
.u-line-height-1-8{line-height:1.8}

/* list-style */
.u-list-style-none{list-style:none}

/* margin */
.u-margin-0{margin:0}
.u-margin-0-24px-22px{margin:0 -24px -22px}
.u-margin-0-0-12px{margin:0 0 12px}
.u-margin-0-auto{margin:0 auto}
.u-margin-10px-0{margin:10px 0}
.u-margin-12px-0{margin:12px 0}
.u-margin-20px{margin:20px}
.u-margin-2px-0-12px{margin:2px 0 12px}
.u-margin-4px-0-0{margin:4px 0 0}
.u-margin-6px-0-0-18px{margin:6px 0 0 18px}
.u-margin-6px-0-14px{margin:6px 0 14px}
.u-margin-8px-0-16px{margin:8px 0 16px}

/* margin-bottom */
.u-margin-bottom-0{margin-bottom:0}
.u-margin-bottom-10px{margin-bottom:10px}
.u-margin-bottom-12px{margin-bottom:12px}
.u-margin-bottom-14px{margin-bottom:14px}
.u-margin-bottom-16px{margin-bottom:16px}
.u-margin-bottom-18px{margin-bottom:18px}
.u-margin-bottom-20px{margin-bottom:20px}
.u-margin-bottom-22px{margin-bottom:22px}
.u-margin-bottom-24px{margin-bottom:24px}
.u-margin-bottom-32px{margin-bottom:32px}
.u-margin-bottom-3px{margin-bottom:3px}
.u-margin-bottom-4px{margin-bottom:4px}
.u-margin-bottom-6px{margin-bottom:6px}
.u-margin-bottom-8px{margin-bottom:8px}

/* margin-left */
.u-margin-left-4px{margin-left:4px}
.u-margin-left-6px{margin-left:6px}
.u-margin-left-8px{margin-left:8px}
.u-margin-left-auto{margin-left:auto}

/* margin-right */
.u-margin-right-6px{margin-right:6px}

/* margin-top */
.u-margin-top-10px{margin-top:10px}
.u-margin-top-12px{margin-top:12px}
.u-margin-top-14px{margin-top:14px}
.u-margin-top-16px{margin-top:16px}
.u-margin-top-18px{margin-top:18px}
.u-margin-top-20px{margin-top:20px}
.u-margin-top-24px{margin-top:24px}
.u-margin-top-2px{margin-top:2px}
.u-margin-top-3px{margin-top:3px}
.u-margin-top-4px{margin-top:4px}
.u-margin-top-6px{margin-top:6px}
.u-margin-top-8px{margin-top:8px}

/* max-height */
.u-max-height-260px{max-height:260px}
.u-max-height-280px{max-height:280px}
.u-max-height-380px{max-height:380px}
.u-max-height-60vh{max-height:60vh}
.u-max-height-90vh{max-height:90vh}

/* max-width */
.u-max-width-130px{max-width:130px}
.u-max-width-140px{max-width:140px}
.u-max-width-160px{max-width:160px}
.u-max-width-170px{max-width:170px}
.u-max-width-180px{max-width:180px}
.u-max-width-320px{max-width:320px}
.u-max-width-440px{max-width:440px}
.u-max-width-520px{max-width:520px}
.u-max-width-560px{max-width:560px}
.u-max-width-600px{max-width:600px}
.u-max-width-620px{max-width:620px}
.u-max-width-640px{max-width:640px}
.u-max-width-700px{max-width:700px}
.u-max-width-720px{max-width:720px}
.u-max-width-760px{max-width:760px}
.u-max-width-860px{max-width:860px}
.u-max-width-960px{max-width:960px}

/* min-height */
.u-min-height-60px{min-height:60px}

/* min-width */
.u-min-width-0{min-width:0}
.u-min-width-140px{min-width:140px}
.u-min-width-180px{min-width:180px}
.u-min-width-200px{min-width:200px}
.u-min-width-260px{min-width:260px}
.u-min-width-340px{min-width:340px}

/* object-fit */
.u-object-fit-contain{object-fit:contain}

/* opacity */
.u-opacity-4{opacity:.4}
.u-opacity-55{opacity:.55}
.u-opacity-7{opacity:.7}
.u-opacity-75{opacity:.75}

/* outline */
.u-outline-none{outline:none}

/* overflow */
.u-overflow-hidden{overflow:hidden}

/* overflow-x */
.u-overflow-x-auto{overflow-x:auto}

/* overflow-y */
.u-overflow-y-auto{overflow-y:auto}

/* padding */
.u-padding-0{padding:0}
.u-padding-0-14px{padding:0 14px}
.u-padding-0-16px-16px{padding:0 16px 16px}
.u-padding-0-4px{padding:0 4px}
.u-padding-10px{padding:10px}
.u-padding-10px-0{padding:10px 0}
.u-padding-10px-12px{padding:10px 12px}
.u-padding-10px-14px{padding:10px 14px}
.u-padding-10px-22px{padding:10px 22px}
.u-padding-12px{padding:12px}
.u-padding-12px-14px{padding:12px 14px}
.u-padding-12px-16px{padding:12px 16px}
.u-padding-14px{padding:14px}
.u-padding-14px-16px{padding:14px 16px}
.u-padding-14px-24px{padding:14px 24px}
.u-padding-16px{padding:16px}
.u-padding-16px-20px{padding:16px 20px}
.u-padding-18px{padding:18px}
.u-padding-18px-24px{padding:18px 24px}
.u-padding-1px-5px{padding:1px 5px}
.u-padding-1px-8px{padding:1px 8px}
.u-padding-20px{padding:20px}
.u-padding-20px-24px{padding:20px 24px}
.u-padding-24px{padding:24px}
.u-padding-28px{padding:28px}
.u-padding-28px-20px-22px{padding:28px 20px 22px}
.u-padding-2px-6px{padding:2px 6px}
.u-padding-3px-8px{padding:3px 8px}
.u-padding-4px-0{padding:4px 0}
.u-padding-4px-14px-14px{padding:4px 14px 14px}
.u-padding-5px-8px{padding:5px 8px}
.u-padding-5px-9px{padding:5px 9px}
.u-padding-60px-20px{padding:60px 20px}
.u-padding-6px-10px{padding:6px 10px}
.u-padding-6px-4px{padding:6px 4px}
.u-padding-7px-0{padding:7px 0}
.u-padding-8px-10px{padding:8px 10px}
.u-padding-8px-12px{padding:8px 12px}
.u-padding-8px-16px{padding:8px 16px}
.u-padding-9px-22px{padding:9px 22px}

/* padding-bottom */
.u-padding-bottom-14px{padding-bottom:14px}
.u-padding-bottom-16px{padding-bottom:16px}
.u-padding-bottom-18px{padding-bottom:18px}
.u-padding-bottom-8px{padding-bottom:8px}

/* padding-left */
.u-padding-left-18px{padding-left:18px}

/* padding-top */
.u-padding-top-0{padding-top:0}
.u-padding-top-14px{padding-top:14px}
.u-padding-top-16px{padding-top:16px}
.u-padding-top-18px{padding-top:18px}
.u-padding-top-8px{padding-top:8px}

/* pointer-events */
.u-pointer-events-none{pointer-events:none}

/* position */
.u-position-absolute{position:absolute}
.u-position-fixed{position:fixed}
.u-position-relative{position:relative}
.u-position-sticky{position:sticky}

/* resize */
.u-resize-vertical{resize:vertical}

/* right */
.u-right-0{right:0}
.u-right-12px{right:12px}
.u-right-8px{right:8px}

/* text-align */
.u-text-align-center{text-align:center}
.u-text-align-right{text-align:right}

/* text-decoration */
.u-text-decoration-none{text-decoration:none}
.u-text-decoration-underline{text-decoration:underline}

/* text-overflow */
.u-text-overflow-ellipsis{text-overflow:ellipsis}

/* text-transform */
.u-text-transform-none{text-transform:none}
.u-text-transform-uppercase{text-transform:uppercase}

/* top */
.u-top-100{top:100%}
.u-top-50{top:50%}

/* transform */
.u-transform-translatey-50{transform:translateY(-50%)}

/* user-select */
.u-user-select-none{user-select:none}

/* white-space */
.u-white-space-nowrap{white-space:nowrap}
.u-white-space-pre-line{white-space:pre-line}
.u-white-space-pre-wrap{white-space:pre-wrap}

/* width */
.u-width-100{width:100%}
.u-width-100px{width:100px}
.u-width-120px{width:120px}
.u-width-140px{width:140px}
.u-width-15px{width:15px}
.u-width-160px{width:160px}
.u-width-16px{width:16px}
.u-width-22{width:22%}
.u-width-280px{width:280px}
.u-width-30{width:30%}
.u-width-36px{width:36px}
.u-width-60px{width:60px}
.u-width-64px{width:64px}
.u-width-90px{width:90px}

/* z-index */
.u-z-index-10{z-index:10}
.u-z-index-20{z-index:20}
.u-z-index-200{z-index:200}
.u-z-index-30{z-index:30}
.u-z-index-400{z-index:400}


/* ── Dynamic-only utilities (X2 Stage C) ───────────────────────────────
 * Hand-maintained: classes for values that appear ONLY inside PHP
 * conditionals (so gen_utilities.php never saw them as a static style).
 * Used by PHP-selected class expressions, e.g.
 *   class="<?= $x > 0 ? 'u-color-red' : 'u-color-green' ?>"
 */
.u-color-blue{color:var(--blue)}
.u-display-block{display:block}
.u-border-1px-solid-accent{border:1px solid var(--accent)}
.u-opacity-5{opacity:.5}
.u-text-decoration-line-through{text-decoration:line-through}
.u-background-red-dim{background:var(--red-dim)}
.u-border-radius-14px{border-radius:14px}
.u-transform-translatey--50{transform:translateY(-50%)}
.u-line-height-1{line-height:1}
.u-padding-4px{padding:4px}
.u-padding-11px-0{padding:11px 0}
.u-padding-4px-4px-4px-10px{padding:4px 4px 4px 10px}
.u-padding-28px-16px{padding:28px 16px}
.u-padding-48px-24px{padding:48px 24px}
.u-border-1px-solid{border:1px solid}
.u-padding-5px-12px{padding:5px 12px}