/* book.nirap.org. Colours and type are nirap.org's own, so the two read as one site. */
:root{
  --ink:#072E33; --teal:#0D4F57; --teal-2:#0A3D44; --sky:#48A8B8; --sky-deep:#2F8A9A;
  --mint:#DAEBEB; --cream:#FBF4E7; --paper:#FFFFFF; --gold:#C9A468; --gold-bright:#DFBE85;
  --coral:#FF6B5E; --muted:#5B7377; --slate:#2B4247;
  --line:rgba(7,46,51,.12); --line-2:rgba(7,46,51,.2);
  --focus:0 0 0 3px rgba(72,168,184,.45);
  --r:14px;
  --display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 24px 60px -32px rgba(7,46,51,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
[hidden]{display:none!important}

.top{background:var(--teal);border-bottom:3px solid var(--gold)}
.top .in{max-width:1080px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top img{height:32px;width:auto;display:block}
.top a.back{color:var(--mint);text-decoration:none;font-size:14px}
.top a.back:hover{color:#fff;text-decoration:underline}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:32px 16px 56px}
h1,h2,h3{font-family:var(--display);line-height:1.2;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,4vw,2.25rem);font-weight:600}
h2{font-size:1.25rem;font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep);font-weight:600;margin:0 0 8px}
.lede{color:var(--slate);margin:10px 0 0;max-width:46rem}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ---- landing ---- */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.type{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;border-top:4px solid var(--teal)}
.type:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.type .len{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.type p{margin:0}
.type .go{margin-top:auto;padding-top:6px;color:var(--teal);font-weight:600}

/* ---- the booking card ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:300px 1fr;overflow:hidden}
.info{padding:26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.info .host{font-size:14px;color:var(--muted);margin:0}
.facts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--slate)}
.facts li{display:flex;gap:10px;align-items:flex-start}
.facts svg{flex:none;margin-top:3px;color:var(--sky-deep)}
.info .chosen{margin-top:4px;padding:12px 14px;background:var(--mint);border-radius:10px;font-size:15px}
.pane{padding:26px 24px;min-width:0}
.pane h2{margin-bottom:14px}

.pick{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head strong{font-family:var(--display);font-weight:600}
.nav{display:flex;gap:6px}
.nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:#fff;cursor:pointer;display:grid;place-items:center}
.nav button:hover:not(:disabled){background:var(--mint)}
.nav button:disabled{opacity:.35;cursor:default}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.grid .dow{font-size:12px;color:var(--muted);padding:6px 0;text-transform:uppercase;letter-spacing:.05em}
.day{aspect-ratio:1;max-height:48px;border:0;background:transparent;border-radius:50%;font-size:15px;color:var(--muted);cursor:default;position:relative;padding:0}
.day.open{color:var(--teal);font-weight:600;background:rgba(72,168,184,.12);cursor:pointer}
.day.open:hover{background:rgba(72,168,184,.26)}
.day.sel{background:var(--teal)!important;color:#fff}
.day.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.times h3{font-size:15px;font-weight:600;margin:0 0 10px;font-family:var(--sans)}
.times .list{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;padding:2px}
.slot{border:1px solid var(--sky-deep);color:var(--teal);background:#fff;border-radius:8px;padding:11px 10px;font-weight:600;cursor:pointer;text-align:center}
.slot:hover{background:var(--mint)}
.tz{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.tz select{max-width:100%;border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;background:#fff;font-size:14px}
.empty{color:var(--muted);font-size:15px;margin:0}

/* ---- form ---- */
form.details{display:flex;flex-direction:column;gap:14px;max-width:520px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;background:#fff;font-size:16px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--sky-deep);box-shadow:var(--focus);outline:none}
.field.bad input,.field.bad textarea{border-color:var(--coral)}
.field .err{color:#B3392F;font-size:13px;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:12px 20px;font-weight:600;cursor:pointer;text-decoration:none;font-size:16px}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-2)}
.btn--plain{background:transparent;color:var(--teal);padding-left:0;padding-right:0}
.btn--plain:hover{text-decoration:underline}
.btn--line{background:#fff;color:var(--teal);border:1px solid var(--sky-deep)}
.btn--line:hover{background:var(--mint)}
.btn--danger{background:#fff;color:#B3392F;border:1px solid rgba(179,57,47,.5)}
.btn--danger:hover{background:#FFF1EF}
.btn[disabled]{opacity:.6;cursor:progress}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{font-size:14px;color:var(--muted);margin:0}
.alert{border-radius:10px;padding:12px 14px;font-size:15px;margin:0 0 14px}
.alert--bad{background:#FFF1EF;color:#8F2D25;border:1px solid rgba(179,57,47,.25)}
.alert--ok{background:var(--mint);color:var(--ink)}

/* ---- done ---- */
.done{display:flex;flex-direction:column;gap:12px;max-width:520px}
.tick{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}

.skel{background:linear-gradient(90deg,rgba(7,46,51,.06),rgba(7,46,51,.11),rgba(7,46,51,.06));background-size:200% 100%;animation:sh 1.4s infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.type{transition:none}}

footer{border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer .in{max-width:1080px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
footer a{color:var(--muted)}

@media (max-width:900px){
  .card{grid-template-columns:1fr}
  .info{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  main{padding-top:20px}
  .pick{grid-template-columns:1fr}
  .times .list{max-height:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .info,.pane{padding:20px 16px}
}

/* Questions with a list of answers, and the single tick box. Added 19 October 2026. */
.field select{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;background:#fff;font-size:16px}
.field select:focus{border-color:var(--sky-deep);box-shadow:var(--focus);outline:none}
.field.bad select{border-color:var(--coral)}
fieldset.choices{border:0;padding:0;margin:0;min-width:0}
fieldset.choices legend{display:block;font-size:14px;font-weight:600;margin-bottom:6px;padding:0}
.choices .choice{display:flex;align-items:flex-start;gap:10px;font-size:16px;font-weight:400;margin:0;padding:6px 0;cursor:pointer}
.choices .choice input{width:18px;height:18px;flex:0 0 18px;margin:3px 0 0;accent-color:var(--teal)}
.field.bad.choices .choice span{color:#B3392F}
/* The note at the top of the page when someone signed in to /admin previews a meeting. */
.preview{margin:0 0 16px;background:#FFF6DA;border:1px solid #E9D48A;border-radius:12px;padding:12px 16px;font-size:15px}
.preview a{font-weight:600}

/* ---- The nirap.org opener, added 19 October 2026 at James's request ----
   Taken from the top of nirap.org (nirap-deploy/index.html, .opener): the same words, colours,
   line field and the turning badge, with the buttons left off. It is shorter than on nirap.org,
   which fills the screen, so the calendar below it is still reached with a short scroll. */
.opener{position:relative;overflow:hidden;color:var(--mint);
  background:radial-gradient(62% 58% at 20% 30%,rgba(72,168,184,.26) 0%,rgba(72,168,184,0) 64%),
    linear-gradient(158deg,#0C4A55 0%,#0A414C 100%);
  padding-block:clamp(2.25rem,5vw,3.75rem)}
.opener__grid{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 16px;display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.opener__eyebrow{display:flex;align-items:center;gap:14px;font-size:clamp(.74rem,.62rem + .4vw,.92rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
.opener__eyebrow::after{content:"";width:96px;height:1px;background:var(--gold);opacity:.5}
.opener__eyebrow .tm{font-size:.62em;letter-spacing:0;vertical-align:.42em;margin-left:.04em}
.opener__h{font-family:var(--display);font-weight:700;color:#fff;margin:0 0 1.25rem;max-width:20ch;
  letter-spacing:-.045em;line-height:1.12;font-size:clamp(1.9rem,1.05rem + 2.6vw,3.3rem)}
.opener__h u{color:var(--gold);text-decoration:none}
.opener__b{color:rgba(218,235,235,.92);max-width:58ch;margin:0 0 1rem;font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.65}
.opener__who{color:#fff;font-weight:600;max-width:56ch;margin:0;font-size:clamp(.96rem,.92rem + .25vw,1.06rem);line-height:1.6}
.opener__badge{display:flex;justify-content:center}
.hero__lines{position:absolute;top:-3%;left:-3%;width:106%;height:106%;z-index:0;pointer-events:none;overflow:visible;
  -webkit-mask-image:radial-gradient(115% 95% at 42% 52%,transparent 0%,transparent 34%,#000 88%);
          mask-image:radial-gradient(115% 95% at 42% 52%,transparent 0%,transparent 34%,#000 88%)}
.hero__lines .ln{fill:none;stroke:rgba(218,235,235,.17);stroke-width:1;vector-effect:non-scaling-stroke}
.js .hero__lines .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .opener.ready .hero__lines .ln{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.js .opener__copy>*,.js .opener__badge{opacity:0;transform:translateY(18px)}
.js .opener.ready .opener__copy>*,.js .opener.ready .opener__badge{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}

/* The badge: tilts toward the pointer, floats, turns over between the two credentials, and a
   highlight masked to its silhouette crosses each face while it lies flat. As on nirap.org. */
.ob{position:relative;width:min(100%,280px);perspective:1000px}
.ob__glow{position:absolute;inset:-8% -6%;z-index:0;border-radius:50%;filter:blur(12px);
  background:radial-gradient(circle at 50% 47%,rgba(111,196,210,.3) 0%,rgba(72,168,184,.17) 40%,rgba(48,140,155,.07) 62%,rgba(48,140,155,0) 76%)}
.ob__stage{position:relative;z-index:1;transform-style:preserve-3d;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.ob__img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 1px rgba(214,240,240,.85)) drop-shadow(0 0 3px rgba(160,214,220,.5))
         drop-shadow(0 0 10px rgba(90,178,192,.3)) drop-shadow(0 26px 46px rgba(3,26,30,.62))}
.ob__shine{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;transform:translateZ(1px);
  -webkit-mask-image:url(/assets/images/raicb-badge.png);mask-image:url(/assets/images/raicb-badge.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ob__shine i{position:absolute;top:-30%;left:0;width:20%;height:160%;transform:translateX(-200%) rotate(16deg);filter:blur(5px);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(190,215,220,.55) 30%,rgba(255,255,255,.95) 50%,rgba(223,190,133,.75) 70%,rgba(255,255,255,0) 100%)}
.ob__flip{position:relative;transform-style:preserve-3d}
.ob__face{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ob__face--back{position:absolute;inset:0;transform:rotateY(180deg)}
.js .opener.ready .ob__stage{animation:obFloat 8s ease-in-out 1.6s infinite}
.js .opener.ready .ob__flip{animation:obFlip 10s linear 1.6s infinite}
.js .opener.ready .ob__shine{animation:obShineOn 10s linear 1.6s infinite}
.js .opener.ready .ob__shine i{animation:obSweep 10s linear 1.6s infinite}
@keyframes obFlip{
  0%,39%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  50%,89%{transform:rotateY(180deg);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{transform:rotateY(360deg)}}
@keyframes obFloat{0%,100%{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(0)}
  50%{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-8px)}}
@keyframes obShineOn{0%,8%{opacity:0} 9.5%,20.5%{opacity:1} 22%,58%{opacity:0} 59.5%,70.5%{opacity:1} 72%,100%{opacity:0}}
@keyframes obSweep{
  0%,8%{transform:translateX(-200%) rotate(16deg)} 22%{transform:translateX(620%) rotate(16deg)}
  22.1%,58%{transform:translateX(-200%) rotate(16deg)} 72%{transform:translateX(620%) rotate(16deg)}
  72.1%,100%{transform:translateX(-200%) rotate(16deg)}}
.ob.is-tilting .ob__stage{animation:none;transition:transform .12s linear}
@media(prefers-reduced-motion:reduce){
  .js .opener.ready .ob__stage,.js .opener.ready .ob__shine,.js .opener.ready .ob__shine i,.js .opener.ready .ob__flip{animation:none}
  .ob__stage,.ob__flip{transform:none}
  .js .hero__lines .ln{stroke-dasharray:none;stroke-dashoffset:0}}
@media(max-width:820px){
  .opener__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .opener__badge{order:-1;justify-content:flex-start}
  .ob{width:min(100%,150px)}
  .opener__h{max-width:none}}

/* The left half of the booking card in the opener's green, so the two read as one. */
.info{background:radial-gradient(90% 60% at 20% 10%,rgba(72,168,184,.22) 0%,rgba(72,168,184,0) 70%),linear-gradient(158deg,#0C4A55 0%,#0A414C 100%);
  color:var(--mint);border-right-color:transparent}
.info .host{color:var(--gold)}
.info h1{color:#fff}
.info .facts{color:rgba(218,235,235,.92)}
.info .facts svg{color:var(--gold)}
.info .muted,.info #summary{color:rgba(218,235,235,.82)}
.info a{color:var(--gold-bright)}
.info .chosen{background:rgba(255,255,255,.1);border:1px solid rgba(218,235,235,.25);color:#fff}
.info .chosen .muted{color:rgba(218,235,235,.8)}
.info .skel{background:rgba(255,255,255,.12)}