/* X Tutoring — the site's one dropdown (see assets/xselect.js).
   Uses each page's colour tokens, with fallbacks for pages that don't
   define all of them. Works in light and dark through those tokens. */

.xdd{position:relative;display:block;min-width:0}
.xdd-native{position:absolute!important;inset:auto!important;opacity:0!important;width:1px!important;height:1px!important;overflow:hidden;pointer-events:none;margin:0!important;padding:0!important;border:0!important}

/* ---------- the button ---------- */
.xdd-btn{
  position:relative;width:100%;height:48px;padding:0 12px 0 15px;margin:0;
  display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  border:1px solid var(--rule,#DFE3E8);border-radius:12px;
  background:var(--card,#fff);color:var(--ink,#36454F);
  font-family:var(--body,'Inter',system-ui,sans-serif);font-size:15px;font-weight:500;line-height:1.2;
  box-shadow:0 1px 2px rgba(var(--shadow,54,69,79),.05);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,box-shadow .25s ease,background .2s ease;
}
.xdd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Pages style "label span" for field captions; keep those off the button's text. */
.xdd .xdd-btn .xdd-val{display:block;margin:0;padding:0;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.xdd.is-placeholder .xdd-btn .xdd-val{color:var(--placeholder,var(--slate,#7C8898));font-weight:400}
.xdd-chev{
  flex:none;width:26px;height:26px;padding:5px;margin-right:-2px;border-radius:8px;
  background:var(--band,#EDF0F3);fill:none;stroke:var(--slate,#5F6B78);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .2s ease,stroke .2s ease;
}
@media(hover:hover){
  .xdd-btn:hover{border-color:var(--rule-hover,#C3CAD3)}
  .xdd-btn:hover .xdd-chev{stroke:var(--ink,#36454F)}
}
.xdd-btn:focus{outline:none}
.xdd-btn:focus-visible{border-color:var(--ink,#36454F);box-shadow:0 0 0 4px color-mix(in srgb,var(--marker,#E76F51) 26%,transparent)}
.xdd.is-open .xdd-btn{border-color:var(--ink,#36454F);box-shadow:0 0 0 4px rgba(var(--shadow,54,69,79),.08)}
.xdd.is-open .xdd-chev{transform:rotate(180deg);background:var(--marker,#E76F51);stroke:#fff}
.xdd.is-disabled .xdd-btn{cursor:not-allowed;opacity:.6;background:var(--band,#EDF0F3);box-shadow:none}
.xdd.is-disabled .xdd-chev{opacity:.5}
.field.is-bad .xdd-btn{border-color:var(--marker,#E76F51)}
.xdd.shake{animation:xddShake .4s ease}
@keyframes xddShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* sizes that match the fields around them */
.field .xdd-btn{height:46px}
.ad-drawer .xdd-btn,.ad-card-form .xdd-btn,.ad-bar .xdd-btn{height:42px;font-size:14.5px;border-radius:10px}
.ad-bar .xdd{min-width:180px;max-width:240px}
.xdd-sm .xdd-btn,.xdd.xdd-sm .xdd-btn{height:38px;font-size:14px;padding:0 8px 0 12px;border-radius:10px}
.xdd-sm .xdd-chev{width:22px;height:22px;padding:4px}

/* ---------- the menu (attached to <body>) ---------- */
.xdd-pop{
  position:fixed;z-index:400;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card,#fff);color:var(--ink,#36454F);
  border:1px solid var(--rule,#DFE3E8);border-radius:14px;
  box-shadow:0 24px 48px -18px rgba(var(--shadow,54,69,79),.38),0 4px 12px -4px rgba(var(--shadow,54,69,79),.12);
  font-family:var(--body,'Inter',system-ui,sans-serif);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.xdd-pop.is-up{transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.xdd-pop.is-in{opacity:1;transform:none}
[data-theme="dark"] .xdd-pop{box-shadow:0 24px 48px -16px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03)}
.xdd-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin}
.xdd-item{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px 8px 12px;margin:1px 0;border-radius:9px;
  font-size:14.5px;line-height:1.3;cursor:pointer;color:var(--ink,#36454F);user-select:none;-webkit-user-select:none;
  transition:background .12s ease;
}
.xdd-txt{flex:1;min-width:0}
.xdd-hint{flex:none;font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;color:var(--slate,#5F6B78);letter-spacing:.01em}
.xdd-item.is-active{background:var(--band,#EDF0F3)}
.xdd-item.is-selected{font-weight:600;color:var(--marker-text,#B5472B);background:color-mix(in srgb,var(--marker,#E76F51) 10%,transparent)}
.xdd-item.is-selected.is-active{background:color-mix(in srgb,var(--marker,#E76F51) 16%,transparent)}
.xdd-item.is-empty .xdd-txt{color:var(--slate,#5F6B78)}
.xdd-item.is-disabled{opacity:.45;cursor:default}
.xdd-check,.xdd-check-sp{flex:none;width:16px;height:16px}
.xdd-check{fill:none;stroke:var(--marker,#E76F51);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.xdd-group{
  position:sticky;top:-6px;z-index:1;margin:0 -6px;padding:10px 18px 6px;
  font-family:var(--mono,ui-monospace,monospace);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate,#5F6B78);background:var(--card,#fff);
}
.xdd-group:first-child{padding-top:8px}
.xdd-item .xdd-code{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-right:8px}
.xdd-item .xdd-sub{color:var(--slate,#5F6B78);font-size:13px;font-weight:400}
.xdd-none{padding:14px 12px;font-size:14px;color:var(--slate,#5F6B78);text-align:center}
.xdd-search{position:relative;flex:none;padding:8px 8px 4px;border-bottom:1px solid var(--rule,#DFE3E8)}
.xdd-search svg{position:absolute;left:19px;top:50%;width:15px;height:15px;margin-top:-5px;fill:none;stroke:var(--slate,#5F6B78);stroke-width:2.2;stroke-linecap:round}
.xdd-search input{
  width:100%;height:38px;margin-bottom:4px;padding:0 10px 0 34px;border:1px solid var(--rule,#DFE3E8);border-radius:9px;
  background:var(--paper,#F8F9FA);color:var(--ink,#36454F);font:inherit;font-size:14px;
}
.xdd-search input:focus{outline:none;border-color:var(--ink,#36454F)}

/* always-dark containers */
.xdd-pop.is-dark{--card:#1B2125;--ink:#E7EAEC;--slate:#93A0AC;--band:rgba(248,249,250,.08);--rule:#2D353B;--paper:#14181B;--marker-text:#F09A79}
.xdd-panel .xdd-btn,[data-xdd-tone="dark"] .xdd-btn{background:rgba(248,249,250,.06);border-color:rgba(248,249,250,.2);color:#F8F9FA;box-shadow:none}
.xdd-panel .xdd-chev,[data-xdd-tone="dark"] .xdd-chev{background:rgba(248,249,250,.1);stroke:rgba(248,249,250,.7)}
@media(hover:hover){.xdd-panel .xdd-btn:hover,[data-xdd-tone="dark"] .xdd-btn:hover{border-color:rgba(248,249,250,.42)}}
.xdd-panel.is-open .xdd-btn,[data-xdd-tone="dark"] .xdd.is-open .xdd-btn{border-color:rgba(248,249,250,.6);box-shadow:0 0 0 4px rgba(0,0,0,.25)}
.xdd-panel.is-placeholder .xdd-val,[data-xdd-tone="dark"] .xdd.is-placeholder .xdd-val{color:#93A0AC}

/* ---------- phones: bottom sheet ---------- */
.xdd-scrim{position:fixed;inset:0;z-index:399;background:rgba(12,16,19,.42);opacity:0;transition:opacity .2s ease}
.xdd-scrim.is-in{opacity:1}
.xdd-pop.is-sheet{
  left:0;right:0;bottom:0;top:auto;width:auto;max-height:min(72vh,560px);
  border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0);
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease;opacity:1;
}
.xdd-pop.is-sheet.is-in{transform:none}
.xdd-sheet-h{flex:none;display:flex;align-items:center;gap:10px;padding:18px 14px 10px 20px;position:relative}
.xdd-sheet-h::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--rule,#DFE3E8)}
.xdd-sheet-h span{flex:1;min-width:0;font-family:var(--display,system-ui);font-weight:700;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xdd-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule,#DFE3E8);background:var(--paper,#F8F9FA);color:var(--ink,#36454F);font-size:20px;line-height:1;cursor:pointer}
.is-sheet .xdd-search{border-bottom:0;padding:0 12px 6px}
.is-sheet .xdd-search svg{left:24px;margin-top:-6px}
.is-sheet .xdd-search input{height:44px;font-size:16px}
.is-sheet .xdd-list{padding:4px 10px 14px}
.is-sheet .xdd-item{min-height:50px;font-size:16px;padding:10px 14px;border-radius:12px}
.is-sheet .xdd-group{margin:0 -10px;padding:12px 24px 6px}

@media(prefers-reduced-motion:reduce){
  .xdd-pop,.xdd-pop.is-sheet,.xdd-scrim,.xdd-chev,.xdd-btn{transition:none}
  .xdd.shake{animation:none}
}

/* ---------- typed time fields (select[data-xdd-type="time"]) ---------- */
.xdd-combo{cursor:text;padding-right:6px}
.xdd-input{
  flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:transparent;
  color:inherit;font:inherit;font-variant-numeric:tabular-nums;cursor:text;
}
.xdd-input::selection{background:color-mix(in srgb,var(--marker,#E76F51) 28%,transparent)}
.xdd-chev-btn{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xdd-chev-btn .xdd-chev{margin:0}
.xdd-combo:focus-within{border-color:var(--ink,#36454F);box-shadow:0 0 0 4px color-mix(in srgb,var(--marker,#E76F51) 22%,transparent)}
.xdd-typed.is-disabled .xdd-input{cursor:not-allowed}
@media(hover:hover){.xdd-combo:hover .xdd-chev{stroke:var(--ink,#36454F)}}
/* iOS zooms into text boxes under 16px; keep phones at 16. */
@media(pointer:coarse){.xdd-input{font-size:16px}}