/* Shheletar — Component styles
   Extracted verbatim from the design-system bundle (ds/_ds_bundle.js).
   Uses the CSS custom properties defined in tokens.css. */

/* Badge */
.shh-badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:var(--w-semibold);
  letter-spacing:.08em;text-transform:uppercase;
  padding:.28em .56em;border-radius:var(--r-sm);
  border:var(--bw-hair) solid transparent;line-height:1;white-space:nowrap;
}
.shh-badge__dot{width:.5em;height:.5em;border-radius:var(--r-pill);background:currentColor;flex:none;}
.shh-badge--violation{color:var(--stamp);background:var(--rust-tint);border-color:color-mix(in srgb,var(--stamp) 28%,transparent);}
.shh-badge--warning{color:var(--amber-deep);background:var(--amber-tint);border-color:color-mix(in srgb,var(--amber-deep) 28%,transparent);}
.shh-badge--compliant{color:var(--green-bright);background:var(--green-tint);border-color:color-mix(in srgb,var(--green-bright) 26%,transparent);}
.shh-badge--info{color:var(--sky);background:var(--sky-tint);border-color:color-mix(in srgb,var(--sky) 26%,transparent);}
.shh-badge--neutral{color:var(--ink-soft);background:var(--paper-deep);border-color:var(--border-strong);}
.shh-badge--solid.shh-badge--violation{color:#fbf3ec;background:var(--stamp);border-color:var(--stamp);}
.shh-badge--solid.shh-badge--compliant{color:var(--paper);background:var(--green);border-color:var(--green);}

/* Hover popover — attach to any element with a data-tip attribute (e.g. the
   Provisional confidence badge). Pure CSS; works on hover and keyboard focus. */
.shh-tip{position:relative;cursor:help;}
.shh-tip[tabindex]{outline:none;}
.shh-tip::after{
  content:attr(data-tip);
  position:absolute;left:0;top:calc(100% + 8px);z-index:30;
  width:max-content;max-width:248px;
  text-transform:none;letter-spacing:0;text-align:left;white-space:normal;
  font-family:var(--font-body);font-size:var(--t-small);font-weight:var(--w-regular);line-height:1.4;
  color:var(--paper);background:var(--ink);
  padding:.55em .7em;border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;
  pointer-events:none;
}
.shh-tip::before{
  content:"";position:absolute;left:14px;top:calc(100% + 3px);z-index:31;
  border:5px solid transparent;border-bottom-color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .12s ease;
}
.shh-tip:hover::after,.shh-tip:focus::after,.shh-tip:focus-visible::after,
.shh-tip:hover::before,.shh-tip:focus::before,.shh-tip:focus-visible::before{opacity:1;visibility:visible;transform:translateY(0);}

/* Button */
.shh-btn{
  --_pad-y:.6em; --_pad-x:1.05em; --_fs:var(--t-small);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-serif);font-size:var(--_fs);font-weight:var(--w-semibold);
  line-height:1;letter-spacing:.005em;
  padding:var(--_pad-y) var(--_pad-x);
  border-radius:var(--r-md);border:var(--bw-hair) solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.shh-btn:active{transform:translateY(1px);}
.shh-btn:disabled,.shh-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;}
.shh-btn--sm{--_pad-y:.45em;--_pad-x:.8em;--_fs:var(--t-caption);}
.shh-btn--lg{--_pad-y:.72em;--_pad-x:1.4em;--_fs:var(--t-body);}
.shh-btn--block{display:flex;width:100%;}

.shh-btn--primary{background:var(--green);color:var(--text-on-green);border-color:var(--green);}
.shh-btn--primary:hover:not(:disabled){background:var(--green-bright);border-color:var(--green-bright);}

.shh-btn--secondary{background:var(--paper-panel);color:var(--text-strong);border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.shh-btn--secondary:hover:not(:disabled){background:var(--paper);border-color:var(--green);color:var(--green-deep);}

.shh-btn--ghost{background:transparent;color:var(--green-deep);border-color:transparent;}
.shh-btn--ghost:hover:not(:disabled){background:var(--green-tint);}

.shh-btn--danger{background:var(--stamp);color:#fbf3ec;border-color:var(--stamp);}
.shh-btn--danger:hover:not(:disabled){background:var(--stamp-deep);border-color:var(--stamp-deep);}

.shh-btn__ic{display:inline-flex;width:1.1em;height:1.1em;}
.shh-btn__ic svg{width:100%;height:100%;}

/* Card */
.shh-card{
  position:relative;background:var(--surface-card);
  border:var(--bw-hair) solid var(--border);border-radius:var(--r-md);
  color:var(--text-body);
}
.shh-card--elevated{box-shadow:var(--shadow-md);}
.shh-card--inset{background:var(--surface-inset);box-shadow:var(--shadow-inset);border-color:var(--border-strong);}
.shh-card--flagged{background:var(--rust-tint);border-color:color-mix(in srgb,var(--stamp) 30%,var(--border));}
.shh-card--flagged::before,.shh-card--compliant::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--bw-strong);border-radius:var(--r-md) var(--r-md) 0 0;}
.shh-card--flagged::before{background:var(--stamp);}
.shh-card--compliant{background:var(--green-tint);border-color:var(--green-line);}
.shh-card--compliant::before{background:var(--green-bright);}

.shh-card__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:var(--bw-hair) solid var(--rule);
}
.shh-card__titles{display:flex;flex-direction:column;gap:.35em;min-width:0;}
.shh-card__title{font-family:var(--font-serif);font-weight:var(--w-bold);font-size:var(--t-h4);
  color:var(--text-strong);line-height:1.15;letter-spacing:0;margin:0;}
.shh-card__ref{font-family:var(--font-mono);font-size:var(--t-caption);color:var(--text-muted);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.shh-card__body{padding:var(--s-5);}
.shh-card__head + .shh-card__body{padding-top:var(--s-4);}
.shh-card--pad-sm .shh-card__body{padding:var(--s-4);}
.shh-card--pad-none .shh-card__body{padding:0;}

/* Eyebrow */
.shh-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:var(--w-semibold);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--text-muted);line-height:1;
}
.shh-eyebrow--brand{color:var(--green-bright);}
.shh-eyebrow--alert{color:var(--stamp);}
.shh-eyebrow::before{content:"";width:1.6em;height:0;border-top:var(--bw-rule) solid currentColor;opacity:.55;flex:none;}
.shh-eyebrow--plain::before{display:none;}

/* Stamp */
.shh-stamp{display:inline-block;line-height:0;}
.shh-stamp svg{display:block;}
.shh-stamp text{font-family:var(--font-mono);font-weight:var(--w-bold);}
.shh-stamp--void{opacity:.85;}

/* Tag */
.shh-tag{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-mono);font-size:var(--t-caption);font-weight:var(--w-medium);
  letter-spacing:.02em;line-height:1;
  padding:.4em .65em;border-radius:var(--r-sm);
  border:var(--bw-hair) solid var(--border-strong);background:var(--paper-panel);color:var(--ink-soft);
  cursor:default;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
button.shh-tag{cursor:pointer;}
button.shh-tag:hover{border-color:var(--green);color:var(--green-deep);}
.shh-tag[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--text-on-green);}
.shh-tag__x{display:inline-flex;width:1.05em;height:1.05em;border:0;background:transparent;color:inherit;
  cursor:pointer;padding:0;opacity:.6;font-family:var(--font-mono);font-size:1.1em;line-height:1;}
.shh-tag__x:hover{opacity:1;}
.shh-tag__dot{width:.5em;height:.5em;border-radius:var(--r-pill);flex:none;}

/* DataReadout */
.shh-readout{display:flex;flex-direction:column;gap:.2em;}
.shh-readout__label{font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:var(--w-semibold);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-muted);}
.shh-readout__value{display:flex;align-items:baseline;gap:.18em;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;line-height:1;color:var(--text-strong);}
.shh-readout__num{font-size:var(--t-readout);font-weight:var(--w-bold);letter-spacing:-.01em;}
.shh-readout__unit{font-size:var(--t-h4);font-weight:var(--w-medium);color:var(--text-muted);}
.shh-readout--violation .shh-readout__num{color:var(--stamp);}
.shh-readout--compliant .shh-readout__num{color:var(--green-bright);}
.shh-readout--warning .shh-readout__num{color:var(--amber-deep);}
.shh-readout__delta{display:inline-flex;align-items:center;gap:.3em;font-family:var(--font-mono);
  font-size:var(--t-caption);font-weight:var(--w-semibold);letter-spacing:.02em;}
.shh-readout__delta--over{color:var(--stamp);}
.shh-readout__delta--under{color:var(--green-bright);}
.shh-readout--sm .shh-readout__num{font-size:var(--t-h2);}
.shh-readout--sm .shh-readout__unit{font-size:var(--t-body);}

/* OffenderRow */
.shh-off{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--s-4);
  padding:var(--s-3) var(--s-4);border-bottom:var(--bw-hair) solid var(--rule);
  transition:background var(--dur-fast) var(--ease-out);}
.shh-off:hover{background:var(--paper-deep);}
.shh-off__rank{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:var(--t-h3);
  font-variant-numeric:tabular-nums;color:var(--ink-ghost);min-width:1.6em;text-align:right;line-height:1;}
.shh-off--top .shh-off__rank{color:var(--stamp);}
.shh-off__id{display:flex;flex-direction:column;gap:.15em;min-width:0;}
.shh-off__tail{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:var(--t-body);
  letter-spacing:.04em;color:var(--text-strong);}
.shh-off__meta{font-family:var(--font-serif);font-size:var(--t-caption);color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shh-off__spark{display:flex;align-items:flex-end;gap:2px;height:30px;}
.shh-off__spark i{width:4px;background:var(--green-line);border-radius:1px;flex:none;}
.shh-off__spark i[data-v="1"]{background:var(--rust);}
.shh-off__count{display:flex;flex-direction:column;align-items:flex-end;gap:.1em;line-height:1;}
.shh-off__count b{font-family:var(--font-mono);font-weight:var(--w-bold);font-size:var(--t-h3);
  font-variant-numeric:tabular-nums;color:var(--stamp);}
.shh-off__count span{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
@media(max-width:560px){.shh-off{grid-template-columns:auto 1fr auto;}.shh-off__spark{display:none;}}

/* Input */
.shh-field{display:flex;flex-direction:column;gap:.4em;}
.shh-field__label{font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:var(--w-semibold);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-muted);}
.shh-field__req{color:var(--stamp);margin-left:.3em;}
.shh-input{display:flex;align-items:center;gap:.5em;background:var(--paper-panel);
  border:var(--bw-hair) solid var(--border-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-inset);padding:0 .75em;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);}
.shh-input:focus-within{border-color:var(--green-bright);box-shadow:0 0 0 3px var(--focus-ring);}
.shh-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--font-serif);font-size:var(--t-body);color:var(--text-strong);
  padding:.62em 0;line-height:1.2;}
.shh-input input::placeholder{color:var(--ink-faint);}
.shh-input--data input{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.shh-input__affix{font-family:var(--font-mono);font-size:var(--t-small);color:var(--ink-faint);flex:none;}
.shh-input--error{border-color:var(--stamp);}
.shh-input--error:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--stamp) 30%,transparent);}
.shh-field__hint{font-family:var(--font-serif);font-size:var(--t-caption);color:var(--text-muted);}
.shh-field__hint--error{color:var(--stamp);font-family:var(--font-mono);font-size:var(--t-caption);}
.shh-input--disabled{opacity:.55;pointer-events:none;}

/* Icon sprite helper */
.icon{ width:1em; height:1em; display:inline-flex; vertical-align:-0.125em; flex:none; }