/* Hitching Post booker -- screens 1-2 styles. Design tokens + component styles carried over
   from Pax's blessed revision-2 mockup (the screens-1-2 subset), plus the few elements new to
   the real build (zone label on time buttons, fallback tz-bar state, the end-of-scope notice,
   calendar nav buttons). Palette/type/marks unchanged from the mockup. */

:root{
  --bg:#F7F5F1;
  --card:#FFFFFF;
  --text:#20241F;
  --text-secondary:#5B6360;
  --accent:#8A3B1F;      /* buttons -- AA safe w/ white text, 7.7:1 */
  --accent-mid:#C1502E;  /* links / small accents -- AA safe on white, 4.7:1 */
  --accent-soft:#F4E9E0; /* selected-state tints */
  --border:#E4DFD5;
  --disabled-bg:#EDEAE3;
  --disabled-text:#9A9690;
  --success:#1F6D4C;
  --danger:#9C3B34;      /* muted cancel/destructive -- AA safe, 6.8:1 */
  --partial-bg:#F6E7C8;  /* pending/illustrative badge tint */
  --radius:14px;
  --radius-sm:8px;
  --shadow: 0 1px 2px rgba(32,36,31,.06), 0 4px 14px rgba(32,36,31,.05);
  --focus-ring: 0 0 0 3px rgba(138,59,31,.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 4px 0; font-weight:700; letter-spacing:-0.01em;}
p{margin:0 0 8px 0;}
button{font-family:inherit;}
a{color:var(--accent-mid);}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-radius:6px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
[hidden]{display:none !important;}

.page{ max-width:600px; margin:0 auto; padding:28px 18px 60px; min-height:60vh; }
.page.wide{ max-width:920px; }

.brand-row{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex:0 0 auto;
}
.brand-name{ font-size:17px; font-weight:700; }
.brand-tag{ font-size:13px; color:var(--text-secondary); }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- event type landing ---------- */
.event-list{ display:flex; flex-direction:column; gap:12px; }
.event-card{
  width:100%; text-align:left; padding:18px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
  cursor:pointer; display:flex; align-items:center; gap:14px;
}
.event-card:hover{ border-color:var(--accent-mid); }
.event-card .dur-badge{
  flex:0 0 auto; width:64px; height:64px; border-radius:12px; background:var(--accent-soft);
  color:var(--accent); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:700;
}
.event-card .dur-badge .n{ font-size:19px; line-height:1; }
.event-card .dur-badge .u{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.event-card .meta{ flex:1 1 auto; }
.event-card h3{ font-size:16px; margin-bottom:2px; }
.event-card p{ font-size:13.5px; color:var(--text-secondary); margin:0 0 4px 0; }
.event-card .loc-line{ font-size:12px; color:var(--accent-mid); font-weight:600; display:flex; align-items:center; gap:5px; }
.event-card .chev{ flex:0 0 auto; color:var(--text-secondary); font-size:22px; }

/* ---------- slot picking ---------- */
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--text-secondary); background:none; border:none; cursor:pointer; padding:6px 0; margin-bottom:10px; }
.slot-header{ margin-bottom:14px; }
.slot-header h2{ font-size:19px; }
.slot-header .dur{ font-size:13.5px; color:var(--text-secondary); }
.slot-header .loc{ font-size:12.5px; color:var(--accent-mid); font-weight:600; margin-top:2px; }

.tz-bar{
  background:var(--accent-soft); border:1px solid #E9D6C6; border-radius:var(--radius-sm);
  padding:11px 14px; margin-bottom:18px; font-size:13.5px; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; justify-content:space-between;
}
.tz-bar.is-fallback{ background:#FBF1E8; border-color:#E7C9AE; }
.tz-bar select{
  font-size:13px; padding:6px 8px; border-radius:6px; border:1px solid var(--border); background:#fff;
  max-width:190px; min-height:36px;
}

/* end-of-scope selection notice (screens 3+ not built in this partial) */
.pick-notice{
  background:#20241F; color:#F4F0E9; border-radius:var(--radius-sm);
  padding:12px 15px; font-size:13px; margin-bottom:16px; line-height:1.5;
}
.pick-notice strong{ color:#fff; }

/* mobile day list */
.mobile-slots{ display:block; }
.day-list{ display:flex; flex-direction:column; gap:8px; }
.day-row{
  width:100%; text-align:left; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; min-height:48px;
}
.day-row .d{ font-weight:700; font-size:14.5px; }
.day-row .avail{ font-size:13px; color:var(--accent-mid); font-weight:600; }
.day-row[aria-disabled="true"]{ background:var(--disabled-bg); cursor:not-allowed; }
.day-row[aria-disabled="true"] .d{ color:var(--disabled-text); }
.day-row[aria-expanded="true"]{ border-color:var(--accent-mid); }
.time-panel{ padding:10px 4px 4px; }
.time-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:4px; }
.time-btn{
  min-height:56px; border-radius:10px; border:1.5px solid var(--border); background:#fff;
  cursor:pointer; text-align:center; padding:6px 8px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.time-btn:hover{ border-color:var(--accent-mid); background:var(--accent-soft); }
.time-btn.selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--focus-ring); }
.time-btn .t-main{ font-weight:700; font-size:14px; }
.time-btn .t-main .t-zone{ font-weight:600; font-size:11px; color:var(--text-secondary); }
.time-btn .t-sub{ font-size:11px; color:var(--text-secondary); }
.notice-line{ font-size:12.5px; color:var(--text-secondary); text-align:center; margin-top:16px; }

/* desktop calendar+times */
.desktop-slots{ display:none; }
.cal-wrap{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
.cal-card{ padding:18px; }
.cal-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-weight:700; font-size:15px; }
.cal-nav{ background:#fff; border:1px solid var(--border); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:16px; color:var(--text); }
.cal-nav:hover:not(:disabled){ border-color:var(--accent-mid); color:var(--accent); }
.cal-nav:disabled{ color:var(--disabled-text); cursor:not-allowed; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ font-size:11px; text-align:center; color:var(--text-secondary); font-weight:700; padding-bottom:4px; }
.cal-day{
  aspect-ratio:1/1; border-radius:10px; border:1.5px solid transparent; background:none;
  font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cal-day.avail{ border-color:var(--border); color:var(--text); }
.cal-day.avail:hover{ border-color:var(--accent-mid); background:var(--accent-soft); }
.cal-day.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
.cal-day.unavail{ color:var(--disabled-text); cursor:default; }
.cal-blank{ visibility:hidden; }
.times-pane{ padding:18px; }
.times-pane h3{ font-size:14px; margin-bottom:10px; }
.times-pane .time-grid{ grid-template-columns:1fr; }
.legend{ display:flex; gap:14px; margin-top:14px; font-size:12px; color:var(--text-secondary); flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ============ buttons (screens 3-7) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:10px; border:none;
  font-size:15px; font-weight:700; cursor:pointer; text-decoration:none;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#732F17; }
.btn-secondary{ background:#fff; color:var(--accent); border:1.5px solid var(--accent); }
.btn-secondary:hover{ background:var(--accent-soft); }
.btn-block{ width:100%; }
.btn-text{
  background:none; border:none; color:var(--danger); font-weight:600; font-size:14px;
  min-height:44px; padding:6px 8px; cursor:pointer; text-decoration:underline;
}
.btn-text.center{ text-align:center; align-self:center; }
/* visibly-disabled reschedule/cancel: the booker should SEE the feature exists, greyed, not gone */
.btn.is-disabled, .btn:disabled{
  background:var(--disabled-bg); color:var(--disabled-text); border:1.5px solid var(--disabled-bg);
  cursor:not-allowed;
}
.btn-text.is-disabled, .btn-text:disabled{
  color:var(--disabled-text); text-decoration:none; cursor:not-allowed; background:none; border:none;
}

.page-title{ font-size:19px; margin-bottom:16px; }

/* ============ screen 3: details form ============ */
.recap-card{ padding:16px; margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.recap-card .lines{ font-size:14px; }
.recap-card .lines .l1{ font-weight:700; margin-bottom:2px; }
.recap-card .lines .l2{ color:var(--text-secondary); }
.recap-card .lines .l3{ color:var(--accent-mid); font-weight:600; font-size:12.5px; margin-top:2px; }
.recap-card .change{ font-size:13px; font-weight:700; background:none; border:none; color:var(--accent-mid); cursor:pointer; white-space:nowrap; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.field .opt{ font-weight:400; color:var(--text-secondary); }
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--text); min-height:48px;
}
.field textarea{ min-height:76px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent-mid); box-shadow:var(--focus-ring); }
.form-helper{ font-size:12.5px; color:var(--text-secondary); text-align:center; margin-top:10px; }

/* inline outcome message (slot-taken / type-gone / error) */
.details-msg{
  border-radius:var(--radius-sm); padding:14px 15px; margin-bottom:18px; font-size:13.5px;
  display:flex; flex-direction:column; gap:12px; line-height:1.5;
}
.details-msg.tone-warn{ background:#FBF1E8; border:1px solid #E7C9AE; }
.details-msg.tone-error{ background:#FBEEEC; border:1px solid #E7C6BE; }
.details-msg .dm-action{ align-self:flex-start; min-height:44px; padding:9px 16px; font-size:14px; }

/* ============ screen 4: confirmation ============ */
.confirm-hero{ text-align:center; padding:8px 0 22px; }
.confirm-hero.flush{ padding-top:0; }
.check-circle{
  width:56px; height:56px; border-radius:50%; background:var(--success); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.check-circle.grey{ background:var(--text-secondary); }
.confirm-hero h2{ font-size:21px; }
.confirm-hero .sub{ color:var(--text-secondary); font-size:14.5px; }

.detail-card{ padding:18px; margin-bottom:16px; }
.detail-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
.detail-row:last-child{ border-bottom:none; }
.detail-row .k{ width:80px; flex:0 0 auto; color:var(--text-secondary); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; padding-top:2px; }
.detail-row .v{ font-weight:600; }
.detail-row .v .sub{ font-weight:400; color:var(--text-secondary); font-size:12.5px; display:block; margin-top:2px; }

.place-box{ padding:16px; display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.place-icon{ width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.place-box .pmeta{ flex:1 1 auto; }
.place-box .pt{ font-weight:700; font-size:14.5px; }
.place-box .pi{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.place-box .directions{ flex:0 0 auto; min-height:40px; padding:8px 14px; font-size:13px; }

.zoom-box{ padding:16px; margin-bottom:16px; }
.zoom-box .zhead{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.zoom-icon{ width:40px; height:40px; border-radius:10px; background:#EAF2EF; color:var(--success); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.zoom-box .zmeta{ flex:1 1 auto; }
.zoom-box .zmeta .zt{ font-weight:700; font-size:14.5px; }
.zoom-box .zmeta .zi{ font-size:12.5px; color:var(--text-secondary); }
.zoom-box .zjoin{ flex:0 0 auto; min-height:40px; padding:8px 16px; font-size:13.5px; }
.zoom-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.zoom-fields .zf .zfk{ color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; margin-bottom:2px; }
.zoom-fields .zf .zfv{ font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; letter-spacing:.02em; }
.zoom-dialin{ border-top:1px solid var(--border); padding-top:10px; margin-top:2px; }
.zoom-dialin summary{ font-size:13px; font-weight:700; color:var(--accent-mid); cursor:pointer; min-height:32px; display:flex; align-items:center; }
.zoom-dialin .dial-body{ font-size:12.5px; color:var(--text-secondary); padding:8px 0 2px 2px; }
.zoom-dialin .dial-num{ padding:3px 0; }
.zoom-dialin .dn-number{ font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text); }
.zoom-dialin .dn-place{ color:var(--text-secondary); }

.manage-block{ border-top:1px dashed var(--border); padding-top:18px; text-align:center; margin-top:6px; }
.manage-block h4{ font-size:13px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; }
.manage-actions{ display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.trust-line{ font-size:12px; color:var(--text-secondary); max-width:340px; margin:8px auto 0; }

/* ============ screens 5/5b/6: manage + cancel ============ */
.manage-header{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.brand-tag.small{ font-size:12.5px; color:var(--text-secondary); }
.manage-note{ background:var(--accent-soft); border:1px solid #E9D6C6; border-radius:var(--radius-sm); padding:11px 14px; font-size:13px; margin-bottom:20px; }
.manage-cta{ display:flex; flex-direction:column; gap:10px; max-width:320px; margin:0 auto; }

.cutoff-card{ padding:18px; margin-top:16px; border:1.5px solid #E7C6BE; background:#FBEEEC; }
.cutoff-card h4{ font-size:14px; color:var(--danger); margin-bottom:6px; }
.cutoff-card p{ font-size:13.5px; color:var(--text); margin-bottom:12px; }

.confirm-ask{ padding:20px; text-align:center; }
.confirm-ask p{ font-size:15px; margin-bottom:18px; }
.confirm-ask .actions{ display:flex; flex-direction:column; gap:10px; max-width:280px; margin:0 auto; }

.cancelled-ack{ text-align:center; padding:10px 0; }
.cancelled-ack .ack-title{ font-size:18px; }
.cancelled-ack .ack-sub{ color:var(--text-secondary); font-size:14px; }
.cancelled-ack .btn{ margin-top:10px; }

/* ============ screen 7: illustrative paid pattern ============ */
.illustrative-banner{
  background:#20241F; color:#F4F0E9; border-radius:var(--radius-sm); padding:12px 16px;
  font-size:13px; margin-bottom:20px; display:flex; gap:10px; align-items:flex-start; line-height:1.5;
}
.illustrative-banner .ico{ flex:0 0 auto; font-size:16px; }
.pay-box{ padding:16px; margin-bottom:16px; }
.pay-box .pk{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); font-weight:700; margin-bottom:6px; }
.pay-amount{ font-size:14.5px; font-weight:700; margin-bottom:4px; }
.pay-instructions{ font-size:13.5px; color:var(--text-secondary); }
.pay-status{ display:inline-block; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--partial-bg); color:#7A5E1E; }
.pay-status.inline{ margin-left:6px; }
.admin-mock{ padding:16px; border:1.5px dashed var(--border); background:#fff; }
.admin-mock .am-label{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-secondary); font-weight:700; margin-bottom:8px; }
.admin-mock .am-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.admin-mock .am-detail{ font-size:13.5px; }
.admin-mock .am-mark{ min-height:38px; padding:8px 14px; font-size:13px; }

@media (min-width: 820px){
  .mobile-slots{ display:none; }
  .desktop-slots{ display:block; }
  .brand-row{ margin-bottom:28px; }
}