/* =========================================================
   Piano Repertoire — cozy warm theme
   A self-contained stylesheet (no external fonts/CDNs).
   ========================================================= */

:root {
  /* Warm "candlelit living room" palette */
  --paper:        #fbf3e7;   /* page background, warm cream  */
  --paper-2:      #f6e9d6;   /* alt warm panel               */
  --card:         #fffaf2;   /* card surface, soft ivory     */
  --card-edge:    #ecdcc4;   /* hairline borders             */
  --ink:          #4b3a2f;   /* primary text, soft espresso  */
  --ink-soft:     #7a6451;   /* secondary text               */
  --ink-faint:    #a08b76;   /* muted captions               */

  --amber:        #c8763f;   /* primary accent, warm amber   */
  --amber-deep:   #a85d2c;   /* hover                        */
  --terracotta:   #b5573f;   /* danger / strong accent       */
  --honey:        #e3a857;   /* highlights                   */
  --sage:         #7c8a6b;   /* secondary accent, muted moss */
  --plum:         #8a6072;   /* tertiary accent              */

  --input-bg:     #fffdf8;   /* form field surface           */
  --topbar-a:     rgba(255,250,242,.95);
  --topbar-b:     rgba(255,250,242,.80);
  --tab-hover:    rgba(255,255,255,.6);
  --elev-hover:   #ffffff;   /* ghost button / icon hover    */
  --toast-bg:     #4b3a2f;

  --shadow:       0 10px 30px -12px rgba(94, 63, 38, 0.45);
  --shadow-soft:  0 4px 14px -8px rgba(94, 63, 38, 0.4);
  --radius:       18px;
  --radius-sm:    11px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Night theme — a warm, candlelit dark palette ===== */
html[data-theme="night"] {
  --paper:        #211a15;
  --paper-2:      #2b231c;
  --card:         #322820;
  --card-edge:    #463a2f;
  --ink:          #f2e6d4;
  --ink-soft:     #cdb89f;
  --ink-faint:    #9b8773;

  --amber:        #dd9152;
  --amber-deep:   #c1762f;
  --terracotta:   #d4795f;
  --honey:        #e8b063;
  --sage:         #9aa886;
  --plum:         #b890a3;

  --input-bg:     #29211a;
  --topbar-a:     rgba(48,39,31,.95);
  --topbar-b:     rgba(48,39,31,.78);
  --tab-hover:    rgba(255,236,209,.08);
  --elev-hover:   #3d3127;
  --toast-bg:     #17110d;

  --shadow:       0 14px 36px -14px rgba(0,0,0,.66);
  --shadow-soft:  0 6px 18px -10px rgba(0,0,0,.55);
}

html[data-theme="night"] body {
  background:
    radial-gradient(1200px 700px at 80% -10%, #3a2c1f 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, #2c2117 0%, transparent 55%),
    linear-gradient(180deg, #221a14 0%, #1b140f 100%);
}

/* Soften the bright pastel status pills so they glow rather than glare at night */
html[data-theme="night"] .pill { background: #3a2f25; color: var(--ink-soft); border-color: var(--card-edge); }
html[data-theme="night"] .pill--wishlist        { background: #303624; color: #b9c79a; border-color: #46512f; }
html[data-theme="night"] .pill--learning        { background: #3e2f1f; color: #eab27c; border-color: #5b4326; }
html[data-theme="night"] .pill--polishing       { background: #392a35; color: #d6a6c6; border-color: #543f50; }
html[data-theme="night"] .pill--performance-ready{ background: #2c3a2a; color: #9ed29a; border-color: #3f5a3d; }
html[data-theme="night"] .pill--maintenance     { background: #2a3540; color: #a6c2dc; border-color: #3c5066; }
html[data-theme="night"] .pill--on-hold         { background: #3a3128; color: #d3b79e; border-color: #564636; }
html[data-theme="night"] .tag { background: #303624; color: #b9c79a; border-color: #46512f; }

* { box-sizing: border-box; }

html, body { height: 100%; }

/* Inline links — warm amber, never the default browser blue */
a { color: var(--amber-deep); text-decoration-color: rgba(200,118,63,.45); text-underline-offset: 2px; transition: color .15s ease; }
a:hover { color: var(--amber); text-decoration-color: currentColor; }
html[data-theme="night"] a { color: var(--honey); text-decoration-color: rgba(232,176,99,.5); }
html[data-theme="night"] a:hover { color: #f3c989; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, #fdeede 0%, transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, #f7e4cb 0%, transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment: fixed;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: clip;            /* guard against any stray horizontal scroll on phones */
}

.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 22px 60px;
}

/* ===== Header ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--topbar-a), var(--topbar-b));
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(4px);
  position: sticky;
  top: 14px;
  z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__mark { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(120,80,40,.25)); }
.brand__title { font-family: var(--serif); font-size: 1.4rem; margin: 0; letter-spacing: .3px; }
.brand__tagline { margin: 0; font-size: .78rem; color: var(--ink-faint); font-style: italic; }

.tabs { display: flex; gap: 4px; background: var(--paper-2); padding: 5px; border-radius: 999px; border: 1px solid var(--card-edge); }
.tab {
  border: 0; cursor: pointer; font: inherit; font-size: .9rem;
  padding: 8px 16px; border-radius: 999px; color: var(--ink-soft);
  background: transparent; transition: all .18s ease;
}
.tab__icon, .tab__short { display: none; }  /* shown only on phones */
.tab:hover { color: var(--ink); background: var(--tab-hover); }
.tab.is-active {
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: #fff5e9; box-shadow: 0 4px 12px -4px rgba(168,93,44,.6);
}

.topbar__actions { display: flex; align-items: center; gap: 8px; }

/* ===== Day / night theme slider ===== */
.theme-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; border-radius: 999px; }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227,168,87,.4); }
.theme-toggle__track {
  display: inline-flex; align-items: center; width: 58px; height: 30px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--card-edge);
  background: linear-gradient(180deg, #fbe6c9, #f4d7a6);
  transition: background .25s ease;
}
html[data-theme="night"] .theme-toggle__track { background: linear-gradient(180deg, #2c2114, #1d160f); }
.theme-toggle__thumb {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: var(--card); box-shadow: 0 2px 6px rgba(60,40,20,.4);
  transition: transform .25s cubic-bezier(.34,1.4,.5,1);
}
html[data-theme="night"] .theme-toggle__thumb { transform: translateX(28px); }

/* ===== Cloud sync button ===== */
.sync-btn { display: inline-flex; align-items: center; gap: 6px; }
.sync-btn__icon { font-size: 1rem; line-height: 1; }
.sync-btn[data-state="ok"]   { color: var(--sage); border-color: #cdd9c4; }
.sync-btn[data-state="ok"] .sync-btn__icon::after { content: "✓"; font-size: .7rem; margin-left: 1px; }
.sync-btn[data-state="err"]  { color: var(--terracotta); border-color: #e6b6a6; }
.sync-btn[data-state="busy"] .sync-btn__icon { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Buttons ===== */
.btn {
  font: inherit; font-size: .9rem; cursor: pointer; border: 0;
  padding: 9px 16px; border-radius: 11px; transition: all .16s ease;
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: #fff7ed; box-shadow: 0 4px 12px -4px rgba(168,93,44,.55); font-weight: 600;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -6px rgba(168,93,44,.6); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--card-edge); box-shadow: none; font-weight: 500;
}
.btn--ghost:hover { background: var(--elev-hover); color: var(--ink); }
.btn--sage { background: linear-gradient(180deg, #8c9a78, var(--sage)); box-shadow: 0 4px 12px -4px rgba(90,105,70,.5); }
.btn--danger { background: linear-gradient(180deg, #c2654c, var(--terracotta)); box-shadow: 0 4px 12px -4px rgba(150,60,40,.5); }
.btn--sm { padding: 6px 12px; font-size: .82rem; border-radius: 9px; }
.btn--block { width: 100%; justify-content: center; }

.iconbtn {
  border: 1px solid var(--card-edge); background: var(--card); cursor: pointer;
  width: 32px; height: 32px; border-radius: 9px; color: var(--ink-soft);
  font-size: .9rem; display: inline-grid; place-items: center; transition: all .15s ease;
}
.iconbtn:hover { background: var(--elev-hover); color: var(--ink); transform: translateY(-1px); }
.iconbtn--danger:hover { color: var(--terracotta); border-color: #e6b6a6; }

/* ===== Dropdown menu ===== */
.menu { position: relative; }
.menu__list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; z-index: 40;
}
.menu__item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; font-size: .88rem; color: var(--ink); padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.menu__item:hover { background: var(--paper-2); }
.menu__item--danger { color: var(--terracotta); }
.menu__sep { height: 1px; background: var(--card-edge); margin: 5px 6px; }

/* ===== View / sections ===== */
.view { margin-top: 22px; outline: none; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.view-head h2 { font-family: var(--serif); font-size: 1.6rem; margin: 0; }
.view-head p { margin: 2px 0 0; color: var(--ink-faint); font-size: .9rem; }

.card {
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 20px;
}
.section-title { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 12px; }

/* ===== Dashboard ===== */
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4, 1fr); }
.stat {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px;
  border-radius: 50%; background: radial-gradient(circle, rgba(227,168,87,.22), transparent 70%);
}
.stat__label { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .6px; }
.stat__value { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; margin-top: 6px; }
.stat__sub { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; }

.dash-cols { grid-template-columns: 1.2fr 1fr; align-items: start; }
@media (max-width: 820px) { .dash-cols { grid-template-columns: 1fr; } }

.mini-piece { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--card-edge); }
.mini-piece:last-child { border-bottom: 0; }
.mini-piece__title { font-weight: 600; }
.mini-piece__meta { font-size: .82rem; color: var(--ink-faint); }
.mini-piece__minutes { margin-left: auto; font-size: .82rem; color: var(--amber-deep); font-weight: 600; white-space: nowrap; }

/* ===== Pills / badges ===== */
.pill {
  display: inline-block; font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--card-edge);
}
.pill--wishlist        { background: #eef1e8; color: #5f6b4d; border-color: #d8e0c8; }
.pill--learning        { background: #fdeede; color: var(--amber-deep); border-color: #f1d3a9; }
.pill--polishing       { background: #f3e7f0; color: var(--plum); border-color: #e3ccdb; }
.pill--performance-ready { background: #e6efe5; color: #4f7a4a; border-color: #c8e0c4; }
.pill--maintenance     { background: #e9eef3; color: #4f6781; border-color: #cdd9e6; }
.pill--on-hold         { background: #f0e8e2; color: #8a6f5c; border-color: #ddccbe; }

/* ===== Toolbar / filters ===== */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1 1 200px; }

.field, .select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="search"] {
  font: inherit; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--card-edge); border-radius: 10px; padding: 9px 12px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus, .select:focus, textarea:focus, input:focus {
  outline: none; border-color: var(--honey); box-shadow: 0 0 0 3px rgba(227,168,87,.22);
}
textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
label.lbl { display: block; font-size: .8rem; color: var(--ink-soft); margin: 0 0 5px; font-weight: 600; }

/* ===== Repertoire cards ===== */
.pieces-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.piece-card {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.piece-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.piece-card__top { display: flex; align-items: flex-start; gap: 8px; }
.piece-card__title { font-family: var(--serif); font-size: 1.12rem; margin: 0; line-height: 1.25; }
.piece-card__composer { color: var(--ink-soft); font-size: .88rem; font-style: italic; }
.piece-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.piece-card__notes { font-size: .85rem; color: var(--ink-soft); white-space: pre-wrap; }
.piece-card__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.piece-card__stat { font-size: .78rem; color: var(--ink-faint); margin-right: auto; }
.star { cursor: pointer; font-size: 1.05rem; line-height: 1; background: none; border: 0; color: #d9c4a3; }
.star.is-on { color: var(--honey); }

.tag { font-size: .72rem; color: var(--sage); background: #eef1e8; border: 1px solid #d8e0c8; padding: 2px 8px; border-radius: 999px; }

/* ===== Practice log ===== */
.session {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 16px 18px; margin-bottom: 14px;
}
.session__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.session__date { font-family: var(--serif); font-size: 1.1rem; }
.session__total { margin-left: auto; font-size: .85rem; color: var(--amber-deep); font-weight: 600; }
.session__mood { font-size: 1.1rem; }
.session__notes { margin: 8px 0 0; font-size: .88rem; color: var(--ink-soft); white-space: pre-wrap; }
.session__entries { margin: 12px 0 0; display: grid; gap: 8px; }
.entry-line {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--card-edge); border-radius: var(--radius-sm);
}
.entry-line__title { font-weight: 600; }
.entry-line__min { color: var(--amber-deep); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.entry-line__notes { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-soft); white-space: pre-wrap; }
.entry-line__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.entry-line__next { grid-column: 1 / -1; font-size: .82rem; color: var(--amber-deep); }
.chip {
  display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--card-edge);
}
.chip--tempo { color: var(--amber-deep); border-color: rgba(200,118,63,.35); }
.stars-read { color: var(--honey); font-size: .82rem; letter-spacing: 1px; line-height: 1; }
.stars-read__off { color: var(--card-edge); }
.session__actions { display: flex; gap: 6px; margin-top: 12px; }

/* ===== Calendar ===== */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.cal-head h3 { font-family: var(--serif); font-size: 1.3rem; margin: 0; min-width: 220px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-dow { text-align: center; font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .5px; padding-bottom: 4px; }
.cal-cell {
  min-height: 84px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px;
  padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: transform .12s ease, box-shadow .12s ease; position: relative; text-align: left; font: inherit; color: inherit;
}
.cal-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.cal-cell--empty { background: transparent; border-color: transparent; cursor: default; }
.cal-cell--empty:hover { transform: none; box-shadow: none; }
.cal-cell--today { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(200,118,63,.25); }
.cal-cell--selected { border-color: var(--amber-deep); box-shadow: 0 0 0 3px rgba(200,118,63,.5); }
.cal-cell__num { font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.cal-cell__min { font-size: .72rem; color: var(--amber-deep); font-weight: 700; margin-top: auto; }
.cal-cell__dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
.heat-1 { background: linear-gradient(180deg, #fff6e8, #fdeede); }
.heat-2 { background: linear-gradient(180deg, #fdeede, #f8dcb8); }
.heat-3 { background: linear-gradient(180deg, #f8dcb8, #f0c489); }
.heat-4 { background: linear-gradient(180deg, #f0c489, #e9a857); }
.cal-legend { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 12px; font-size: .76rem; color: var(--ink-faint); }
.cal-legend span { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--card-edge); }

/* Calendar + day-detail panel side by side (stacks below on narrow screens) */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }

.day-panel { align-self: start; }
.day-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.day-panel__date { font-family: var(--serif); font-size: 1.15rem; margin: 0; line-height: 1.2; }
.day-panel__sub { margin: 3px 0 0; font-size: .82rem; color: var(--ink-faint); }
.day-panel__placeholder { text-align: center; color: var(--ink-soft); padding: 26px 8px; }
.day-panel__mark { font-size: 34px; }
.day-panel__quiet { margin: 0; }
.day-session { padding: 14px 0; border-top: 1px dashed var(--card-edge); }
.day-session:first-of-type { padding-top: 2px; border-top: 0; }
.day-session .session__entries { margin-top: 10px; }

/* ===== Empty state ===== */
.empty {
  text-align: center; padding: 48px 20px; color: var(--ink-soft);
  background: var(--card); border: 1px dashed var(--card-edge); border-radius: var(--radius);
}
.empty__mark { font-size: 42px; }
.empty h3 { font-family: var(--serif); margin: 12px 0 4px; color: var(--ink); }
.empty p { margin: 0 auto 16px; max-width: 420px; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(60, 40, 25, 0.42);
  display: grid; place-items: center; padding: 20px; z-index: 100; backdrop-filter: blur(2px);
  animation: fade .18s ease;
}
/* The class above sets display:grid, which would override the [hidden] attribute.
   This rule restores hiding so the modal stays closed until opened. */
.modal-overlay[hidden] { display: none !important; }
.modal {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 22px;
  box-shadow: var(--shadow); width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  animation: pop .2s ease;
}
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--card-edge); }
.modal__title { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.modal__close { border: 0; background: var(--paper-2); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; color: var(--ink-soft); font-size: .9rem; }
.modal__close:hover { background: #f0e2cf; color: var(--ink); }
.modal__body { padding: 20px 22px; overflow-y: auto; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ===== Forms inside modal ===== */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

/* Practice entry rows in the form */
.entry-edit {
  border: 1px solid var(--card-edge); border-radius: var(--radius-sm); padding: 12px; background: var(--paper);
  display: grid; gap: 10px; position: relative;
}
.entry-edit__row { display: grid; grid-template-columns: 2fr 0.9fr 0.9fr auto; gap: 10px; align-items: end; }
.entry-edit__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
@media (max-width: 520px) {
  .entry-edit__row { grid-template-columns: 1fr 1fr; }
  .entry-edit__row .entry-edit__remove { grid-column: 1 / -1; }
}
.entry-edit__remove { align-self: center; }

/* "Last time you wanted to…" reminder */
.entry-reminder {
  font-size: .82rem; color: var(--amber-deep); background: rgba(227,168,87,.14);
  border: 1px solid rgba(227,168,87,.4); border-radius: 9px; padding: 7px 11px; line-height: 1.35;
}
.entry-reminder[hidden] { display: none; }
.entry-reminder__text { font-weight: 600; }

/* Star rating widget (editable) */
.stars { display: inline-flex; gap: 3px; padding: 6px 2px; }
.star-btn {
  background: none; border: 0; cursor: pointer; padding: 0 1px; line-height: 1;
  font-size: 1.4rem; color: #d9c4a3; transition: transform .12s ease, color .12s ease;
}
.star-btn:hover { transform: scale(1.12); }
.star-btn.is-on { color: var(--honey); }
html[data-theme="night"] .star-btn { color: #5a4a39; }
html[data-theme="night"] .star-btn.is-on { color: var(--honey); }

/* ===== Toasts ===== */
.toast-stack { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--toast-bg); color: #fdf3e6; padding: 11px 18px; border-radius: 12px;
  box-shadow: var(--shadow); font-size: .88rem; animation: rise .25s ease;
}
.toast--good { background: #5f7a52; }
.toast--bad { background: var(--terracotta); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ===== Footer ===== */
.footer { text-align: center; margin-top: 36px; font-size: .8rem; color: var(--ink-faint); font-style: italic; }

/* Utility */
.muted { color: var(--ink-faint); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hr { height: 1px; background: var(--card-edge); border: 0; margin: 16px 0; }

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .topbar { position: static; }
  .tabs { order: 3; width: 100%; justify-content: center; }
}

/* Don't keep "lifted" hover states stuck after a tap on touch devices */
html.is-touch .piece-card:hover,
html.is-touch .cal-cell:hover,
html.is-touch .btn:hover,
html.is-touch .iconbtn:hover { transform: none; }

/* =========================================================
   📱 Phone layout — a tailored, app-like experience
   ========================================================= */
@media (max-width: 640px) {
  .app {
    padding: 10px 12px;
    /* leave room for the fixed bottom tab bar */
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  /* --- Compact top bar (tabs move to the bottom) --- */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    gap: 8px; padding: 10px 12px;
    border-radius: 0 0 16px 16px;
    margin: -10px -12px 0;            /* stretch edge-to-edge */
  }
  .brand__mark { font-size: 28px; }
  .brand__title { font-size: 1.15rem; }
  .brand__tagline { display: none; }
  .sync-btn__label { display: none; }   /* icon-only to save header space */

  /* --- Bottom tab bar --- */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    width: auto; order: 0; gap: 2px;
    display: flex; justify-content: space-around;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--card); border: 0; border-top: 1px solid var(--card-edge);
    border-radius: 0;
    box-shadow: 0 -8px 24px -12px rgba(60,40,20,.45);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 2px; border-radius: 13px; color: var(--ink-faint);
  }
  .tab:hover { background: transparent; }
  .tab__icon { display: block; font-size: 1.3rem; line-height: 1; }
  .tab__short { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .2px; }
  .tab__label { display: none; }
  .tab.is-active {
    background: linear-gradient(180deg, rgba(200,118,63,.16), rgba(168,93,44,.12));
    color: var(--amber-deep); box-shadow: none;
  }
  html[data-theme="night"] .tab.is-active { color: var(--honey); }

  /* --- Headings & primary actions --- */
  .view { margin-top: 16px; }
  .view-head h2 { font-size: 1.35rem; }
  .view-head .btn { width: 100%; justify-content: center; }
  .view-head > div { width: 100%; }

  /* --- Cards & grids go full width --- */
  .card { padding: 16px; border-radius: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat__value { font-size: 1.6rem; }
  .pieces-grid { grid-template-columns: 1fr; }
  .dash-cols { gap: 12px; }

  /* --- Calendar: lean on heat + dots, hide the per-cell minutes --- */
  .cal-grid { gap: 5px; }
  .cal-cell { min-height: 46px; padding: 5px; border-radius: 9px; }
  .cal-cell__min { display: none; }
  .cal-cell__num { font-size: .76rem; }
  .cal-dot { width: 5px; height: 5px; }
  .cal-head h3 { min-width: 0; font-size: 1.1rem; }
  .cal-legend { justify-content: center; }

  /* --- Bottom-sheet modals --- */
  .modal-overlay { place-items: end stretch; padding: 0; }
  .modal {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0; animation: sheet .26s ease;
  }
  .modal::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 99px;
    background: var(--card-edge); margin: 8px auto 0;       /* grab handle */
  }
  .modal__head { padding: 10px 18px 14px; }
  .modal__body { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); }

  /* --- Touch-friendly form controls --- */
  .iconbtn { width: 38px; height: 38px; }
  .star-btn { font-size: 1.6rem; padding: 2px 4px; }
  .entry-edit__row { grid-template-columns: 1fr 1fr auto; }
  .entry-edit__row > div:first-child { grid-column: 1 / -1; }   /* piece name full width */
  .form-actions {
    position: sticky; bottom: 0; margin: 0 -18px -16px; padding: 12px 18px;
    background: var(--card); border-top: 1px solid var(--card-edge);
  }
  .menu__list { min-width: min(260px, 78vw); }

  /* --- Toasts clear the bottom bar --- */
  .toast-stack { bottom: calc(80px + env(safe-area-inset-bottom)); width: calc(100% - 32px); }
  .toast { text-align: center; }

  .footer { margin-top: 24px; }
}

@keyframes sheet { from { transform: translateY(100%); } }

@media (max-width: 360px) {
  .stats { grid-template-columns: 1fr; }
  .tab__short { font-size: .6rem; }
}