@import url("./tokens.css");
@import url("./components.css");

/* Screen dimensions are Monkey layout adaptations, not Nido tokens. */
#app { min-height: 100svh; display: grid; place-items: center; }
.app-shell { margin: var(--space-5); padding: var(--space-7); box-shadow: var(--shadow-card); max-width: calc(100% - 2 * var(--space-5)); }
.app-shell .nd-btn { margin-top: var(--space-6); }
.login-panel { margin: var(--space-5); width: min(calc(100% - 2 * var(--space-5)), 464px); box-shadow: var(--shadow-raised); }
.login-header { padding: var(--space-6); border-bottom: var(--stroke-width) solid var(--ink); }
.login-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font: var(--type-title-2); }
.login-mark { display: grid; place-items: center; width: 32px; height: 32px; border: var(--stroke-width) solid var(--ink); border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); }
.login-mark svg { width: 24px; height: 24px; }
.login-header .nd-heading { margin: 0; }
.login-form { display: grid; gap: var(--space-6); padding: var(--space-6); }
.login-help { margin: 0; color: var(--text-muted); font: var(--type-caption); }
.nd-root .nd-btn:disabled { cursor: wait; box-shadow: none; }
.board-shell { width: 100%; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.board-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-7); background: var(--surface); border-bottom: var(--stroke-width) solid var(--ink); }
.board-brand { display: flex; align-items: center; gap: var(--space-3); font: var(--type-title-2); }
.board-account { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.board-navigation { display: flex; align-items: stretch; gap: var(--space-3); min-width: 0; max-width: 100%; }
.nd-root .board-selector { min-width: 180px; max-width: min(360px, 40vw); text-align: left; }
.board-selector option { background: var(--surface); color: var(--text); }
.board-add-another { flex-shrink: 0; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nd-root .board-user, .nd-root .board-shortcuts { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); border: 0; padding: var(--space-1); background: transparent; color: var(--text); cursor: pointer; font: var(--type-label); }
.board-user { min-width: 0; }
.board-user-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-user .nd-avatar, .board-user .nd-icon { flex-shrink: 0; }
.board-main { display: grid; place-items: center; padding: var(--space-8) var(--space-5); }
.board-main:focus { outline-offset: calc(-1 * var(--space-1)); }
.board-empty { width: min(100%, 680px); padding: var(--space-7); box-shadow: var(--shadow-raised); }
.board-empty .nd-eyebrow { margin: 0 0 var(--space-3); color: var(--text-muted); }
.board-empty .nd-heading { margin: 0; overflow-wrap: anywhere; }
.board-empty-description { margin: var(--space-5) 0 var(--space-6); color: var(--text-muted); }
.board-create-form { display: grid; gap: var(--space-5); }
.board-create-form .nd-alert { margin-bottom: var(--space-1); }
.board-description-input { min-height: 100px !important; resize: vertical; }
.board-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.board-current { width: min(100%, 1200px); }
.board-current .nd-heading { overflow-wrap: anywhere; }
.board-footer { padding: var(--space-2) var(--space-7); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--stroke-width) solid var(--ink); }
.nd-root .board-shortcuts { font: var(--type-caption); text-align: left; }
.board-shortcut-key { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: var(--stroke-width) solid var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-control); font: var(--type-mono-label); }
@media (max-width: 600px) {
  .board-header { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .board-navigation { order: 1; width: 100%; flex-direction: column; }
  .nd-root .board-selector { width: 100%; max-width: none; justify-content: space-between; }
  .board-add-another { width: 100%; }
  .board-user-name { display: none; }
  .board-account { gap: var(--space-2); }
  .board-empty { padding: var(--space-5); }
  .board-empty .nd-heading { font: var(--type-title-2); }
  .board-footer { padding-inline: var(--space-5); }
}
@media (max-width: 400px) {
  .login-header, .login-form { padding: var(--space-4); }
}