/* Yolt v11 — modals · drawers · drill panels (Section 5a-A)
 */

/* ═════ buttons (for modal/banner CTAs) ═════ */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font: inherit; font-size: 13px; font-family: inherit; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--brand); color: var(--bg-0); border-color: var(--brand); font-weight: 600; }
.btn-primary:hover { background: color-mix(in oklch, var(--brand) 80%, var(--ink-0)); }
.btn-danger { background: var(--bad); color: var(--bg-0); border-color: var(--bad); font-weight: 600; }
.btn-danger:hover { background: color-mix(in oklch, var(--bad) 80%, var(--ink-0)); }
.btn-secondary { background: transparent; color: var(--ink-1); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink-0); }
.kbd { font-family: ui-monospace, monospace; font-size: 11px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--ink-2); }

/* ═════ A.1 modal-dialog ═════ */
.modal-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--bg-0) 60%, transparent); backdrop-filter: blur(8px); z-index: 1; }
.modal-dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-md); width: min(560px, calc(100% - 32px));
  max-height: 70%; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px color-mix(in oklch, oklch(0 0 0) 60%, transparent); z-index: 300;
}
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line-soft); }
.modal-h .title { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.modal-h .close { border: none; background: transparent; color: var(--ink-3); cursor: pointer; width: 24px; height: 24px; padding: 0; border-radius: 4px; font-size: 16px; font-family: ui-monospace, monospace; }
.modal-h .close:hover { background: var(--bg-2); color: var(--ink-0); }
.modal-body { padding: var(--space-md) var(--space-lg); overflow-y: auto; font-size: 13px; color: var(--ink-1); }
.modal-body p { margin: 0 0 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--line-soft); background: var(--bg-2); border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }

/* ═════ A.2 drawer-side ═════ */
.drawer-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--bg-0) 50%, transparent); z-index: 1; }
.drawer-side {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(480px, 80%);
  background: var(--bg-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  box-shadow: -16px 0 48px color-mix(in oklch, oklch(0 0 0) 50%, transparent); z-index: 300;
  animation: drawer-in 200ms ease-out;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-h { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line-soft); }
.drawer-h .title { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.drawer-h .close { border: none; background: transparent; color: var(--ink-3); cursor: pointer; width: 24px; height: 24px; padding: 0; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 16px; }
.drawer-h .close:hover { background: var(--bg-2); color: var(--ink-0); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.drawer-foot { padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--line-soft); background: var(--bg-2); display: flex; justify-content: space-between; gap: var(--space-sm); }
.drawer-section h4 { margin: 0 0 6px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.drawer-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px; }
.drawer-row .l { color: var(--ink-2); }
.drawer-row .v { color: var(--ink-0); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ═════ A.3 drill-modal ═════ */
.drill-modal {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-md); width: min(720px, calc(100% - 32px));
  max-height: 80%; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px color-mix(in oklch, oklch(0 0 0) 60%, transparent); z-index: 300;
}
.drill-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-soft); padding: 0 var(--space-lg); background: var(--bg-2); border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
.drill-tabs button { border: none; background: transparent; padding: 10px 14px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.drill-tabs button:hover { color: var(--ink-0); }
.drill-tabs button.sel { color: var(--ink-0); border-bottom-color: var(--brand); font-weight: 600; }
.drill-h { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--space-lg) 6px; }
.drill-h .title { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.drill-h .sub { font-size: 11.5px; color: var(--ink-3); font-family: ui-monospace, monospace; }
.drill-h .close { border: none; background: transparent; color: var(--ink-3); cursor: pointer; width: 24px; height: 24px; padding: 0; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 16px; }
.drill-h .close:hover { background: var(--bg-2); color: var(--ink-0); }
.drill-body { padding: var(--space-md) var(--space-lg) var(--space-lg); overflow-y: auto; font-size: 13px; }
.drill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-sm); }
.drill-mini-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-sm) var(--space-md); }
.drill-mini-card .l { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase; }
.drill-mini-card .v { font-family: ui-monospace, monospace; font-size: 18px; font-weight: 600; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.drill-mini-card[data-tone="revenue"] { border-left: 3px solid color-mix(in oklch, var(--good) 35%, var(--line)); }
.drill-mini-card[data-tone="revenue"] .v { color: var(--good); }
.drill-mini-card[data-tone="expense"] { border-left: 3px solid color-mix(in oklch, var(--bad) 35%, var(--line)); }
.drill-mini-card[data-tone="expense"] .v { color: var(--bad); }