/* Reckon — overlays: dialog, sheet, drawer, popover, tooltip, menu, command
   palette, toast, preview card. All share one recipe: 1px border, popover
   surface, faint large shadow, hairline, enter from scale(.98) + opacity 0. */

.o-backdrop{position:fixed;inset:0;z-index:50;background:var(--backdrop);backdrop-filter:blur(var(--backdrop-blur));transition:opacity var(--duration-normal)}
.o-viewport{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:1fr auto 3fr;justify-items:center;padding:var(--space-4)}

.o-popup{position:relative;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--popover);background-clip:padding-box;color:var(--popover-foreground);box-shadow:var(--shadow-lg);outline:none}
.o-popup::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg-inner);pointer-events:none;box-shadow:var(--hairline)}

/* ── Dialog ─────────────────────────────────────────────────────── */
.o-dialog{position:relative;grid-row-start:2;display:flex;max-height:100%;min-height:0;width:100%;min-width:0;max-width:32rem;flex-direction:column;border-radius:var(--radius-2xl);border:1px solid var(--border);background:var(--popover);background-clip:padding-box;color:var(--popover-foreground);box-shadow:var(--shadow-lg);outline:none;transition:scale var(--duration-normal) var(--ease-in-out),opacity var(--duration-normal) var(--ease-in-out)}
.o-dialog::before{content:"";position:absolute;inset:0;border-radius:var(--radius-2xl-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-dialog__header{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.o-dialog__header:has(+.o-dialog__panel){padding-bottom:var(--space-3)}
.o-dialog__title{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-xl);line-height:1}
.o-dialog__description{font-size:var(--text-sm);color:var(--muted-foreground)}
.o-dialog__panel{padding:var(--space-6);padding-top:var(--space-1);overflow-y:auto}
.o-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-2);border-top:1px solid var(--border);background:color-mix(in srgb,var(--muted) 72%,transparent);padding:var(--space-4) var(--space-6);border-end-start-radius:var(--radius-2xl-inner);border-end-end-radius:var(--radius-2xl-inner)}
.o-dialog__footer--bare{border-top:0;background:transparent;padding:var(--space-3) var(--space-6) var(--space-6)}
.o-dialog__close{position:absolute;inset-inline-end:var(--space-2);top:var(--space-2)}

/* ── Sheet / Drawer ─────────────────────────────────────────────── */
.o-sheet{position:fixed;z-index:50;display:flex;flex-direction:column;border:1px solid var(--border);background:var(--popover);color:var(--popover-foreground);box-shadow:var(--shadow-lg);transition:translate var(--duration-normal) var(--ease-in-out)}
.o-sheet--left{inset-block:0;inset-inline-start:0;width:20rem;border-inline-start:0}
.o-sheet--right{inset-block:0;inset-inline-end:0;width:20rem;border-inline-end:0}
.o-sheet--bottom{inset-inline:0;bottom:0;border-bottom:0;border-start-start-radius:var(--radius-2xl);border-start-end-radius:var(--radius-2xl)}
.o-sheet__header{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.o-sheet__panel{flex:1;overflow-y:auto;padding:var(--space-6);padding-top:0}
.o-drawer__handle{margin:var(--space-3) auto 0;height:5px;width:36px;flex:none;border-radius:var(--radius-full);background:var(--input)}

/* ── Popover ────────────────────────────────────────────────────── */
.o-popover{padding:var(--space-4)}
.o-popover__title{font-weight:var(--font-weight-semibold);font-size:var(--text-lg);line-height:1}
.o-popover__description{font-size:var(--text-sm);color:var(--muted-foreground)}

/* ── Tooltip ────────────────────────────────────────────────────── */
.o-tooltip{position:relative;display:inline-flex;text-wrap:balance;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--popover);background-clip:padding-box;padding:var(--space-1) var(--space-2);color:var(--popover-foreground);font-size:var(--text-xs);box-shadow:var(--shadow-md)}
.o-tooltip::before{content:"";position:absolute;inset:0;border-radius:calc(var(--radius-md) - 1px);pointer-events:none;box-shadow:var(--hairline)}

/* ── Preview card ───────────────────────────────────────────────── */
.o-previewcard{width:16rem;padding:var(--space-4);font-size:var(--text-sm)}

/* ── Menu / Context menu ────────────────────────────────────────── */
.o-menu{min-width:8rem;padding:var(--space-1)}
.o-menu__item{display:flex;min-height:28px;cursor:default;user-select:none;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-sm);color:var(--foreground);outline:none}
.o-menu__item:hover,.o-menu__item[data-highlighted]{background:var(--accent);color:var(--accent-foreground)}
.o-menu__item>svg{width:16px;height:16px;flex:none;margin-inline:-2px;opacity:.8}
.o-menu__item--destructive{color:var(--destructive-foreground)}
.o-menu__item--inset{padding-inline-start:var(--space-8)}
.o-menu__item[aria-disabled=true]{pointer-events:none;opacity:.64}
.o-menu__label{padding:var(--space-1-5) var(--space-2);font-weight:var(--font-weight-medium);font-size:var(--text-xs);color:var(--muted-foreground)}
.o-menu__separator{margin:var(--space-1) var(--space-2);height:1px;background:var(--border)}
.o-menu__shortcut{margin-inline-start:auto;font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:color-mix(in srgb,var(--muted-foreground) 72%,transparent)}
.o-menu__check{display:inline-flex;width:12px;justify-content:center;margin-inline-start:-2px}
.o-menu__check svg{width:12px;height:12px}

/* ── Command palette ────────────────────────────────────────────── */
.o-command{display:flex;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg)}
.o-command__input-row{display:flex;align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border);padding-inline:var(--space-3)}
.o-command__input-row svg{width:16px;height:16px;flex:none;opacity:.8}
.o-command__input{height:44px;width:100%;border:0;background:transparent;font:inherit;font-size:var(--text-sm);color:var(--foreground);outline:none}
.o-command__input::placeholder{color:color-mix(in srgb,var(--muted-foreground) 72%,transparent)}
.o-command__list{max-height:20rem;overflow-y:auto;padding:var(--space-1)}
.o-command__empty{padding:var(--space-6);text-align:center;font-size:var(--text-sm);color:var(--muted-foreground)}

/* ── Toast ──────────────────────────────────────────────────────── */
.o-toast-region{position:fixed;inset-block-end:var(--space-4);inset-inline-end:var(--space-4);z-index:60;display:flex;flex-direction:column;gap:var(--space-2);width:22rem;max-width:calc(100vw - var(--space-8))}
.o-toast{position:relative;display:flex;align-items:flex-start;gap:var(--space-2-5);border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--popover);background-clip:padding-box;padding:var(--space-3) var(--space-3-5);color:var(--popover-foreground);box-shadow:var(--shadow-lg)}
.o-toast::before{content:"";position:absolute;inset:0;border-radius:var(--radius-xl-inner);pointer-events:none;box-shadow:var(--hairline)}
/* Icon slot: the leading child that is not a named part — an icon is often a
   wrapper element, never reliably a bare svg. */
.o-toast>:first-child:not([class*=o-toast__]){flex:none;display:flex;align-items:center;justify-content:center;width:16px;min-height:1lh}
.o-toast>:first-child:not([class*=o-toast__]):is(svg),.o-toast>:first-child:not([class*=o-toast__]) svg{width:16px;height:16px}
.o-toast__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.o-toast__action,.o-toast__close{flex:none;align-self:center}
.o-toast__title{font-weight:var(--font-weight-medium);font-size:var(--text-sm);text-wrap:pretty}
.o-toast__description{font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.o-toast--success>:first-child:not([class*=o-toast__]){color:var(--success)}
.o-toast--error>:first-child:not([class*=o-toast__]){color:var(--destructive)}
.o-toast--info>:first-child:not([class*=o-toast__]){color:var(--info)}
.o-toast--warning>:first-child:not([class*=o-toast__]){color:var(--warning)}
.o-toast[data-animate=success]{animation:reckon-toast-success .32s var(--ease-toast)}
.o-toast[data-animate=error]{animation:reckon-toast-error .28s var(--ease-toast)}
