/* V0.17.5 Card Fusion — refined civic motion on the original Tolga palette.
   Three choices visible at once; no new navigation or backend dependencies. */
html[data-ui="refined"]{
  --fusion-forest:#18372c;
  --fusion-soft:#f6f2e9;
  --fusion-copper:#ab7545;
  --fusion-quiet:#d2ded4;
  --fusion-ink:#18372c;
}
html[data-ui="refined"] .portal-main{
  background:radial-gradient(ellipse 88% 48% at 50% 20%,#244a3a 0%,#18372c 79%);
  min-height:calc(100dvh - 65px);
}
html[data-ui="refined"] .portal-gateway{
  width:min(1070px,calc(100% - 48px));
  margin-inline:auto;
  min-height:calc(100dvh - 67px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(24px,4vh,35px);
  padding:clamp(26px,4.5vh,55px) 0 max(25px,env(safe-area-inset-bottom));
  animation:fusion-gateway-enter .5s cubic-bezier(.19,.82,.24,1) both;
}
html[data-ui="refined"] .portal-intro{margin-inline:auto;padding:0 8px;text-align:center;max-width:740px;}
html[data-ui="refined"] .portal-intro h1{font-size:clamp(38px,5.1vw,58px);font-weight:760;line-height:1.34;color:#fff9ee;letter-spacing:-.025em;margin:0;}
html[data-ui="refined"] .portal-intro p{font-size:clamp(16px,1.6vw,19px);font-weight:450;line-height:1.65;color:#d5e0d6;margin:7px auto 0;}
html[data-ui="refined"] .portal-doorway{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(13px,1.8vw,20px);
  width:100%;background:none;border:0;padding:0;box-shadow:none;align-items:stretch;
}
html[data-ui="refined"] .portal-option{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  min-width:0;min-height:clamp(225px,30vh,290px);
  padding:clamp(22px,2.55vw,31px);gap:21px;
  text-align:start;
  background:#f6f2e9;color:#18372c;
  border-radius:25px;border:1px solid rgba(255,253,243,.65);
  box-shadow:0 16px 40px rgba(9,31,20,.14),inset 0 1px rgba(255,255,255,.52);
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.2,.82,.25,1),box-shadow .35s ease,opacity .22s ease,border-color .22s ease;
  isolation:isolate;overflow:hidden;
}
html[data-ui="refined"] .portal-option:nth-child(1){
  background:linear-gradient(145deg,#345b47 0%,#224738 85%);
  color:#fffaf0;border-color:rgba(233,244,232,.24);
  box-shadow:0 19px 48px rgba(8,28,18,.26),inset 0 1px rgba(255,255,255,.15);
}
html[data-ui="refined"] .portal-option:nth-child(2){background:#f6f2e9;}
html[data-ui="refined"] .portal-option:nth-child(3){background:#eeeae0;}
html[data-ui="refined"] .portal-option+.portal-option{border-top:1px solid rgba(255,253,243,.65);}
html[data-ui="refined"] .portal-option::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,0) 55%);
  opacity:.48;z-index:-1;pointer-events:none;transition:opacity .3s ease;
}
html[data-ui="refined"] .portal-option:hover,
html[data-ui="refined"] .portal-option:focus-visible{
  transform:translateY(-5px);box-shadow:0 23px 48px rgba(5,25,15,.25);outline:2px solid #d7b18c!important;outline-offset:4px;
}
html[data-ui="refined"] .portal-option:active{transform:scale(.985);}
html[data-ui="refined"] .portal-symbol{
  width:56px;height:56px;min-width:56px;display:grid;place-items:center;
  color:#315642;border:0;border-radius:0;background:transparent;
}
html[data-ui="refined"] .portal-symbol svg{width:43px;height:43px;stroke-width:1.35;}
html[data-ui="refined"] .portal-option:nth-child(1) .portal-symbol{color:#e4d7c6;}
html[data-ui="refined"] .portal-option-copy{display:flex;flex-direction:column;gap:10px;align-items:start;width:100%;margin-top:auto;}
html[data-ui="refined"] .portal-option-copy strong{
  font:745 clamp(25px,2.25vw,31px)/1.35 var(--display);
  color:#18372c;letter-spacing:-.013em;text-wrap:balance;
}
html[data-ui="refined"] .portal-option-copy small{
  font:470 clamp(16px,1.35vw,18px)/1.6 var(--font);
  color:#4a6354;text-wrap:pretty;
}
html[data-ui="refined"] .portal-option:nth-child(1) .portal-option-copy strong{color:#fffaf0;}
html[data-ui="refined"] .portal-option:nth-child(1) .portal-option-copy small{color:#d9e4da;}
html[data-ui="refined"] .portal-option-arrow{
  position:absolute;left:clamp(22px,2.55vw,31px);top:clamp(26px,2.8vw,33px);
  font-size:31px;line-height:1.1;color:#ab7545;text-align:center;
  transition:transform .34s cubic-bezier(.2,.82,.25,1);
}
html[data-ui="refined"] .portal-option:nth-child(1) .portal-option-arrow{color:#e1c9a7;}
html[data-ui="refined"] .portal-option:is(:hover,:focus-visible) .portal-option-arrow{transform:translateX(-5px);}
html[data-ui="refined"] .portal-microfooter{padding:0 5px;margin:0;color:#d6e0d8;font-size:15px;gap:14px;}
html[data-ui="refined"] .portal-microfooter button{color:#f6f2e9;font-size:15px;min-height:44px;}
html[data-ui="refined"] .portal-gateway.portal-leaving{
  opacity:0;transform:translateY(9px) scale(.98);filter:none;animation:none;
  transition:opacity .25s ease,transform .32s cubic-bezier(.2,.82,.25,1);
  pointer-events:none;
}
html[data-ui="refined"] .portal-gateway.portal-leaving .portal-option:not(.portal-chosen){transform:translateY(14px) scale(.97);opacity:0;}
html[data-ui="refined"] .portal-gateway.portal-leaving .portal-option.portal-chosen{opacity:0;}
.portal-flight{
  position:fixed;z-index:999;inset:auto;pointer-events:none;
  border-radius:25px;transform-origin:top left;
  box-shadow:0 16px 40px rgba(4,22,13,.2);
  overflow:hidden;contain:layout paint;
}
.portal-flight-content{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:12px;padding:23px 29px;color:#fffaf0;
  animation:fusion-flight-copy .17s ease both;
}
.portal-flight-content svg{width:40px;height:40px;stroke:currentColor;fill:none;}
.portal-flight-content strong{font:750 27px/1.4 var(--display);white-space:nowrap;}
html[data-ui="refined"] .portal-candidate-view{animation:fusion-page-arrive .4s cubic-bezier(.2,.83,.25,1) both;}
html[data-ui="refined"] #track-panel[open] .sheet-shell,
html[data-ui="refined"] #dialogue-panel[open] .sheet-shell{
  animation:fusion-page-arrive .32s cubic-bezier(.2,.83,.25,1) both;
}
/* A secondary route should feel like a full destination, not a temporary popup on mobile. */
@media(max-width:650px){
 html[data-ui="refined"] .portal-site-header .head-inner{min-height:64px;}
 html[data-ui="refined"] .portal-main{min-height:calc(100dvh - 64px);}
 html[data-ui="refined"] .portal-gateway{
   width:calc(100% - 36px);min-height:calc(100dvh - 64px);
   gap:clamp(17px,3vh,26px);
   padding:clamp(22px,3.8vh,40px) 0 max(20px,env(safe-area-inset-bottom));
 }
 html[data-ui="refined"] .portal-intro h1{font-size:clamp(35px,9vw,43px);}
 html[data-ui="refined"] .portal-intro p{font-size:16px;}
 html[data-ui="refined"] .portal-doorway{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,14px);}
 html[data-ui="refined"] .portal-option{
   display:grid;grid-template-columns:52px minmax(0,1fr) 23px;align-items:center;justify-content:initial;
   min-height:clamp(103px,16vh,133px);padding:17px 16px;gap:12px;border-radius:22px;
 }
 html[data-ui="refined"] .portal-option .portal-symbol{width:48px;height:48px;min-width:48px;grid-column:1;grid-row:1;}
 html[data-ui="refined"] .portal-symbol svg{width:37px;height:37px;}
 html[data-ui="refined"] .portal-option-copy{grid-column:2;grid-row:1;gap:4px;margin:0;}
 html[data-ui="refined"] .portal-option-copy strong{font-size:clamp(22px,5.8vw,27px);line-height:1.42;}
 html[data-ui="refined"] .portal-option-copy small{font-size:clamp(15px,4vw,17px);line-height:1.45;}
 html[data-ui="refined"] .portal-option-arrow{position:static;grid-column:3;grid-row:1;font-size:25px;}
 html[data-ui="refined"] .portal-microfooter{font-size:13px;gap:9px;}
 html[data-ui="refined"] .portal-microfooter button{font-size:14px;}
 html[data-ui="refined"] #dialogue-panel.sheet{
   position:fixed;inset:0!important;margin:0!important;width:100vw!important;max-width:100vw!important;
   max-height:100dvh!important;height:100dvh!important;border-radius:0!important;border:0!important;
 }
 html[data-ui="refined"] #dialogue-panel .sheet-shell{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;}
 html[data-ui="refined"] #dialogue-panel .sheet-body{flex:1;overflow-y:auto;min-height:0;}
}
@media(max-width:360px){
 html[data-ui="refined"] .portal-gateway{width:calc(100% - 28px);}
 html[data-ui="refined"] .portal-option{grid-template-columns:43px minmax(0,1fr) 20px;gap:8px;padding:13px 11px;min-height:103px;}
 html[data-ui="refined"] .portal-option .portal-symbol{width:42px;height:42px;min-width:42px;}
 html[data-ui="refined"] .portal-symbol svg{width:34px;height:34px;}
 html[data-ui="refined"] .portal-option-copy strong{font-size:21px;}
 html[data-ui="refined"] .portal-option-copy small{font-size:15px;}
 html[data-ui="refined"] .portal-intro h1{font-size:35px;}
 html[data-ui="refined"] .portal-option-arrow{font-size:23px;}
}
@media(max-height:700px){
 html[data-ui="refined"] .portal-gateway{gap:11px;padding-block:12px;}
 html[data-ui="refined"] .portal-option{min-height:100px;}
 html[data-ui="refined"] .portal-intro h1{font-size:clamp(31px,7.7vw,40px);}
 html[data-ui="refined"] .portal-intro p{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){
 html[data-ui="refined"] .portal-gateway,
 html[data-ui="refined"] .portal-gateway.portal-leaving,
 html[data-ui="refined"] .portal-candidate-view,
 html[data-ui="refined"] .portal-option,
 html[data-ui="refined"] .portal-option-arrow,
 html[data-ui="refined"] #track-panel[open] .sheet-shell,
 html[data-ui="refined"] #dialogue-panel[open] .sheet-shell,
 .portal-flight{animation:none!important;transition:none!important;transform:none!important;filter:none!important;}
}
@keyframes fusion-gateway-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fusion-flight-copy{0%{opacity:1}65%{opacity:.7}100%{opacity:0}}
@keyframes fusion-page-arrive{from{opacity:0;transform:translateY(14px) scale(.991)}to{opacity:1;transform:translateY(0) scale(1)}}