/* =====================================================================
   TALK TO A COUNSELLOR (2026-10-14), in the Apple-card style of cards.css:
   each step is a white card on the canvas (28px, no border); the things to
   tap inside a card are canvas tiles (22px, no border) with white icon
   chips; one hover, a 2px rise on a soft shadow. Blue Rail only. How it
   works and what stays private sit in the info card beside the title.
   ===================================================================== */
body[data-page="counsellor"]{--cn-hover:0 1px 2px rgba(16,34,64,.04), 0 12px 28px -14px rgba(16,34,64,.16); --cn-ease:cubic-bezier(.22,1,.36,1)}
/* the top bar: cards.css keeps the page name whole and lets the search
   box give way, on every page */

.main-counsellor .pg-head{position:relative; z-index:20; margin-bottom:20px}
.cn{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; align-items:start; margin-bottom:40px}
.cn > *{grid-column:1 / -1; min-width:0}
.cn :focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.cn .i, .cn-pop .i{width:18px; height:18px; flex:none}

/* a step: a white card */
.cn-panel{background:#fff; border-radius:var(--rc, 28px); box-shadow:var(--card-shade); padding:26px 28px}
.cn-h{margin-bottom:16px; font-size:1.06rem; font-weight:600; letter-spacing:-.015em; color:var(--navy)}
.cn-time{grid-column:span 7; align-self:stretch}
.cn-about{grid-column:span 5; align-self:stretch}

/* ---------------------------------------------------------------- the title and its info card */
.cn-title{position:relative; display:flex; align-items:center; gap:10px}
.cn-info-b{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--ink-3); box-shadow:var(--card-shade);
  transition:color .2s, box-shadow .3s var(--cn-ease), transform .3s var(--cn-ease)}
.cn-info-b .i{width:19px; height:19px}
.cn-info-b:hover, .cn-info-b[aria-expanded="true"]{color:var(--blue); box-shadow:var(--cn-hover)}
.cn-info-b:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.cn-pop{position:absolute; z-index:30; top:calc(100% + 12px); left:0; width:min(380px, calc(100vw - 32px)); display:grid; gap:10px; padding:16px;
  border-radius:var(--rc-s, 22px); background:#fff; box-shadow:0 2px 6px rgba(16,34,64,.06), 0 24px 48px -20px rgba(16,34,64,.32);
  transition:opacity .18s ease, translate .22s var(--cn-ease), display .22s allow-discrete, overlay .22s allow-discrete}
.cn-pop[hidden]{display:none; opacity:0; translate:0 -6px}
@starting-style{ .cn-pop:not([hidden]){opacity:0; translate:0 -6px} }
.cn-pop > section{padding:16px 18px; border-radius:18px; background:var(--canvas)}
.cn-pop .cn-h{margin-bottom:8px; font-size:.95rem}
.cn-pop-x{position:absolute; top:22px; right:22px; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--ink-3)}
.cn-pop-x .i{width:15px; height:15px}
.cn-pop-x:hover{color:var(--navy)}
.cn-pop :focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.cn-steps, .cn-priv{display:grid; gap:2px}
.cn-steps li{position:relative; display:flex; align-items:center; gap:12px; padding:7px 0}
.cn-steps span{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#fff; font-size:.82rem; font-weight:700; color:var(--blue)}
.cn-steps li + li::before{content:""; position:absolute; left:14.5px; top:-8px; height:12px; width:1px; background:var(--hair-2)}
.cn-steps b, .cn-priv b{font-size:.92rem; font-weight:500; line-height:1.35; color:var(--navy)}
.cn-priv li{display:flex; align-items:center; gap:12px; padding:7px 0}
.cn-priv .i{box-sizing:content-box; width:16px; height:16px; padding:7px; border-radius:50%; background:#fff; color:var(--blue)}

/* ---------------------------------------------------------------- counsellors: canvas tiles */
.cn-people{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; padding-top:8px}
.cn-people > li{display:flex; min-width:0}
.cn-card{position:relative; flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:20px 18px 18px; text-align:left;
  border-radius:var(--rc-s, 22px); background:var(--canvas); transition:background-color .2s, box-shadow .3s var(--cn-ease), transform .3s var(--cn-ease)}
.cn-card:hover{transform:translateY(-2px); background:#fff; box-shadow:var(--cn-hover)}
.cn-card.on, .cn-card.on:hover{background:#fff; box-shadow:0 0 0 2px var(--blue), var(--cn-hover)}
.cn-av{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; font-size:.95rem; font-weight:600; letter-spacing:.02em}
.cn-av.t-0{background:var(--navy); color:#fff}
.cn-av.t-1{background:var(--blue); color:#fff}
.cn-av.t-2{background:var(--sky-24); color:var(--navy)}
.cn-av.t-3{background:#fff; color:var(--blue)}
.cn-card.on .cn-av.t-3, .cn-card:hover .cn-av.t-3{background:var(--canvas)}
.cn-av.sm{width:24px; height:24px; font-size:.62rem}
.cn-who{display:grid; gap:2px; min-width:0; margin:14px 0 14px}
.cn-who b{font-size:1rem; font-weight:600; color:var(--navy)}
.cn-who small{font-size:.84rem; line-height:1.35; color:var(--ink-3)}
.cn-ok{position:absolute; top:18px; right:18px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--hair-2); color:transparent;
  transition:background-color .2s, color .2s, box-shadow .2s}
.cn-ok .i{width:15px; height:15px}
.cn-card.on .cn-ok{background:var(--blue); box-shadow:none; color:#fff}
/* the facts sit at the foot, so tiles in a row line up whatever the name's length */
.cn-facts{align-self:stretch; display:grid; gap:6px; margin-top:auto; padding-top:12px; border-top:1px solid var(--hair); font-size:.82rem; color:var(--ink-2)}
.cn-facts span{display:flex; align-items:center; gap:7px}
.cn-facts .i{width:15px; height:15px; color:var(--blue)}
.cn-fit{position:absolute; top:-10px; left:16px; padding:2px 10px; border-radius:999px; background:var(--blue); color:#fff; font-size:.7rem; font-weight:600; line-height:1.5}

/* ---------------------------------------------------------------- the time */
.cn-wait{display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:18px; background:var(--canvas); font-size:.92rem; color:var(--ink-2)}
.cn-wait .i{box-sizing:content-box; padding:7px; border-radius:50%; background:#fff; color:var(--blue)}
.cn-days{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px}
.cn-day{display:flex; flex-direction:column; align-items:center; gap:1px; padding:11px 4px 10px; border-radius:18px; background:var(--canvas); transition:background-color .2s, color .2s, transform .3s var(--cn-ease), box-shadow .3s var(--cn-ease)}
.cn-day small{font-size:.76rem; font-weight:500; color:var(--ink-3)}
.cn-day b{font-size:1.24rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums}
.cn-day i{font-style:normal; font-size:.7rem; font-weight:600; color:var(--blue)}
.cn-day:hover:not(:disabled):not([aria-pressed="true"]){transform:translateY(-2px); background:#fff; box-shadow:var(--cn-hover)}
.cn-day[aria-pressed="true"]{background:var(--navy)}
.cn-day[aria-pressed="true"] small, .cn-day[aria-pressed="true"] b{color:#fff}
.cn-day[aria-pressed="true"] i{color:var(--sky)}
.cn-day:disabled{background:transparent; box-shadow:inset 0 0 0 1px var(--hair); cursor:default}
.cn-day:disabled b, .cn-day:disabled small, .cn-day:disabled i{color:var(--ink-4)}
.cn-slots{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.cn-slot{height:42px; padding:0 18px; border-radius:999px; background:var(--canvas); font-size:.9rem; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums;
  transition:background-color .2s, color .2s, box-shadow .3s var(--cn-ease)}
.cn-slot:hover{background:#fff; box-shadow:var(--cn-hover)}
.cn-slot[aria-pressed="true"], .cn-slot[aria-pressed="true"]:hover{background:var(--blue); color:#fff; box-shadow:none}

/* ---------------------------------------------------------------- about, and sharing */
.cn-topics{display:flex; flex-wrap:wrap; gap:8px}
.cn-topic{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:999px; background:var(--canvas);
  font-size:.88rem; font-weight:500; color:var(--navy); transition:background-color .2s, color .2s, box-shadow .3s var(--cn-ease)}
.cn-topic .i{width:15px; height:15px}
.cn-topic:hover{background:#fff; box-shadow:var(--cn-hover)}
.cn-topic[aria-pressed="true"], .cn-topic[aria-pressed="true"]:hover{background:var(--blue-24); color:var(--blue); font-weight:600; box-shadow:none}
.cn-share{position:relative; display:flex; align-items:center; gap:12px; margin-top:18px; padding:12px 14px 12px 12px; border-radius:18px; background:var(--canvas); cursor:pointer}
.cn-share b{flex:1; font-size:.92rem; font-weight:600; color:var(--navy)}
.cn-ti{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--navy)}
.cn-sw{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.cn-swv{position:relative; flex:none; width:44px; height:26px; border-radius:99px; background:var(--hair-3); transition:background-color .2s}
.cn-swv::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(16,34,64,.3); transition:transform .25s var(--ease)}
.cn-sw:checked + .cn-swv{background:var(--blue)}
.cn-sw:checked + .cn-swv::after{transform:translateX(18px)}
.cn-sw:focus-visible + .cn-swv{outline:2px solid var(--blue); outline-offset:2px}

/* ---------------------------------------------------------------- book: a card that stays in reach */
.cn-bar{position:sticky; bottom:16px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 16px 16px 28px;
  border-radius:var(--rc-s, 22px); background:#fff; box-shadow:0 1px 2px rgba(16,34,64,.05), 0 16px 36px -18px rgba(16,34,64,.28)}
.cn-sum{display:grid; gap:2px; min-width:0}
.cn-sum b{font-size:1rem; font-weight:600; color:var(--navy)}
.cn-sum span{font-size:.86rem; color:var(--ink-3)}
.cn-book{flex:none; height:48px; padding:0 22px; gap:8px}
.cn-book .i{width:19px; height:19px}

/* ---------------------------------------------------------------- booked: the one navy card */
.cn-booked{padding:28px; border-radius:var(--rc, 28px); background:var(--navy); color:#fff; box-shadow:var(--card-shade)}
.cn-bk-top{display:flex; align-items:center; gap:16px}
.cn-bk-ic{display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:50%; background:rgba(157,202,227,.16); color:var(--sky)}
.cn-bk-ic .i{width:24px; height:24px}
.cn-bk-t h2{font-size:clamp(1.35rem, 1.1rem + .7vw, 1.75rem); font-weight:600; letter-spacing:-.025em; line-height:1.2; color:#fff}
.cn-bk-t p{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px; font-size:.92rem; color:rgba(255,255,255,.8)}
.cn-booked .cn-av{background:rgba(157,202,227,.22); color:#fff}
.cn-bk-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.cn-bk-tags li{padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.82rem; font-weight:500}
.cn-bk-a{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.cn-bk-a .btn{height:44px; padding:0 20px; gap:8px}
.cn-bk-add{background:#fff; color:var(--navy)}
.cn-bk-add:hover{background:var(--sky)}
.cn-bk-on{background:rgba(157,202,227,.18); color:#fff}
.cn-bk-ghost{background:rgba(255,255,255,.08); color:#fff}
.cn-bk-ghost:hover{background:rgba(255,255,255,.16)}
.cn-booked :focus-visible{outline-color:var(--sky)}
.cn-bk-share{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:.86rem; color:rgba(255,255,255,.8)}
.cn-bk-share .i{width:16px; height:16px; color:var(--sky)}
.cn-link{font-weight:600; color:var(--sky); text-decoration:underline; text-underline-offset:3px}

/* before the call: three canvas tiles */
.cn-todo{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.cn-todo a{display:flex; align-items:center; gap:12px; height:100%; padding:16px; border-radius:var(--rc-s, 22px); background:var(--canvas); color:var(--navy);
  transition:background-color .2s, box-shadow .3s var(--cn-ease), transform .3s var(--cn-ease)}
.cn-todo b{flex:1; font-size:.95rem; font-weight:600; line-height:1.3}
.cn-todo a > .i:last-child{color:var(--ink-4); transition:color .2s}
.cn-todo a:hover{transform:translateY(-2px); background:#fff; box-shadow:var(--cn-hover)}
.cn-todo a:hover > .i:last-child, .cn-todo a:hover b{color:var(--blue)}

/* no counsellors yet */
.cn-empty{display:flex; flex-direction:column; align-items:center; gap:14px; padding:72px 24px; text-align:center}
.cn-empty-i{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--canvas); color:var(--blue)}
.cn-empty-i .i{width:28px; height:28px}
.cn-empty h2{font-size:1.2rem; font-weight:600; letter-spacing:-.015em; color:var(--navy)}

/* ---------------------------------------------------------------- smaller windows */
@media (max-width:1240px){
  .cn-people{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cn-time, .cn-about{grid-column:1 / -1}
}
@media (max-width:860px){
  .cn{gap:14px; margin-bottom:24px}
  .cn-panel{padding:20px 18px; border-radius:var(--rc-s, 22px)}
  .cn-booked{padding:22px 18px; border-radius:var(--rc-s, 22px)}
  .cn-todo{grid-template-columns:minmax(0,1fr)}
  .cn-bar{bottom:calc(76px + env(safe-area-inset-bottom)); padding:14px 14px 14px 20px}
}
@media (max-width:640px){
  .cn-people{grid-template-columns:minmax(0,1fr)}
  .cn-days{display:flex; overflow-x:auto; margin:0 -18px; padding:2px 18px 6px; scrollbar-width:none}
  .cn-days::-webkit-scrollbar{display:none}
  .cn-day{flex:none; width:64px}
  .cn-bar{flex-direction:column; align-items:stretch; gap:12px; padding:14px}
  .cn-book{width:100%; justify-content:center}
  .cn-bk-ic{display:none}
  .cn-bk-a .btn{flex:1 1 auto; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cn-card, .cn-day, .cn-slot, .cn-topic, .cn-swv, .cn-swv::after, .cn-ok, .cn-todo a, .cn-todo a > .i:last-child, .cn-info-b, .cn-pop{transition:none}
  .cn-card:hover, .cn-day:hover:not(:disabled), .cn-todo a:hover{transform:none !important}
}