/* ==========================================================================
   WDYHFTLN — "The Tea Journal"
   A warm, editorial, print-inspired design system.
   Paper & ink base, tomato / basil / mustard accents, Fraunces display type.
   Light + dark, mobile-first, motion-safe.
   ========================================================================== */

:root{
  /* Paper & ink */
  --bg: #f6f1e6;
  --bg-deep: #efe7d6;
  --surface: #fffdf6;
  --surface-2: #faf5ea;
  --ink: #2c241b;
  --ink-muted: #6f6353;
  --ink-soft: #9a8c77;
  --line: #e7dcc6;
  --line-strong: #d8cab0;

  /* Flavours */
  --tomato: #c2431f;
  --tomato-deep: #9e3315;
  --tomato-soft: rgba(194, 67, 31, .10);
  --basil: #3f7350;
  --basil-soft: rgba(63, 115, 80, .11);
  --mustard: #c07d10;
  --mustard-soft: rgba(192, 125, 16, .13);
  --plum: #8d4066;
  --plum-soft: rgba(141, 64, 102, .10);

  --shadow-sm: 0 1px 2px rgba(60, 42, 22, .06), 0 4px 14px rgba(60, 42, 22, .05);
  --shadow-md: 0 2px 4px rgba(60, 42, 22, .07), 0 12px 28px rgba(60, 42, 22, .09);

  --radius: 18px;
  --radius-sm: 12px;
  --container: 1080px;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #171310;
    --bg-deep: #120f0c;
    --surface: #201b15;
    --surface-2: #29221a;
    --ink: #f0e7d6;
    --ink-muted: #b3a58d;
    --ink-soft: #8b7d67;
    --line: #372e22;
    --line-strong: #4a3e2e;

    --tomato: #e8683e;
    --tomato-deep: #f07f58;
    --tomato-soft: rgba(232, 104, 62, .14);
    --basil: #74b389;
    --basil-soft: rgba(116, 179, 137, .13);
    --mustard: #dfa63a;
    --mustard-soft: rgba(223, 166, 58, .14);
    --plum: #c47ba0;
    --plum-soft: rgba(196, 123, 160, .13);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .35);

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 50% -220px, var(--bg-deep), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a{color: var(--tomato); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset: 3px}

::selection{background: var(--mustard-soft); color: var(--ink)}

h1,h2,h3{font-family: var(--font-display); font-weight: 600}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container{max-width: var(--container); margin: 0 auto; padding: 26px 18px 60px}

.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.brand{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
.brand .dot{color: var(--tomato)}
.brand:hover{text-decoration: none}
.brand:hover .dot{animation: dot-pop .4s ease}
@keyframes dot-pop{
  0%{transform: scale(1)} 50%{transform: scale(1.6)} 100%{transform: scale(1)}
}
.brand .dot{display:inline-block}

.nav{
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 14.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.nav a:hover{color: var(--ink); background: var(--tomato-soft); text-decoration: none}
.nav a.active{
  color: var(--surface);
  background: var(--ink);
  font-weight: 600;
}
@media (prefers-color-scheme: dark){
  .nav a.active{color: var(--bg-deep)}
}
.nav a.nav-add{
  color: var(--tomato);
  border: 1.5px dashed color-mix(in srgb, var(--tomato) 45%, transparent);
}
.nav a.nav-add:hover{border-style: solid; background: var(--tomato-soft)}
.nav a.nav-add.active{background: var(--tomato); color: #fff; border-color: var(--tomato)}

@media (max-width: 760px){
  .header-inner{padding: 10px 14px 0; row-gap: 2px}
  .brand{font-size: 18px}
  .nav{
    order: 3;
    flex-basis: 100%;
    margin: 0 -14px;
    padding: 4px 14px 8px;
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
}

/* --------------------------------------------------------------------------
   Page furniture
   -------------------------------------------------------------------------- */
.page-head{margin-bottom: 22px}
.eyebrow{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tomato);
  margin: 0 0 6px;
}
.page-title{
  margin: 0;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 650;
}
.page-title em{
  font-style: italic;
  font-weight: 500;
  color: var(--tomato);
}
.page-subtitle{margin: 8px 0 0; color: var(--ink-muted); font-size: 16px}

.detail-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer{
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer a{color: var(--ink-muted)}

/* --------------------------------------------------------------------------
   Grid & cards
   -------------------------------------------------------------------------- */
.grid{display:grid; gap: 14px}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 820px){
  .grid.cols-2{grid-template-columns: 1fr}
  .grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px}
}
@media (max-width: 560px){
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .grid.cols-3 > :first-child{grid-column: 1 / -1}
}

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.card-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.card h2{margin: 0; font-size: 19px; letter-spacing: -.01em}
.card-header .hint-badge{flex-shrink: 0}

/* KPI tiles */
.kpi{position: relative; overflow: hidden}
.kpi .num{
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi .label{color: var(--ink-muted); font-size: 13.5px; margin-top: 4px; font-weight: 550}
.kpi .hint{color: var(--ink-soft); font-size: 12.5px; margin-top: 8px}
.kpi .kpi-emoji{
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 26px;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   Badges & chips
   -------------------------------------------------------------------------- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 550;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.badge:hover{text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm)}
.badge.badge-type{background: var(--basil-soft); border-color: color-mix(in srgb, var(--basil) 30%, transparent); color: var(--basil)}
.badge.badge-source{background: var(--plum-soft); border-color: color-mix(in srgb, var(--plum) 30%, transparent); color: var(--plum)}
.badge.badge-gold{background: var(--mustard-soft); border-color: color-mix(in srgb, var(--mustard) 35%, transparent); color: var(--mustard)}

/* --------------------------------------------------------------------------
   Banners (Suggest / Wrapped call-outs)
   -------------------------------------------------------------------------- */
.banner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.banner:hover{text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md)}
.banner .banner-title{
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.banner .banner-sub{font-size: 14px; margin-top: 5px; opacity: .82}
.banner .banner-emoji{
  font-size: 42px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.banner:hover .banner-emoji{transform: rotate(-8deg) scale(1.12)}
.banner .banner-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .75;
}

.banner.banner-suggest{
  background: linear-gradient(120deg, #c2431f 0%, #a83a4b 55%, #8d4066 100%);
  border-color: transparent;
  color: #fff7ec;
}
.banner.banner-wrapped{
  background:
    radial-gradient(500px 200px at 90% -60px, rgba(223,166,58,.35), transparent 70%),
    linear-gradient(120deg, #211a12 0%, #33241a 60%, #4a2c1c 100%);
  border-color: transparent;
  color: #f7ecd9;
}

/* --------------------------------------------------------------------------
   Meal list (the diary)
   -------------------------------------------------------------------------- */
.meal-list{list-style: none; padding: 0; margin: 0}
.month-divider{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
}
.month-divider:first-child{margin-top: 8px}
.month-divider .month-label{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  font-style: italic;
  color: var(--ink-muted);
  white-space: nowrap;
}
.month-divider::after{content: ""; flex: 1; height: 1px; background: var(--line-strong)}

.meal-item{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.meal-item:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.meal-item + .meal-item{margin-top: 8px}
.meal-date{line-height: 1.3}
.meal-date a{
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 17px;
  color: var(--ink);
}
.meal-date a:hover{color: var(--tomato); text-decoration: none}
.meal-date small{
  display: block;
  margin-top: 1px;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.meal-date small.is-tuesday{color: var(--mustard)}
.meal-text{color: var(--ink); font-size: 15.5px}
.meal-text a{color: inherit}
.meal-tags{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px}

@media (max-width: 540px){
  .meal-item{grid-template-columns: 1fr; padding: 13px 14px}
  .meal-date{display: flex; align-items: baseline; gap: 8px}
  .meal-date a{font-size: 16px}
  .meal-date small{display: inline; margin: 0}
}

/* Edit link */
.edit-link{
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-soft);
  font-size: 13px;
  opacity: .55;
  transition: opacity .15s, color .15s;
}
.edit-link:hover{opacity: 1; color: var(--tomato); text-decoration: none}

/* Thumbnail for meals that have a photo. The extra column only exists on rows
   that need it, so photo-less rows keep their original two-column layout. */
.meal-item.has-photo{grid-template-columns: 92px 1fr 72px}
.meal-thumb{
  display: block;
  width: 72px;
  height: 72px;
  align-self: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line);
}
.meal-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 540px){
  /* Single column collapses, so give the date its own row and sit the
     thumbnail beside the text rather than stacking full-bleed. */
  .meal-item.has-photo{grid-template-columns: 1fr 64px}
  .meal-item.has-photo .meal-date{grid-column: 1 / -1}
  .meal-thumb{width: 64px; height: 64px}
}

/* Prev / next day navigation */
.day-nav{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.day-nav a{
  flex: 1;
  max-width: 48%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease;
}
.day-nav a:hover{text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm)}
.day-nav a.next{text-align: right; margin-left: auto}
.day-nav .dn-label{font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft)}
.day-nav .dn-text{
  font-size: 13.5px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Tables & ranked bars
   -------------------------------------------------------------------------- */
.table{width: 100%; border-collapse: collapse}
.table td,.table th{padding: 11px 8px; border-bottom: 1px solid var(--line)}
.table tr:last-child td{border-bottom: none}
.table th{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  text-align: left;
  font-weight: 700;
}
.table td:last-child,.table th:last-child{text-align: right}
.table td{font-variant-numeric: tabular-nums}

/* Ranked frequency bars (types / sources pages) */
.rank-list{list-style: none; margin: 0; padding: 0}
.rank-row{
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.rank-row:last-child{border-bottom: none}
.rank-pos{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 650;
  color: var(--ink-soft);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-pos.top{color: var(--mustard)}
.rank-main{min-width: 0}
.rank-name{font-weight: 600; font-size: 15px}
.rank-name a{color: var(--ink)}
.rank-name a:hover{color: var(--tomato); text-decoration: none}
.rank-track{
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-deep);
  overflow: hidden;
}
.rank-fill{
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tomato), var(--mustard));
  transform-origin: left;
  animation: grow-bar .8s cubic-bezier(.22,.8,.36,1) both;
}
.rank-fill.green{background: linear-gradient(90deg, var(--basil), var(--mustard))}
.rank-fill.plum{background: linear-gradient(90deg, var(--plum), var(--tomato))}
@keyframes grow-bar{from{transform: scaleX(0)} to{transform: scaleX(1)}}
.rank-count{
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rank-count span{font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-soft)}

/* --------------------------------------------------------------------------
   Filters & forms
   -------------------------------------------------------------------------- */
.filters{display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end}
.field{display: flex; flex-direction: column; gap: 6px; min-width: 130px; flex: 1}
.field.grow{flex: 2; min-width: 200px}
.field label{
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.input, .select, textarea.input{
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a8c77' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.input:focus,.select:focus,textarea.input:focus{
  border-color: var(--tomato);
  box-shadow: 0 0 0 4px var(--tomato-soft);
}
input[type="search"].input::-webkit-search-cancel-button{-webkit-appearance: none}

/* iOS date input sizing */
input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  position: relative;
}
input[type="date"]::-webkit-date-and-time-value{text-align: left}

.actions{display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:hover{text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--ink-soft)}
.btn:active{transform: translateY(0) scale(.98)}
.btn.primary{
  border-color: transparent;
  background: var(--tomato);
  color: #fff7ec;
}
.btn.primary:hover{background: var(--tomato-deep); border-color: transparent}
@media (prefers-color-scheme: dark){
  .btn.primary{color: #1d130c}
}
.btn.ghost{background: transparent; border-color: transparent; color: var(--ink-muted)}
.btn.ghost:hover{background: var(--tomato-soft); color: var(--ink); box-shadow: none; border-color: transparent}

/* Form layout */
.form-card{max-width: 720px}
.form-group{margin-bottom: 18px}
.form-group > label{
  display: block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-muted);
  margin-bottom: 7px;
}
.form-group .optional{font-weight: 450; color: var(--ink-soft)}
.form-group textarea{
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  min-height: 84px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group textarea:focus{border-color: var(--tomato); box-shadow: 0 0 0 4px var(--tomato-soft)}
.field-hint{font-size: 12.5px; color: var(--ink-soft); margin-top: 6px}

/* Date quick-picks */
.date-row{display: flex; gap: 8px; flex-wrap: wrap; align-items: center}
.date-row input[type="date"]{flex: 1; min-width: 170px; width: auto}
.date-quick{
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .14s ease;
}
.date-quick:hover{border-color: var(--tomato); color: var(--tomato)}
.date-quick.selected{background: var(--tomato-soft); border-color: var(--tomato); color: var(--tomato)}

/* Chip multi-select */
.chip-select{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 52px;
}
.chip-select.is-scroll{max-height: 300px; overflow-y: auto}
.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: all .14s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chip:active{transform: scale(.95)}
.chip-type{
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
}
.chip-type:hover{border-color: var(--basil); color: var(--basil)}
.chip-type.selected{
  background: var(--basil-soft);
  border-color: var(--basil);
  color: var(--basil);
  font-weight: 650;
}
.chip-source{
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
}
.chip-source:hover{border-color: var(--plum); color: var(--plum)}
.chip-source.selected{
  background: var(--plum-soft);
  border-color: var(--plum);
  color: var(--plum);
  font-weight: 650;
}
.chip .check{display: none; font-size: 11px}
.chip.selected .check{display: inline}

/* Add-new chip with inline input */
.chip-add{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-soft);
  transition: all .14s ease;
}
.chip-add:hover{border-color: var(--tomato); color: var(--tomato)}
.chip-add-input{
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  font-family: inherit;
  width: 130px;
  padding: 0;
  color: var(--ink);
}

.form-actions{
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.messages{margin-bottom: 16px}
.message{
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 550;
  animation: rise .4s ease both;
}
.message.success{background: var(--basil-soft); border: 1px solid color-mix(in srgb, var(--basil) 35%, transparent); color: var(--basil)}
.message.error{background: var(--tomato-soft); border: 1px solid color-mix(in srgb, var(--tomato) 35%, transparent); color: var(--tomato)}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.page-chip{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.footer-note{margin-top: 24px; color: var(--ink-soft); font-size: 13px}

/* --------------------------------------------------------------------------
   Stats page pieces
   -------------------------------------------------------------------------- */
.tracker-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
@media (max-width: 640px){.tracker-grid{grid-template-columns: 1fr}}
.tracker-tile{
  text-align: center;
  padding: 20px 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.tracker-tile:hover{transform: translateY(-2px); box-shadow: var(--shadow-sm)}
.tracker-tile .t-days{
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tracker-tile.warm .t-days{color: var(--mustard)}
.tracker-tile.hot .t-days{color: var(--tomato)}
.tracker-tile.cool .t-days{color: var(--basil)}
.tracker-tile .t-unit{font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px}
.tracker-tile .t-name{font-weight: 650; margin-top: 10px; font-size: 15px}
.tracker-tile .t-meal{font-size: 12.5px; color: var(--ink-muted); margin-top: 6px}
.tracker-tile .t-date{font-size: 11.5px; color: var(--ink-soft); margin-top: 2px}

/* Progress bar (Hard Rock quest) */
.progress-head{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px}
.progress-head .pct{font-family: var(--font-display); font-weight: 650; font-size: 20px; color: var(--tomato)}
.progress-track{
  height: 14px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill{
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tomato), var(--mustard));
  transform-origin: left;
  animation: grow-bar 1s cubic-bezier(.22,.8,.36,1) both;
}
.progress-note{font-size: 13px; color: var(--ink-soft); margin-top: 8px}

.pill-cloud{display: flex; flex-wrap: wrap; gap: 7px}
.pill-cloud .badge{font-size: 12px}

/* Timeline (On This Day) */
.timeline{display: flex; flex-direction: column}
.timeline-item{
  display: flex;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.timeline-item:last-child{border-bottom: none}
.timeline-year{
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 19px;
  color: var(--tomato);
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
.timeline-body{min-width: 0}
.timeline-text{font-weight: 550; font-size: 15px}
.timeline-meta{font-size: 12px; color: var(--ink-soft); margin-top: 2px}

/* Fact tiles */
.fact-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px}
.fact-tile{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.45;
}
.fact-tile .f-emoji{font-size: 24px; line-height: 1.2}

/* Traditions */
.tradition{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mustard);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.tradition summary{
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.tradition summary::-webkit-details-marker{display: none}
.tradition .tr-head{display: flex; justify-content: space-between; align-items: baseline; gap: 10px}
.tradition .tr-label{font-weight: 650; font-size: 15px}
.tradition .tr-date{font-size: 12.5px; color: var(--ink-soft); white-space: nowrap}
.tradition .tr-years{font-size: 13px; color: var(--mustard); font-weight: 600; margin-top: 3px}
.tradition .tr-body{padding: 2px 16px 12px; border-top: 1px solid var(--line)}
.tradition .tr-meal{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.tradition .tr-meal:last-child{border-bottom: none}
.tradition .tr-meal:hover{text-decoration: none; color: var(--tomato)}
.tradition .tr-meal-date{font-size: 12px; color: var(--ink-soft); white-space: nowrap}

/* Hall of fame */
.fame-tile{
  padding: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.fame-tile .fm-head{display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13.5px; color: var(--ink-muted)}
.fame-tile .fm-value{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 650;
  margin-top: 8px;
  letter-spacing: -.01em;
}
.fame-tile .fm-sub{font-size: 13px; color: var(--ink-muted); margin-top: 4px}
.fame-tile.gold .fm-value{color: var(--mustard)}
.fame-tile.plum .fm-value{color: var(--plum)}

/* --------------------------------------------------------------------------
   Heatmap — the year in colour
   -------------------------------------------------------------------------- */
:root{
  --hm0: #c2431f;
  --hm1: #3f7350;
  --hm2: #c07d10;
  --hm3: #8d4066;
  --hm4: #2e6f8e;
  --hm5: #7a6220;
  --hm6: #a83a4b;
  --hm7: #5b5f97;
  --hm-other: #9a8c77;
  --hm-miss: #e7dcc6;
}
@media (prefers-color-scheme: dark){
  :root{
    --hm0: #e8683e;
    --hm1: #74b389;
    --hm2: #dfa63a;
    --hm3: #c47ba0;
    --hm4: #5da3c4;
    --hm5: #b09a4a;
    --hm6: #d9647a;
    --hm7: #8f93d1;
    --hm-other: #7d6f5a;
    --hm-miss: #33291c;
  }
}
.heatmap-scroll{overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch}
.heatmap{display: inline-flex; gap: 3px}
.hm-col{display: flex; flex-direction: column; gap: 3px}
.hm-label{
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hm-cell{
  width: 13px;
  height: 13px;
  border-radius: 3.5px;
  background: var(--hm-miss);
}
.hm-cell.hm-void{background: transparent}
.hm-cell.hm-other{background: var(--hm-other)}
.hm-c0{background: var(--hm0)} .hm-c1{background: var(--hm1)}
.hm-c2{background: var(--hm2)} .hm-c3{background: var(--hm3)}
.hm-c4{background: var(--hm4)} .hm-c5{background: var(--hm5)}
.hm-c6{background: var(--hm6)} .hm-c7{background: var(--hm7)}
.hm-legend{display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-muted)}
.hm-legend .lg{display: inline-flex; align-items: center; gap: 6px}
.hm-legend .sw{width: 11px; height: 11px; border-radius: 3px; display: inline-block}
.hm-year-nav{display: flex; flex-wrap: wrap; gap: 6px}
.hm-year-nav a{
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
}
.hm-year-nav a:hover{text-decoration: none; color: var(--tomato); border-color: var(--tomato)}
.hm-year-nav a.on{background: var(--ink); border-color: var(--ink); color: var(--surface)}

/* --------------------------------------------------------------------------
   Year-by-year table & scrollable tables
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x: auto; -webkit-overflow-scrolling: touch}
.table-scroll .table{min-width: 620px}
.delta-up{color: var(--basil); font-size: 12px; font-weight: 700}
.delta-down{color: var(--tomato); font-size: 12px; font-weight: 700}

/* --------------------------------------------------------------------------
   Weekday personalities & seasonality
   -------------------------------------------------------------------------- */
.persona-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px}
.persona{
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  text-align: center;
}
.persona .p-day{font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft)}
.persona .p-type{font-family: var(--font-display); font-weight: 650; font-size: 18px; margin-top: 6px; line-height: 1.2}
.persona .p-lift{font-size: 12px; color: var(--tomato); font-weight: 650; margin-top: 4px}
.persona .p-note{font-size: 11.5px; color: var(--ink-soft); margin-top: 2px}
.persona.is-tuesday{border-color: color-mix(in srgb, var(--mustard) 45%, transparent); background: var(--mustard-soft)}

/* --------------------------------------------------------------------------
   Drought board
   -------------------------------------------------------------------------- */
.drought-row{
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.drought-row:last-child{border-bottom: none}
.drought-name{font-weight: 650; font-size: 15px}
.drought-name small{display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-soft)}
.drought-track{height: 8px; border-radius: 999px; background: var(--bg-deep); overflow: hidden}
.drought-fill{
  height: 100%;
  width: var(--w, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--basil), var(--mustard));
  transform-origin: left;
  animation: grow-bar .8s cubic-bezier(.22,.8,.36,1) both;
}
.drought-row.alert .drought-fill{background: linear-gradient(90deg, var(--mustard), var(--tomato))}
.drought-days{text-align: right; white-space: nowrap}
.drought-days .d-now{font-family: var(--font-display); font-weight: 650; font-size: 18px; font-variant-numeric: tabular-nums}
.drought-days .d-rec{display: block; font-size: 11.5px; color: var(--ink-soft)}
.drought-row.alert .d-now{color: var(--tomato)}
.record-flag{
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--tomato-soft);
  color: var(--tomato);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* --------------------------------------------------------------------------
   Eras & word bars
   -------------------------------------------------------------------------- */
.era-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.era-row:last-child{border-bottom: none}
.era-name{font-weight: 650; font-size: 15px}
.era-span{font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums}
.era-status{font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase}
.era-status.active{color: var(--basil)}
.era-status.ended{color: var(--ink-soft)}

.word-row{
  display: grid;
  grid-template-columns: minmax(80px, 130px) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
}
.word-row .w-word{font-weight: 600; font-size: 14px}
.word-row .w-count{font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums}

/* --------------------------------------------------------------------------
   Suggest page
   -------------------------------------------------------------------------- */
.suggest-item{padding: 12px 0; border-bottom: 1px solid var(--line)}
.suggest-item:last-child{border-bottom: none; padding-bottom: 2px}
.suggest-item .sg-title{font-family: var(--font-display); font-weight: 650; font-size: 18px}
.suggest-item .sg-reason{color: var(--ink-muted); font-size: 13.5px; margin-top: 4px}
.suggest-item .sg-link{margin-top: 8px}
.tuesday-callout{
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--mustard-soft);
  border: 1px solid color-mix(in srgb, var(--mustard) 40%, transparent);
  margin-bottom: 20px;
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.empty{
  text-align: center;
  padding: 48px 20px;
}
.empty .empty-emoji{font-size: 46px; margin-bottom: 10px}
.empty h2{margin: 0 0 6px; font-size: 20px}
.empty p{color: var(--ink-muted); margin: 0; font-size: 14.5px}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes rise{
  from{opacity: 0; transform: translateY(10px)}
  to{opacity: 1; transform: translateY(0)}
}
/* Hidden state is opt-in: only when JS has stamped the <html> element,
   so content is never invisible if scripts fail to run. */
html.js .reveal{opacity: 0; transform: translateY(14px)}
html.js .reveal.in{
  animation: rise .55s cubic-bezier(.22,.8,.36,1) both;
  animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal{opacity: 1; transform: none}
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.m0{margin: 0}
.mt8{margin-top: 8px}
.mt12{margin-top: 12px}
.mt16{margin-top: 16px}
.mt20{margin-top: 20px}
.muted{color: var(--ink-muted)}
.soft{color: var(--ink-soft)}
.row{display: flex; gap: 8px; align-items: center; flex-wrap: wrap}