/* Sommora V0.2.3 — Main Styles */

:root{
  --bg:#0e090b;
  --card:#1b1215;
  --card2:#24171b;
  --wine:#7b2338;
  --wine2:#a33b56;
  --cream:#f5ead8;
  --cream2:#dfd0bd;
  --muted:#a99b98;
  --line:#39282e;
  --gold:#c7a86b;
  --green:#79966d;
  --danger:#b84b55;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:
    radial-gradient(circle at top right,rgba(123,35,56,.14),transparent 30%),
    var(--bg);
  color:var(--cream);
  padding-bottom:105px;
}

button,input,textarea,select{font:inherit}
button{cursor:pointer}

header{
  max-width:600px;
  margin:auto;
  padding:22px 18px 5px;
}

.brand{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brandName{
  margin:0;
  font-family:Georgia,serif;
  font-size:31px;
  font-weight:500;
  letter-spacing:3px;
}

.brandMark{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(199,168,107,.55);
  background:rgba(199,168,107,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:19px;
}

.subtitle{
  color:var(--muted);
  margin-top:3px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:14px;
}

.page{
  display:none;
  padding:7px 17px 25px;
  max-width:600px;
  margin:auto;
}

.page.active{display:block}

.card{
  background:linear-gradient(145deg,var(--card),#171013);
  border:1px solid var(--line);
  border-radius:19px;
  padding:16px;
  margin:12px 0;
}

.eyebrow{
  color:var(--gold);
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:bold;
}

.sectionHeading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:18px 2px 8px;
}

.sectionHeading h3{
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:500;
  margin:0;
}

.sectionHeading span{
  color:var(--muted);
  font-size:12px;
}

.sectionTitle{
  font-family:Georgia,serif;
  font-size:28px;
  margin:15px 0 5px;
}

.small{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.primary{
  border:none;
  width:100%;
  background:linear-gradient(135deg,var(--wine),#982f4a);
  color:white;
  font-weight:bold;
  border-radius:15px;
  padding:14px 16px;
  margin-top:16px;
}

.secondary{
  border:1px solid var(--line);
  width:100%;
  background:var(--card2);
  color:var(--cream);
  border-radius:15px;
  padding:14px 16px;
  margin-top:9px;
}

.danger{
  border:1px solid rgba(184,75,85,.5);
  width:100%;
  background:rgba(184,75,85,.1);
  color:#efb3b8;
  border-radius:15px;
  padding:14px 16px;
  margin-top:9px;
}

.textButton{
  border:0;
  background:none;
  color:var(--cream);
  padding:0;
  font-weight:bold;
}

/* HOME */

.journeyCard{
  padding:17px;
  background:
    radial-gradient(circle at 100% 0,rgba(199,168,107,.09),transparent 35%),
    linear-gradient(145deg,var(--card),#171013);
}

.levelRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
}

.levelName{
  font-family:Georgia,serif;
  font-size:23px;
  margin-top:4px;
}

.levelPercent{
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:23px;
}

.progressBar{
  height:5px;
  background:#2b2024;
  border-radius:10px;
  overflow:hidden;
  margin:13px 0 7px;
}

.progressFill{
  height:100%;
  background:linear-gradient(90deg,var(--wine),var(--gold));
  width:0%;
  border-radius:10px;
  transition:.4s;
}

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

.journeyStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:14px;
}

.journeyStat{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
  background:#160f12;
  color:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 5px;
}

.statIcon{
  font-size:18px;
  margin-bottom:5px;
}

.statNumber{
  display:block;
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.2;
}

.statLabel{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:3px;
}

.curiosityCard{
  background:
    linear-gradient(135deg,rgba(123,35,56,.20),transparent 60%),
    var(--card);
  padding:15px 17px;
}

.curiosityType{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:9px;
  font-weight:bold;
}

.curiosityCard h3{
  font-family:Georgia,serif;
  font-size:20px;
  margin:7px 0 5px;
}

.curiosityCard p{
  color:var(--cream2);
  line-height:1.4;
  font-size:13px;
  margin:0;
}

.curiosityFooter{
  margin-top:12px;
  font-size:12px;
}

.recentWine{
  padding:12px 2px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}

.recentWine:last-child{border-bottom:0}

.recentWineTitle{
  font-family:Georgia,serif;
  font-size:16px;
}

.recentWineMeta{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

.viewJournal{
  width:100%;
  border:0;
  background:none;
  color:var(--gold);
  padding:12px 0 2px;
  font-size:12px;
}

/* FORMS */

label{
  display:block;
  color:var(--muted);
  margin-top:14px;
  margin-bottom:6px;
  font-size:13px;
}

input,textarea,select{
  width:100%;
  padding:13px;
  background:#130e10;
  border:1px solid var(--line);
  color:var(--cream);
  border-radius:12px;
  font-size:16px;
}

textarea{min-height:80px}

.selectorButton{
  width:100%;
  min-height:48px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:left;
  padding:12px 14px;
  background:#130e10;
  border:1px solid var(--line);
  color:var(--cream);
  border-radius:12px;
}

.selectorPlaceholder{color:#776b69}

.help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:19px;
  height:19px;
  margin-left:5px;
  padding:0;
  border:1px solid var(--muted);
  border-radius:50%;
  color:var(--muted);
  background:none;
  font-size:11px;
  vertical-align:middle;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  background:var(--card2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:9px 12px;
  border-radius:30px;
  font-size:14px;
}

.chip.selected{
  background:var(--wine);
  border-color:var(--wine2);
}

.colourGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.colourChoice{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--card2);
  border:1px solid var(--line);
  color:var(--cream);
  padding:10px;
  border-radius:12px;
  text-align:left;
}

.colourChoice.selected{
  border-color:var(--gold);
  background:#302025;
}

.swatch{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  flex:none;
}

.progress{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  margin-bottom:14px;
}

.progress .current{
  color:var(--cream);
  font-weight:bold;
}

.step{display:none}
.step.active{display:block}

.navButtons{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.navButtons button{flex:1}

/* SELECTOR */

.modalBackdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:500;
  align-items:flex-end;
}

.modalBackdrop.open{display:flex}

.selectorModal{
  width:100%;
  max-width:600px;
  margin:auto;
  background:#171013;
  border:1px solid var(--line);
  border-radius:24px 24px 0 0;
  padding:18px;
  max-height:82vh;
  display:flex;
  flex-direction:column;
}

.modalHandle{
  width:40px;
  height:4px;
  background:#514247;
  border-radius:10px;
  margin:0 auto 16px;
}

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

.modalHeader h3{
  font-family:Georgia,serif;
  margin:0;
  font-size:23px;
}

.closeButton{
  border:0;
  background:var(--card2);
  color:var(--cream);
  width:34px;
  height:34px;
  border-radius:50%;
}

.selectorResults{
  overflow:auto;
  margin-top:10px;
}

.selectorOption{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  color:var(--cream);
  padding:14px 5px;
  text-align:left;
  font-size:15px;
}

/* JOURNAL */

.journalCard{
  position:relative;
  padding:17px 46px 17px 3px;
  border-bottom:1px solid var(--line);
}

.journalCard:last-child{border-bottom:0}
.journalMain{cursor:pointer}

.journalTitle{
  font-family:Georgia,serif;
  font-size:19px;
}

.rating{
  color:#e7c56a;
  letter-spacing:2px;
  margin-top:5px;
}

.moreButton{
  position:absolute;
  top:12px;
  right:0;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--cream);
  font-size:22px;
}

.actionMenu{
  display:none;
  position:absolute;
  right:4px;
  top:48px;
  z-index:10;
  min-width:135px;
  background:#24171b;
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}

.actionMenu.open{display:block}

.actionMenu button{
  display:block;
  width:100%;
  padding:12px 14px;
  border:0;
  background:none;
  color:var(--cream);
  text-align:left;
}

.actionMenu .deleteAction{color:#ef9aa2}

.detailHero{
  padding:21px;
  background:
    radial-gradient(circle at 90% 0,rgba(199,168,107,.11),transparent 30%),
    var(--card);
}

.detailHero h2{
  font-family:Georgia,serif;
  font-size:29px;
  margin:6px 0;
}

.detailSection{margin:23px 0}

.detailSection h3{
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:500;
  margin:0 0 10px;
}

.detailGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.detailItem{
  background:#160f12;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}

.detailLabel{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:4px;
}

.detailValue{
  font-size:14px;
  line-height:1.4;
}

.emptyState{
  color:var(--muted);
  padding:10px 0;
  line-height:1.5;
}

/* PROFILE */

.profileTop{
  text-align:center;
  padding:22px 15px;
}

.profileAvatar{
  width:70px;
  height:70px;
  border-radius:50%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(199,168,107,.6);
  background:rgba(199,168,107,.05);
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:29px;
}

.profileName{
  font-family:Georgia,serif;
  font-size:24px;
  margin:11px 0 4px;
}

.profileStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:15px;
}

.profileStat{
  background:#160f12;
  border:1px solid var(--line);
  border-radius:13px;
  padding:12px 5px;
  text-align:center;
}

.profileStat strong{
  display:block;
  font-family:Georgia,serif;
  font-size:21px;
}

.profileStat span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px;
}

.profileRow{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.profileRow:last-child{border-bottom:0}
.profileRow span:first-child{color:var(--muted)}

/* GUIDE */

.learnItem{
  background:var(--card);
  border:1px solid var(--line);
  padding:16px;
  border-radius:14px;
  margin:10px 0;
}

details summary{
  cursor:pointer;
  font-weight:bold;
}

details p{
  color:#d3c6c2;
  line-height:1.5;
}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:20px 0;
}

.backLink{
  border:0;
  background:none;
  color:var(--gold);
  padding:6px 0 12px;
}

/* NAV */

.bottomNav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(19,14,16,.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  padding:8px 5px calc(10px + env(safe-area-inset-bottom));
  z-index:100;
}

.bottomNav button{
  border:none;
  background:none;
  color:var(--muted);
  padding:6px 1px;
  font-size:10px;
}

.bottomNav button.active{color:var(--cream)}

.icon{
  display:block;
  font-size:18px;
  margin-bottom:3px;
}

.tasteNavWrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.tasteNav{
  width:58px !important;
  height:58px;
  border-radius:50% !important;
  margin-top:-27px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,var(--wine),#9a304b) !important;
  border:4px solid #130e10 !important;
  box-shadow:0 8px 25px rgba(123,35,56,.4);
  font-size:27px !important;
  color:white !important;
}

@media(min-width:600px){
  .bottomNav{
    max-width:600px;
    left:50%;
    transform:translateX(-50%);
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
  }
}