/* ============================================================
   FANTASY STUDIO — AVAILABILITY CALENDAR (avail.js)

   The admin calendar's look, carried to the client, partner and crew
   portals: dark field cells on the panel, gold accents, a Monday-first
   week with the weekend columns tinted, today's number in a gold circle.
   Each day holds two stacked bands — morning above, evening below —
   plain when free, amber when filling up, red when fully booked.

   Every colour reads the host page's token first and falls back to the
   brand value, because the three portals name their tokens the same but
   not all of them define --field or --panel-2. avail.js links this file
   in beside itself; nothing here reaches outside .fs-avail.
   Phone-first: seven columns fit a 360px screen with 16px gutters.
   ============================================================ */
.fs-avail{
  --av-gold:var(--gold,#B8902B);
  --av-gold-b:var(--gold-b,#E2C275);
  --av-gold-l:var(--gold-l,#C9A347);
  --av-gold-d:var(--gold-d,#8E6E1E);
  --av-ink:var(--ink,#14110a);
  --av-panel:var(--panel,#241e12);
  --av-panel-2:var(--panel-2,#1c1710);        /* weekend cells — one step off the field */
  --av-field:var(--field,#171309);            /* weekday cells — the admin's input well */
  --av-line:var(--line,rgba(226,194,117,.22));
  --av-text:var(--text,#f3ecdc);
  --av-mut:var(--mut,#b3a98f);
  --av-ok:var(--ok,#4caf7d);
  --av-serif:var(--serif,'Playfair Display',Georgia,serif);
  --av-sans:var(--sans,'Jost',system-ui,sans-serif);
  --av-y:#E6BE5C;                              /* filling up — amber, readable on the dark field */
  --av-r:#c0392b;                              /* fully booked / blocked */
  --av-r-text:#ec8f82;                         /* the same red, lifted for text on dark */
  --av-free:rgba(255,255,255,.045);            /* a free half: a faint band, so the split still shows */
  --av-sel:rgba(184,144,43,.22);
  font-family:var(--av-sans);color:var(--av-text);
  background:var(--av-panel);border:1px solid var(--av-line);border-radius:16px;
  padding:.95rem .85rem 1rem;margin:1.1rem 0;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.fs-avail *{box-sizing:border-box}
.fs-avail [hidden]{display:none!important}
.fs-avail .av-h{font-family:var(--av-serif);font-size:1.1rem;font-weight:600;margin:0 0 .7rem;color:var(--av-text);line-height:1.25}

/* header: ‹ Month YYYY › Today */
.fs-avail .av-nav{display:flex;gap:.45rem;align-items:center;margin-bottom:.7rem}
.fs-avail .av-btn{background:none;border:1px solid var(--av-line);color:var(--av-gold-b);border-radius:10px;cursor:pointer;padding:.3em .75em;font-size:1.1rem;font-family:inherit;line-height:1;min-height:40px;min-width:40px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fs-avail .av-btn:disabled{opacity:.28;cursor:default}
.fs-avail .av-btn:active:not(:disabled){border-color:var(--av-gold)}
.fs-avail .av-today{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding-inline:.8em}
.fs-avail .av-title{flex:1;min-width:0;text-align:center;font-family:var(--av-serif);color:var(--av-gold-b);font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the grid */
.fs-avail .av-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.28rem}
.fs-avail .av-dow{text-align:center;font-size:.64rem;letter-spacing:.08em;color:var(--av-mut);padding:.1rem 0}
.fs-avail .av-dow.we{color:var(--av-gold-b);opacity:.75}
.fs-avail .av-cell{appearance:none;-webkit-appearance:none;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:stretch;
  border:1px solid transparent;border-radius:10px;padding:.24rem .26rem .28rem;cursor:pointer;
  background:var(--av-field);color:var(--av-text);font-family:inherit;font-size:.8rem;text-align:left;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative}
.fs-avail .av-cell.we{background:var(--av-panel-2)}
.fs-avail .av-cell.off{background:none;border:0;cursor:default;min-height:0}
.fs-avail .av-cell .av-d{font-size:.8rem;line-height:1.3;color:var(--av-text);align-self:flex-start}
.fs-avail .av-cell.today .av-d{background:var(--av-gold);color:var(--av-ink);font-weight:700;border-radius:50%;width:1.3rem;height:1.3rem;display:inline-grid;place-items:center;line-height:1}
/* morning above, evening below — two bands that fill the rest of the cell */
.fs-avail .av-bands{display:flex;flex-direction:column;gap:2px;flex:1;margin-top:.2rem;min-height:22px}
.fs-avail .av-half{display:block;flex:1;min-height:9px;border-radius:3px;background:var(--av-free)}
.fs-avail .av-half.y{background:var(--av-y)}
.fs-avail .av-half.r{background:var(--av-r)}
/* past: dim, no colour, not a target */
.fs-avail .av-cell.past{opacity:.36;cursor:default}
.fs-avail .av-cell.past .av-half{background:var(--av-free)}
/* the person's own event dates: a gold ring */
.fs-avail .av-cell.mine{border-color:var(--av-gold-b);box-shadow:0 0 0 1px var(--av-gold-b)}
.fs-avail .av-cell.mine .av-d{color:var(--av-gold-b);font-weight:600}
.fs-avail .av-cell.mine.today .av-d{color:var(--av-ink)}
.fs-avail .av-cell.sel{background:var(--av-sel);border-color:var(--av-gold-b)}
.fs-avail .av-cell:focus-visible{outline:2px solid var(--av-gold-b);outline-offset:1px}
.fs-avail.loading .av-half{opacity:.5}
@media(hover:hover){
  .fs-avail .av-cell:not(.off):not(.past):hover{border-color:var(--av-line)}
  .fs-avail .av-btn:not(:disabled):hover{border-color:var(--av-gold);color:#fff}
}

/* legend: the halves key on its own row, then the three colours (and "Your
   date" when there is one) — they wrap rather than scroll, because the red
   swatch must never sit off-screen on a 360px phone */
.fs-avail .av-legend{display:flex;gap:.3rem .85rem;align-items:center;flex-wrap:wrap;margin-top:.7rem;font-size:.66rem;color:var(--av-mut)}
.fs-avail .av-legend span{white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:.32em}
.fs-avail .av-legend .av-key{flex:1 0 100%}
.fs-avail .av-sw{width:9px;height:9px;border-radius:2px;background:var(--av-free);box-shadow:inset 0 0 0 1px var(--av-line);display:inline-block;flex:0 0 auto}
.fs-avail .av-sw.y{background:var(--av-y);box-shadow:none}
.fs-avail .av-sw.r{background:var(--av-r);box-shadow:none}
.fs-avail .av-sw.mine{background:none;box-shadow:0 0 0 1.5px var(--av-gold-b);border-radius:3px}
.fs-avail .av-mini{display:inline-flex;flex-direction:column;gap:1px;width:10px;height:13px;flex:0 0 auto}
.fs-avail .av-mini b{flex:1;border-radius:1.5px;background:var(--av-gold-b)}
.fs-avail .av-mini b + b{opacity:.4}
@media(min-width:700px){ .fs-avail .av-legend{gap:.35rem 1.1rem} }

/* the line under the grid for the tapped day, and the Ask button */
.fs-avail .av-detail{margin-top:.8rem;padding-top:.7rem;border-top:1px dashed var(--av-line);font-size:.86rem;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;min-height:1.5em}
.fs-avail .av-detail .av-hint{color:var(--av-mut)}
.fs-avail .av-detail b{font-family:var(--av-serif);color:var(--av-gold-b);font-weight:600}
.fs-avail .av-detail .av-slot{white-space:nowrap}
.fs-avail .av-detail em{font-style:normal;font-weight:500}
.fs-avail .av-detail em.ok{color:var(--av-ok)}
.fs-avail .av-detail em.y{color:var(--av-y)}
.fs-avail .av-detail em.r{color:var(--av-r-text)}
.fs-avail .av-you{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--av-gold-b);border:1px solid var(--av-gold-b);border-radius:20px;padding:.08em .6em;line-height:1.5}
/* the Ask buttons — one per half that is not red — sit side by side on
   their own row under the text; on a phone the pair does not fit, so the
   second drops under the first and each stretches full width. From 560px
   the pair keeps its natural width and sits to the right of the text. */
.fs-avail .av-asks{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.35rem}
.fs-avail .av-ask{flex:1 1 auto;min-height:42px;white-space:nowrap;background:linear-gradient(135deg,var(--av-gold-l),var(--av-gold-d));border:0;color:#fff;border-radius:40px;
  padding:.6em 1.2em;font-family:inherit;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 16px rgba(142,110,30,.35);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fs-avail .av-ask:active{filter:brightness(.92)}
@media(min-width:560px){ .fs-avail .av-asks{flex:0 0 auto;margin:0 0 0 auto} .fs-avail .av-ask{flex:0 0 auto} }