/* ===== Design tokens ===== */
:root{
  --purple-900:#2E1548;
  --purple-700:#4A2B72;
  --purple-600:#5B3690;
  --violet-500:#7C4FB0;
  --lavender-100:#F3EEFA;
  --lavender-200:#E9E0F5;
  --paper:#FFFFFF;
  --ink:#241537;
  --ink-soft:#5B4A70;
  --calm-teal:#2F7D6B;
  --calm-teal-dark:#1F5C4F;
  --emergency:#A6281F;
  --emergency-dark:#7E1E17;
  --gold:#B8901E;
  --border:#DCCFEC;
  --focus-ring:#1A5FB4;
  --radius:14px;
  --space-1:4px;
  --space-2:8px;
  --space-3:14px;
  --space-4:20px;
  --space-5:32px;
  --font-body: -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --text-scale:1;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--lavender-100);
  color:var(--ink);
  font-size:calc(16px * var(--text-scale));
  line-height:1.5;
  padding-bottom:70px;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--purple-900); line-height:1.2;}
h1{font-size:1.25rem; margin:0;}
h2{font-size:1.5em; margin:0 0 var(--space-3) 0;}
h3{font-size:1.15em; margin:var(--space-4) 0 var(--space-2) 0;}
h4{font-size:1em; margin:var(--space-3) 0 var(--space-1) 0;}
p{margin:0 0 var(--space-3) 0;}
ul{margin:0 0 var(--space-3) 0; padding-left:1.3em;}

button{font-family:inherit; font-size:inherit;}
input,select,textarea{font-family:inherit; font-size:inherit;}

/* ===== Accessibility base ===== */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--purple-900); color:#fff;
  padding:var(--space-2) var(--space-3); z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

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

/* Reduced motion: default already has no non-essential animation.
   This class further removes any transitions entirely. */
.reduced-motion *{
  transition:none !important;
  animation:none !important;
  scroll-behavior:auto !important;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

/* High contrast mode */
.high-contrast{
  --lavender-100:#FFFFFF;
  --lavender-200:#FFFFFF;
  --ink:#000000;
  --ink-soft:#000000;
  --border:#000000;
  --purple-900:#000000;
  --purple-700:#000000;
  --violet-500:#000000;
  --calm-teal:#000000;
  --emergency:#000000;
  --gold:#000000;
}
.high-contrast .action-btn,
.high-contrast .primary-btn,
.high-contrast .secondary-btn,
.high-contrast .danger-btn{
  border:3px solid #000 !important;
}
.high-contrast .action-btn--primary,.high-contrast .action-btn--danger,.high-contrast .action-btn--calm,
.high-contrast .primary-btn, .high-contrast .danger-btn{
  background:#000 !important; color:#fff !important;
}

.high-contrast .status-badge{background:#000 !important; color:#fff !important; border:2px solid #000;}

/* ===== Header ===== */
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--purple-900); color:#fff;
  padding:var(--space-3) var(--space-3);
  position:sticky; top:0; z-index:50;
}
.app-title{color:#fff; font-size:1.15rem;}
.icon-btn{
  background:transparent; border:2px solid transparent; color:#fff;
  font-size:1.4rem; padding:var(--space-1) var(--space-2); border-radius:8px; min-width:44px; min-height:44px;
}
.icon-btn:hover{border-color:rgba(255,255,255,.4);}

.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(280px,80vw); background:var(--paper);
  z-index:120; padding:var(--space-4) var(--space-3); box-shadow:2px 0 18px rgba(0,0,0,.25);
  overflow-y:auto;
}
.nav-drawer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-1);}
.nav-link{
  width:100%; text-align:left; background:transparent; border:none; padding:var(--space-3);
  border-radius:10px; color:var(--purple-900); font-weight:600; min-height:48px;
}
.nav-link:hover{background:var(--lavender-200);}
.nav-overlay{position:fixed; inset:0; background:rgba(20,10,35,.45); z-index:110;}

/* ===== Layout ===== */
main{padding:var(--space-3); max-width:640px; margin:0 auto;}
.view{display:none;}
.view.active{display:block;}

.privacy-note{
  background:var(--lavender-200); border:1px solid var(--border); border-radius:10px;
  padding:var(--space-2) var(--space-3); font-size:.9em; color:var(--ink-soft);
}


.startup-warning{
  background:#FFF4D6; border:2px solid #8A6500; color:#3B2A00; border-radius:10px;
  padding:var(--space-3); margin-bottom:var(--space-3); font-weight:700;
}
.startup-warning[hidden]{display:none;}

/* ===== Home action buttons ===== */
.home-actions{display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-4) 0;}
.action-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:var(--space-4); border-radius:var(--radius); border:none; text-decoration:none;
  min-height:76px; cursor:pointer; text-align:left;
}
.action-btn__label{font-weight:800; font-size:1.15rem; letter-spacing:.02em;}
.action-btn__sub{font-size:.85rem; opacity:.92; font-weight:500;}
.action-btn--primary{background:var(--purple-700); color:#fff;}
.action-btn--danger{background:var(--emergency); color:#fff;}
.action-btn--calm{background:var(--calm-teal); color:#fff;}
.action-btn:active{transform:translateY(1px);}

.home-secondary{margin-top:var(--space-5);}
.review-list{display:flex; flex-direction:column; gap:var(--space-2);}
.empty-note{color:var(--ink-soft); font-style:italic;}

.review-item{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2);
  background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:var(--space-3);
}
.review-item button{min-height:40px;}

/* ===== Generic buttons ===== */
.primary-btn, .secondary-btn, .danger-btn{
  border-radius:10px; padding:var(--space-3) var(--space-4); min-height:48px; cursor:pointer; font-weight:700;
  border:2px solid transparent;
}
.primary-btn{background:var(--purple-700); color:#fff;}
.secondary-btn{background:var(--paper); color:var(--purple-900); border-color:var(--border);}
.danger-btn{background:var(--emergency); color:#fff;}
.primary-btn:active,.secondary-btn:active,.danger-btn:active{transform:translateY(1px);}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0;}

/* ===== Forms ===== */
.field-label{display:block; font-weight:700; margin:var(--space-3) 0 var(--space-1) 0; color:var(--purple-900);}
input[type=text],input[type=tel],input[type=number],input[type=date],input[type=time],
select,textarea,input[type=file]{
  width:100%; padding:var(--space-2) var(--space-3); border:2px solid var(--border); border-radius:8px;
  background:var(--paper); color:var(--ink); min-height:44px;
}
textarea{min-height:80px; resize:vertical;}
.checkbox-row{display:flex; align-items:center; gap:var(--space-2); margin:var(--space-3) 0; font-weight:600;}
.checkbox-row input, .field-label input{width:20px; height:20px;}
.form-grid{display:flex; flex-direction:column;}

/* Chips */
.chip-grid{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-2) 0;}
.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--paper); border:2px solid var(--border);
  border-radius:999px; padding:var(--space-2) var(--space-3); font-weight:600; cursor:pointer; min-height:40px;
}
.chip input{width:16px; height:16px;}
.chip.selected, .chip:has(input:checked){background:var(--lavender-200); border-color:var(--violet-500); color:var(--purple-900);}
button.chip[aria-pressed="true"]{background:var(--violet-500); color:#fff; border-color:var(--violet-500);}

/* ===== Timer ===== */
.timer-box{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); text-align:center;}
.timer-display{font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--purple-900); margin:var(--space-2) 0;}
.confirm-msg{background:var(--lavender-200); padding:var(--space-3); border-radius:10px; font-weight:600;}
.hint{color:var(--ink-soft); font-size:.88em;}

/* ===== Emergency ===== */
.emergency-grid{display:flex; flex-direction:column; gap:var(--space-3);}

/* ===== Tabs ===== */
.detail-header{display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);}
.status-badge{background:var(--gold); color:var(--ink); padding:4px 10px; border-radius:999px; font-size:.8em; font-weight:700; white-space:nowrap;}
.status-badge.reviewed{background:var(--calm-teal); color:#fff;}
.tabs{display:flex; flex-wrap:wrap; gap:var(--space-1); margin:var(--space-3) 0; border-bottom:2px solid var(--border);}
.tab-btn{background:transparent; border:none; padding:var(--space-2) var(--space-3); font-weight:700; color:var(--ink-soft); border-bottom:3px solid transparent; min-height:44px;}
.tab-btn[aria-selected="true"]{color:var(--purple-900); border-bottom-color:var(--purple-700);}
.tab-panel{padding-top:var(--space-2);}

.two-accounts{display:flex; flex-direction:column; gap:var(--space-4);}
.account-box{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3);}

.detail-footer{border-top:1px solid var(--border); padding-top:var(--space-3); margin-top:var(--space-4);}

/* ===== History ===== */
.filter-panel{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3); margin-bottom:var(--space-3);}
.history-list{display:flex; flex-direction:column; gap:var(--space-2);}
.history-item{
  background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:var(--space-3);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); cursor:pointer; text-align:left; width:100%;
}
.history-item:hover{border-color:var(--violet-500);}
.history-item-meta{color:var(--ink-soft); font-size:.85em;}

/* ===== Timeline ===== */
.timeline-list{display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2);}
.timeline-item{
  display:grid; grid-template-columns:76px 1fr; gap:var(--space-3);
  background:var(--paper); border:1px solid var(--border); border-left:4px solid var(--violet-500);
  border-radius:8px; padding:var(--space-2) var(--space-3);
}
.timeline-time{font-weight:800; color:var(--purple-900); font-variant-numeric:tabular-nums;}

/* ===== Stats ===== */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);}
.stat-card{background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:var(--space-3);}
.stat-card .stat-value{font-size:1.5rem; font-weight:800; color:var(--purple-900); font-family:var(--font-display);}
.stat-card .stat-label{font-size:.8em; color:var(--ink-soft);}
#statsFactors .chip{cursor:default;}

/* ===== Doctor / card ===== */
.doctor-summary, .card-display{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); margin:var(--space-3) 0;
}
.first-aid{background:var(--lavender-200); border-radius:10px; padding:var(--space-3); margin-top:var(--space-3);}
.danger-heading{color:var(--emergency);}

/* ===== Toast & modal ===== */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--purple-900); color:#fff; padding:var(--space-3) var(--space-4);
  border-radius:10px; z-index:200; max-width:90vw; text-align:center; font-weight:600;
}
.modal{position:fixed; inset:0; background:rgba(20,10,35,.55); display:flex; align-items:center; justify-content:center; z-index:300; padding:var(--space-3);}
.modal[hidden]{display:none;}
.modal-box{background:var(--paper); border-radius:var(--radius); padding:var(--space-4); max-width:420px; width:100%;}
.modal-title{font-weight:800; font-size:1.1rem; color:var(--purple-900);}

/* ===== Details / disabled controls ===== */
summary{cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center;}
button:disabled{opacity:.58; cursor:not-allowed; transform:none !important;}

/* ===== Footer ===== */
.app-footer{padding:var(--space-4) var(--space-3); text-align:center; color:var(--ink-soft); font-size:.78em;}

/* ===== Print ===== */
@media print{
  .app-header,.app-footer,.nav-drawer,.nav-overlay,.tabs,#navMenuBtn,#homeBtn,.btn-row button:not(.keep-print){display:none !important;}
  body{background:#fff; padding:0;}
  .view{display:none !important;}
  .view.print-active{display:block !important;}
  main{max-width:100%;}
}

@media (min-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr 1fr;}
  .two-accounts{flex-direction:row;}
  .two-accounts .account-box{flex:1;}
}