/* ============================================================
   Tour With Ana palette — mobile-first
   cream canvas · sage panels · mustard-gold accent
   charcoal ink · dusty-rose highlights
   ============================================================ */
:root {
  --bg: #f7f1ea;            /* warm cream canvas */
  --bg-soft: #efe6dc;       /* deeper cream / blob tint */
  --panel: #ffffff;         /* cards */
  --panel-2: #f4ede4;       /* inputs, nested boxes */
  --sage: #e3e7dc;          /* pale sage green blob */
  --line: #e2d8cc;          /* hairlines */
  --text: #2f2e29;          /* charcoal ink */
  --muted: #8a8378;         /* warm grey */
  --accent: #e0a136;        /* mustard gold (map pin) */
  --accent-dark: #c78c27;
  --rose: #c2937f;          /* dusty rose (nav links) */
  --viator: #57806f;        /* sage-teal */
  --gyg: #c96f4a;           /* terracotta */
  --manual: #9c7ba8;        /* muted plum */
  --ok: #5f8f5a;
  --warn: #c78c27;
  --danger: #b8543a;
  --radius: 14px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, .brand { font-family: var(--serif); }

/* Topbar — wraps on small screens */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  padding: .8rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-weight: 700; font-size: 1.25rem; font-style: italic;
  color: var(--text); text-decoration: none;
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.inline { display: inline; margin: 0; }

.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: .6rem 1rem; border-radius: 999px; cursor: pointer; font-size: .9rem;
  text-decoration: none; display: inline-block; transition: .15s;
  min-height: 44px; line-height: 1.4;
}
.btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-sync { background: var(--sage); border-color: var(--sage); color: var(--text); font-weight: 600; }
.btn-sync:hover { border-color: var(--viator); color: var(--viator); }
.btn-google { background: #fff; color: var(--text); border-color: var(--line); font-weight: 600; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--rose); }
.btn-ghost:hover { color: var(--accent-dark); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 600; padding: .7rem 1.2rem;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.bform .btn-primary { width: 100%; }

.pill { padding: .35rem .7rem; border-radius: 999px; font-size: .8rem; }
.pill-ok { background: rgba(95,143,90,.14); color: var(--ok); }
.pill-warn { background: rgba(199,140,39,.14); color: var(--warn); }

/* Layout — single column first */
main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.flash { background: rgba(95,143,90,.1); border: 1px solid var(--ok);
  color: var(--ok); padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .7rem; margin-bottom: 1.2rem;
}
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1.1rem; display: flex; flex-direction: column;
  box-shadow: 0 1px 3px rgba(47,46,41,.05);
}
.stat .num { font-size: 1.7rem; font-weight: 700; font-family: var(--serif); }
.stat .lbl { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.stat.viator .num { color: var(--viator); }
.stat.gyg .num { color: var(--gyg); }
.stat.manual .num { color: var(--manual); }

.grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }

h2 { font-size: 1.25rem; margin: 0 0 .8rem; font-style: italic; }

/* Agenda */
.agenda .empty { color: var(--muted); background: var(--sage); padding: 1.2rem;
  border-radius: var(--radius); border: 1px dashed var(--viator); }
.day { margin-bottom: 1.3rem; }
.day-head { font-size: .8rem; color: var(--rose); text-transform: uppercase;
  letter-spacing: .08em; margin: 0 0 .5rem; border-bottom: 1px solid var(--line);
  padding-bottom: .3rem; font-family: inherit; }

.card {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 12px; padding: .9rem 1rem; margin-bottom: .6rem; position: relative;
  box-shadow: 0 1px 3px rgba(47,46,41,.05);
}
.card.src-viator { border-left-color: var(--viator); }
.card.src-getyourguide { border-left-color: var(--gyg); }
.card.src-manual { border-left-color: var(--manual); }
.card.cancelled { opacity: .5; text-decoration: line-through; }

.card-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-dark); }
.card-body { flex: 1; }
.card-title { font-weight: 600; }
.card-title .opt { color: var(--muted); font-weight: 400; }
.card-meta { color: var(--muted); font-size: .85rem; margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.card-mp, .card-notes { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
.synced { color: var(--ok); }

.tag { padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.tag-viator { background: rgba(87,128,111,.14); color: var(--viator); }
.tag-getyourguide { background: rgba(201,111,74,.14); color: var(--gyg); }
.tag-manual { background: rgba(156,123,168,.16); color: var(--manual); }

.card-del button { background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; padding: .1rem .3rem; }
.card-del button:hover { color: var(--danger); }

/* Form */
.side { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(47,46,41,.05); }
.bform label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .7rem; }
.bform input, .bform textarea {
  width: 100%; margin-top: .25rem; padding: .6rem .7rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  font-size: 16px; /* prevents iOS zoom-on-focus */
}
.bform input:focus, .bform textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224,161,54,.18);
}
.bform .row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* Cards are links */
a.card { text-decoration: none; color: inherit; cursor: pointer; transition: .15s; }
a.card:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(47,46,41,.08); }
.card-arrow { display: none; color: var(--rose); font-size: 1.3rem; align-self: center; }
.tzlabel { color: var(--muted); font-weight: 400; font-size: .8rem; font-family: system-ui, sans-serif; font-style: normal; }

/* User chip */
.userchip { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted);
  font-size: .85rem; padding: .3rem .6rem; }
.userchip img { width: 26px; height: 26px; border-radius: 50%; }

/* Modal (add tour) */
.modal { background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.2rem; width: min(480px, 94vw);
  max-height: 88vh; overflow-y: auto; }
.modal::backdrop { background: rgba(47,46,41,.45); backdrop-filter: blur(2px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; }
.modal-close { background: transparent; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .4rem; }
.modal-close:hover { color: var(--text); }
.modal-sub { color: var(--muted); font-size: .85rem; margin: .4rem 0 1rem; }

/* Login */
.login-body { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
  background:
    radial-gradient(60% 45% at 85% 10%, var(--sage) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 90%, var(--bg-soft) 0%, transparent 70%),
    var(--bg); }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 2rem 1.5rem; text-align: center; max-width: 420px; width: 100%;
  box-shadow: 0 6px 24px rgba(47,46,41,.08); }
.login-logo { font-size: 3rem; }
.login-card h1 { margin: .4rem 0 .6rem; font-style: italic; }
.login-sub { color: var(--muted); font-size: .9rem; margin-bottom: 1.6rem; }
.login-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: 1rem; padding: .7rem 1.4rem; width: 100%; }
.login-note { color: var(--muted); font-size: .8rem; margin-top: .8rem; }
.login-warn { background: rgba(199,140,39,.1); border: 1px solid var(--warn); color: var(--warn);
  padding: .8rem; border-radius: 10px; font-size: .85rem; }
.login-warn code { color: var(--text); }
.login-demo { display: inline-block; margin-top: 1.2rem; }

/* Detail page */
.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.detail { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.2rem;
  box-shadow: 0 1px 3px rgba(47,46,41,.05); }
.detail.src-viator { border-left-color: var(--viator); }
.detail.src-getyourguide { border-left-color: var(--gyg); }
.detail.src-manual { border-left-color: var(--manual); }
.detail h1 { margin: 0 0 .2rem; font-size: 1.5rem; font-style: italic; }
.detail-opt { color: var(--muted); margin: 0 0 1.2rem; }
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.detail-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; }
.detail-box h3 { margin: 0 0 .7rem; font-size: 1rem; }
.detail-box h4 { margin: .8rem 0 .3rem; font-size: .8rem; color: var(--muted); font-family: inherit; }
.detail-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .88rem; }
.detail-box dt { color: var(--muted); }
.detail-box dd { margin: 0; overflow-wrap: anywhere; }
.detail-notes { margin-top: 1rem; }
.detail-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.tag-big { font-size: .85rem; padding: .25rem .8rem; }
.status { padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; }
.status-confirmed { background: rgba(95,143,90,.14); color: var(--ok); }
.status-pending { background: rgba(199,140,39,.14); color: var(--warn); }
.status-cancelled { background: rgba(184,84,58,.14); color: var(--danger); }
.synclog { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .8rem; font-size: .78rem; white-space: pre-wrap; color: var(--muted); margin: 0;
  overflow-x: auto; }
.btn-danger { background: rgba(184,84,58,.1); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Settings */
.settings-title { margin: 0; font-size: 1.3rem; font-style: italic; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.hint { color: var(--muted); font-size: .82rem; margin-top: 0; }
.bform .check { display: flex; align-items: center; gap: .5rem; color: var(--text); }
.bform .check input { width: auto; margin: 0; }

/* Footer */
.foot { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 2rem;
  color: var(--muted); font-size: .82rem; display: flex; flex-direction: column; gap: .4rem; }
.chan.on { color: var(--ok); }
.chan.off { color: var(--muted); }

/* ============================================================
   Larger screens — progressive enhancement
   ============================================================ */
@media (min-width: 600px) {
  main { padding: 1.5rem; }
  .topbar { padding: .9rem 1.5rem; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .card { flex-direction: row; gap: .9rem; align-items: flex-start; }
  .card-time { min-width: 92px; }
  .card-arrow { display: block; }
  a.card:hover { transform: translateX(2px); }
  .detail { padding: 1.6rem 2rem; }
  .detail-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .settings-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .login-card { padding: 2.5rem 3rem; }
  .login-btn { width: auto; }
  .modal { padding: 1.3rem 1.5rem; }
  .foot { flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem 2rem; }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: 1fr 340px; gap: 1.5rem; }
  .side { position: sticky; top: 90px; }
}