@import url("/design-system.css");

/* Compatibility layer for the authenticated pages that pre-date the shared
   design system. The classes remain stable so the existing JavaScript and API
   contracts do not change. */
:root{
  --bg:var(--canvas);
  --paper:var(--surface);
  --ink:var(--text);
  --muted:var(--text-2);
  --line:var(--border);
  --soft:var(--surface-2);
  --accent:var(--red);
  --accent-dark:var(--red-dark);
  --danger:var(--error);
  --shadow:var(--shadow-md);
  --sans:var(--font-sans);
  --serif:var(--font-sans);
}

[hidden]{display:none!important}
.kit-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:34px;padding:0 12px;border:1px solid var(--border-strong);
  border-radius:var(--r-btn);background:var(--surface);box-shadow:var(--shadow-xs);
  color:var(--text);font-size:12px;font-weight:550;
  transition:transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast) ease;
}
.kit-button:hover{border-color:var(--text-2);transform:translateY(-1px)}
.secondary .nav-item{color:var(--text-2)}

/* Legacy sidebar footer markup has one fewer wrapper. */
.sidebar-foot>div:not(.mini-avatar){display:grid;min-width:0;line-height:1.25}
.sidebar-foot>div:not(.mini-avatar) strong{font-size:12px;font-weight:600;color:var(--text)}
.sidebar-foot>div:not(.mini-avatar) span{font-size:10.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 16px;border:1px solid transparent;
  border-radius:var(--r-btn);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:transform var(--motion-fast) var(--ease-out),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button:active:not(:disabled){transform:scale(.985)}
.button.accent{background:var(--red);color:#fff;box-shadow:0 1px 2px rgba(195,62,48,.25)}
.button.accent:hover{background:var(--red-dark)}
.button.ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.button:focus-visible,.kit-button:focus-visible{box-shadow:var(--ring)}
.button:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:680px){
  .kit-button{font-size:0;width:36px;padding:0}
  .kit-button span{font-size:18px}
}