/* =========================================================
   KZ utility layer — Tailwind-inspired, vanilla CSS.
   Reads from DS v2 tokens (01-tokens.css). No build step.
   Includes Bootstrap 3 grid replacement (.row + .col-md-*) so
   bootstrap.min.css can be dropped without touching markup.
   ========================================================= */

/* ============================================================
   Element resets (mimic Bootstrap's normalize where we relied on it)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-700); text-decoration: none; transition: color .12s; }
a:hover { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); }
img, svg { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; }
.table > tbody > tr > td, .table > tbody > tr > th { border-top: 1px solid var(--border); }
code, pre { font-family: var(--font-mono); }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ============================================================
   Bootstrap 3 grid replacement
   ============================================================
   Same selectors (.container, .row, .col-md-*, etc.) so existing
   markup keeps working. Implementation: CSS Grid behind Bootstrap's
   float-based layout. Mobile-first; col-md applies at >=920px.
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}
.container-fluid { width: 100%; padding: 0 15px; margin: 0 auto; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row::after { content: ""; display: table; clear: both; }
[class^="col-"], [class*=" col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* xs (default, mobile) */
.col-xs-1  { width: 8.3333%; } .col-xs-2  { width: 16.6666%; }
.col-xs-3  { width: 25%; }     .col-xs-4  { width: 33.3333%; }
.col-xs-5  { width: 41.6666%; }.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.3333%; }.col-xs-8  { width: 66.6666%; }
.col-xs-9  { width: 75%; }     .col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6666%; }.col-xs-12 { width: 100%; }
.col-xs-offset-1 { margin-left: 8.3333%; }
.col-xs-offset-2 { margin-left: 16.6666%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.3333%; }

@media (min-width: 768px) {
  .col-sm-1  { width: 8.3333%; } .col-sm-2  { width: 16.6666%; }
  .col-sm-3  { width: 25%; }     .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6666%; }.col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }.col-sm-8  { width: 66.6666%; }
  .col-sm-9  { width: 75%; }     .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6666%; }.col-sm-12 { width: 100%; }
  .col-sm-offset-1 { margin-left: 8.3333%; }
  .col-sm-offset-2 { margin-left: 16.6666%; }
  .col-sm-offset-3 { margin-left: 25%; }
}

@media (min-width: 992px) {
  .col-md-1  { width: 8.3333%; } .col-md-2  { width: 16.6666%; }
  .col-md-3  { width: 25%; }     .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6666%; }.col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }.col-md-8  { width: 66.6666%; }
  .col-md-9  { width: 75%; }     .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6666%; }.col-md-12 { width: 100%; }
  .col-md-offset-1 { margin-left: 8.3333%; }
  .col-md-offset-2 { margin-left: 16.6666%; }
  .col-md-offset-3 { margin-left: 25%; }
  .col-md-offset-4 { margin-left: 33.3333%; }
}

@media (min-width: 1200px) {
  .col-lg-1  { width: 8.3333%; } .col-lg-2  { width: 16.6666%; }
  .col-lg-3  { width: 25%; }     .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6666%; }.col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }.col-lg-8  { width: 66.6666%; }
  .col-lg-9  { width: 75%; }     .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6666%; }.col-lg-12 { width: 100%; }
}

/* ============================================================
   Bootstrap 3 visibility helpers (hidden-xs / hidden-sm / etc.)
   ============================================================ */
.hidden { display: none !important; }
@media (max-width: 767px)  { .hidden-xs { display: none !important; } .visible-xs-only { display: block !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } .visible-sm-only { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } .visible-md-only { display: block !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } .visible-lg-only { display: block !important; } }
.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; }

/* ============================================================
   Bootstrap 3 fallback styling (panel-*, badge, label, alert,
   list-group, glyphicon-*) — minimal so existing legacy works.
   ============================================================ */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 20px; }
.panel-default, .panel-info, .panel-warning, .panel-danger, .panel-success { background: var(--surface); }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-2); }
.panel-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; background: var(--surface-2); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); }

.list-group { padding-left: 0; margin-bottom: 20px; }
.list-group-item {
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.list-group-item:first-child { border-top-left-radius: var(--r-sm); border-top-right-radius: var(--r-sm); }
.list-group-item:last-child { border-bottom-left-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); margin-bottom: 0; }
.list-group-item:hover { background: var(--surface-2); }

.badge {
  display: inline-block; min-width: 10px; padding: 3px 7px;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--text-3);
  border-radius: 10px; vertical-align: middle;
}

.label {
  display: inline; padding: 0.2em 0.6em 0.3em; font-size: 75%;
  font-weight: 700; line-height: 1; color: #fff; text-align: center;
  white-space: nowrap; vertical-align: baseline; border-radius: 0.25em;
}
.label-default { background-color: var(--text-3); }
.label-primary { background-color: var(--brand-500); }
.label-success { background-color: var(--verdict-safe); }
.label-info    { background-color: var(--brand-500); }
.label-warning { background-color: var(--verdict-warn); }
.label-danger  { background-color: var(--verdict-spam); }

.alert {
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.alert-info    { background: var(--brand-50);          border-color: color-mix(in oklch, var(--brand-500) 25%, var(--border)); color: var(--brand-700); }
.alert-success { background: var(--verdict-safe-bg);   border-color: color-mix(in oklch, var(--verdict-safe) 25%, var(--border)); color: var(--verdict-safe); }
.alert-warning { background: var(--verdict-warn-bg);   border-color: color-mix(in oklch, var(--verdict-warn) 25%, var(--border)); color: var(--verdict-warn-ink); }
.alert-danger  { background: var(--verdict-spam-bg);   border-color: color-mix(in oklch, var(--verdict-spam) 25%, var(--border)); color: var(--verdict-spam); }

/* glyphicons → invisible (use SVGs everywhere instead). Keep span occupying 0 space. */
.glyphicon { display: inline-block; width: 0; height: 0; overflow: hidden; }

/* form-control fallback (legacy forms) */
.form-control {
  display: block; width: 100%;
  padding: 8px 12px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus { border-color: var(--brand-500); box-shadow: var(--ring); outline: 0; }
.form-group { margin-bottom: 14px; }
.help-block { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.input-group { position: relative; display: flex; }
.input-group .form-control { flex: 1; }
.input-group-btn { display: flex; }

/* btn fallback (Bootstrap legacy buttons we haven't migrated yet) */
.btn {
  display: inline-block; padding: 6px 14px; margin-bottom: 0;
  font-size: 14px; font-weight: 600; line-height: 1.5;
  text-align: center; vertical-align: middle; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-md);
  text-decoration: none; transition: background .12s, border-color .12s;
}
.btn-default { color: var(--text); background: var(--surface); border-color: var(--border); }
.btn-default:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-primary { color: #fff; background: var(--brand-500); border-color: var(--brand-500); }
.btn-primary:hover { background: var(--brand-600); }
.btn-success { color: #fff; background: var(--verdict-safe); border-color: var(--verdict-safe); }
.btn-info    { color: #fff; background: var(--brand-500); border-color: var(--brand-500); }
.btn-warning { color: #fff; background: var(--verdict-warn); border-color: var(--verdict-warn); }
.btn-danger  { color: #fff; background: var(--verdict-spam); border-color: var(--verdict-spam); }
.btn-line    { color: var(--text); background: var(--surface); border-color: var(--border); }
.btn-xs { padding: 2px 6px; font-size: 12px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-lg { padding: 10px 20px; font-size: 16px; }
.btn-block { display: block; width: 100%; }
.btn-group { display: inline-flex; }
.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified .btn { flex: 1; }

/* breadcrumb fallback (we use kz-breadcrumbs / .crumb but keep BS class working) */
.breadcrumb { padding: 8px 14px; margin-bottom: 16px; list-style: none; background: var(--surface-2); border-radius: var(--r-md); }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li::before { content: "/ "; padding: 0 6px; color: var(--text-3); }
.breadcrumb > .active { color: var(--text); }

/* dmca-badge inline image */
.dmca-badge img { display: inline-block; }

/* ============================================================
   Pull/text helpers (Bootstrap legacy classes used in markup)
   ============================================================ */
.pull-left  { float: left;  }
.pull-right { float: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-3); }
.text-success{ color: var(--verdict-safe); }
.text-danger { color: var(--verdict-spam); }
.text-warning{ color: var(--verdict-warn); }
.text-info   { color: var(--brand-700); }
.clearfix::after { content: ""; display: table; clear: both; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }

/* ============================================================
   Tailwind-inspired utility classes (kz_-prefixed friendly mix)
   Use sparingly to replace inline style="..." patterns.
   ============================================================ */

/* Spacing scale (matches DS tokens) */
:root {
  --u-0: 0;    --u-1: 4px;  --u-2: 8px;  --u-3: 12px;
  --u-4: 16px; --u-5: 20px; --u-6: 24px; --u-8: 32px;
  --u-10: 40px;--u-12: 56px;--u-16: 80px;
}

/* margin */
.m-0{margin:var(--u-0)} .m-1{margin:var(--u-1)} .m-2{margin:var(--u-2)} .m-3{margin:var(--u-3)} .m-4{margin:var(--u-4)} .m-6{margin:var(--u-6)} .m-8{margin:var(--u-8)}
.mt-0{margin-top:0} .mt-1{margin-top:var(--u-1)} .mt-2{margin-top:var(--u-2)} .mt-3{margin-top:var(--u-3)} .mt-4{margin-top:var(--u-4)} .mt-6{margin-top:var(--u-6)} .mt-8{margin-top:var(--u-8)} .mt-10{margin-top:var(--u-10)} .mt-12{margin-top:var(--u-12)}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:var(--u-1)} .mb-2{margin-bottom:var(--u-2)} .mb-3{margin-bottom:var(--u-3)} .mb-4{margin-bottom:var(--u-4)} .mb-6{margin-bottom:var(--u-6)} .mb-8{margin-bottom:var(--u-8)}
.ml-0{margin-left:0} .ml-1{margin-left:var(--u-1)} .ml-2{margin-left:var(--u-2)} .ml-3{margin-left:var(--u-3)} .ml-4{margin-left:var(--u-4)} .ml-auto{margin-left:auto}
.mr-0{margin-right:0} .mr-1{margin-right:var(--u-1)} .mr-2{margin-right:var(--u-2)} .mr-3{margin-right:var(--u-3)} .mr-4{margin-right:var(--u-4)} .mr-auto{margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.my-0{margin-top:0;margin-bottom:0} .my-2{margin-top:var(--u-2);margin-bottom:var(--u-2)} .my-3{margin-top:var(--u-3);margin-bottom:var(--u-3)} .my-4{margin-top:var(--u-4);margin-bottom:var(--u-4)} .my-6{margin-top:var(--u-6);margin-bottom:var(--u-6)}

/* padding */
.p-0{padding:0} .p-1{padding:var(--u-1)} .p-2{padding:var(--u-2)} .p-3{padding:var(--u-3)} .p-4{padding:var(--u-4)} .p-5{padding:var(--u-5)} .p-6{padding:var(--u-6)} .p-8{padding:var(--u-8)}
.pt-0{padding-top:0} .pt-2{padding-top:var(--u-2)} .pt-3{padding-top:var(--u-3)} .pt-4{padding-top:var(--u-4)} .pt-6{padding-top:var(--u-6)}
.pb-0{padding-bottom:0} .pb-2{padding-bottom:var(--u-2)} .pb-3{padding-bottom:var(--u-3)} .pb-4{padding-bottom:var(--u-4)} .pb-6{padding-bottom:var(--u-6)}
.px-2{padding-left:var(--u-2);padding-right:var(--u-2)} .px-3{padding-left:var(--u-3);padding-right:var(--u-3)} .px-4{padding-left:var(--u-4);padding-right:var(--u-4)}
.py-2{padding-top:var(--u-2);padding-bottom:var(--u-2)} .py-3{padding-top:var(--u-3);padding-bottom:var(--u-3)} .py-4{padding-top:var(--u-4);padding-bottom:var(--u-4)}

/* display */
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-end{align-items:flex-end}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.flex-1{flex:1}.flex-none{flex:none}.flex-auto{flex:auto}
.gap-0{gap:0} .gap-1{gap:var(--u-1)} .gap-2{gap:var(--u-2)} .gap-3{gap:var(--u-3)} .gap-4{gap:var(--u-4)} .gap-6{gap:var(--u-6)} .gap-8{gap:var(--u-8)}

/* grid */
.grid-cols-1{grid-template-columns:1fr} .grid-cols-2{grid-template-columns:1fr 1fr} .grid-cols-3{grid-template-columns:1fr 1fr 1fr} .grid-cols-4{grid-template-columns:repeat(4, 1fr)}

/* sizing */
.w-full{width:100%}.w-auto{width:auto}
.h-full{height:100%}.h-auto{height:auto}
.min-h-0{min-height:0}.min-h-screen{min-height:100vh}
.max-w-none{max-width:none}.max-w-sm{max-width:640px}.max-w-md{max-width:760px}.max-w-lg{max-width:880px}.max-w-prose{max-width:65ch}

/* position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.z-0{z-index:0}.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}

/* text */
.text-xs{font-size:11px}.text-sm{font-size:12px}.text-base{font-size:14px}.text-md{font-size:15px}.text-lg{font-size:16px}.text-xl{font-size:18px}.text-2xl{font-size:24px}.text-3xl{font-size:32px}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}
.tracking-tight{letter-spacing:-.02em}.tracking-wide{letter-spacing:.04em}.tracking-wider{letter-spacing:.08em}
.leading-tight{line-height:1.2}.leading-normal{line-height:1.5}.leading-loose{line-height:1.7}
.text-color-base{color:var(--text)}.text-color-2{color:var(--text-2)}.text-color-3{color:var(--text-3)}.text-color-brand{color:var(--brand-700)}

/* background */
.bg-surface{background:var(--surface)}.bg-surface-2{background:var(--surface-2)}.bg-brand{background:var(--brand-500)}.bg-brand-50{background:var(--brand-50)}
.bg-spam-bg{background:var(--verdict-spam-bg)}.bg-warn-bg{background:var(--verdict-warn-bg)}.bg-safe-bg{background:var(--verdict-safe-bg)}.bg-mute-bg{background:var(--verdict-mute-bg)}

/* border */
.border{border:1px solid var(--border)}.border-0{border:0}.border-strong{border-color:var(--border-strong)}
.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--r-sm)}.rounded{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}.rounded-xl{border-radius:var(--r-xl)}.rounded-pill{border-radius:var(--r-pill)}.rounded-full{border-radius:50%}

/* shadow */
.shadow-none{box-shadow:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}

/* misc */
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-y-auto{overflow-y:auto}
.whitespace-nowrap{white-space:nowrap}.break-word{word-wrap:break-word;overflow-wrap:anywhere}
.list-none{list-style:none;padding:0;margin:0}