/* ============================================================
   TechSyntar Timetable — standalone styles
   Only the tokens and the booking UI: nothing from the landing
   page, so this can be embedded anywhere without dragging a
   site layout in with it.
   ============================================================ */
:root{
  --bg:#f5ead8;            /* warm cream ground */
  --bg-2:#efe1cb;
  --card:#fffdf8;          /* near-white card surface */
  --ink:#201e1d;
  --muted:#6b6459;
  --navy:#1e2a6b;          /* brand primary  */
  --navy-2:#2e5bd6;        /* brighter blue  */
  --red:#c0392b;           /* brand accent   */
  --red-600:#a5301f;
  --line:rgba(32,30,29,.10);
  --radius:20px;
  --radius-sm:14px;
  --shadow-sm:0 2px 8px rgba(30,42,107,.06);
  --shadow-md:0 12px 30px rgba(30,42,107,.10);
  --shadow-lg:0 26px 60px rgba(30,42,107,.16);
  --sidebar-w:284px;
  --font-head:"Playfair Display",Georgia,serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --font-play:"Baloo 2",system-ui,sans-serif;
}


*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--navy-2);}
img{display:block;max-width:100%;}
h1,h2,h3,h4{margin:0;line-height:1.08;font-weight:800;}
:focus-visible{outline:2.5px solid var(--navy-2);outline-offset:3px;border-radius:6px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.4;
  padding:.74em 1.4em;border-radius:13px;border:none;
  cursor:pointer;white-space:nowrap;position:relative;
  box-shadow:0 4px 0 var(--edge),0 8px 16px rgba(20,30,80,.18);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge),0 3px 8px rgba(20,30,80,.18);}
.btn--primary{background:#2f6bfe;color:#fff;--edge:#1c47c9;}
.btn--red{background:#e23b2e;color:#fff;--edge:#a5271c;}
.btn--ghost{background:#fff;color:var(--navy);--edge:#cfd2e6;
  box-shadow:0 4px 0 var(--edge),0 8px 16px rgba(20,30,80,.10);}
.btn--sm{padding:.5em 1em;font-size:.88rem;border-radius:11px;
  box-shadow:0 3px 0 var(--edge),0 5px 12px rgba(20,30,80,.14);}

/* the page shell around the calendar */
.sch{max-width:1000px;margin:0 auto;padding:clamp(16px,3vw,32px);}
.sch-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.sch-head img{width:46px;height:46px;border-radius:12px;box-shadow:var(--shadow-sm);}
.sch-head__id{display:flex;flex-direction:column;line-height:1.16;}
.sch-head__id strong{font-family:var(--font-head);font-size:1.3rem;color:var(--navy);}
.sch-head__id span{font-size:.8rem;font-weight:700;color:var(--red);}
.sch-head__act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sch-lede{margin:0 0 22px;color:var(--muted);font-size1rem;max-width:620px;line-height:1.55;}
.sch-lede{font-size:1rem;}
@media (max-width:560px){
  .sch{padding:13px;}
  .sch-head img{width:38px;height:38px;}
  .sch-head__id strong{font-size:1.12rem;}
  .sch-lede{font-size:.92rem;}
  .sch-head__act{margin-left:0;flex:1 0 100%;}
}

/* ============================================================
   BOOKING CALENDAR
   ============================================================ */
.booking{background:#fff;border:1px solid rgba(30,42,107,.12);border-radius:var(--radius);
  padding:clamp(16px,2.4vw,26px);box-shadow:0 2px 14px rgba(20,30,80,.06);}
.bk-boot{color:var(--muted);margin:0;font-weight:600;}

.bk-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.bk-arrow{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--navy);font-size:1.1rem;cursor:pointer;line-height:1;
  transition:background .14s ease,border-color .14s ease;}
.bk-arrow:hover{background:rgba(30,42,107,.08);border-color:var(--navy-2);}
.bk-sel{font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--navy);
  padding:.55em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;}
.bk-sel--y{width:104px;}
.bk-now{font-family:var(--font-body);font-weight:800;font-size:.88rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--navy);border-radius:999px;padding:.5em 1.15em;cursor:pointer;
  transition:background .14s ease,color .14s ease;}
.bk-now:hover{background:var(--navy);color:#fff;}
.bk-count{color:var(--muted);font-size:.86rem;font-weight:600;margin-left:auto;}

.bk-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:8px;}
.bk-dows span{font-size:.66rem;font-weight:800;letter-spacing:.11em;color:var(--muted);
  text-align:left;padding-left:4px;}

.bk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.bk-cell{position:relative;min-height:74px;border:1.5px solid rgba(30,42,107,.10);border-radius:14px;
  background:#fff;text-align:left;padding:9px 10px;cursor:pointer;font-family:var(--font-body);
  display:flex;flex-direction:column;gap:3px;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
.bk-cell--pad{border:none;background:none;cursor:default;min-height:0;}
.bk-cell b{font-weight:700;font-size:.98rem;color:var(--ink);line-height:1;}
.bk-cell em{font-style:normal;font-size:.7rem;font-weight:700;color:var(--muted);line-height:1.25;}
.bk-cell.has-slots{background:#f4f7ff;border-color:rgba(47,107,254,.28);}
.bk-cell.has-slots b{color:var(--navy);}
.bk-cell.has-slots em{color:#2f6bfe;}
.bk-cell.has-slots:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(20,30,80,.12);border-color:#2f6bfe;background:#fff;}
.bk-cell.is-today{outline:2px solid var(--navy);outline-offset:-2px;}
.bk-cell.is-chosen{background:var(--navy);border-color:var(--navy);}
.bk-cell.is-chosen b,.bk-cell.is-chosen em{color:#fff;}
.bk-cell:disabled{cursor:default;opacity:.55;}
.bk-cell.is-past{opacity:.3;}
.bk-cell:focus-visible{outline:2.5px solid var(--navy-2);outline-offset:2px;}

.bk-empty{margin:18px 0 0;color:var(--muted);font-size:.94rem;}
.bk-tz{margin:-4px 0 12px;font-size:.82rem;color:var(--muted);font-weight:600;}
.bk-tz b{color:var(--navy);}

/* the day card */
.bk-panel{margin-top:20px;padding:20px;border-radius:18px;
  border:1px solid rgba(30,42,107,.14);border-top:3px solid #2f6bfe;
  background:#fff;box-shadow:0 10px 30px rgba(20,30,80,.10);
  animation:bkIn .22s ease;}
@keyframes bkIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.bk-panel__head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.bk-panel__head h3{font-family:var(--font-head);font-size:1.3rem;color:var(--navy);}
.bk-close{margin-left:auto;border:none;background:rgba(30,42,107,.08);color:var(--navy);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.85rem;}
.bk-close:hover{background:var(--red);color:#fff;}
.bk-panel__hint{margin:0 0 14px;color:var(--muted);font-size:.9rem;line-height:1.5;}

.bk-req{margin:0 0 8px;font-size:.82rem;font-weight:800;color:var(--navy);letter-spacing:.02em;}
.bk-req span{color:var(--red);}
.bk-req.is-bad{color:var(--red);}
.bk-times{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px;}
.bk-req.is-bad + .bk-times .bk-time{border-color:rgba(192,57,43,.45);}
.bk-submit:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.bk-time{font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.6em 1em;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;}
.bk-time em{font-style:normal;font-size:.66rem;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;}
.bk-time:hover{border-color:var(--navy-2);transform:translateY(-2px);}
.bk-time.is-on{background:var(--navy);color:#fff;border-color:var(--navy);}
.bk-time.is-on em{color:#c3cbf0;}

.bk-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.bk-field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.82rem;color:var(--navy);}
.bk-field--wide{grid-column:1/-1;}
.bk-field span{color:var(--red);}
.bk-field input{font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--ink);
  padding:.7em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;width:100%;}
.bk-field input:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.bk-field textarea{font-family:var(--font-body);font-size:.98rem;font-weight:500;color:var(--ink);
  padding:.7em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;width:100%;
  resize:vertical;line-height:1.5;}
.bk-field textarea:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.bk-field .opt{color:var(--muted);font-weight:600;}
.bk-empty.is-bad{color:var(--red);font-weight:600;}
.bk-msg{grid-column:1/-1;margin:0;font-size:.9rem;font-weight:700;color:var(--muted);}
.bk-msg.is-bad{color:var(--red);}
.bk-submit{grid-column:1/-1;justify-self:start;}

.bk-done{text-align:center;padding:14px 6px;}
.bk-done__tick{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:#e4efdd;color:#2f7d52;font-size:1.4rem;font-weight:800;margin-bottom:12px;}
.bk-done h3{font-family:var(--font-head);font-size:1.4rem;color:var(--navy);margin-bottom:6px;}
.bk-done p{margin:0 0 6px;font-weight:700;color:var(--ink);}
.bk-done__sub{font-weight:500;color:var(--muted);font-size:.92rem;max-width:420px;margin:0 auto 16px;}
.bk-done__diag{font-size:.76rem;color:var(--red);font-weight:600;max-width:460px;margin:0 auto 14px;
  background:#fdf0ee;border-radius:10px;padding:8px 12px;overflow-wrap:anywhere;}

@media (max-width:700px){
  .bk-count{margin-left:0;width:100%;}
  .bk-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;}
  .bk-cell{min-height:0;aspect-ratio:1/1.12;}
}
@media (max-width:420px){
  .bk-cell b{font-size:.78rem;}
}


/* ============================================================
   BOOKING · RESPONSIVE
   Every cluster here is fluid rather than fixed-width, so the
   calendar works embedded in a narrow iframe as well as full page.
   ============================================================ */
.booking,.bk-panel,.bk-times,.bk-form{min-width:0;}
.bk-grid,.bk-dows{min-width:0;}
.bk-cell{overflow:hidden;}
.bk-cell em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

@media (max-width:900px){
  .bk-sel{flex:1 1 120px;min-width:0;}
  .bk-sel--y{width:auto;flex:0 1 96px;}
  .bk-nav{gap:8px;}
}

/* booking · phone and narrow iframes */
@media (max-width:560px){
  /* the floor, applied to the class rather than to named elements */
  .booking button,
  .booking select,
  .booking input:not([type="hidden"]),
  .booking .btn{min-height:44px;}
  .booking .bk-arrow,
  .booking .bk-close{width:44px;height:44px;min-width:44px;}

  .booking{padding:13px;border-radius:16px;}
  .bk-nav{gap:7px;}
  .bk-arrow{font-size:1.05rem;}
  .bk-now{padding:.42em 1em;font-size:.82rem;}
  .bk-sel{font-size:.88rem;padding:.5em .7em;}
  .bk-count,.bk-tz{font-size:.78rem;}

  /* seven columns always — the week is the whole point of a month grid */
  .bk-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
  .bk-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
  .bk-dows span{font-size:.5rem;letter-spacing:.04em;text-align:center;padding:0;}
  .bk-cell{min-height:0;aspect-ratio:1/1.16;padding:4px 2px;border-radius:10px;
    align-items:center;justify-content:center;gap:3px;}
  .bk-cell b{font-size:.82rem;}
  /* the count becomes a dot: the number will not fit, but the signal must */
  .bk-cell em{font-size:0;line-height:0;}
  .bk-cell em::before{content:"";display:block;width:6px;height:6px;border-radius:50%;
    background:currentColor;}
  .bk-cell.has-slots em{color:var(--red);}

  .bk-panel{padding:14px;border-radius:15px;}
  .bk-panel__head h3{font-size:1.12rem;}
  .bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    gap:6px;margin-bottom:14px;}
  .bk-time{flex:none;padding:.4em .3em;font-size:.88rem;min-height:44px;
    align-items:center;justify-content:center;text-align:center;border-radius:10px;}
  /* the period repeats on every pill, so it is dropped rather than doubling
     each button's height */
  .bk-time em{display:none;}
  /* labels sit inline with their field instead of on their own line */
  .bk-field{gap:4px;font-size:.78rem;}
  .bk-field input{padding:.7em .9em;font-size:.95rem;min-height:44px;}
  .bk-field textarea{padding:.7em .9em;font-size:.95rem;}
  .bk-submit{min-height:48px;}
  .bk-req{margin-bottom:6px;font-size:.78rem;}
  .bk-form{grid-template-columns:1fr;gap:12px;}
  .bk-submit{width:100%;justify-content:center;}
  .bk-done__sub{font-size:.88rem;}
}
@media (max-width:380px){
  .bk-dows span{font-size:.44rem;}
  .bk-cell b{font-size:.74rem;}
  .bk-times{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));}
  .bk-time{font-size:.82rem;min-height:44px;}
}

/* the standalone page, which is what gets iframed */
@media (max-width:560px){
  .sa-head img{width:38px;height:38px;}
  .sa-head__id strong{font-size:1.12rem;}
  .sa-lede{font-size:.92rem;}
}

/* ============================================================
   BOOKING · RESPONSIVE
   Every cluster here is fluid rather than fixed-width, so the
   calendar works embedded in a narrow iframe as well as full page.
   ============================================================ */
.booking,.bk-panel,.bk-times,.bk-form{min-width:0;}
.bk-grid,.bk-dows{min-width:0;}
.bk-cell{overflow:hidden;}
.bk-cell em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}

@media (max-width:900px){
  .bk-sel{flex:1 1 120px;min-width:0;}
  .bk-sel--y{width:auto;flex:0 1 96px;}
  .bk-nav{gap:8px;}
}

/* booking · phone and narrow iframes */
@media (max-width:560px){
  /* the floor, applied to the class rather than to named elements */
  .booking button,
  .booking select,
  .booking input:not([type="hidden"]),
  .booking .btn{min-height:44px;}
  .booking .bk-arrow,
  .booking .bk-close{width:44px;height:44px;min-width:44px;}

  .booking{padding:13px;border-radius:16px;}
  .bk-nav{gap:7px;}
  .bk-arrow{font-size:1.05rem;}
  .bk-now{padding:.42em 1em;font-size:.82rem;}
  .bk-sel{font-size:.88rem;padding:.5em .7em;}
  .bk-count,.bk-tz{font-size:.78rem;}

  /* seven columns always — the week is the whole point of a month grid */
  .bk-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
  .bk-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
  .bk-dows span{font-size:.5rem;letter-spacing:.04em;text-align:center;padding:0;}
  .bk-cell{min-height:0;aspect-ratio:1/1.16;padding:4px 2px;border-radius:10px;
    align-items:center;justify-content:center;gap:3px;}
  .bk-cell b{font-size:.82rem;}
  /* the count becomes a dot: the number will not fit, but the signal must */
  .bk-cell em{font-size:0;line-height:0;}
  .bk-cell em::before{content:"";display:block;width:6px;height:6px;border-radius:50%;
    background:currentColor;}
  .bk-cell.has-slots em{color:var(--red);}

  .bk-panel{padding:14px;border-radius:15px;}
  .bk-panel__head h3{font-size:1.12rem;}
  .bk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    gap:6px;margin-bottom:14px;}
  .bk-time{flex:none;padding:.4em .3em;font-size:.88rem;min-height:44px;
    align-items:center;justify-content:center;text-align:center;border-radius:10px;}
  /* the period repeats on every pill, so it is dropped rather than doubling
     each button's height */
  .bk-time em{display:none;}
  /* labels sit inline with their field instead of on their own line */
  .bk-field{gap:4px;font-size:.78rem;}
  .bk-field input{padding:.7em .9em;font-size:.95rem;min-height:44px;}
  .bk-field textarea{padding:.7em .9em;font-size:.95rem;}
  .bk-submit{min-height:48px;}
  .bk-req{margin-bottom:6px;font-size:.78rem;}
  .bk-form{grid-template-columns:1fr;gap:12px;}
  .bk-submit{width:100%;justify-content:center;}
  .bk-done__sub{font-size:.88rem;}
}
@media (max-width:380px){
  .bk-dows span{font-size:.44rem;}
  .bk-cell b{font-size:.74rem;}
  .bk-times{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));}
  .bk-time{font-size:.82rem;min-height:44px;}
}

/* the standalone page, which is what gets iframed */
@media (max-width:560px){
  .sa-head img{width:38px;height:38px;}
  .sa-head__id strong{font-size:1.12rem;}
  .sa-lede{font-size:.92rem;}
}