/* Resume Target — Live Interview Availability
   rt-availability.css  —  v3, display only
   Every selector is prefixed .rtav so it cannot collide with the pricing page.
   Colours follow the Resume Target green: #1a5632 primary, #2e7d32 accent. */

.rtav-scope,
.rtav-backdrop {
  --rtav-green:#1a5632;
  --rtav-green2:#2e7d32;
  --rtav-soft:#eaf4ee;
  --rtav-soft2:#dcebe2;
  --rtav-gline:#c3ddcc;
  --rtav-surface:#fff;
  --rtav-surface2:#fafbfa;
  --rtav-text:#131c17;
  --rtav-muted:#5d6d64;
  --rtav-faint:#8a978f;
  --rtav-line:#e6ebe8;
  --rtav-line2:#d3dbd6;
  --rtav-rush:#b4530a;
  --rtav-rush-soft:#fdf4ec;
  --rtav-rush-line:#f0d6ba;
  --rtav-taken:#a4241f;
  --rtav-md:0 4px 12px rgba(16,32,24,.08),0 2px 4px rgba(16,32,24,.05);
  --rtav-lg:0 20px 56px rgba(16,32,24,.20),0 4px 12px rgba(16,32,24,.10);
  --rtav-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- trigger, sitting just above the Select button ----------
   Amber, not green: it has to read as a different kind of thing from the
   green Select button right underneath it, and be spotted straight away. */
.rtav-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--rtav-rush-soft);border:1px solid var(--rtav-rush-line);
  color:var(--rtav-rush);font-family:var(--rtav-font);font-size:12.5px;font-weight:700;
  line-height:1.3;padding:8px 14px;border-radius:100px;margin:0;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.rtav-trigger:hover{background:#fbe9d8;border-color:var(--rtav-rush)}
.rtav-trigger .rtav-dot{background:var(--rtav-rush)}
.rtav-mount{margin:4px 0 10px;width:100%;text-align:center}
@keyframes rtav-pulse-rush{
  0%{box-shadow:0 0 0 0 rgba(180,83,10,.45)}
  70%{box-shadow:0 0 0 7px rgba(180,83,10,0)}
  100%{box-shadow:0 0 0 0 rgba(180,83,10,0)}
}
.rtav-trigger .rtav-dot{animation-name:rtav-pulse-rush}

.rtav-dot{
  width:7px;height:7px;border-radius:50%;background:var(--rtav-green2);flex:none;
  animation:rtav-pulse 2.2s infinite;
}
@keyframes rtav-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,125,50,.5)}
  70%{box-shadow:0 0 0 7px rgba(46,125,50,0)}
  100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}
}
@media (prefers-reduced-motion:reduce){ .rtav-dot{animation:none} }

/* ---------- modal shell ---------- */
/* Calendly proportions on desktop: dates on the left, times stacked on the
   right. Below 720px the two panes stack and the card becomes a sheet. */
.rtav-backdrop{
  position:fixed;inset:0;background:rgba(10,20,15,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:99000;
}
.rtav-backdrop.rtav-open{display:flex}
.rtav-modal{
  background:var(--rtav-surface);border-radius:14px;width:100%;max-width:756px;
  max-height:min(92vh,860px);display:flex;flex-direction:column;box-shadow:var(--rtav-lg);overflow:hidden;
  font-family:var(--rtav-font);color:var(--rtav-text);font-size:16px;line-height:1.5;
}
.rtav-modal *{box-sizing:border-box}

.rtav-head{
  padding:16px 20px 14px;border-bottom:1px solid var(--rtav-line);
  display:flex;align-items:flex-start;gap:18px;
}
.rtav-head-main{flex:1;min-width:0}
.rtav-head h2{margin:0;font-size:20px;letter-spacing:-.02em;font-weight:700;color:var(--rtav-text)}
.rtav-close{
  width:30px;height:30px;border-radius:8px;border:none;flex:none;
  background:transparent;color:var(--rtav-faint);font-size:16px;line-height:1;cursor:pointer;font-family:inherit;
}
.rtav-close:hover{background:var(--rtav-surface2);color:var(--rtav-text)}

/* timezone sits directly under the interview title, no label, no helper text */
.rtav-tzrow{display:flex;align-items:center;gap:7px;margin-top:9px}
.rtav-globe{flex:none;width:14px;height:14px;color:var(--rtav-faint)}
.rtav-tz{
  max-width:230px;border:1px solid var(--rtav-line2);border-radius:7px;background:var(--rtav-surface);
  color:var(--rtav-text);font-family:inherit;font-size:12px;padding:5px 8px;cursor:pointer;
}
.rtav-tz:focus{outline:2px solid var(--rtav-gline);outline-offset:1px}

.rtav-body{overflow-y:auto;padding:14px 20px 16px;flex:1}

/* the one honesty line, above everything it applies to */
.rtav-banner{
  margin:0 0 12px;padding:9px 12px;border-radius:8px;background:var(--rtav-soft);
  font-size:12.5px;line-height:1.5;color:var(--rtav-muted);
}


/* ---------- dates left, times right ----------
   The calendar column is sized by its own grid rather than stretched, so the
   dates stay together instead of drifting apart across dead space. */
.rtav-cols{display:grid;grid-template-columns:auto 246px;gap:38px;align-items:start;justify-content:space-between}

/* ---------- month calendar ---------- */
.rtav-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rtav-month{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.rtav-nav{display:flex;gap:2px}
.rtav-nav button{
  width:32px;height:32px;border:none;background:transparent;border-radius:50%;
  color:var(--rtav-green);font-size:16px;line-height:1;cursor:pointer;font-family:inherit;
}
.rtav-nav button:hover:not(:disabled){background:var(--rtav-soft)}
.rtav-nav button:disabled{color:var(--rtav-line2);cursor:default}

.rtav-dow-row{display:grid;grid-template-columns:repeat(7,44px);gap:6px;margin-bottom:7px}
.rtav-dow-row span{
  text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rtav-faint);
}
.rtav-cal{display:grid;grid-template-columns:repeat(7,44px);gap:6px}
.rtav-cell{height:44px;display:flex;align-items:center;justify-content:center}
.rtav-date{
  width:42px;height:42px;border-radius:50%;border:none;background:transparent;
  font-family:inherit;font-size:14.5px;font-weight:500;color:var(--rtav-line2);
  cursor:default;position:relative;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.rtav-date.rtav-avail{background:var(--rtav-soft);color:var(--rtav-green);font-weight:700;cursor:pointer}
.rtav-date.rtav-avail:hover{background:var(--rtav-soft2)}
.rtav-date.rtav-sel{background:var(--rtav-green);color:#fff}
.rtav-date.rtav-sel:hover{background:var(--rtav-green)}
/* trailing days from the following month, de-emphasised but still bookable */
.rtav-date.rtav-out{opacity:.62}
.rtav-date.rtav-out.rtav-sel{opacity:1}
.rtav-date.rtav-today::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;
}

/* ---------- times column ---------- */
.rtav-times-head{margin-bottom:9px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;min-height:21px}
/* A stacked list, the way Calendly shows the right-hand pane. Six times fit
   without scrolling; anything longer scrolls inside this column only. */
.rtav-times-list{
  display:flex;flex-direction:column;gap:8px;max-height:352px;overflow-y:auto;
  padding-right:2px;scrollbar-width:thin;
}
.rtav-more{margin:9px 2px 0;font-size:11px;color:var(--rtav-faint);line-height:1.45;text-align:center}
/* Read-only by design. No border, no fill, no hover, no pointer.
   A rounded filled box is button geometry, and button geometry is a promise
   to reserve the time — which we cannot keep. So this is a list: a hairline
   between rows, a tick, and the time. It reads as a schedule, not a control. */
.rtav-times-list{gap:0}
.rtav-time{
  flex:none;width:100%;display:flex;align-items:center;gap:9px;
  padding:11px 2px;border-bottom:1px solid var(--rtav-line);
  color:var(--rtav-text);font-family:inherit;font-size:14.5px;
  font-weight:600;letter-spacing:-.01em;cursor:default;user-select:none;
}
.rtav-time:last-child{border-bottom:none}
.rtav-time::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--rtav-green2);
}
.rtav-drift{font-weight:500;color:var(--rtav-muted);font-size:13px}
.rtav-skel{
  flex:none;height:42px;margin-bottom:1px;border-radius:6px;background:linear-gradient(90deg,var(--rtav-line) 25%,var(--rtav-surface2) 50%,var(--rtav-line) 75%);
  background-size:200% 100%;animation:rtav-shimmer 1.2s infinite;
}
@keyframes rtav-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rtav-skel{animation:none}}
.rtav-nonesel{
  width:100%;padding:22px 12px;text-align:center;color:var(--rtav-faint);font-size:13px;line-height:1.6;
  border:1px dashed var(--rtav-line2);border-radius:10px;
}
.rtav-skel{width:100%}

/* ---------- rush: one line ---------- */
.rtav-rushline{
  margin-top:16px;padding:10px 13px;border-radius:8px;background:var(--rtav-rush-soft);
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--rtav-muted);line-height:1.45;
}
.rtav-rushline b{color:var(--rtav-rush);font-weight:700}
.rtav-rushline .rtav-bolt{flex:none;font-size:14px;width:auto;height:auto;background:none}

/* ---------- rush with times (config: RUSH_SHOW_TIMES) ---------- */
.rtav-rush{margin-top:18px;padding-top:16px;border-top:1px solid var(--rtav-line)}
.rtav-rush-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.rtav-bolt{
  flex:none;width:28px;height:28px;border-radius:8px;background:var(--rtav-rush-soft);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.rtav-rush-head .rtav-t b{display:block;font-size:14.5px;font-weight:700;color:var(--rtav-rush);letter-spacing:-.01em}
.rtav-rush-head .rtav-t span{display:block;font-size:12.5px;color:var(--rtav-muted);margin-top:2px}

.rtav-rush-day{margin-bottom:14px}
.rtav-rush-day:last-child{margin-bottom:0}
.rtav-rush-daylabel{
  font-size:12px;font-weight:700;color:var(--rtav-rush);margin-bottom:8px;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
}
.rtav-rush-daylabel em{font-style:normal;font-weight:500;color:var(--rtav-muted);font-size:11.5px}
.rtav-rush-times{display:flex;flex-wrap:wrap;gap:6px}
.rtav-rtime{
  background:var(--rtav-rush-soft);color:var(--rtav-rush);
  border-radius:6px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:650;
  cursor:default;user-select:none;
}
.rtav-rush-note{margin:12px 0 0;font-size:11.5px;color:var(--rtav-faint);line-height:1.5}
.rtav-rush-extra{
  margin-top:12px;padding:10px 12px;background:var(--rtav-rush-soft);border-radius:8px;
  font-size:12.5px;color:var(--rtav-muted);line-height:1.55;
}
.rtav-rush-extra b{color:var(--rtav-rush)}
.rtav-rush-none b{display:block;font-size:15px;color:var(--rtav-rush);margin-bottom:5px}
.rtav-rush-none p{margin:0;font-size:13.5px;color:var(--rtav-muted)}

/* ---------- disclaimer + footer ---------- */

.rtav-foot{
  border-top:1px solid var(--rtav-line);padding:13px 22px;background:var(--rtav-surface2);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
}
.rtav-foot .rtav-picked{flex:1 1 auto;order:0;min-width:190px;font-size:12.5px;color:var(--rtav-muted);line-height:1.5}
.rtav-btn{
  flex:0 0 auto;order:1;border:none;border-radius:8px;padding:11px 20px;font-family:inherit;
  font-size:14px;font-weight:650;cursor:pointer;white-space:nowrap;
}
.rtav-btn-primary{background:var(--rtav-green);color:#fff}

/* ---------- responsive ----------
   Below 720px the two panes stack, the times go three across, and the card
   becomes a sheet anchored to the bottom of the screen. */
@media (max-width:720px){
  .rtav-backdrop{padding:0;align-items:flex-end}
  .rtav-modal{max-width:none;max-height:92vh;border-radius:14px 14px 0 0}
  .rtav-head{padding:15px 16px 12px}
  .rtav-head h2{font-size:18px}
  .rtav-tz{max-width:100%;width:100%}
  .rtav-body{padding:14px 16px 16px}
  .rtav-banner{font-size:12px}

  .rtav-cols{grid-template-columns:1fr;gap:16px;justify-content:stretch}
  .rtav-dow-row,
  .rtav-cal{grid-template-columns:repeat(7,1fr);gap:3px}
  .rtav-cell{height:38px}
  .rtav-date{width:36px;height:36px;font-size:13.5px}

  .rtav-times-list{max-height:none;overflow:visible}
  .rtav-time{width:100%;padding:10px 6px;font-size:13.5px}
  .rtav-skel{width:calc(33.333% - 4px)}

  .rtav-foot{padding:11px 16px;gap:9px}
  .rtav-foot .rtav-picked{flex:1 1 100%;min-width:0;text-align:center}
  .rtav-btn{flex:1 1 0;padding:11px 14px}
}
@media (max-width:400px){
  .rtav-time,.rtav-skel{width:100%}
  .rtav-date{width:32px;height:32px;font-size:13px}
  .rtav-cell{height:34px}
  .rtav-trigger{white-space:normal}
}