/* Server-rendered counterparts of the Lair components (components/src in the design system).
   Loaded after tokens.css and bundle.css, which are copied verbatim from the design system. */

/* ── Shell ───────────────────────────────────────────────────────────── */
body{min-height:100dvh;display:grid;grid-template-rows:var(--topbar-h) 1fr}

.topbar{display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-5);border-bottom:1px solid var(--border-default)}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-primary)}
.brand:hover{color:var(--text-primary);text-decoration:none}
.brand svg{width:1.5rem;height:1.5rem}
.brand-word{font:var(--weight-semibold) var(--text-md)/1 var(--font-sans);letter-spacing:-0.02em}
.brand-service{padding-left:var(--space-2);border-left:1px solid var(--border-strong);font:var(--weight-regular) var(--text-md)/1 var(--font-sans);color:var(--text-secondary)}

.topnav{display:flex;gap:var(--space-1);margin-left:auto}
.topnav a{display:inline-flex;align-items:center;height:var(--control-h-md);padding:0 var(--space-2);border-radius:var(--radius-sm);font:var(--type-label);color:var(--text-secondary);transition:var(--transition-control)}
.topnav a:hover{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.topnav a[aria-current]{background:var(--accent-quiet);color:var(--accent)}

.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:0}
.sidebar{display:grid;align-content:start;gap:var(--space-4);padding:var(--space-3) .625rem;background:var(--surface-sunken);border-right:1px solid var(--border-default)}
.content{min-width:0;padding:var(--space-5)}

/* A single centered column, for sign-in and the like. */
.solo{display:grid;justify-items:center;align-content:start;padding:var(--space-8) var(--space-4)}
.solo .page{width:100%}
.page.narrow{max-width:25rem}

@media (max-width:40rem){
  .shell{grid-template-columns:1fr}
  .sidebar{border-right:0;border-bottom:1px solid var(--border-default)}
}

/* ── SidebarNav ──────────────────────────────────────────────────────── */
.overline{padding:0 var(--space-2) .375rem;font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-disabled)}
.sidenav{display:grid;gap:.125rem}
.sidenav a{display:block;height:1.875rem;padding:0 var(--space-2);border-radius:var(--radius-sm);font:var(--weight-regular) var(--text-sm)/1.875rem var(--font-sans);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:var(--transition-control)}
.sidenav a:hover{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.sidenav a[aria-current]{background:var(--accent-quiet);color:var(--accent);font-weight:var(--weight-medium)}
.sidenav .empty{padding:0 var(--space-2);font-size:var(--text-sm)}

/* ── Page ────────────────────────────────────────────────────────────── */
.page{display:grid;gap:var(--gap-section);max-width:45rem;margin:0 auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.page-head h1{font:var(--type-title);font-size:var(--text-2xl);overflow-wrap:anywhere}
.empty{color:var(--text-secondary)}
.lede{color:var(--text-secondary)}

/* The buttons and links that end a form. */
.actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font:var(--type-caption)}

/* ── Button ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h-md);padding:var(--pad-control);font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);letter-spacing:var(--tracking-tight);color:var(--text-primary);background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.btn:hover{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.btn:active{transform:scale(var(--press-scale))}
.btn svg{width:.875rem;height:.875rem}
.btn-primary{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.btn-primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.btn-danger{background:var(--status-error);color:var(--text-on-error);border-color:transparent}
.btn-danger:hover{background:color-mix(in oklab,var(--status-error) 88%,white);color:var(--text-on-error)}

/* ── Card ────────────────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:.625rem var(--pad-card);border-bottom:1px solid var(--border-subtle)}
.card-head h2{font:var(--type-section)}
.card-body{display:grid;gap:var(--gap-stack);padding:var(--pad-card)}

/* Rows inside a card, divided by hairlines. */
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.row + .row{padding-top:var(--gap-stack);border-top:1px solid var(--border-subtle)}
.row > .field{flex:1}
.row-title{font:var(--type-body-strong)}
.row-title.is-danger{color: var(--status-error)}
.row-caption{font:var(--type-caption);color:var(--text-secondary)}

.meta{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2) var(--space-4)}
.meta dt{color:var(--text-secondary)}
.meta dd{margin:0;font:var(--type-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ── Input ───────────────────────────────────────────────────────────── */
.field{display:grid;gap:.375rem}
.field-label{font:var(--type-label)}
.field-hint{font:var(--type-caption);color:var(--text-secondary)}
.field-error{font:var(--type-caption);color:var(--status-error)}
.input{width:100%;height:var(--control-h-md);padding:0 .625rem;font:var(--type-body);font-size:var(--text-sm);color:var(--text-primary);background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:var(--transition-control),box-shadow var(--dur-base) var(--ease-out)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .1875rem var(--focus-ring)}
.input[aria-invalid="true"]{border-color:var(--status-error)}
textarea.input{height:auto;min-height:5rem;padding:.375rem .625rem;resize:vertical}
.input.mono{font:var(--type-mono)}

/* A value shown once and meant to be copied: one click selects all of it. */
.secret{padding:var(--space-2) .625rem;font:var(--type-mono);background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-sm);user-select:all;overflow-wrap:anywhere}

/* ── Switch ──────────────────────────────────────────────────────────── */
.switch{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--type-label);cursor:pointer}
.switch input{appearance:none;position:relative;flex:none;width:2.25rem;height:1.25rem;margin:0;background:var(--surface-active);border:1px solid var(--border-strong);border-radius:var(--radius-full);cursor:inherit;transition:background-color var(--dur-base) var(--ease-out)}
.switch input::before{content:"";position:absolute;top:.125rem;left:.125rem;width:.875rem;height:.875rem;clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);background:var(--text-secondary);transition:transform var(--dur-base) var(--ease-emphasized),background-color var(--dur-base) var(--ease-out)}
.switch input:checked{background:var(--accent);border-color:transparent}
.switch input:checked::before{background:var(--text-on-accent);transform:translateX(1rem)}

/* ── Dialog (native popover) ─────────────────────────────────────────── */
.dialog{width:26.25rem;max-width:calc(100% - 2 * var(--space-5));margin:auto;padding:0;color:var(--text-primary);background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-modal)}
.dialog::backdrop{background:var(--surface-scrim);backdrop-filter:var(--blur-scrim)}
.dialog:popover-open{animation:lair-enter var(--dur-slow) var(--ease-emphasized)}
.dialog-body{display:grid;gap:var(--space-1);padding:.875rem var(--pad-card) var(--space-4)}
.dialog-body h2{font:var(--type-title);font-size:var(--text-lg)}
.dialog-body p{font-size:var(--text-sm);color:var(--text-secondary)}
.dialog-foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--pad-card);border-top:1px solid var(--border-subtle)}

/* ── Toast ───────────────────────────────────────────────────────────── */
/* Leaves on its own after 4s; no script involved. */
.toast{position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;display:flex;align-items:flex-start;gap:var(--space-2);min-width:16.25rem;max-width:23.75rem;padding:.625rem var(--space-3);font:var(--type-body-strong);font-size:var(--text-sm);background:var(--surface-overlay);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);animation:lair-enter var(--dur-slow) var(--ease-emphasized),lair-leave var(--dur-slow) var(--ease-out) 4s forwards}
.toast svg{flex:none;width:.9375rem;height:.9375rem;margin-top:.125rem;color:var(--status-ok)}
.toast-error svg{color:var(--status-error)}
@keyframes lair-leave{to{opacity:0;visibility:hidden}}