/* ============================================================
   MixNight — shared UI primitives. Requires mixnight-theme.css.
   Small on purpose: buttons, chips, segmented control, switch,
   fields, cards, eyebrows. Every app builds on these.
   ============================================================ */
.t-reset,.t-reset *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* eyebrow — small mono label */
.eyebrow{font-family:var(--mono);font-size:0.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
.eyebrow.accent{color:var(--accent)}

/* display type */
.display{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);line-height:1}
.num{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);font-variant-numeric:tabular-nums lining-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;height:3rem;padding:0 1.125rem;border-radius:0.75rem;
  font-family:var(--sans);font-size:0.9375rem;font-weight:600;letter-spacing:-.005em;color:var(--txt);
  background:var(--card2);border:1px solid var(--line2);cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--txt);color:var(--bg);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--txt)}
.btn.lg{height:3.5rem;padding:0 1.5rem;font-size:1rem;border-radius:0.875rem}
.btn.icon{width:3rem;padding:0;border-radius:50%}
.btn svg{width:1.25rem;height:1.25rem;fill:currentColor}

/* chips */
.chip{display:inline-flex;align-items:center;gap:0.375rem;height:3rem;padding:0 1rem;border-radius:99px;font-size:0.9375rem;font-weight:600;
  color:var(--dim);background:var(--card);border:1px solid var(--line);cursor:pointer;transition:all .12s ease}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.chip:active{transform:scale(.97)}

/* segmented control */
.seg{display:flex;padding:0.1875rem;border-radius:0.875rem;background:var(--card);border:1px solid var(--line)}
.seg button{flex:1;height:3rem;border:0;border-radius:0.6875rem;background:transparent;color:var(--dim);font-family:var(--sans);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:all .12s ease}
.seg button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 2px 10px rgba(0,0,0,.3)}

/* switch */
.sw{width:3.5rem;height:2.125rem;border-radius:99px;background:var(--card2);border:1px solid var(--line2);position:relative;cursor:pointer;transition:background .2s,border-color .2s;padding:0}
.sw::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--dim);transition:left .2s,background .2s}
.sw.on{background:var(--accent);border-color:transparent}.sw.on::after{left:1.5625rem;background:var(--accent-ink)}

/* fields */
.field{display:block}
.field .lbl{display:block;font-size:0.875rem;font-weight:600;color:var(--dim);margin-bottom:0.5rem}
.field input{width:100%;height:3rem;border-radius:0.75rem;border:1px solid var(--line2);background:var(--bg);color:var(--txt);padding:0 0.875rem;font-family:var(--sans);font-size:1rem;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--accent)}
.field input::placeholder{color:var(--dim2)}

/* surfaces */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.hairline{height:1px;background:var(--line)}

/* settings rows */
.row2{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.75rem;border-bottom:1px solid var(--line);font-size:1rem}
.row2:last-child{border-bottom:0}