/* ============================================================
   Utilities Bunker — Shared UI Kit (UB Toolkit) v2.1
   File: /assets/css/ub-toolkit.v2.1.css

   One-time edit (approved by Josh):
   - Strengthen UB-CERT v1.3 universal layout support
   - Add missing shared components used across many tools
   - Improve responsive behavior + accessibility + consistency
   - Keep tool-specific visuals inside tool CSS files
   ============================================================ */
:root{
  /* Layout */
  --ub-maxw: 1600px;
  --ub-gutter: clamp(12px, 2vw, 18px);
  --ub-gap: 14px;
  --ub-font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  --ub-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ub-fs-0: clamp(12px, 0.78rem + 0.15vw, 13px);
  --ub-fs-1: clamp(13px, 0.82rem + 0.20vw, 14px);
  --ub-fs-2: clamp(14px, 0.88rem + 0.25vw, 16px);
  --ub-fs-3: clamp(16px, 1.00rem + 0.35vw, 18px);
  --ub-fs-4: clamp(18px, 1.10rem + 0.55vw, 22px);
  --ub-fs-5: clamp(22px, 1.30rem + 0.85vw, 30px);
  --ub-bg: #ffffff;
  --ub-text: #111827;
  --ub-muted: #6b7280;
  --ub-border: #e5e7eb;
  --ub-surface-1: #ffffff;
  --ub-surface-2: #f8fafc;
  --ub-surface-3: #eef2f7;
  --ub-card-bg: var(--ub-surface-1);
  --ub-card-border: #e6e9ee;
  --ub-shadow: 0 6px 24px rgba(0,0,0,.08);
  --ub-link: #0070bb;
  --ub-focus: rgba(249,58,19,.55);
  --ub-success: #22c55e;
  --ub-warning: #f59e0b;
  --ub-danger:  #ef4444;
  --ub-btn-grad-a: #ff7426;
  --ub-btn-grad-b: #f93a13;
  --ub-btn-glow: rgba(249,58,19,.32);
  --ub-chip-bg: #ffffff;
  --ub-chip-hover: #f6f8fb;
  --ub-chip-text: var(--ub-text);
  --ub-radius-1: 12px;
  --ub-radius-2: 16px;
  --ub-hit: 44px;
}
html.ub-theme-light:root{
  --ub-bg: #ffffff;
  --ub-text: #111827;
  --ub-muted: #6b7280;
  --ub-border: #e5e7eb;
  --ub-surface-1: #ffffff;
  --ub-surface-2: #f8fafc;
  --ub-surface-3: #eef2f7;
  --ub-card-bg: var(--ub-surface-1);
  --ub-card-border: #e6e9ee;
  --ub-shadow: 0 6px 24px rgba(0,0,0,.08);
  --ub-link: #0070bb;
  --ub-focus: rgba(249,58,19,.55);
  --ub-btn-glow: rgba(249,58,19,.32);
  --ub-chip-bg: #ffffff;
  --ub-chip-hover: #f6f8fb;
  --ub-chip-text: var(--ub-text);
}
html.ub-theme-dark:root{
  --ub-bg:#0b1020;
  --ub-text:#e5e7eb;
  --ub-muted:#9ca3af;
  --ub-border:rgba(255,255,255,.12);
  --ub-surface-1:#0f172a;
  --ub-surface-2:rgba(255,255,255,.03);
  --ub-surface-3:rgba(255,255,255,.06);
  --ub-card-bg: var(--ub-surface-1);
  --ub-card-border:rgba(255,255,255,.10);
  --ub-shadow:0 10px 32px rgba(0,0,0,.45);
  --ub-link:#60a5fa;
  --ub-btn-glow:rgba(249,58,19,.22);
  --ub-chip-bg:rgba(255,255,255,.04);
  --ub-chip-hover:rgba(255,255,255,.08);
  --ub-chip-text: var(--ub-text);
}
html.ub-theme-dark{ color-scheme: dark; }
html.ub-theme-light{ color-scheme: light; }
*{ box-sizing:border-box; }
html{ font-size:16px; }
body{margin:0;background:var(--ub-bg);color:var(--ub-text);font-family:var(--ub-font);line-height:1.45;text-rendering:optimizeLegibility;}
a{ color:var(--ub-btn-grad-b); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg,video{ max-width:100%; height:auto; }
:focus-visible{outline:3px solid var(--ub-focus);outline-offset:2px;border-radius:10px;}
.ub-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; }
}
.ub-shell{max-width:var(--ub-maxw);margin:0 auto;padding:0 var(--ub-gutter);}
.ub-layout{ padding:12px 0 48px; }
.ub-row{display:flex;gap:var(--ub-gap);align-items:flex-start;}
.ub-main{ flex:1 1 0; min-width:0; }
.ub-rail{ flex:0 0 clamp(280px,24vw,380px); }
@media (max-width:1024px){
.ub-row{ display:block; }
.ub-rail{ margin-top:var(--ub-gap); }
}
@media (min-width:1025px){
.ub-rail-inner{position:sticky;top:20px;overflow:visible;max-height:none;}
}
@media (min-width:1441px){
.ub-shell{ padding-left:clamp(18px, 3vw, 28px); padding-right:clamp(18px, 3vw, 28px); }
}
.ub-breadcrumb{list-style:none;margin:14px 0 10px;padding:10px 12px;border-radius:var(--ub-radius-1);background:var(--ub-surface-2);border:1px solid var(--ub-border);font-size:var(--ub-fs-1);}
.ub-breadcrumb li{ display:inline; }
.ub-breadcrumb .sep{ margin:0 8px; color:var(--ub-muted); }
.ub-card{background:var(--ub-card-bg);border:1px solid var(--ub-card-border);border-radius:var(--ub-radius-2);box-shadow:var(--ub-shadow);padding:14px;margin-bottom:var(--ub-gap);}
.ub-card-title{margin:0 0 10px;font-size:var(--ub-fs-3);font-weight:900;letter-spacing:-0.01em;}
.ub-card-subtitle{margin:0 0 12px;color:var(--ub-muted);font-size:var(--ub-fs-1);}
.ub-card--tight{ padding:12px; }
.ub-card--flush{ padding:0; }
.ub-h1{ font-size:var(--ub-fs-5); font-weight:950; margin:0 0 8px; letter-spacing:-0.02em; }
.ub-h2{ font-size:var(--ub-fs-4); font-weight:950; margin:0 0 8px; letter-spacing:-0.02em; }
.ub-p{ margin:0 0 10px; font-size:var(--ub-fs-2); }
.ub-muted{ color:var(--ub-muted); }
.ub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width:768px){
.ub-grid{ grid-template-columns:1fr; }
}
.ub-field label{font-weight:900;margin-bottom:6px;display:block;font-size:var(--ub-fs-2);}
.ub-field .hint{margin-top:6px;color:var(--ub-muted);font-size:var(--ub-fs-0);}
.ub-field .ub-inputrow{display: block !important;}
.ub-field .ub-inputrow > input,
.ub-field .ub-inputrow > select{display: block !important;width: 100% !important;}
.ub-field .ub-inputrow > select{margin-top: 6px;}
.ub-field input,
.ub-field select,
.ub-field textarea{width:100%;min-height:var(--ub-hit);padding:10px 12px;border-radius:var(--ub-radius-1);border:1px solid var(--ub-border);background:var(--ub-surface-1);color:var(--ub-text);font-size:var(--ub-fs-2);}
.ub-field textarea{ resize:vertical; }
.ub-field input::placeholder{ color:rgba(107,114,128,.85); }
html.ub-theme-dark .ub-field input::placeholder{ color:rgba(156,163,175,.75); }
.ub-field input:disabled,.ub-field select:disabled,.ub-field textarea:disabled{opacity:.65;cursor:not-allowed;}
.ub-inline-error{margin-top:6px;color:var(--ub-danger);font-size:var(--ub-fs-0);font-weight:800;min-height:1em;}
.ub-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--ub-hit);padding:12px 18px;border:none;border-radius:999px;color:#fff;font-weight:950;font-size:var(--ub-fs-2);cursor:pointer;text-decoration:none;user-select:none;white-space:nowrap;}
.ub-btn::after{content:"";position:absolute;inset:4px;border-radius:999px;background:linear-gradient(92deg,var(--ub-btn-grad-a),var(--ub-btn-grad-b));z-index:-1;box-shadow:0 10px 22px var(--ub-btn-glow);}
.ub-btn:active{ transform:translateY(1px); }
.ub-btn--secondary{color:var(--ub-btn-grad-b);background:var(--ub-surface-1);border:2px solid rgba(249,58,19,.45);}
.ub-btn--secondary::after{ content:none; box-shadow:none; }
.ub-btn--secondary:hover{ background:var(--ub-surface-2); }
.ub-btn--ghost{color:var(--ub-text);background:transparent;border:1px solid var(--ub-border);}
.ub-btn--ghost::after{ content:none; }
.ub-btn--block{ width:100%; }
.ub-chip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ub-hit);padding:10px 14px;border-radius:999px;border:1px solid var(--ub-border);background:var(--ub-chip-bg);color:var(--ub-chip-text);font-weight:900;font-size:var(--ub-fs-1);cursor:pointer;user-select:none;}
.ub-chip:hover{ background:var(--ub-chip-hover); }
.ub-chip[aria-pressed="true"]{border-color:rgba(249,58,19,.55);box-shadow:0 0 0 3px rgba(249,58,19,.18);}
.ub-chip input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color: var(--ub-btn-grad-b);}
.ub-alert{margin-top:12px;padding:12px;border-radius:var(--ub-radius-1);border:1px solid var(--ub-border);background:var(--ub-surface-2);font-size:var(--ub-fs-1);}
.ub-alert--success{ border-color:rgba(34,197,94,.35); }
.ub-alert--warning{ border-color:rgba(245,158,11,.35); }
.ub-alert--danger{  border-color:rgba(239,68,68,.35); }
.ub-note{margin-top:10px;font-size:var(--ub-fs-1);color:var(--ub-muted);}
.ub-out{margin-top:12px;padding:12px;border-radius:var(--ub-radius-2);border:1px solid var(--ub-border);background:var(--ub-surface-2);}
.ub-out--hidden{ display:none; }
.ub-out-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
@media (max-width:480px){
.ub-out-grid{ grid-template-columns:1fr; }
}
.ub-k{ font-size:var(--ub-fs-0); color:var(--ub-muted); font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.ub-v{ font-family:var(--ub-mono); font-weight:950; font-size:var(--ub-fs-3); }
.ub-collapsible{border:1px solid var(--ub-border);border-radius:var(--ub-radius-2);background:var(--ub-surface-2);overflow:hidden;}
.ub-collapsible > summary{list-style:none;cursor:pointer;padding:12px 14px;font-weight:950;min-height:var(--ub-hit);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ub-collapsible > summary::-webkit-details-marker{ display:none; }
.ub-collapsible > summary::after{content:"▾";color:var(--ub-muted);font-weight:900;}
.ub-collapsible[open] > summary::after{ content:"▴"; }
.ub-collapsible-body{padding:12px 14px 14px;border-top:1px solid var(--ub-border);background:var(--ub-card-bg);}
.ub-range{width:100%;height:var(--ub-hit);padding:0;background:transparent;}
.ub-range:focus-visible{ outline:none; }
.ub-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--ub-surface-3);border:1px solid var(--ub-border);}
.ub-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px; height:22px;border-radius:50%;background:linear-gradient(92deg,var(--ub-btn-grad-a),var(--ub-btn-grad-b));border:2px solid rgba(0,0,0,.18);margin-top:-7px;}
.ub-range::-moz-range-track{height:10px;border-radius:999px;background:var(--ub-surface-3);border:1px solid var(--ub-border);}
.ub-range::-moz-range-thumb{width:22px; height:22px;border-radius:50%;background:linear-gradient(92deg,var(--ub-btn-grad-a),var(--ub-btn-grad-b));border:2px solid rgba(0,0,0,.18);}
.ub-rail-actions .ub-btn{width:100%;margin-bottom:10px;}
.ub-section{padding:0;}
.ub-section-header{padding:10px 12px;border-bottom:1px solid var(--ub-border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ub-section-title{margin:0;font-size:var(--ub-fs-0);font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:var(--ub-muted);}
.ub-section-meta{font-size:var(--ub-fs-0);font-weight:950;color:var(--ub-muted);}
.ub-card.ub-common{padding: 0;background: linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));border: 1px solid var(--ub-card-border);overflow: hidden;}
.ub-card.ub-common .ub-common-header{padding: 12px 14px;border-bottom: 1px solid var(--ub-border);background: var(--ub-surface-2);}
.ub-card.ub-common .ub-common-title{margin: 0;font-size: 12px;font-weight: 950;letter-spacing: .08em;text-transform: uppercase;color: var(--ub-muted);}
.ub-card.ub-common .ub-common-body{padding: 4px 0;}
.ub-card.ub-common .ub-common-list{list-style: none;margin: 0;padding: 0;}
.ub-card.ub-common .ub-common-list li{position: relative;padding: 12px 14px 12px 38px;line-height: 1.4;font-size: 13px;border-bottom: 1px solid rgba(0,0,0,.06);transition: background .15s ease, transform .15s ease;}
html.ub-theme-dark .ub-card.ub-common .ub-common-list li{border-bottom: 1px solid rgba(255,255,255,.08);}
.ub-card.ub-common .ub-common-list li::before{content: "";position: absolute;left: 14px;top: 50%;transform: translateY(-50%);width: 10px;height: 10px;border-radius: 999px;background: linear-gradient(135deg, var(--ub-btn-grad-a), var(--ub-btn-grad-b));box-shadow: 0 0 0 3px rgba(249,58,19,.12);}
@media (hover: hover){
.ub-card.ub-common .ub-common-list li:hover{background: var(--ub-surface-3);transform: translateX(2px);}
}
.ub-card.ub-common .ub-common-list li:last-child{border-bottom: 0;}
.ub-related{ padding:0; }
.ub-related-header{padding:10px 12px;border-bottom:1px solid var(--ub-border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ub-related-title{margin:0;font-size:var(--ub-fs-0);font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:var(--ub-muted);}
.ub-related-meta{font-size:var(--ub-fs-0);font-weight:950;color:var(--ub-muted);border:1px solid var(--ub-border);padding:4px 10px;border-radius:999px;background:var(--ub-surface-2);}
.ub-related-body{ padding:0; }
.ub-related-list{list-style:none;margin:0;padding:6px 0;}
.ub-related-list a{display:block;padding:10px 12px;overflow-wrap:anywhere;word-break:break-word;line-height:1.35;border-radius:10px;margin:0 8px 6px;}
.ub-related-list a:hover{background:var(--ub-surface-3);text-decoration:none;}
.ub-related-list li:last-child a{ margin-bottom:0; }
.ub-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ub-border);border-radius:var(--ub-radius-2);overflow:hidden;background:var(--ub-card-bg);}
.ub-table th,.ub-table td{padding:10px 12px;border-bottom:1px solid var(--ub-border);text-align:left;font-size:var(--ub-fs-1);}
.ub-table th{background:var(--ub-surface-2);font-weight:950;}
.ub-table tr:last-child td{ border-bottom:0; }
.ub-safe-wrap{overflow-wrap:anywhere;word-break:break-word;}
.ub-cq{ container-type:inline-size; }
.ub-rail-togglebar{display:none;margin: 10px 0 12px;}
.ub-rail-backdrop{position: fixed;inset: 0;background: rgba(0,0,0,.45);backdrop-filter: blur(2px);z-index: 9998;}
@media (max-width:1024px){
.ub-row{ display:block; }
.ub-main{ width:100%; }
.ub-rail-togglebar{ display:block; }
.ub-rail{position: fixed;top: 0;left: 0;height: 100vh;width: min(92vw, 360px);margin: 0;padding: 0;transform: translateX(-110%);transition: transform 180ms ease;z-index: 9999;}
.ub-rail-inner{position: relative;top: 0;height: 100vh;overflow: auto;padding: 12px;background: var(--ub-bg);}
body.ub-rail-open .ub-rail{transform: translateX(0);}
}
@media (prefers-reduced-motion: reduce){
@media (max-width:1024px){
.ub-rail{ transition: none; }
}
}