.cal-shell{display:flex;flex-direction:column;gap:1rem;min-height:0}.cal-header{flex-wrap:wrap;align-items: flex-end;gap:.85rem 1.1rem}.cal-header h1{letter-spacing:-.02em}.cal-toolbar{display:flex;flex-wrap:wrap;align-items: center;gap:.55rem}.cal-nav,.cal-views{display:inline-flex;border:1px solid var(--border,#e5e7eb);border-radius:var(--radius,4px);background:var(--surface,#fff);align-items: center;gap:0;padding:3px}.cal-nav .btn,.cal-views .btn{box-shadow:none;border-radius:calc(var(--radius,4px) - 1px);border:0;min-height:2rem;padding-inline-start:.7rem;padding-inline-end:.7rem}.cal-nav .btn+.btn,.cal-views .btn+.btn{margin-left:1px}.cal-toolbar>.btn--ghost,.cal-toolbar>.btn--primary{border-radius:var(--radius,4px)}.cal-board{position:relative;border:1px solid var(--border,#e5e7eb);border-radius:var(--radius,4px);background:var(--surface,#fff);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:32rem}.cal-loading{position:absolute;z-index:5;display:grid;background:color-mix(in srgb,var(--surface,#fff)78%,transparent);backdrop-filter:blur(2px);color:var(--text-muted,#6b7280);place-items: center;font-size:.9rem;inset:0}.cal-month{display:flex;flex-direction:column;flex:1;min-height:0}.cal-month__head,.cal-month__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-month__dow{text-align:center;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#6b7280);border-bottom:1px solid var(--border,#e5e7eb);background:color-mix(in srgb,var(--surface-2,#f8fafc)80%,transparent);padding:.7rem .45rem;font-size:.88rem;font-weight:700}.cal-month__dow:nth-child(6),.cal-month__dow:nth-child(7){color:color-mix(in srgb,var(--text-muted,#6b7280)85%,var(--accent,#0f766e))}.cal-month__grid{grid-template-rows:repeat(6,minmax(0,1fr));flex:1;min-height:26rem}.cal-month__cell{border-right:1px solid color-mix(in srgb,var(--border,#e5e7eb)75%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border,#e5e7eb)75%,transparent);display:flex;background:var(--surface,#fff);flex-direction:column;gap:.28rem;min-height:0;padding:.4rem .35rem .35rem;transition:background .12s}.cal-month__cell:nth-child(7n){border-right:none}.cal-month__cell:nth-child(7n-1),.cal-month__cell:nth-child(7n){background:color-mix(in srgb,var(--surface-2,#f8fafc)55%,#fff)}.cal-month__cell:hover{background:color-mix(in srgb,var(--accent,#0f766e)5%,#fff)}.cal-month__cell.is-drop-target,.cal-week__slot.is-drop-target,.cal-day__slot.is-drop-target{outline:1px dashed color-mix(in srgb,var(--accent,#0f766e)55%,transparent);outline-offset:-2px;background:color-mix(in srgb,var(--accent,#0f766e)12%,#fff)!important}.cal-month__cell.is-out{background:color-mix(in srgb,var(--surface-2,#f1f5f9)70%,#fff);opacity:.58}.cal-month__cell.is-out:hover{opacity:.78}.cal-month__cell.is-today{background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#0f766e)9%,#fff),var(--surface,#fff)42%);box-shadow:inset 0 2px 0 var(--accent,#0f766e)}.cal-month__day{color:var(--text,#111827);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;border-radius:999px;align-self: flex-start;width:2rem;height:2rem;transition:background .12s,color .12s;font-size:.95rem;font-weight:650}.cal-month__day:hover{background:color-mix(in srgb,var(--accent,#0f766e)12%,transparent)}.cal-month__cell.is-today .cal-month__day{background:var(--accent,#0f766e);color:#fff}.cal-month__events{display:flex;overflow:hidden;flex-direction:column;gap:3px;min-height:0}.cal-more{color:var(--text-muted,#6b7280);text-align:left;cursor:pointer;border-radius:var(--radius,4px);background:0 0;border:0;padding:.15rem .3rem;font-size:.85rem;font-weight:650}.cal-more:hover{background:color-mix(in srgb,var(--surface-2,#f3f4f6)90%,transparent);color:var(--text,#111827)}.cal-event{display:block;border-radius:var(--radius,4px);text-align:left;cursor:pointer;color:#0f172a;background:#e0ebfe;border:0;border-left:3px solid #2050bb;width:100%;padding:.28rem .45rem .28rem .5rem;transition:filter .12s,transform .12s;font-size:.92rem;line-height:1.35}.cal-event:hover{filter:brightness(.97);transform:translateY(-1px)}.cal-event[draggable=true]{cursor:grab}.cal-event.is-dragging{opacity:.45;cursor:grabbing;transform:scale(.98)}.cal-event strong{display:block;letter-spacing:-.01em;font-weight:650}.cal-event span,.cal-event em{display:block;opacity:.82;font-size:.85rem;font-style:normal}.cal-event--chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-event--block{margin-bottom:.3rem;padding:.45rem .55rem}.cal-event--blue{background:#e0ebfe;border-left-color:#2563eb}.cal-event--green{background:#dcf6e5;border-left-color:#16a34a}.cal-event--amber{background:#fdeed3;border-left-color:#d97706}.cal-event--red{background:#fde3e3;border-left-color:#dc2626}.cal-event--violet{background:#ece5fe;border-left-color:#7c3aed}.cal-event--slate{background:#e9ecef;border-left-color:#475569}.cal-week,.cal-day{overflow:auto;display:flex;flex-direction:column;flex:1;min-height:0}.cal-week__head{display:grid;grid-template-columns:4.25rem repeat(7,minmax(0,1fr));position:sticky;z-index:2;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e5e7eb);top:0}.cal-week__dayhead{text-align:center;border-left:1px solid color-mix(in srgb,var(--border,#e5e7eb)80%,transparent);padding:.65rem .35rem}.cal-week__dayhead span{display:block;letter-spacing:.05em;color:var(--text-muted,#6b7280);text-transform:uppercase;font-size:.88rem;font-weight:700}.cal-week__dayhead strong{font-variant-numeric:tabular-nums;font-size:1.25rem}.cal-week__dayhead.is-today strong{display:inline-grid;background:var(--accent,#0f766e);color:#fff;border-radius:999px;place-items: center;width:2.15rem;height:2.15rem}.cal-week__body{display:flex;flex-direction:column}.cal-week__row,.cal-day__row{display:grid;grid-template-columns:4.25rem repeat(7,minmax(0,1fr));border-bottom:1px solid color-mix(in srgb,var(--border,#e5e7eb)65%,transparent);min-height:3.5rem}.cal-day__row{grid-template-columns:4.25rem minmax(0,1fr)}.cal-week__gutter{color:var(--text-muted,#6b7280);text-align:right;font-variant-numeric:tabular-nums;padding:.4rem .5rem 0;font-size:.88rem}.cal-week__slot,.cal-day__slot{border-left:1px solid color-mix(in srgb,var(--border,#e5e7eb)80%,transparent);min-height:3.5rem;padding:.25rem;transition:background .12s}.cal-week__slot:hover,.cal-day__slot:hover{background:color-mix(in srgb,var(--accent,#0f766e)4%,transparent)}.cal-agenda{overflow:auto;display:flex;background:color-mix(in srgb,var(--surface-2,#f8fafc)55%,#fff);flex-direction:column;flex:1;gap:.45rem;padding:.85rem}.cal-agenda__row{display:grid;grid-template-columns:.65rem 8rem minmax(0,1fr)auto auto;border:1px solid var(--border,#e5e7eb);border-radius:var(--radius,4px);background:var(--surface,#fff);text-align:left;cursor:pointer;color:inherit;align-items: center;gap:.75rem;width:100%;padding:.75rem .85rem;transition:border-color .12s,background .12s}.cal-agenda__row:hover{border-color:color-mix(in srgb,var(--accent,#0f766e)35%,var(--border,#e5e7eb));background:color-mix(in srgb,var(--accent,#0f766e)4%,#fff)}.cal-agenda__dot{border-left:0;border-radius:999px;width:.55rem;height:.55rem;padding:0}.cal-agenda__when{color:var(--text-muted,#6b7280);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.95rem}.cal-agenda__row strong{font-size:1rem}.cal-popover{position:fixed;z-index:80;display:grid;place-items: center;padding:1rem;inset:0}.cal-drawer__when{margin:0;font-size:1.12rem}.cal-drawer__meta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem;margin:0}.cal-drawer__meta dt{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#6b7280);font-size:.85rem;font-weight:700}.cal-drawer__meta dd{margin:.2rem 0 0;font-size:1.05rem}.cal-drawer__color{display:flex;align-items: center;gap:.45rem}.cal-drawer__swatch{display:inline-block;border-left-width:0;border-radius:2px;width:.85rem;height:.85rem;padding:0}.cal-drawer__section h3{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#6b7280);margin:0 0 .35rem;font-size:.92rem;font-weight:700}.cal-drawer__section p,.cal-drawer__section code{white-space:pre-wrap;word-break:break-word;margin:0;font-size:1.05rem;line-height:1.45}.cal-drawer .g-drawer__title{font-size:1.28rem}.cal-drawer__form{display:flex;flex-direction:column;gap:.85rem}.cal-drawer__form .form-grid{grid-template-columns:1fr 1fr;gap:.75rem}.cal-drawer__form .field--full{grid-column:1/-1}.cal-drawer__form .field__label{font-size:.88rem}.cal-drawer__form .input,.cal-drawer__form select.input,.cal-drawer__form textarea.input{font-size:1rem}.cal-drawer__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem;width:100%}.cal-provider__uri{display:block;border:1px solid var(--border,#e5e7eb);border-radius:var(--radius,4px);background:color-mix(in srgb,var(--surface-2,#f8fafc)80%,#fff);word-break:break-all;padding:.55rem .65rem;font-size:.72rem}.cal-popover__backdrop{position:absolute;background:#0f172a6b;inset:0}.cal-popover__panel{position:relative;z-index:1;border-radius:var(--radius,4px);border:1px solid var(--border,#e5e7eb);background:var(--surface,#fff);animation:.16s ease-out cal-popover-in;width:min(24rem,100vw - 2rem);padding:1.15rem 1.2rem;box-shadow:0 16px 40px #0f172a2e}@keyframes cal-popover-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}.cal-popover__panel h3{letter-spacing:-.015em;margin:0 0 .35rem;font-size:1.08rem}.cal-popover__meta{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .85rem;margin:.85rem 0 0}.cal-popover__meta dt{letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#6b7280);font-size:.68rem;font-weight:700}.cal-popover__meta dd{margin:.15rem 0 0;font-size:.9rem}.cal-popover__desc{color:var(--text,#111827);margin:.85rem 0 0;font-size:.9rem;line-height:1.45}.cal-popover__actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.05rem}.cal-attendee-list{color:var(--text,#111827);margin:0;padding-left:1.1rem}.cal-providers__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}.cal-provider{display:flex;border:1px solid var(--border,#e5e7eb);border-radius:var(--radius,4px);background:var(--surface,#fff);flex-direction:column;gap:.65rem;padding:1rem}.cal-provider h3{margin:0;font-size:1rem}.cal-provider .stack{width:100%}@media (max-width:900px){.cal-toolbar{width:100%}.cal-month__grid{min-height:32rem}.cal-agenda__row{grid-template-columns:.65rem 1fr;grid-template-rows:auto auto}.cal-agenda__when{grid-column:2}}

/* color-mix-fix */
/**
 * Soft semantic fills — appended AFTER Tailwind/LightningCSS minify.
 *
 * LightningCSS breaks `color-mix(..., var(--x) N%, var(--y))` into solid
 * `var(--x)` fallbacks inside incomplete `@supports` blocks. This file is
 * concatenated raw onto the built CSS so soft tints stay soft.
 */

.badge--ok {
    background: color-mix(in srgb, var(--success, #4ade80) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--success, #4ade80) 36%, var(--border));
    color: color-mix(in srgb, var(--success, #4ade80) 72%, var(--text));
}
.badge--warn {
    background: color-mix(in srgb, var(--warning, #fbbf24) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--warning, #fbbf24) 36%, var(--border));
    color: color-mix(in srgb, var(--warning, #fbbf24) 72%, var(--text));
}
.badge--danger {
    background: color-mix(in srgb, var(--danger, #f87171) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--danger, #f87171) 34%, var(--border));
    color: color-mix(in srgb, var(--danger, #f87171) 78%, var(--text));
}
.badge--muted {
    background: color-mix(in srgb, var(--text-muted) 10%, var(--surface));
}
.badge--info {
    background: color-mix(in srgb, #38bdf8 16%, var(--surface));
    border-color: color-mix(in srgb, #38bdf8 34%, var(--border));
    color: color-mix(in srgb, #38bdf8 68%, var(--text));
}
.badge--signal {
    background: color-mix(in srgb, var(--primary) 78%, var(--surface));
}

.status-chip--tone-success {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.status-chip--tone-warn,
.status-chip--tone-warning {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border));
    background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--surface));
}
.status-chip--tone-danger {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--border));
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--surface));
    color: color-mix(in srgb, var(--danger, #ef4444) 72%, var(--text));
}
.status-chip--tone-info {
    border-color: color-mix(in srgb, var(--info, #3b82f6) 34%, var(--border));
    background: color-mix(in srgb, var(--info, #3b82f6) 10%, var(--surface));
}
.status-chip--tone-indigo {
    border-color: color-mix(in srgb, #6366f1 36%, var(--border));
    background: color-mix(in srgb, #6366f1 10%, var(--surface));
}

.table .badge--ok,
.table .badge--warn,
.table .badge--danger,
.table .badge--info,
.table .badge--muted {
    color: color-mix(in srgb, var(--primary) 40%, var(--text));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}

.table .badge--ok {
    border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.table .badge--warn {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
}
.table .badge--danger {
    border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
    background: var(--danger-bg, color-mix(in srgb, var(--danger) 10%, var(--surface)));
}

.bulk-bar {
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

/* Row actions: surface + tinted icon (no color-mix fills — LightningCSS solidifies them) */
.table__action-btn--primary,
.table__action-btns > form > button.table__action-btn--primary,
.table__action-btns > a.table__action-btn--primary,
.table__action-btn--success,
.table__action-btns > form > button.table__action-btn--success,
.table__action-btns > a.table__action-btn--success,
.table__action-btn--warn,
.table__action-btns > form > button.table__action-btn--warn,
.table__action-btns > a.table__action-btn--warn,
.table__action-btn--danger,
.table__action-btns > form > button.table__action-btn--danger,
.table__action-btns > a.table__action-btn--danger,
.table__action-btns > .table__action-form > button {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
.table__action-btn--primary,
.table__action-btns > form > button.table__action-btn--primary,
.table__action-btns > a.table__action-btn--primary {
    color: var(--primary) !important;
}
.table__action-btn--success,
.table__action-btns > form > button.table__action-btn--success,
.table__action-btns > a.table__action-btn--success {
    color: var(--success) !important;
}
.table__action-btn--warn,
.table__action-btns > form > button.table__action-btn--warn,
.table__action-btns > a.table__action-btn--warn {
    color: var(--warning) !important;
}
.table__action-btn--danger,
.table__action-btns > form > button.table__action-btn--danger,
.table__action-btns > a.table__action-btn--danger,
.table__action-btns > .table__action-form > button {
    color: var(--danger) !important;
}

.btn--soft {
    --btn-bg: color-mix(in srgb, var(--primary) 28%, var(--surface));
    --btn-hover-bg: color-mix(in srgb, var(--primary) 40%, var(--surface));
    --btn-active-bg: color-mix(in srgb, var(--primary) 48%, var(--surface));
}
.btn--success {
    --btn-bg: color-mix(in srgb, var(--success) 16%, var(--surface));
    --btn-fg: color-mix(in srgb, var(--success) 82%, var(--text));
    --btn-border: color-mix(in srgb, var(--success) 38%, var(--border));
    --btn-hover-bg: color-mix(in srgb, var(--success) 24%, var(--surface));
    --btn-hover-fg: color-mix(in srgb, var(--success) 82%, var(--text));
    --btn-hover-border: color-mix(in srgb, var(--success) 48%, var(--border));
}
.btn--warning {
    --btn-bg: color-mix(in srgb, var(--warning) 16%, var(--surface));
    --btn-fg: color-mix(in srgb, var(--warning) 82%, var(--text));
    --btn-border: color-mix(in srgb, var(--warning) 40%, var(--border));
    --btn-hover-bg: color-mix(in srgb, var(--warning) 24%, var(--surface));
    --btn-hover-fg: color-mix(in srgb, var(--warning) 82%, var(--text));
    --btn-hover-border: color-mix(in srgb, var(--warning) 50%, var(--border));
}
.btn--primary:hover {
    --btn-hover-bg: color-mix(in srgb, var(--primary) 88%, #fff);
    --btn-hover-border: color-mix(in srgb, var(--primary) 88%, #fff);
    --btn-active-bg: color-mix(in srgb, var(--primary) 82%, var(--text));
    --btn-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}
.btn--danger:hover {
    --btn-hover-bg: color-mix(in srgb, var(--danger) 88%, #fff);
    --btn-hover-border: color-mix(in srgb, var(--danger) 88%, #fff);
    --btn-active-bg: color-mix(in srgb, var(--danger) 82%, #000);
}
.btn--danger-outline {
    --btn-border: color-mix(in srgb, var(--danger) 45%, var(--border));
    --btn-hover-bg: var(--danger-bg, color-mix(in srgb, var(--danger) 10%, var(--surface)));
}

.customer-edit__tab.is-active,
.design-tabs [aria-selected="true"] {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.customer-edit__tab--ok.is-active {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}
.customer-edit__tab--warn.is-active {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}
.customer-edit__hero {
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent, var(--primary)) 10%, transparent), transparent 55%),
        var(--surface);
}