/* MezBOX components for own apps. Load after tokens.css.
   Classes are prefixed mz- so they can live next to an app's own CSS. */
@import url("../tokens/tokens.css");

/* ---- base ---- */
.mz, body.mz {
  background: var(--mz-bg);
  color: var(--mz-text);
  font: 400 var(--mz-fs-body)/1.5 var(--mz-font-text);
  -webkit-font-smoothing: antialiased;
}
.mz :focus-visible { outline: none; box-shadow: var(--mz-ring); border-radius: var(--mz-radius-sm); }
.mz h1, .mz .mz-h1 { font: 800 var(--mz-fs-h1)/1.15 var(--mz-font-display); letter-spacing: var(--mz-tracking-display); margin: 0; text-wrap: balance; }
.mz h2, .mz .mz-h2 { font: 800 var(--mz-fs-h2)/1.2 var(--mz-font-display); letter-spacing: var(--mz-tracking-heading); margin: 0; text-wrap: balance; }
.mz h3, .mz .mz-h3 { font: 700 var(--mz-fs-h3)/1.3 var(--mz-font-display); letter-spacing: -0.01em; margin: 0; }
.mz-muted { color: var(--mz-text-muted); }
.mz-mono  { font: 400 var(--mz-fs-mono)/1.4 var(--mz-font-mono); color: var(--mz-text-muted); font-variant-numeric: tabular-nums; }
.mz-label { font: 500 var(--mz-fs-label)/1.3 var(--mz-font-mono); letter-spacing: var(--mz-tracking-label); text-transform: uppercase; color: var(--mz-text-muted); }
.mz a, .mz-link { color: var(--mz-text); text-decoration: underline; text-decoration-color: var(--mz-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mz a:hover, .mz-link:hover { text-decoration-color: var(--mz-text); }

/* ---- wordmark (live text; use logo/*.svg where the font may be missing) ---- */
.mz .mz-lockup { text-decoration: none; }
.mz-lockup { display: inline-flex; align-items: center; gap: .32em; font: 800 1.125rem/1 var(--mz-font-display); letter-spacing: var(--mz-tracking-display); color: var(--mz-text); white-space: nowrap; text-decoration: none; }
.mz-lockup img, .mz-lockup svg { width: 1.2em; height: 1.2em; flex: none; }
.mz-lockup .mz-box { font-weight: 500; color: var(--mz-text-muted); }
.mz-lockup .mz-app { font-weight: 500; color: var(--mz-text-muted); letter-spacing: -0.01em; margin-left: .15em; }
.mz-lockup .mz-app::before { content: "/"; margin-right: .35em; color: var(--mz-border); }

/* ---- app bar ---- */
.mz-appbar { display: flex; align-items: center; gap: var(--mz-space-3); padding: var(--mz-space-3) var(--mz-space-5); background: var(--mz-surface); border-bottom: 1px solid var(--mz-border); }
.mz-appbar .mz-spacer { flex: 1; }
.mz-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--mz-text); color: var(--mz-bg); display: grid; place-items: center; font: 700 12px var(--mz-font-display); flex: none; }

/* ---- buttons ---- */
.mz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .84375rem/1 var(--mz-font-text); padding: 9px 14px; border-radius: var(--mz-radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--mz-dur-fast) var(--mz-ease), border-color var(--mz-dur-fast) var(--mz-ease); }
.mz-btn--primary   { background: var(--mz-accent); color: var(--mz-on-accent); }
.mz-btn--primary:hover { background: var(--mz-accent-hover); }
.mz-btn--ink       { background: var(--mz-text); color: var(--mz-bg); }
.mz-btn--secondary { background: var(--mz-surface); color: var(--mz-text); border-color: var(--mz-border); }
.mz-btn--secondary:hover { border-color: var(--mz-text-muted); }
.mz-btn--ghost     { background: transparent; color: var(--mz-text-muted); }
.mz-btn--ghost:hover { background: var(--mz-hover); color: var(--mz-text); }
.mz-btn--danger    { background: var(--mz-danger); color: #fff; }
.mz-btn--block     { width: 100%; padding: 12px 14px; }
.mz-btn:disabled   { opacity: .45; cursor: not-allowed; }

/* ---- form ---- */
.mz-field { display: grid; gap: 6px; font: 500 .8125rem/1.3 var(--mz-font-text); }
.mz-input { font: 400 var(--mz-fs-body)/1.3 var(--mz-font-text); color: var(--mz-text); background: var(--mz-surface); border: 1px solid var(--mz-border); border-radius: var(--mz-radius-md); padding: 10px 12px; }
.mz-input::placeholder { color: var(--mz-text-muted); }
.mz-input:focus { outline: none; border-color: var(--mz-text); box-shadow: var(--mz-ring); }
.mz-input[aria-invalid="true"] { border-color: var(--mz-danger); }
.mz-help  { font-size: var(--mz-fs-small); color: var(--mz-text-muted); font-weight: 400; }
.mz-error { font-size: var(--mz-fs-small); color: var(--mz-danger-text); font-weight: 500; }

/* ---- badges, chips, status ---- */
.mz-badge { display: inline-flex; align-items: center; gap: 5px; font: 600 .71875rem/1.5 var(--mz-font-text); padding: 0 7px; border-radius: var(--mz-radius-sm); white-space: nowrap; }
.mz-badge--new  { background: var(--mz-accent); color: var(--mz-on-accent); }
.mz-badge--soft { background: var(--mz-sunken); color: var(--mz-text-muted); border: 1px solid var(--mz-border); }
.mz-badge--danger  { background: color-mix(in srgb, var(--mz-danger) 14%, var(--mz-surface));  color: var(--mz-danger-text); }
.mz-badge--warning { background: color-mix(in srgb, var(--mz-warning) 16%, var(--mz-surface)); color: var(--mz-warning-text); }
.mz-badge--success { background: color-mix(in srgb, var(--mz-success) 14%, var(--mz-surface)); color: var(--mz-success-text); }
.mz-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--mz-success); }
.mz-dot--warning { background: var(--mz-warning); } .mz-dot--danger { background: var(--mz-danger); } .mz-dot--idle { background: var(--mz-text-muted); }
.mz-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mz-border); border-radius: var(--mz-radius-full); padding: 4px 11px; font-size: var(--mz-fs-small); color: var(--mz-text-muted); background: transparent; cursor: pointer; }
.mz-pill[aria-pressed="true"] { background: var(--mz-text); color: var(--mz-bg); border-color: var(--mz-text); }

/* ---- surfaces ---- */
.mz-card { background: var(--mz-surface); border: 1px solid var(--mz-border); border-radius: var(--mz-radius-lg); padding: var(--mz-space-4); }
.mz-card--interactive { transition: border-color var(--mz-dur-fast) var(--mz-ease), background var(--mz-dur-fast) var(--mz-ease); }
.mz-card--interactive:hover { border-color: var(--mz-text); background: var(--mz-hover); }
.mz-card--unread { border-left: 4px solid var(--mz-accent); padding-left: calc(var(--mz-space-4) - 3px); }
.mz-overlay { background: var(--mz-surface); border: 1px solid var(--mz-border); border-radius: var(--mz-radius-xl); box-shadow: var(--mz-shadow-overlay); }

/* ---- tabs & segmented ---- */
.mz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--mz-border); }
.mz-tab { padding: 8px 12px; color: var(--mz-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; cursor: pointer; }
.mz-tab[aria-selected="true"] { color: var(--mz-text); font-weight: 600; border-bottom-color: var(--mz-accent); }
.mz-seg { display: inline-flex; padding: 2px; border: 1px solid var(--mz-border); border-radius: var(--mz-radius-md); background: var(--mz-surface); }
.mz-seg > * { padding: 4px 10px; border-radius: 8px; border: 0; background: none; color: var(--mz-text-muted); font: inherit; font-size: var(--mz-fs-small); cursor: pointer; }
.mz-seg > [aria-pressed="true"] { background: var(--mz-text); color: var(--mz-bg); }

/* ---- app tiles (launcher, notifications) ---- */
.mz-tile { width: 40px; aspect-ratio: 1; border-radius: var(--mz-radius-tile); display: grid; place-items: center; font: 800 14px/1 var(--mz-font-display); letter-spacing: -0.02em; position: relative; overflow: hidden; flex: none; }
.mz-tile--third { background: var(--mz-sunken); color: var(--mz-text); border: 1px solid var(--mz-border); }
.mz-tile--own { background: var(--mz-text); color: var(--mz-bg); padding-top: 6px; }
.mz-tile--own::before { content: ""; position: absolute; left: 14%; right: 14%; top: 12%; height: 11%; border-radius: 2px; background: var(--mz-accent); transform: rotate(-7deg); }

/* ---- table ---- */
.mz-table { width: 100%; border-collapse: collapse; font-size: var(--mz-fs-body); }
.mz-table th { font: 500 var(--mz-fs-label)/1.3 var(--mz-font-mono); letter-spacing: var(--mz-tracking-label); text-transform: uppercase; color: var(--mz-text-muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--mz-border); }
.mz-table td { padding: 10px 12px; border-bottom: 1px solid var(--mz-border); font-variant-numeric: tabular-nums; }
.mz-table tr:hover td { background: var(--mz-hover); }

/* ---- detection overlay (video) ---- */
.mz-detect { position: absolute; border: 2px solid var(--mz-accent); border-radius: 3px; }
.mz-detect::before { content: attr(data-label); position: absolute; top: -17px; left: -2px; background: var(--mz-accent); color: var(--mz-on-accent); font: 600 9.5px/1 var(--mz-font-text); padding: 3px 4px; border-radius: 3px 3px 0 0; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .mz * { transition: none !important; animation: none !important; } }