/* Booking panel for /pages/talk and /pages/talk-manage, built by /js/talk-booking-panel.js. */
  .tb-panel {
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--crimson);
    background: linear-gradient(180deg, rgba(139,26,47,0.07), rgba(107,63,160,0.04) 60%, rgba(255,255,255,0.01));
    padding: 1rem 1rem 1.1rem;
    min-height: 220px;
  }
  .tb-zone {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding-bottom: 0.85rem; margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.8rem; color: var(--text2);
  }
  .tb-zone-text strong { color: var(--text); font-weight: 600; }
  .tb-zone-change { position: relative; display: inline-flex; align-items: center; margin: 0; }
  .tb-zone-change span {
    font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose);
    border-bottom: 1px solid rgba(194,68,90,0.5); padding-bottom: 1px; pointer-events: none;
  }
  /* The native select sits invisibly over the "Change" label: on a phone that
     opens the OS picker, which is the best long-list control there is. */
  .tb-zone-select { position: absolute; inset: -10px -8px; opacity: 0; cursor: pointer; width: calc(100% + 16px); font-size: 16px; }
  .tb-zone-select:focus-visible + span, .tb-zone-change:focus-within span { outline: 2px solid var(--rose); outline-offset: 3px; }

  .tb-section-label {
    font-family: 'Syne', sans-serif; font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3);
    margin: 0.2rem 0 0.55rem;
  }
  .tb-best { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 1.1rem; }
  .tb-days {
    display: grid; gap: 0.9rem; max-height: 380px; overflow-y: auto; padding: 0 2px 1.2rem 0; margin-bottom: 0.4rem;
    /* Fade the bottom edge so a longer list reads as scrollable, not cut off. */
    -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);
            mask-image: linear-gradient(180deg, #000 85%, transparent);
  }
  .tb-days.is-short { -webkit-mask-image: none; mask-image: none; }
  .tb-day-name { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; color: var(--text); margin-bottom: 0.4rem; }
  .tb-day-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }

  .tb-slot {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    min-height: 44px; padding: 0.55rem 0.6rem;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    font-family: 'Syne', sans-serif; font-size: 0.8rem; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .tb-slot:hover { border-color: rgba(194,68,90,0.6); }
  .tb-slot:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
  .tb-best .tb-slot { justify-content: space-between; padding: 0.7rem 0.9rem; position: relative; }
  .tb-slot-day { color: var(--text2); }
  .tb-best .tb-slot.is-best::after {
    content: 'Best time';
    font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rose); border: 1px solid rgba(194,68,90,0.45); padding: 0.15rem 0.4rem; margin-left: auto;
  }
  .tb-best .tb-slot-time { margin-left: auto; font-weight: 600; }
  .tb-best .tb-slot.is-best .tb-slot-time { margin-left: 0; }
  .tb-slot.is-selected {
    border-color: transparent;
    background: linear-gradient(135deg, var(--crimson), var(--violet-d));
  }
  .tb-slot.is-selected .tb-slot-day { color: var(--text); }
  .tb-best .tb-slot.is-selected::after { color: var(--text); border-color: rgba(255,255,255,0.5); }
  /* In the day grid a best time gets a small rose mark, not the full tag —
     the tag doesn't fit a three-across chip without wrapping the time. */
  .tb-day-slots .tb-slot { position: relative; }
  .tb-day-slots .tb-slot.is-best::after {
    content: ''; position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
  }
  .tb-day-slots .tb-slot.is-selected.is-best::after { background: var(--text); }

  .tb-note { font-size: 0.8rem; line-height: 1.6; color: var(--text2); margin: 0.2rem 0 0.8rem; }
  .tb-loading { font-size: 0.8rem; color: var(--text3); padding: 2.5rem 0; text-align: center; }
  .tb-picked {
    margin: 0.4rem 0 0.2rem; font-size: 0.82rem; line-height: 1.55; color: var(--text2);
    padding: 0.7rem 0.9rem; border: 1px solid rgba(74,222,128,0.35); background: rgba(74,222,128,0.06);
  }
  .tb-picked strong { color: var(--text); }
  .tb-link {
    display: inline-block; margin-top: 0.7rem; padding: 0.35rem 0; background: none; border: none; cursor: pointer;
    color: var(--rose); font-family: 'Syne', sans-serif; font-size: 0.74rem; text-decoration: underline; text-underline-offset: 3px;
  }
  .tb-request { margin-top: 0.8rem; }
  .tb-request label {
    display: block; font-family: 'Syne', sans-serif; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); margin-bottom: 0.45rem;
  }
  .tb-request .tb-note { margin: 0.5rem 0 0; }
  .talk-card .tb-request textarea.form-input { min-height: 70px; }


  /* Every time is the visitor's own clock: "2:00 PM". */
  .tb-zone-closer { color: var(--text3); font-size: 0.72rem; }
  .tb-slot-time { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 0.25rem; text-align: center; line-height: 1.35; }
  .tb-slot-you { color: var(--text); font-weight: 600; white-space: nowrap; }
  .tb-slot-sep { color: var(--text3); }
  .tb-slot-closer { color: var(--text2); white-space: nowrap; }
  .tb-slot.is-selected .tb-slot-closer, .tb-slot.is-selected .tb-slot-sep { color: var(--text); }
  .tb-day-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-day-slots .tb-slot-sep { display: none; }
  .tb-day-slots .tb-slot-time { flex-direction: column; align-items: center; }
  .tb-day-slots .tb-slot-closer { font-size: 0.72rem; }

  @media (max-width: 700px) {
    .tb-panel { padding: 0.9rem 0.8rem 1rem; }
    .tb-slot { min-height: 52px; font-size: 0.85rem; }
  }