/* =========================================================================
   Selection, share and export UI + the locked client shortlist
   ========================================================================= */

/* ---- tick on a card ---- */
.sel-tick{position:absolute;top:12px;right:12px;z-index:6;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(13,17,23,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);
  transition:opacity .28s var(--ease),transform .28s var(--ease),background .28s,border-color .28s}
.sel-tick svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.6;transition:opacity .2s}
.card:hover .sel-tick,.rail-card:hover .sel-tick,.sel-tick:focus-visible{opacity:1;transform:none}
.sel-tick:hover{background:var(--steel);border-color:var(--steel)}
.card.is-picked .sel-tick,.rail-card.is-picked .sel-tick{opacity:1;transform:none;
  background:var(--steel);border-color:#fff}
.card.is-picked .sel-tick svg,.rail-card.is-picked .sel-tick svg{opacity:1}
.card.is-picked{border-color:var(--steel);box-shadow:0 0 0 2px var(--steel),0 30px 70px -40px rgba(20,24,30,.6)}
.rail-card.is-picked{border-color:var(--steel);box-shadow:0 0 0 2px var(--steel)}

/* ---- selection bar ---- */
#selBar{position:fixed;left:0;right:0;bottom:0;z-index:900;transform:translateY(112%);
  transition:transform .5s var(--ease);pointer-events:none}
#selBar.up{transform:none;pointer-events:auto}
.sb-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:0 auto;max-width:1100px;padding:14px clamp(16px,3vw,26px);
  background:rgba(16,20,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:8px 8px 0 0;color:#fff;
  box-shadow:0 -20px 60px -30px rgba(0,0,0,.9)}
.sb-n{display:flex;align-items:baseline;gap:9px;font-size:.86rem}
.sb-n b{font-family:"Tenor Sans",serif;font-weight:400;font-size:1.5rem;color:#fff}
.sb-n em{font-style:normal;color:var(--steel-l);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.sb-act{display:flex;align-items:center;gap:10px}
.sb-clear{background:none;border:0;color:rgba(255,255,255,.6);font-family:"Nunito Sans";font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:10px 6px}
.sb-clear:hover{color:#fff}
.sb-share{background:var(--steel);border:1px solid var(--steel);color:#fff;font-family:"Tenor Sans",serif;
  font-size:.95rem;padding:12px 22px;border-radius:40px;cursor:pointer;transition:.35s var(--ease)}
.sb-share:hover{background:transparent}

/* ---- share popover ---- */
.sb-pop{position:absolute;right:clamp(16px,3vw,26px);bottom:calc(100% + 10px);width:min(340px,calc(100vw - 32px));
  background:rgba(18,22,28,.97);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
@media(min-width:1140px){.sb-pop{right:calc(50% - 550px + 26px)}}
.sb-f{display:block;padding:10px 12px 12px}
.sb-f span{display:block;font-size:.6rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:7px}
.sb-f input,.sb-f textarea{width:100%;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  color:#fff;font-family:"Nunito Sans";font-size:.9rem;padding:10px 12px;resize:vertical}
.sb-f input:focus,.sb-f textarea:focus{outline:none;border-color:var(--steel)}
.sb-f textarea{min-height:72px;line-height:1.45}
.sb-invite{padding:4px 12px 10px;border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
.sb-invite-n{font-size:.78rem;color:rgba(255,255,255,.55);margin:8px 0 6px}
.sb-pop>button,.sb-invite>button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:5px;
  color:#fff;font-family:"Nunito Sans";padding:11px 12px;cursor:pointer;transition:background .2s}
.sb-pop>button:hover,.sb-invite>button:hover{background:rgba(147,174,211,.16)}
.sb-pop>button b,.sb-invite>button b{display:block;font-weight:700;font-size:.88rem}
.sb-pop>button i,.sb-invite>button i{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.5);margin-top:2px}
.sb-msg{margin:2px 12px 8px;font-size:.74rem;color:var(--steel-l);min-height:1.1em}

/* ---- locked client shortlist ---- */
html.is-locked #loader{display:none}
#shortlist{background:var(--paper)}
.sl-head{margin-bottom:clamp(30px,4vw,54px)}
.sl-head h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;letter-spacing:-.01em;margin:.1em 0 .3em}
.sl-head h1 em{font-style:normal;color:var(--steel)}
.sl-stats{display:flex;flex-wrap:wrap;gap:30px 58px;border-top:1px solid var(--line);padding-top:26px}
.sl-stats b{display:block;font-family:"Tenor Sans",serif;font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1}
.sl-stats span{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.sl-empty{font-size:1.1rem;color:var(--ink-2)}
.sl-preview{margin:0 0 22px;padding:10px 14px;border:1px solid rgba(147,174,211,.45);border-radius:4px;
  background:rgba(147,174,211,.12);color:var(--ink);font-size:.78rem;letter-spacing:.04em}
.sl-preview a{color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.sl-preview a:hover{color:var(--ink)}

/* ---- print schedule ---- */
#printArea{display:none}
@media print{
  body>*{display:none !important}
  #printArea{display:block !important;font-family:"Nunito Sans",Arial,sans-serif;color:#111}
  .pa-head{display:flex;align-items:center;gap:14px;border-bottom:2px solid #222;padding-bottom:10px;margin-bottom:14px}
  .pa-head img{height:30px;width:auto;filter:brightness(0)}
  .pa-head b{display:block;font-size:14pt}
  .pa-head span{display:block;font-size:8pt;color:#555;margin-top:2px}
  #printArea table{width:100%;border-collapse:collapse;font-size:8.5pt}
  #printArea th{text-align:left;border-bottom:1px solid #222;padding:6px 8px;font-size:7pt;
    letter-spacing:.12em;text-transform:uppercase;color:#444}
  #printArea td{border-bottom:1px solid #ddd;padding:7px 8px;vertical-align:top}
  #printArea td b{display:block;font-size:9.5pt}
  #printArea td span{display:block;font-size:7.5pt;color:#666;margin-top:2px}
  @page{size:A4 landscape;margin:12mm}
}

/* ---- locked view: nav needs a dark bar, the shortlist sits on paper ---- */
html.is-locked nav{padding:11px var(--pad);background:rgba(19,22,27,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
html.is-locked nav .brand img{height:28px}
html.is-locked #prog{display:none}
#shortlist{padding-top:clamp(110px,14vh,170px)}

/* Abu Dhabi Chapter 01 sites are rail cards, built dark and tall for the
   horizontal rail. In the shortlist they have to read as ordinary cards. */
#slBody .rail-card{flex:auto;width:auto;height:auto;background:var(--white);
  border:1px solid var(--line);box-shadow:none;transform:none !important}
#slBody .rail-card:hover{box-shadow:0 40px 80px -40px rgba(20,24,30,.5);border-color:var(--steel)}
#slBody .rail-card .rc-body{color:var(--ink);padding:22px 22px 26px;flex:none;justify-content:flex-start}
#slBody .rail-card .rc-no{color:var(--steel);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
#slBody .rail-card h3{font-size:1.5rem;margin:6px 0 5px;color:var(--ink)}
#slBody .rail-card .rc-loc{color:var(--steel);font-size:.8rem;margin-bottom:16px}
#slBody .rail-card .rc-spec{border-top:1px solid var(--line);gap:18px;padding-top:16px}
#slBody .rail-card .rc-spec div .a{color:var(--ink)}
#slBody .rail-card .rc-spec div .b{color:var(--mute)}