/* The shared components in app/templates/_ui.html (NOTE-FROM-DAN.md section 74b.2, design lock). Every value here
   is a tokens.css variable; nothing else defines a ui-* class. See docs/DESIGN-GUIDE.md for the component list. */

.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);
  font-weight:var(--fw-semi);font-size:var(--fs-body);line-height:1.2;padding:11px 18px;border-radius:var(--r-btn);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;min-height:44px}
.ui-btn:focus-visible{outline:var(--focus-ring)}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.ui-btn-primary{background:var(--orange);border-color:var(--orange);color:var(--white)}
.ui-btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d)}
.ui-btn-secondary{background:var(--white);border-color:var(--navy);color:var(--navy)}
.ui-btn-secondary:hover{background:var(--bg)}
.ui-btn-quiet{background:none;border-color:transparent;color:var(--navy);text-decoration:underline;text-underline-offset:3px;padding-left:4px;padding-right:4px;min-height:auto}
.ui-btn-quiet:hover{color:var(--orange-d)}
.ui-btn-sm{padding:8px 12px;font-size:var(--fs-small);min-height:38px}

.ui-pill{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;font-weight:var(--fw-heavy);
  font-size:13px;letter-spacing:var(--ls-label);padding:5px 14px;border-radius:var(--r-chip)}
.ui-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.ui-pill-pass{background:var(--pass-soft);color:var(--pass)}
.ui-pill-warn{background:var(--warn-soft);color:var(--warn)}
.ui-pill-fail{background:var(--fail-soft);color:var(--fail)}

.ui-tag{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:var(--fw-semi);
  padding:3px 10px;border-radius:var(--r-tag)}
.ui-tag-cd{background:var(--tag-cd-bg);color:var(--tag-cd-fg)}
.ui-tag-rule{background:var(--tag-rule-bg);color:var(--tag-rule-fg)}
.ui-tag-neutral{background:var(--bg);color:var(--navy)}

.ui-tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ui-tab{padding:var(--s3) 0;color:var(--mute);text-decoration:none;font-weight:var(--fw-semi);border-bottom:3px solid transparent}
.ui-tab.on{color:var(--ink);border-bottom-color:var(--orange)}
.ui-tab:hover{color:var(--ink)}

.ui-field label{display:block;font-weight:var(--fw-semi);margin-bottom:var(--s2)}
.ui-field input,.ui-field select,.ui-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);
  border-radius:var(--r-input);padding:11px 14px;font:var(--fs-body)/1.5 var(--font);color:var(--ink)}
.ui-field input:focus-visible,.ui-field select:focus-visible,.ui-field textarea:focus-visible{outline:var(--focus-ring)}
.ui-field-help{color:var(--mute);font-size:var(--fs-small);margin:var(--s1) 0 0}

.ui-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:var(--s5)}

.ui-tile{display:flex;flex-direction:column;gap:var(--s1)}
.ui-tile-v{font-size:var(--fs-h1);font-weight:var(--fw-heavy);font-variant-numeric:tabular-nums;color:var(--ink);line-height:var(--lh-tight)}
.ui-tile-l{font-size:var(--fs-small);color:var(--mute)}

.ui-mustfix{border-left:4px solid var(--fail);background:var(--fail-soft);border-radius:var(--r-tag);padding:var(--s4)}
.ui-mustfix blockquote{margin:0 0 var(--s2);font-weight:var(--fw-semi);color:var(--ink)}
.ui-mustfix-who{margin:0 0 var(--s2);color:var(--mute);font-size:var(--fs-small)}
.ui-mustfix-try{margin:0;color:var(--pass)}
.ui-mustfix-try a{color:var(--pass)}

.ui-rulesbox{border:1px dashed var(--line-strong);background:var(--bg);border-radius:var(--r-card);padding:var(--s4)}
.ui-rulesbox-h{margin:0 0 var(--s2);font-weight:var(--fw-semi)}
.ui-rulesbox ul{margin:0;padding-left:1.2em}