/* Component styles. Shared design values: tokens.css. */
:root {
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px;
}

[hidden] {
  display:none!important;
}

h1,h2,h3,p {
  margin:0;
}

h1 {
  font-weight:var(--weight-medium);
  letter-spacing:-1.1px;
  font-size:var(--text-title);
  line-height:1.15;
}

h2 {
  font-weight:var(--weight-medium);
  letter-spacing:-.7px;
  font-size:26px;
  line-height:1.2;
}

h3 {
  font-size:var(--text-section);
  font-weight:var(--weight-medium);
  letter-spacing:-.4px;
}

.muted {
  color:var(--muted);
}

.small {
  font-size:12px;
  line-height:1.6;
}

.eyebrow,.mini-label {
  display:none;
  font-size:10px;
  font-weight:500;
  letter-spacing:1.7px;
  color:var(--muted);
  margin-bottom:12px;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:32px;
  font-weight:600;
  letter-spacing:-1px;
}

.brand-mark {
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  font-size:35px;
  background:var(--action);
  color:white;
  border-radius:var(--radius-field);
  font-weight:400;
}

.brand-dot {
  margin-left:-10px;
  color:var(--accent);
}

.login-shell {
  min-height:100dvh;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.welcome {
  padding:54px 10%;
  background:var(--accent);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100dvh;
}

.welcome h1 {
  font-size:clamp(45px,5.2vw,78px);
  line-height:1.04;
  margin:20px 0 28px;
  font-weight:500;
  letter-spacing:-3px;
}

.welcome p:not(.eyebrow) {
  color:var(--accent-muted);
  line-height:1.8;
}

.welcome-bottom {
  font-size:12px;
  color:var(--accent-muted);
}

.login-panel {
  display:grid;
  place-items:center;
  padding:36px;
}

.login-form {
  width:100%;
  max-width:355px;
}

.login-form h2 {
  font-size:32px;
  margin:12px 0;
}

.login-form>p {
  line-height:1.6;
  margin-bottom:28px;
}

.login-form button {
  width:100%;
  margin-top:8px;
}

label {
  font-size:12px;
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-bottom:18px;
}

input,select {
  width:100%;
  min-height:45px;
  padding:11px 13px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-field);
  font-size:var(--text-input);
  font-weight:400;
}

input::placeholder {
  color:var(--subtle);
}

.primary,.secondary {
  border-radius:var(--radius-control);
  border:1px solid transparent;
  padding:12px 20px;
  min-height:44px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}

.primary {
  background:var(--action);
  color:var(--on-action);
}

.primary:hover {
  background:var(--action-hover);
}

.secondary {
  background:var(--paper);
  border-color:var(--line);
  color:var(--ink);
}

.text-button {
  border:0;
  background:none;
  color:var(--muted);
  padding:0;
  font-size:12px;
  text-align:left;
  display:block;
}

.error {
  color:var(--danger);
  font-size:13px;
  line-height:1.6;
  min-height:12px;
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:235px;
  padding:35px 25px;
  background:var(--paper);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  z-index:3;
}

.family-label {
  margin-top:44px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0;
}

.family-label select {
  font-weight:600;
  background:var(--bg);
  letter-spacing:0;
  font-size:12px;
  border:0;
}

nav {
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}

nav button {
  background:none;
  border:0;
  border-radius:var(--radius-field);
  padding:13px 14px;
  text-align:left;
  color:var(--muted);
  font-size:18px;
  display:flex;
  gap:15px;
  align-items:center;
}

nav span {
  font-size:13px;
}

nav button.active {
  background:var(--action);
  color:var(--on-action);
  font-weight:500;
}

.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  gap:12px;
  align-items:center;
}

.sidebar-bottom strong {
  display:block;
  font-size:12px;
  margin-bottom:5px;
}

.avatar {
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  background:var(--surface);
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:3px 0 35px;
}

.top-actions {
  display:flex;
  align-items:center;
  gap:12px;
}

.top-actions input {
  width:165px;
  background:transparent;
}

.topbar .eyebrow {
  margin-bottom:9px;
}

main {
  margin-left:235px;
  padding:40px 44px;
  max-width:1630px;
  min-height:100dvh;
}

footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:30px;
  margin-top:25px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
}

.hero-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:18px;
}

.card {
  min-width:0;
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:var(--space-5);
}

.card-label {
  font-size:12px;
  color:var(--muted);
  margin-bottom:18px;
}

.metric {
  font-size:var(--text-metric);
  letter-spacing:-1.5px;
  font-weight:var(--weight-medium);
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.metric small {
  font-size:16px;
  letter-spacing:0;
  font-weight:400;
  opacity:.7;
}

.hero-card {
  background:var(--accent);
  border-color:transparent;
  color:var(--on-accent);
}

.hero-card .card-label {
  color:var(--accent-muted);
}

.hero-card .small {
  color:var(--accent-muted);
}

.hero-card .metric {
  font-size:clamp(32px,3.2vw,46px);
  font-weight:400;
  letter-spacing:-1.8px;
}

.card-foot {
  font-size:11px;
  color:var(--muted);
  margin-top:18px;
}

.positive {
  color:var(--positive);
}

.negative {
  color:var(--warning);
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}

.section-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.overview-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:22px;
  margin-top:24px;
}

.currency-switch {
  display:flex;
  gap:6px;
  margin:0 0 18px;
}

.chip {
  border:1px solid var(--line);
  border-radius:25px;
  padding:7px 12px;
  background:var(--paper);
  font-size:11px;
  color:var(--muted);
}

.chip.active {
  background:var(--action);
  color:var(--on-action);
  border-color:var(--action);
}

.category-row {
  margin-top:20px;
}

.row-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  margin-bottom:9px;
}

.bar {
  height:5px;
  background:var(--surface);
  border-radius:4px;
  overflow:hidden;
}

.bar-fill {
  height:100%;
  background:var(--accent);
  border-radius:4px;
}

.bar-fill.over {
  background:var(--warning);
}

.account-mini {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--surface);
}

.account-mini:last-child {
  border-bottom:0;
}

.account-icon {
  width:35px;
  height:35px;
  flex-shrink:0;
  border-radius:var(--radius-icon);
  background:var(--surface);
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:600;
  color:var(--action);
}

.account-mini .title {
  font-size:12px;
}

.account-mini .subtitle {
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
}

.account-mini .account-value {
  margin-left:auto;
  text-align:right;
  font-size:13px;
  white-space:nowrap;
}

.wide-card {
  margin-top:24px;
}

.tx-row {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 100px 140px 100px;
  align-items:center;
  gap:12px;
  padding:16px 0;
  border-top:1px solid var(--line);
}

.tx-icon {
  width:36px;
  height:36px;
  border-radius:var(--radius-icon);
  display:grid;
  place-items:center;
  background:var(--surface);
  color:var(--muted);
}

.tx-icon.income,.tx-icon.refund {
  background:var(--surface);
  color:var(--positive);
}

.tx-icon.exchange,.tx-icon.transfer {
  background:var(--accent-soft);
  color:var(--accent-muted);
}

.tx-title {
  font-size:13px;
  font-weight:500;
}

.tx-note {
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:500px;
}

.tx-date {
  font-size:11px;
  color:var(--muted);
}

.tx-value {
  text-align:right;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.tx-value small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px;
}

.tx-actions {
  display:flex;
  justify-content:flex-end;
  gap:6px;
}

.icon-button {
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:23px;
  min-width:36px;
  min-height:36px;
  border-radius:7px;
}

.icon-button:hover {
  background:var(--bg);
}

.tx-actions button {
  font-size:15px;
}

.empty {
  text-align:center;
  padding:44px 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}

.toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.toolbar input {
  max-width:340px;
}

.toolbar select {
  max-width:180px;
}

.count {
  font-size:11px;
  color:var(--muted);
  margin-left:auto;
}

.account-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.account-card .metric {
  font-size:27px;
  margin:26px 0 14px;
}

.account-card .owner {
  font-size:11px;
  color:var(--muted);
}

.pill {
  font-size:10px;
  border:1px solid var(--line);
  padding:5px 8px;
  border-radius:6px;
}

.account-card .section-heading {
  margin:0;
}

.account-card h3 {
  font-size:14px;
}

.plan-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.plan-card .row-top {
  margin-top:20px;
}

.plan-card .section-heading {
  margin:0;
}

.plan-card h3 {
  font-size:14px;
}

.notice {
  padding:14px 18px;
  background:var(--warning-bg);
  color:var(--warning);
  border:1px solid var(--warning-line);
  border-radius:var(--radius-field);
  font-size:12px;
  margin-bottom:18px;
  line-height:1.6;
}

.settings-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.settings-grid p {
  font-size:13px;
  line-height:1.75;
  margin:15px 0;
  color:var(--muted);
}

.settings-grid button {
  margin-right:8px;
  margin-top:8px;
}

.history-row {
  border-top:1px solid var(--line);
  padding:17px 0;
  font-size:12px;
  line-height:1.7;
}

.history-row summary {
  cursor:pointer;
}

.history-row pre {
  white-space:pre-wrap;
  word-break:break-word;
  background:var(--bg);
  padding:14px;
  border-radius:8px;
  font-size:11px;
  max-height:340px;
  overflow:auto;
}

.history-row .muted {
  font-size:11px;
}

.load-more {
  display:block;
  margin:20px auto 0;
}

dialog {
  width:min(540px,calc(100vw - 24px));
  max-height:calc(100dvh - 30px);
  padding:28px;
  border:0;
  border-radius:var(--radius-dialog);
  color:var(--ink);
  box-shadow:var(--shadow-dialog);
}

dialog::backdrop {
  background:var(--backdrop);
}

.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
  gap:20px;
}

.dialog-head .eyebrow {
  margin-bottom:7px;
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:20px 0 15px;
}

.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--on-action);
  font-size:13px;
  line-height:1.5;
  padding:14px 24px;
  border-radius:var(--radius-field);
  box-shadow:none;
  z-index:20;
  max-width:90vw;
}

.footer-link {
  color:var(--action);
  font-size:12px;
}

.skeleton {
  height:180px;
  background:var(--surface);
  border-radius:18px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:13px;
}

.summary-note {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin-top:14px;
}

.mobile-owner {
  display:none;
}

@media(min-width:1550px) {
  main {
    margin-right:auto;
    margin-left:235px;
  }
}

@media(max-width:1150px) {
  .sidebar {
    width:195px;
    padding:28px 18px;
  }
  main {
    margin-left:195px;
    padding:30px 25px;
  }
  .metric {
    font-size:28px;
  }
  .hero-grid {
    gap:12px;
  }
  .card {
    padding:20px;
  }
  .account-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .tx-row {
    grid-template-columns:35px minmax(0,1fr) 110px 80px;
  }
  .tx-date {
    display:none;
  }
  .overview-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:800px) {
  .sidebar {
    position:relative;
    width:auto;
    padding:18px 20px;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:15px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brand {
    font-size:27px;
  }
  .brand-mark {
    height:33px;
    width:33px;
    font-size:29px;
  }
  .family-label {
    margin:0;
    justify-self:end;
    width:180px;
    font-size:0;
    gap:0;
  }
  .family-label select {
    min-height:36px;
    font-size:12px;
    padding:8px;
  }
  .sidebar-bottom {
    display:none;
  }
  nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    flex-direction:row;
    justify-content:space-around;
    padding:8px 6px max(9px,env(safe-area-inset-bottom));
    background:var(--surface);
    border:1px solid var(--paper);
    border-radius:28px;
    margin:0 10px 10px;
    gap:2px;
    z-index:5;
  }
  nav button {
    flex-direction:column;
    gap:5px;
    padding:8px 5px;
    font-size:18px;
    flex:1;
    border-radius:22px;
    min-width:0;
  }
  nav span {
    font-size:9px;
  }
  main {
    margin:0;
    padding:26px 18px 100px;
  }
  .topbar {
    align-items:flex-start;
    margin-bottom:25px;
    flex-wrap:wrap;
    gap:18px;
  }
  .topbar h1 {
    font-size:27px;
  }
  .topbar .eyebrow {
    font-size:9px;
  }
  .top-actions {
    width:100%;
    justify-content:space-between;
  }
  .top-actions input {
    width:160px;
  }
  .hero-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .hero-grid > .card:not(.hero-card) {
    padding:18px 14px;
  }
  .hero-card {
    grid-column:1/-1;
    padding:25px;
  }
  .hero-card .metric {
    font-size:39px;
  }
  .metric {
    font-size:20px;
    letter-spacing:-.8px;
  }
  .card-label {
    font-size:11px;
    margin-bottom:14px;
  }
  .card-foot {
    font-size:10px;
  }
  .overview-grid {
    grid-template-columns:1fr;
    gap:16px;
    margin-top:18px;
  }
  .wide-card {
    margin-top:18px;
  }
  .tx-row {
    grid-template-columns:32px minmax(0,1fr) auto;
    gap:9px;
  }
  .tx-actions {
    grid-column:2/4;
    justify-content:flex-end;
    margin-top:-6px;
  }
  .tx-actions button {
    min-height:28px;
  }
  .tx-value {
    font-size:12px;
  }
  .tx-note {
    max-width:190px;
    font-size:10px;
  }
  .tx-title {
    font-size:12px;
  }
  .account-grid,.plan-grid,.settings-grid {
    grid-template-columns:1fr;
  }
  .account-card .metric {
    font-size:31px;
  }
  .account-card .section-heading {
    margin-bottom:10px;
  }
  .card {
    border-radius:var(--radius);
  }
  .count {
    width:100%;
    margin-top:5px;
  }
  .toolbar input {
    max-width:none;
  }
  .toolbar select {
    max-width:none;
  }
  footer {
    font-size:9px;
    line-height:1.6;
  }
  .login-shell {
    display:block;
  }
  .welcome {
    min-height:auto;
    padding:24px;
  }
  .welcome>div,.welcome-bottom {
    display:none;
  }
  .login-panel {
    padding:42px 24px;
  }
  .login-form {
    max-width:380px;
  }
  .form-grid {
    gap:12px;
  }
  dialog {
    padding:22px 20px;
  }
  .toast {
    bottom:100px;
  }
  .section-heading h3 {
    font-size:16px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  button {
    transition:background var(--transition),opacity var(--transition);
  }
  dialog[open] {
    animation:enter .18s ease-out;
  }
  @keyframes enter {
    from {
      opacity:0;
      transform:translateY(8px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }
}


/* Debt actions keep separate touch targets inside the shared sheet. */
dialog .form-grid.debt-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.debt-actions > button { flex:1 1 130px; min-height:44px; }