/* Reckon — surfaces: card, frame, alert, badge, avatar, separator, skeleton,
   empty state, toolbar. */

/* ── Card ───────────────────────────────────────────────────────── */
.o-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-2xl);border:1px solid var(--border);background:var(--card);background-clip:padding-box;color:var(--card-foreground);box-shadow:var(--shadow-xs)}
.o-card::before{content:"";position:absolute;inset:0;border-radius:var(--radius-2xl-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-card__header{display:grid;grid-auto-rows:min-content;grid-template-rows:auto auto;align-items:start;gap:var(--space-1-5);padding:var(--space-6)}
.o-card__header:has(.o-card__action){grid-template-columns:1fr auto}
.o-card__title{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-lg);line-height:1}
.o-card__description{font-size:var(--text-sm);color:var(--muted-foreground)}
.o-card__action{grid-column-start:2;grid-row:1/span 2;display:inline-flex;align-self:start;justify-self:end}
.o-card__panel{flex:1;padding:var(--space-6)}
.o-card__header+.o-card__panel{padding-top:0}
.o-card__footer{display:flex;align-items:center;padding:var(--space-6)}
.o-card__panel+.o-card__footer{padding-top:var(--space-4)}

/* CardFrame — a muted plinth that a Card sits inside, 1px proud on all sides */
.o-cardframe{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-2xl);border:1px solid var(--border);background:var(--card);background-clip:padding-box;color:var(--card-foreground);box-shadow:var(--shadow-xs)}
.o-cardframe::before{content:"";position:absolute;inset:0;border-radius:var(--radius-2xl-inner);pointer-events:none;background:color-mix(in srgb,var(--muted) 72%,transparent);box-shadow:var(--hairline)}
.o-cardframe>*{position:relative;z-index:1}
.o-cardframe__header{position:relative;display:grid;grid-auto-rows:min-content;align-items:start;gap:0 var(--space-4);padding:var(--space-4) var(--space-6)}
.o-cardframe__title{align-self:center;font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-variation-settings:var(--font-variation-display);font-size:var(--text-base)}
.o-cardframe__description{align-self:center;font-size:var(--text-sm);color:var(--muted-foreground)}
.o-cardframe__footer{padding:var(--space-4) var(--space-6)}
.o-cardframe>.o-card{margin:-1px;box-shadow:none;background-clip:padding-box}
.o-cardframe>.o-card::before{display:none}
.o-cardframe>.o-card:not(:first-child){border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl)}
.o-cardframe>.o-card:not(:last-child){border-end-start-radius:var(--radius-xl);border-end-end-radius:var(--radius-xl)}

/* Frame — muted tray holding one or more inset panels */
.o-frame{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-2xl);background:color-mix(in srgb,var(--muted) 72%,transparent);padding:var(--space-1)}
.o-frame__panel+.o-frame__panel{margin-top:var(--space-1)}
.o-frame__panel{position:relative;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--background);background-clip:padding-box;padding:var(--space-5);box-shadow:var(--shadow-xs)}
.o-frame__panel::before{content:"";position:absolute;inset:0;border-radius:var(--radius-xl-inner);pointer-events:none;box-shadow:var(--hairline)}
.o-frame__header{display:flex;flex-direction:column;padding:var(--space-4) var(--space-5)}
.o-frame__title{font-weight:var(--font-weight-semibold);font-size:var(--text-sm)}
.o-frame__description{font-size:var(--text-sm);color:var(--muted-foreground)}
.o-frame__footer{padding:var(--space-4) var(--space-5)}

/* ── Alert ──────────────────────────────────────────────────────── */
.o-alert{position:relative;display:grid;width:100%;align-items:start;gap:.125rem var(--space-2);border-radius:var(--radius-xl);border:1px solid var(--border);padding:var(--space-3) var(--space-3-5);font-size:var(--text-sm);color:var(--card-foreground)}
/* The icon slot is the leading child that is not one of the named parts — an
   icon is often a wrapper element, never reliably a bare svg. */
.o-alert:has(>:first-child:not([class*=o-alert__])){grid-template-columns:1rem 1fr}
.o-alert:has(>:first-child:not([class*=o-alert__])):has(.o-alert__action){grid-template-columns:1rem 1fr auto}
.o-alert:not(:has(>:first-child:not([class*=o-alert__]))):has(.o-alert__action){grid-template-columns:1fr auto}
/* Every part is placed explicitly. The action spans both rows, so with auto
   placement it is positioned before the icon and the text (definite-row items
   are placed first) and takes the icon's track. */
.o-alert>:first-child:not([class*=o-alert__]){grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;width:16px;min-height:1lh;color:var(--muted-foreground)}
.o-alert>:first-child:not([class*=o-alert__]):is(svg),.o-alert>:first-child:not([class*=o-alert__]) svg{width:16px;height:16px}
.o-alert__title{grid-column:1;grid-row:1;font-weight:var(--font-weight-medium);text-wrap:pretty}
.o-alert__description{grid-column:1;display:flex;flex-direction:column;gap:.625rem;color:var(--muted-foreground);text-wrap:pretty}
.o-alert:has(>:first-child:not([class*=o-alert__]))>.o-alert__title,.o-alert:has(>:first-child:not([class*=o-alert__]))>.o-alert__description{grid-column:2}
.o-alert__action{grid-column:2;grid-row:1/span 2;display:flex;gap:var(--space-1);align-self:center;justify-self:end}
.o-alert:has(>:first-child:not([class*=o-alert__]))>.o-alert__action{grid-column:3}
.o-alert--error{border-color:color-mix(in srgb,var(--destructive) 32%,transparent);background:color-mix(in srgb,var(--destructive) 4%,transparent)}
.o-alert--error>:first-child:not([class*=o-alert__]){color:var(--destructive)}
.o-alert--info{border-color:color-mix(in srgb,var(--info) 32%,transparent);background:color-mix(in srgb,var(--info) 4%,transparent)}
.o-alert--info>:first-child:not([class*=o-alert__]){color:var(--info)}
.o-alert--success{border-color:color-mix(in srgb,var(--success) 32%,transparent);background:color-mix(in srgb,var(--success) 4%,transparent)}
.o-alert--success>:first-child:not([class*=o-alert__]){color:var(--success)}
.o-alert--warning{border-color:color-mix(in srgb,var(--warning) 32%,transparent);background:color-mix(in srgb,var(--warning) 4%,transparent)}
.o-alert--warning>:first-child:not([class*=o-alert__]){color:var(--warning)}

/* ── Badge ──────────────────────────────────────────────────────── */
.o-badge{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--space-1);white-space:nowrap;border-radius:var(--radius-full);border:1px solid transparent;font-family:var(--font-sans);font-weight:var(--font-weight-medium);height:18px;min-width:18px;padding-inline:calc(var(--space-2) - 1px);font-size:var(--text-xs);line-height:1}
.o-badge>svg{width:12px;height:12px;flex:none;opacity:.8}
.o-badge--sm{height:16px;min-width:16px;padding-inline:calc(var(--space-1-5) - 1px);font-size:var(--text-2xs)}
.o-badge--lg{height:22px;min-width:22px;padding-inline:calc(var(--space-2-5) - 1px);font-size:var(--text-sm)}
.o-badge--default{background:var(--primary);color:var(--primary-foreground)}
.o-badge--secondary{background:var(--secondary);color:var(--secondary-foreground)}
.o-badge--outline{border-color:var(--input);background:var(--background);color:var(--foreground)}
.o-badge--destructive{background:var(--destructive);color:#fff}
.o-badge--error{background:color-mix(in srgb,var(--destructive) 8%,transparent);color:var(--destructive-foreground)}
.o-badge--info{background:color-mix(in srgb,var(--info) 8%,transparent);color:var(--info-foreground)}
.o-badge--success{background:color-mix(in srgb,var(--success) 8%,transparent);color:var(--success-foreground)}
.o-badge--warning{background:color-mix(in srgb,var(--warning) 8%,transparent);color:var(--warning-foreground)}

/* ── Avatar ─────────────────────────────────────────────────────── */
.o-avatar{display:inline-flex;width:32px;height:32px;flex:none;user-select:none;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full);background:var(--background);vertical-align:middle;font-weight:var(--font-weight-medium);font-size:var(--text-xs)}
.o-avatar img{width:100%;height:100%;object-fit:cover}
.o-avatar__fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--muted);color:var(--muted-foreground)}

/* ── Separator ──────────────────────────────────────────────────── */
.o-separator{flex:none;background:var(--border);border:0;margin:0}
.o-separator[data-orientation=horizontal]{height:1px;width:100%}
.o-separator[data-orientation=vertical]{width:1px;align-self:stretch}

/* ── Skeleton ───────────────────────────────────────────────────── */
.o-skeleton{border-radius:var(--radius-sm);background:linear-gradient(120deg,transparent 40%,var(--skeleton-highlight),transparent 60%) var(--muted) 0 0/200% 100% fixed;animation:reckon-skeleton 2s -1s infinite linear}

/* ── Empty state ────────────────────────────────────────────────── */
.o-empty{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);text-wrap:balance;padding:var(--space-12) var(--space-6);text-align:center}
.o-empty__header{display:flex;max-width:24rem;flex-direction:column;align-items:center;text-align:center}
.o-empty__media{position:relative;margin-bottom:var(--space-6);display:flex;align-items:center;justify-content:center}
.o-empty__tile{position:relative;display:flex;width:36px;height:36px;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);background-clip:padding-box;color:var(--foreground);box-shadow:var(--shadow-sm)}
.o-empty__tile svg{width:18px;height:18px;opacity:.8}
.o-empty__tile--ghost{position:absolute;bottom:1px;box-shadow:none;scale:.84}
.o-empty__tile--ghost-l{transform-origin:bottom left;translate:-2px 0;rotate:-10deg}
.o-empty__tile--ghost-r{transform-origin:bottom right;translate:2px 0;rotate:10deg}
.o-empty__title{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-xl)}
.o-empty__description{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--muted-foreground)}
.o-empty__content{display:flex;width:100%;min-width:0;max-width:24rem;flex-direction:column;align-items:center;gap:var(--space-4);font-size:var(--text-sm)}

/* ── Toolbar ────────────────────────────────────────────────────── */
.o-toolbar{position:relative;display:flex;gap:var(--space-2);border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--card);background-clip:padding-box;padding:var(--space-1);color:var(--card-foreground)}
.o-toolbar__group{display:flex;align-items:center;gap:var(--space-1)}
.o-toolbar__separator{flex:none;background:var(--border);width:1px;margin-block:var(--space-1-5)}
