/* Apple-glass vibe in koffietinten */
:root{
  --bg1:#efe6d8;
  --bg2:#d6c4a8;
  --text:#2b1c12;
  --muted:rgba(43,28,18,.72);
  --accent:#6f4e37;
  --accent2:#c8a67b;
  --glass:rgba(255,255,255,.45);
  --glass2:rgba(255,255,255,.22);
  --stroke:rgba(111,78,55,.22);
  --shadow:rgba(0,0,0,.12);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(760px 380px at 90% 18%, rgba(111,78,55,.18), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding: 14px 16px 12px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(to bottom, rgba(245,239,230,.65), rgba(245,239,230,.35));
  border-bottom:1px solid rgba(111,78,55,.16);
}

.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:14px; background: rgba(255,255,255,.35); padding:6px; border:1px solid rgba(111,78,55,.18)}
.brandName{font-weight:800; letter-spacing:.2px}
.brandSub{font-size:12px; color:var(--muted); margin-top:2px}

.wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 16px 24px;
  display:grid;
  gap:14px;
}

.glass{
  background: linear-gradient(135deg, var(--glass), var(--glass2));
  border:1px solid var(--stroke);
  box-shadow: 0 10px 28px var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
}

.card{padding:16px}
.cardHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
h2{margin:0; font-size:18px}
.pill{
  font-size:12px;
  color: rgba(43,28,18,.85);
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.18);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.recipe{
  margin: 8px 0 12px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(245,239,230,.55);
  border: 1px solid rgba(111,78,55,.16);
}
.line{display:flex; justify-content:space-between; gap:14px; padding:6px 0}
.k{color:var(--muted); font-weight:700}
.v{font-weight:800}

.timer{margin-top:10px}
.time{
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .6px;
  text-align:center;
  padding: 10px 0 6px;
}
.controls{display:flex; gap:10px}
.btn{
  flex:1;
  border:0;
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(135deg, var(--accent), #5f3f2b);
  color: #fff;
}
.btn.secondary{
  background: rgba(43,28,18,.14);
  color: var(--text);
  border: 1px solid rgba(111,78,55,.22);
}
.btn.tertiary{
  background: rgba(245,239,230,.55);
  color: var(--text);
  border: 1px solid rgba(111,78,55,.18);
}
.hint{margin-top:10px; font-size:12px; color:var(--muted); text-align:center}

.settings .small{margin-top:10px; font-size:12px; color:var(--muted); line-height:1.35}
.toggle{display:flex; align-items:center; gap:10px; padding:10px 0; font-weight:800}
.toggle input{transform: scale(1.2)}

@media (min-width: 720px){
  .wrap{grid-template-columns: 1fr 1fr}
  .settings{grid-column: 1 / -1}
}

.training{margin-top:14px;padding:12px;border-radius:16px;
background:rgba(245,239,230,.6);border:1px solid rgba(111,78,55,.18)}
.training h3{margin:0 0 6px;font-size:15px}
.training ol{padding-left:18px;margin:0 0 10px}
.training li{font-weight:700;margin:4px 0}

#logList{
  padding:10px;
  border-radius:14px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
}

/* v1.4 training section (route A) */
.trainingWrap{
  margin-top:12px;
}
.trainingWrap .training{
  margin-top:0;
}
.trainingWrap .training ol{
  margin-bottom:8px;
}

/* v1.9 Brewlog modal */
.modal{
  position:fixed; inset:0; z-index:999;
  display:none;
  padding:16px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal.show{display:flex; align-items:center; justify-content:center;}
.modalCard{
  width:min(760px, 100%);
  padding:14px;
  border-radius:22px;
}
.modalHeader{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.modalTitle{font-weight:900; font-size:18px}
.modalClose{flex:0 0 auto}
.modalGrid{
  display:grid; gap:10px;
  grid-template-columns: 1fr 1fr;
}
.field{display:block}
.field input, .field textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(111,78,55,.18);
  background: rgba(245,239,230,.55);
  padding:10px 12px;
  font-weight:800;
  color: var(--text);
}
.field textarea{min-height:84px; resize:vertical}
.fieldFull{grid-column: 1 / -1;}
.tasteRow{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.modalActions{display:flex; gap:10px; margin-top:12px;}
.modalActions .btn{flex:1}
#logDetail{
  padding:10px;
  border-radius:14px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
}
@media (max-width: 560px){
  .modalGrid{grid-template-columns: 1fr;}
}

/* v1.12 Tools */
.toolsGrid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
.toolBox{
  padding:12px;
  border-radius:16px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
}
.toolRow{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom:10px;
}
.field select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(111,78,55,.18);
  background: rgba(245,239,230,.55);
  padding:10px 12px;
  font-weight:800;
  color: var(--text);
}
.dialGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
#dialOut{
  padding:10px;
  border-radius:14px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
}
@media (min-width: 720px){
  .toolsGrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .toolRow{ grid-template-columns: 1fr; }
}

/* v1.13 Insights */
.insGrid{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom:12px;
}
.metric{
  padding:10px;
  border-radius:16px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
}
.metricVal{
  font-weight:900;
  font-size:22px;
  margin-top:4px;
  font-variant-numeric: tabular-nums;
}
.insControls{
  display:grid;
  gap:10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom:10px;
}
#insTable{
  padding:10px;
  border-radius:16px;
  background: rgba(245,239,230,.55);
  border:1px solid rgba(111,78,55,.16);
  white-space:pre-wrap;
}
@media (max-width:560px){
  .insGrid{grid-template-columns: 1fr;}
  .insControls{grid-template-columns: 1fr;}
}

/* v1.15 Presets */
.presetBar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 8px 0 10px;
}
.presetBtn{
  border:1px solid rgba(111,78,55,.18);
  background: rgba(245,239,230,.55);
  padding:8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}
.presetBtn.active{
  background: linear-gradient(135deg, rgba(111,78,55,.24), rgba(200,166,123,.24));
  border-color: rgba(111,78,55,.28);
}

/* v1.16 Preset manager */
#pmList{}
.pmRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px solid rgba(111,78,55,.12);
  cursor:pointer;
}
.pmRow .tag{
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(111,78,55,.18);
  background: rgba(245,239,230,.55);
  font-size:12px;
}
.pmRow.active .tag{
  background: linear-gradient(135deg, rgba(111,78,55,.24), rgba(200,166,123,.24));
}

/* v1.18 Mode toggle */
.modeToggle{
  margin: 10px 12px 0;
  padding: 8px;
  border-radius: 999px;
  display:flex;
  gap:8px;
}
.modeBtn{
  flex:1;
  border:1px solid rgba(111,78,55,.18);
  background: rgba(245,239,230,.55);
  padding:10px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--text);
}
.modeBtn.active{
  background: linear-gradient(135deg, rgba(111,78,55,.24), rgba(200,166,123,.24));
  border-color: rgba(111,78,55,.28);
}
body.mode-barista [data-mode="extended"]{
  display:none !important;
}

/* Phone no-scroll layout */
html, body{ height:100%; }
@media (max-width: 520px){
  body.mode-barista{ overflow:hidden; }
  body:not(.mode-barista){ overflow:auto; }
  #modeToggle, #methodTabs{
    position: sticky;
    top: 0;
    z-index: 50;
  }
  body{ padding-bottom: env(safe-area-inset-bottom); }
  #modeToggle{ margin-top: calc(10px + env(safe-area-inset-top)); }

  .methodTabs{
    margin: 10px 12px 0;
    padding: 8px;
    border-radius: 999px;
    display:flex;
    gap:8px;
  }
  .tabBtn{
    flex:1;
    border:2px solid rgba(60,40,28,.20);
    background: rgba(255,250,244,.72);
    padding:12px 12px;
    border-radius: 999px;
    font-weight: 900;
    color: var(--text);
  }
  .tabBtn.active{
    background: linear-gradient(135deg, rgba(111,78,55,.28), rgba(200,166,123,.28));
    border-color: rgba(60,40,28,.32);
  }

  [data-method-card]{ display:none; }
  [data-method-card].active{ display:block; }

  .card{ margin: 10px 12px; }
  .timer{ font-size: 56px; }
  .btn{ padding: 12px 14px; font-weight: 900; }
  .presetBtn{ padding:10px 12px; font-size:12px; }
}

/* Tools mode: hide brew cards, show only tools/insights/settings */
body.mode-tools [data-hide-in-tools="true"]{
  display:none !important;
}

/* Method tabs (desktop + mobile) */
.methodTabs{
  margin: 10px 12px 0;
  padding: 8px;
  border-radius: 999px;
  display:flex;
  gap:8px;
  align-items:center;
}
.tabBtn{
  flex:1;
  appearance:none;
  -webkit-appearance:none;
  border:2px solid rgba(60,40,28,.20);
  background: rgba(255,250,244,.72);
  padding:12px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.tabBtn:hover{
  border-color: rgba(60,40,28,.30);
}
.tabBtn.active{
  background: linear-gradient(135deg, rgba(111,78,55,.28), rgba(200,166,123,.28));
  border-color: rgba(60,40,28,.32);
}

/* Layout final: mode bar always top, method tabs only in Barista */
#modeToggle{
  position: sticky;
  top: 0;
  z-index: 60;
}

body.mode-tools #methodTabs{
  display: none !important;
}

/* Ensure method tabs sit directly under mode toggle */
#modeToggle + #methodTabs{
  margin-top: 6px;
}

.app-host-info{max-width:1100px;margin:12px auto;padding:0 18px;color:#4d3528;line-height:1.6}.app-host-info a{color:inherit}.app-host-info details{margin-top:8px}.app-host-info summary{cursor:pointer;font-weight:700}.app-host-info p{max-width:850px}.app-host-info [hidden]{display:none!important}