/* KudiAxis Phase 1.1 — Mobile-first UX layer
   The application is designed for phones first; desktop keeps the existing
   spacious layout. This file intentionally sits after app.built.css. */

:root{
  --mobile-nav-h:76px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-top:env(safe-area-inset-top, 0px);
}

button, .nav-item, .mobile-tab, .more-menu-item{ touch-action:manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--emerald-bright);
  outline-offset:2px;
}

@media (max-width:639px){
  html{ scroll-padding-bottom:calc(var(--mobile-nav-h) + var(--safe-bottom) + 20px); }
  body{ padding-bottom:calc(var(--mobile-nav-h) + var(--safe-bottom)); background:var(--ink); }
  #app-root{ min-height:100dvh; }
  main{ width:100%; }
  main > .max-w-3xl{
    max-width:none;
    padding:0 14px calc(var(--mobile-nav-h) + 28px);
  }

  /* App header behaves like a native mobile title bar. */
  main header.sm\:hidden{
    position:sticky;
    top:0;
    z-index:25;
    margin:0 -14px 12px;
    padding:calc(10px + var(--safe-top)) 14px 10px;
    min-height:58px;
    background:rgba(7,17,31,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(148,163,184,.12);
  }
  main header.sm\:hidden img{ width:30px; height:30px; border-radius:9px; }
  main header.sm\:hidden .font-display{ font-size:17px; }
  #offline-badge-mobile{
    min-height:32px;
    padding:6px 10px;
    font-size:11px;
    box-shadow:none;
    animation:none;
  }

  #today-date-display{ font-size:12px; }
  #save-status{ max-width:54%; text-align:right; justify-content:flex-end; }
  #save-status-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Page headings */
  .view > .flex.items-center.justify-between.mb-5,
  #view-dashboard > .flex.items-center.justify-between.mb-5{
    margin-bottom:14px;
    align-items:center;
  }
  .view h1{ font-size:22px !important; line-height:1.25; letter-spacing:-.02em; }
  .mobile-page-action{ display:none; }
  .view > .flex.items-center.justify-between.mb-5 > .btn-primary,
  .view > .flex.items-center.justify-between.mb-5 > button.btn-primary{
    min-height:42px;
    padding:9px 13px;
    border-radius:12px;
  }

  /* Cards: lighter visual weight on phone. */
  .card{
    border-radius:18px;
    box-shadow:0 10px 24px -18px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.02);
  }
  .view .card.p-5{ padding:16px; }
  .view .card.p-4{ padding:14px; }
  .section-star:before{ font-size:9px; margin-right:7px; }
  .view h2.section-star{ font-size:13px; letter-spacing:.05em; }

  /* Comfortable form controls for thumbs. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=month], select, textarea{
    min-height:48px;
    border-radius:13px;
    padding:12px 13px;
    font-size:16px; /* prevents iOS auto zoom */
  }
  textarea{ min-height:92px; }
  .toggle{ width:48px; height:28px; }
  .toggle:after{ width:24px; height:24px; }
  .toggle:checked:after{ transform:translateX(20px); }
  .btn-primary, .btn-ghost{ min-height:44px; }

  /* Dashboard: make the most important number dominant; avoid cramming. */
  #view-dashboard > .card:first-of-type{ padding:18px; }
  #dash-total-income{ font-size:31px; line-height:1.1; margin-top:4px; }
  #view-dashboard > .grid.grid-cols-2.gap-3.mb-4{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  #view-dashboard > .grid.grid-cols-2.gap-3.mb-4 .card{ min-height:104px; display:flex; flex-direction:column; justify-content:center; }
  #view-dashboard > .grid.grid-cols-2.gap-3.mb-4 .card p:last-child{ font-size:18px; }
  #view-dashboard .grid.grid-cols-3.gap-3.text-center{ gap:6px; }
  #view-dashboard .grid.grid-cols-3.gap-3.text-center > div{ min-width:0; }
  #view-dashboard .grid.grid-cols-3.gap-3.text-center span:last-child{ font-size:13px; display:block; overflow-wrap:anywhere; }

  /* Pay: forms become clean stacked sections. */
  #view-pay .card{ margin-bottom:12px; }
  #view-pay label{ font-size:11px; }
  #view-pay select{ margin-bottom:14px; }

  /* Calendar: compact enough to work on narrow screens. */
  #view-calendar .card:first-of-type{ padding:12px; }
  #view-calendar #cal-year-hint{ display:none; }
  #view-calendar .cal-day{ min-height:42px; border-radius:10px; font-size:12px; }
  #view-calendar .grid.grid-cols-7{ gap:2px; }
  #cal-month-label{ font-size:15px; }
  #cal-prev-year, #cal-next-year{ display:none; }

  /* Lists generated by JS should feel like native list cards. */
  #transaction-list > .card,
  #accounts-list > .card,
  #budgets-list > .card,
  #goals-list > .card,
  #loans-list > .card,
  #deductions-list > .card,
  #debts-list > .card,
  #assets-list > .card{
    margin-bottom:10px;
    border-radius:16px;
  }

  /* Giving is optional and part of ordinary expense tracking. */
  #giving-planner-card{ margin-top:18px; }
  #giving-planner-card .giving-grid{ grid-template-columns:1fr; gap:12px; }
  #giving-planner-card .pill{ flex-shrink:0; }

  /* Loans: make the mode switch a segmented control. */
  #view-loans > .flex.gap-2.mb-5{
    padding:4px;
    gap:4px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--hairline);
    border-radius:14px;
    margin-bottom:14px;
  }
  #view-loans .loan-tab{ border:0; border-radius:10px; min-height:42px; padding:8px 6px; }
  #view-loans .loan-tab.active-filter{ background:rgba(16,185,129,.14); color:#6EE7B7; }

  /* Reports: charts get breathing room and never spill horizontally. */
  #view-reports .card{ overflow:hidden; }
  #view-reports svg{ max-width:100%; height:auto; }
  #view-reports [id^="chart-"]{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Settings is a long page: visually separate the groups. */
  #view-settings .card{ margin-bottom:12px; }
  #view-settings .card > h2{ margin-bottom:10px; }

  /* Modal = bottom sheet on phone, full safe-area support. */
  .modal-backdrop{ padding:0; align-items:flex-end; }
  .modal-panel{
    max-width:none;
    max-height:min(88dvh, 760px);
    border-radius:22px 22px 0 0;
    padding-bottom:calc(10px + var(--safe-bottom));
    box-shadow:0 -18px 50px rgba(0,0,0,.45);
  }
  .modal-panel:before{
    content:"";
    display:block;
    width:42px;
    height:4px;
    margin:8px auto 2px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
  }

  /* Floating desktop FAB is replaced by the center bottom-nav Add button. */
  #btn-quick-add-fab{ display:none !important; }

  #mobile-bottom-nav{
    height:calc(var(--mobile-nav-h) + var(--safe-bottom));
    padding:6px 6px calc(6px + var(--safe-bottom));
    background:rgba(9,24,39,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -10px 30px rgba(0,0,0,.24);
  }
  .mobile-tab{
    appearance:none;
    border:0;
    background:transparent;
    flex:1 1 0;
    min-width:0;
    min-height:58px;
    padding:7px 2px 4px;
    gap:2px;
    color:rgba(226,232,240,.56);
    font-size:10.5px;
    line-height:1;
  }
  .mobile-tab .tab-icon{
    font-size:23px;
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
  }
  .mobile-tab.active{ color:#6EE7B7; }
  .mobile-tab.active .tab-icon{ transform:translateY(-1px); }
  .mobile-add-tab{
    width:66px;
    flex:0 0 66px;
    height:68px;
    margin-top:-25px;
    border:0;
    background:transparent;
    color:rgba(226,232,240,.7);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:3px;
    font-size:10.5px;
    font-weight:700;
  }
  .mobile-add-tab > span{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(145deg,#34D399,#10B981);
    color:#04111c;
    font-size:30px;
    line-height:1;
    box-shadow:0 10px 24px rgba(16,185,129,.28), inset 0 1px rgba(255,255,255,.28);
    border:3px solid #0b1726;
  }
  .mobile-add-tab small{ font-size:10.5px; color:#6EE7B7; }

  /* More menu becomes a readable one-handed list instead of tiny 3-column tiles. */
  #mobile-more-sheet > div:last-child{
    max-height:82dvh;
    border-radius:24px 24px 0 0;
    padding:10px 14px calc(18px + var(--safe-bottom));
    background:#0d1b2d;
  }
  .mobile-more-list{ display:flex; flex-direction:column; gap:3px; }
  .more-menu-item{
    width:100%;
    min-height:62px;
    display:grid;
    grid-template-columns:42px 1fr 20px;
    align-items:center;
    gap:10px;
    padding:8px 6px;
    border-radius:14px;
    text-align:left;
    color:var(--paper);
  }
  .more-menu-item:active{ background:rgba(255,255,255,.06); }
  .more-icon{
    width:38px; height:38px; border-radius:12px;
    display:grid; place-items:center;
    background:rgba(16,185,129,.09);
    color:#6EE7B7;
    font-size:20px;
    font-weight:700;
  }
  .more-menu-item strong{ display:block; font-size:14px; line-height:1.2; }
  .more-menu-item small{ display:block; margin-top:3px; font-size:11.5px; color:rgba(226,232,240,.45); line-height:1.2; }
  .more-arrow{ color:rgba(226,232,240,.3); font-size:24px; }

  /* Entry screens: ensure keyboard + smaller devices remain usable. */
  #lock-screen .min-h-full{ align-items:flex-start; padding-top:max(28px, var(--safe-top)); padding-bottom:30px; }
  #lock-screen .max-w-sm{ max-width:420px; }
  #lock-screen .card{ padding:18px; }
  #lock-screen img{ max-width:230px !important; }

  /* Empty states are less visually wasteful on mobile. */
  [id$="-empty"]{ padding-top:28px !important; padding-bottom:28px !important; }
}

/* Slightly wider phones / tablets: retain mobile navigation but use 2-column
   space where it genuinely improves scanning. */
@media (min-width:480px) and (max-width:639px){
  #giving-planner-card .giving-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:640px){
  #mobile-bottom-nav, #mobile-more-sheet{ display:none !important; }
  #btn-quick-add-fab{ display:flex; }
}


/* Phase 1.2.2 — guided authentication experience */
#lock-screen{
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(16,185,129,.18), transparent 58%),
    radial-gradient(700px 460px at 105% 20%, rgba(212,166,42,.10), transparent 58%),
    linear-gradient(180deg,#07111F 0%,#091827 55%,#07111F 100%) !important;
  color:#F8FAFC;
}
.auth-shell{display:flex;align-items:center;justify-content:center;padding:30px 18px;min-height:100dvh;}
.auth-wrap{width:min(100%,940px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.8fr);gap:56px;align-items:center;}
.auth-brand{min-width:0;}
.auth-wordmark{display:block;width:min(100%,520px);height:auto;border-radius:18px;margin-bottom:28px;box-shadow:0 22px 60px -38px rgba(0,0,0,.85);}
.auth-title{font-size:clamp(30px,4vw,48px);font-weight:750;line-height:1.06;letter-spacing:-.035em;color:#F8FAFC;max-width:620px;margin-bottom:16px;}
.auth-subtitle{font-size:16px;line-height:1.7;color:rgba(226,232,240,.68);max-width:590px;}
.auth-trust-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;}
.auth-trust-row span{font-size:12px;font-weight:650;color:rgba(226,232,240,.76);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(148,163,184,.15);}
.auth-card-wrap{width:100%;max-width:420px;justify-self:end;}
.auth-card{padding:26px !important;border-radius:22px !important;background:linear-gradient(165deg,rgba(15,28,46,.96),rgba(20,35,56,.94)) !important;border:1px solid rgba(148,163,184,.18) !important;box-shadow:0 28px 70px -34px rgba(0,0,0,.92),inset 0 1px rgba(255,255,255,.035) !important;}
.auth-step{font-size:10.5px;font-weight:800;letter-spacing:.16em;color:#D4A62A;margin-bottom:8px;}
.auth-heading{font-size:24px;font-weight:750;letter-spacing:-.02em;color:#F8FAFC;margin-bottom:8px;line-height:1.2;}
.auth-help{font-size:13px;line-height:1.65;color:rgba(226,232,240,.58);margin-bottom:20px;}
.auth-label{display:block;font-size:12px;font-weight:700;color:rgba(226,232,240,.78);margin:0 0 7px 2px;}
#lock-screen input[type=email],#lock-screen input[type=password]{min-height:50px;background:#091728 !important;border:1px solid rgba(148,163,184,.24) !important;color:#F8FAFC !important;border-radius:13px !important;padding:12px 14px !important;font-size:16px !important;box-shadow:none !important;}
#lock-screen input::placeholder{color:rgba(226,232,240,.34) !important;}
#lock-screen input:focus{border-color:#10B981 !important;box-shadow:0 0 0 3px rgba(16,185,129,.12) !important;outline:none !important;}
#lock-screen input:-webkit-autofill,#lock-screen input:-webkit-autofill:hover,#lock-screen input:-webkit-autofill:focus{-webkit-text-fill-color:#F8FAFC;-webkit-box-shadow:0 0 0 1000px #091728 inset;transition:background-color 9999s ease-out 0s;caret-color:#F8FAFC;}
.auth-primary{min-height:50px !important;border-radius:13px !important;font-size:15px !important;margin-top:4px;}
.auth-secondary{min-height:48px !important;border-radius:13px !important;font-size:14px !important;}
.auth-inline-action{display:flex;justify-content:flex-end;margin:-1px 2px 14px;}
.auth-inline-action button{font-size:12.5px;font-weight:650;color:#6EE7B7;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:rgba(226,232,240,.34);font-size:11.5px;font-weight:650;white-space:nowrap;}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:rgba(148,163,184,.15);flex:1;}
.auth-back{display:block;width:100%;text-align:center;margin-top:16px;padding:8px;color:rgba(226,232,240,.56);font-size:13px;font-weight:650;}
.auth-back:hover{color:#6EE7B7;}
.auth-microcopy{text-align:center;font-size:10.5px;line-height:1.5;color:rgba(226,232,240,.34);margin-top:13px;}
.auth-status-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.20);font-size:22px;margin-bottom:15px;}
.auth-success{font-size:12.5px;color:#6EE7B7;padding:10px 12px;border-radius:11px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.16);margin-bottom:12px;}
.auth-footer{text-align:center;font-size:11px;font-weight:600;color:rgba(226,232,240,.30);margin-top:18px;letter-spacing:.02em;}

@media(max-width:760px){
  .auth-shell{align-items:flex-start;padding:calc(22px + env(safe-area-inset-top,0px)) 16px calc(28px + env(safe-area-inset-bottom,0px));}
  .auth-wrap{display:flex;flex-direction:column;gap:18px;width:100%;max-width:440px;}
  .auth-brand{text-align:center;width:100%;}
  .auth-wordmark{width:min(100%,340px);margin:0 auto 16px;border-radius:13px;}
  .auth-title{font-size:25px;line-height:1.12;margin:0 auto 9px;max-width:350px;}
  .auth-subtitle{font-size:13px;line-height:1.55;margin:0 auto;max-width:370px;}
  .auth-trust-row{justify-content:center;margin-top:14px;gap:6px;}
  .auth-trust-row span{font-size:10.5px;padding:6px 8px;}
  .auth-card-wrap{max-width:none;justify-self:auto;}
  .auth-card{padding:20px !important;border-radius:20px !important;}
  .auth-heading{font-size:21px;}
  .auth-help{font-size:12.5px;margin-bottom:17px;}
  .auth-footer{margin-bottom:8px;}
}

@media(max-width:390px){
  .auth-brand .auth-subtitle{display:none;}
  .auth-trust-row span:nth-child(3){display:none;}
  .auth-wordmark{max-width:300px;}
  .auth-title{font-size:22px;}
}