*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Open Sans,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-5{top:-1.25rem}.z-\[100\]{z-index:100}.mx-auto{margin-left:auto;margin-right:auto}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-96{max-height:24rem}.min-h-\[100px\]{min-height:100px}.min-h-\[4rem\]{min-height:4rem}.min-h-\[60vh\]{min-height:60vh}.min-h-\[72px\]{min-height:72px}.min-h-\[7rem\]{min-height:7rem}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-36{width:9rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[10rem\]{min-width:10rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[160px\]{min-width:160px}.min-w-\[200px\]{min-width:200px}.min-w-\[5\.5rem\]{min-width:5.5rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[14rem\]{max-width:14rem}.max-w-\[9\.5rem\]{max-width:9.5rem}.max-w-md{max-width:28rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-\[12rem\]{flex-basis:12rem}.table-fixed{table-layout:fixed}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-y-1{row-gap:.25rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:.75rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-black\/10{border-color:rgba(0,0,0,.1)}.border-border{--tw-border-opacity:1;border-color:hsl(var(--border)/var(--tw-border-opacity,1))}.border-border\/60{border-color:hsl(var(--border)/.6)}.border-primary\/25{border-color:hsl(var(--primary)/.25)}.border-primary\/30{border-color:hsl(var(--primary)/.3)}.border-sidebar-border{--tw-border-opacity:1;border-color:hsl(var(--sidebar-border)/var(--tw-border-opacity,1))}.bg-background{--tw-bg-opacity:1;background-color:hsl(var(--background)/var(--tw-bg-opacity,1))}.bg-background\/60{background-color:hsl(var(--background)/.6)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-card{--tw-bg-opacity:1;background-color:hsl(var(--card)/var(--tw-bg-opacity,1))}.bg-destructive\/10{background-color:hsl(var(--destructive)/.1)}.bg-muted{--tw-bg-opacity:1;background-color:hsl(var(--muted)/var(--tw-bg-opacity,1))}.bg-muted\/20{background-color:hsl(var(--muted)/.2)}.bg-muted\/30{background-color:hsl(var(--muted)/.3)}.bg-muted\/40{background-color:hsl(var(--muted)/.4)}.bg-muted\/50{background-color:hsl(var(--muted)/.5)}.bg-primary{--tw-bg-opacity:1;background-color:hsl(var(--primary)/var(--tw-bg-opacity,1))}.bg-primary\/10{background-color:hsl(var(--primary)/.1)}.bg-primary\/5{background-color:hsl(var(--primary)/.05)}.bg-primary\/70{background-color:hsl(var(--primary)/.7)}.bg-primary\/80{background-color:hsl(var(--primary)/.8)}.bg-secondary{--tw-bg-opacity:1;background-color:hsl(var(--secondary)/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Open Sans,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-destructive{--tw-text-opacity:1;color:hsl(var(--destructive)/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:hsl(var(--primary)/var(--tw-text-opacity,1))}.text-primary-foreground{--tw-text-opacity:1;color:hsl(var(--primary-foreground)/var(--tw-text-opacity,1))}.text-secondary-foreground{--tw-text-opacity:1;color:hsl(var(--secondary-foreground)/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-primary{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--primary)/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.last\:border-0:last-child{border-width:0}.last\:border-r-0:last-child{border-right-width:0}.last\:pb-0:last-child{padding-bottom:0}.hover\:bg-muted\/40:hover{background-color:hsl(var(--muted)/.4)}.hover\:bg-muted\/50:hover{background-color:hsl(var(--muted)/.5)}.hover\:bg-primary:hover{--tw-bg-opacity:1;background-color:hsl(var(--primary)/var(--tw-bg-opacity,1))}.hover\:text-foreground:hover{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:hsl(var(--primary)/var(--tw-text-opacity,1))}.hover\:opacity-90:hover{opacity:.9}.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-primary\/30:hover{--tw-ring-color:hsl(var(--primary)/0.3)}.group:hover .group-hover\:opacity-100{opacity:1}.dark\:block:is(.dark *){display:block}.dark\:hidden:is(.dark *){display:none}.dark\:bg-primary\/10:is(.dark *){background-color:hsl(var(--primary)/.1)}.dark\:text-amber-400:is(.dark *){--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:w-48{width:12rem}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* === TripPlaner custom styles === */
/* TripPlaner design tokens — light / dark */

:root {
  --button-outline: rgba(0, 0, 0, 0.10);
  --badge-outline: rgba(0, 0, 0, 0.05);
  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);
  --background: 210 20% 98%;
  --foreground: 210 20% 12%;
  --border: 210 15% 90%;
  --card: 210 18% 96%;
  --card-foreground: 210 18% 14%;
  --card-border: 210 16% 92%;
  --sidebar: 210 16% 94%;
  --sidebar-foreground: 210 16% 16%;
  --sidebar-border: 210 14% 88%;
  --sidebar-primary: 211 85% 48%;
  --sidebar-primary-foreground: 211 85% 98%;
  --sidebar-accent: 210 14% 86%;
  --sidebar-accent-foreground: 210 14% 20%;
  --sidebar-ring: 211 85% 48%;
  --popover: 210 18% 92%;
  --popover-foreground: 210 18% 18%;
  --popover-border: 210 16% 86%;
  --primary: 211 85% 48%;
  --primary-foreground: 211 85% 98%;
  --secondary: 210 14% 88%;
  --secondary-foreground: 210 14% 22%;
  --muted: 210 12% 90%;
  --muted-foreground: 210 12% 38%;
  --accent: 210 16% 92%;
  --accent-foreground: 210 16% 24%;
  --destructive: 0 84% 52%;
  --destructive-foreground: 0 84% 98%;
  --input: 210 18% 78%;
  --ring: 211 85% 48%;
  --radius: 0.5rem;
  --font-sans: "Open Sans", sans-serif;
}

.dark {
  --button-outline: rgba(255, 255, 255, 0.10);
  --badge-outline: rgba(255, 255, 255, 0.05);
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);
  --background: 210 18% 8%;
  --foreground: 210 18% 92%;
  --border: 210 14% 18%;
  --card: 210 16% 10%;
  --card-foreground: 210 16% 90%;
  --card-border: 210 14% 14%;
  --sidebar: 210 14% 12%;
  --sidebar-foreground: 210 14% 88%;
  --sidebar-border: 210 12% 16%;
  --sidebar-primary: 211 82% 55%;
  --sidebar-primary-foreground: 211 82% 98%;
  --sidebar-accent: 210 12% 18%;
  --sidebar-accent-foreground: 210 12% 85%;
  --sidebar-ring: 211 82% 55%;
  --popover: 210 16% 14%;
  --popover-foreground: 210 16% 88%;
  --popover-border: 210 14% 20%;
  --primary: 211 82% 52%;
  --primary-foreground: 211 82% 98%;
  --secondary: 210 12% 20%;
  --secondary-foreground: 210 12% 86%;
  --muted: 210 10% 22%;
  --muted-foreground: 210 10% 68%;
  --accent: 210 14% 16%;
  --accent-foreground: 210 14% 84%;
  --destructive: 0 80% 48%;
  --destructive-foreground: 0 80% 98%;
  --input: 210 16% 30%;
  --ring: 211 82% 55%;
}

*,
*::before,
*::after {
  border-color: hsl(var(--border));
}

html {
  font-family: var(--font-sans);
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* Lucide / inline icons follow text color in both themes */
svg.lucide,
i[data-lucide] svg {
  color: inherit;
  stroke: currentColor;
}

/*
 * Clicks must hit the button/link, not the SVG. Lucide's createIcons() replaces
 * icon nodes; if the SVG is the event target, mid-click replacement drops the click.
 */
svg.lucide,
i[data-lucide] {
  pointer-events: none;
}

/* Inputs */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  color-scheme: inherit;
}

/* Let utility w-auto win over .select { width: 100% } (Depart after + time row) */
.select.w-auto {
  width: auto;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input.input-invalid,
.select.input-invalid,
.textarea.input-invalid,
.input[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.25);
}

.input.input-invalid:focus,
.select.input-invalid:focus,
.textarea.input-invalid:focus,
.input[aria-invalid="true"]:focus {
  border-color: hsl(var(--destructive));
  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.35);
}

/* Native date/time calendar & clock icons (WebKit/Blink) */
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="time"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
input[type="month"].input::-webkit-calendar-picker-indicator,
input[type="week"].input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
}
input[type="date"].input::-webkit-calendar-picker-indicator:hover,
input[type="time"].input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/*
 * Keep a dark base glyph, then invert in dark mode.
 * Relying only on color-scheme leaves the icon invisible in some Chromium builds.
 */
html.dark input[type="date"].input,
html.dark input[type="time"].input,
html.dark input[type="datetime-local"].input,
html.dark input[type="month"].input,
html.dark input[type="week"].input {
  color-scheme: light;
}
html.dark input[type="date"].input::-webkit-calendar-picker-indicator,
html.dark input[type="time"].input::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
html.dark input[type="month"].input::-webkit-calendar-picker-indicator,
html.dark input[type="week"].input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.25);
  opacity: 0.9;
}

/* Native select chevron stays readable */
.select {
  color-scheme: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
  appearance: none;
  -webkit-appearance: none;
}
html.dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%94a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  color: hsl(var(--foreground));
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-icon {
  padding: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(0.95);
}

.btn-outline {
  border-color: hsl(var(--border));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.btn-outline:hover:not(:disabled) {
  background-color: hsl(var(--accent));
}

.btn-ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
}

.btn-ghost:hover:not(:disabled) {
  background-color: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.btn-destructive:hover:not(:disabled) {
  filter: brightness(0.95);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: hsl(var(--foreground));
}

.field {
  margin-bottom: 0.75rem;
}

.field-hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* Station autocomplete — full names, not clipped to half-column */
.leg-change-slot {
  --change-accent: hsl(45, 90%, 42%);
  border: 1px dashed var(--change-accent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--change-accent) 22%, hsl(var(--muted) / 0.35));
  padding: 0.5rem 0.75rem;
  color: hsl(var(--foreground));
}
.leg-change-slot-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.journey-change-wait {
  --change-accent: hsl(45, 90%, 42%);
}
.journey-seg.journey-change-wait {
  background: color-mix(in srgb, var(--change-accent) 28%, hsl(var(--muted) / 0.55)) !important;
  border-left: 3px solid var(--change-accent);
  color: hsl(var(--foreground));
}
.journey-seg.journey-change-wait .text-xs.muted {
  color: hsl(var(--foreground) / 0.72);
}
.journey-change-wait--inline {
  background: color-mix(in srgb, var(--change-accent) 22%, transparent);
  border-left: 3px solid var(--change-accent);
  border-radius: 0.25rem;
  padding: 0.35rem 0.5rem;
  color: hsl(var(--foreground));
}
.input-sm {
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  height: 2rem;
}

.leg-insert-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 60;
  min-width: 8.5rem;
  padding: 0.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 8px 24px hsl(210 20% 10% / 0.18);
}
.journey-choice {
  border-color: hsl(var(--border));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.journey-exit-alts {
  border-top: 1px solid hsl(var(--border) / 0.7);
  padding-top: 0.5rem;
  margin-top: -0.15rem;
}

.journey-exit-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  width: 100%;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0.25rem;
}

.journey-exit-alt:hover .journey-exit-alt-name {
  text-decoration-thickness: 2px;
}

.journey-exit-alt-name {
  color: hsl(var(--primary));
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.journey-exit-alt-time {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.train-search-progress {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--foreground));
}

.overall-search-progress {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--foreground));
}

.overall-search-meter {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.overall-search-meter--timedout .overall-search-meter-fill {
  background: hsl(var(--destructive, 0 72% 51%));
}

.overall-search-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.overall-search-meter-track {
  height: 0.4rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

/* Overall search — modes + flight prefs: 3 columns, shared label/control baselines */
.overall-modes-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.35fr) minmax(10rem, 14rem) minmax(9rem, auto);
  align-items: start;
  column-gap: 1.75rem;
  row-gap: 0.75rem;
  width: 100%;
}

.overall-time-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}

.overall-time-mode {
  flex: 0 1 auto;
  width: auto;
  min-width: 8.5rem;
  max-width: 11rem;
}

.overall-time-clock {
  flex: 1 1 6rem;
  min-width: 0;
}

.overall-luggage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-height: 2.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: hsl(var(--foreground));
  user-select: none;
}

.overall-luggage-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.overall-luggage-toggle svg.lucide,
.overall-luggage-toggle i[data-lucide] {
  display: inline-block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
}

.overall-modes {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.overall-modes-controls {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.overall-modes-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  min-height: 2.25rem;
}

.overall-modes-hint {
  margin: 0;
}

.overall-mode-restrict-hint {
  margin: 0;
  line-height: 1.25;
}

/* Children participate in the parent 3-col grid; opacity applied on children */
.overall-flight-prefs {
  display: contents;
}

.overall-flight-prefs--disabled > .overall-flight-prefs-class,
.overall-flight-prefs--disabled > .overall-flight-prefs-luggage {
  opacity: 0.45;
}

.overall-flight-prefs-class,
.overall-flight-prefs-luggage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.overall-flight-prefs-class .select {
  width: 100%;
  min-width: 0;
}

.overall-flight-prefs-spacer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 640px) {
  .overall-modes-row {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

.overall-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: hsl(var(--foreground));
  user-select: none;
}

.overall-mode-toggle .checkbox {
  flex-shrink: 0;
  margin: 0;
}

/* Tailwind Preflight makes svg display:block — keep icon on the same row as text */
.overall-mode-toggle svg.lucide,
.overall-mode-toggle i[data-lucide] {
  display: inline-block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
}

.overall-mode-toggle span {
  white-space: nowrap;
}

.overall-search-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: hsl(var(--primary));
  transition: width 0.25s linear;
}

.overall-price-check-meter {
  height: 0.35rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  max-width: 16rem;
}

.overall-price-check-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: hsl(var(--primary));
  transition: width 0.25s linear;
}

.overall-price-pending {
  font-style: italic;
}

.overall-progress-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0.35rem;
  border-radius: 0.35rem;
  opacity: 0.72;
}

.overall-progress-row--running {
  opacity: 1;
  background: hsl(var(--background) / 0.55);
}

.overall-progress-row--done {
  opacity: 0.9;
}

.overall-progress-row--error {
  opacity: 1;
  color: hsl(0 70% 40%);
}

.overall-progress-row p.text-xs {
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.01em;
}

/* Admin live debug panel (New Trip) */
.fp-live-debug {
  position: sticky;
  top: 0;
  z-index: 40;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.06);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.35;
}

.fp-live-debug__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  background: hsl(var(--muted) / 0.55);
  border-bottom: 1px solid hsl(var(--border));
}

.fp-live-debug__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.fp-live-debug__stat {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.fp-live-debug__actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.fp-live-debug__log {
  max-height: 9.5rem;
  overflow: auto;
  padding: 0.35rem 0.5rem 0.5rem;
}

.fp-live-debug__empty {
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0;
}

.fp-live-debug__row {
  display: grid;
  grid-template-columns: 4.5rem 3.25rem minmax(7rem, 11rem) 1fr;
  gap: 0.35rem 0.5rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.55);
  align-items: baseline;
}

.fp-live-debug__row:last-child {
  border-bottom: 0;
}

.fp-live-debug__time {
  color: hsl(var(--muted-foreground));
}

.fp-live-debug__mode {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: hsl(var(--muted-foreground));
  font-size: 0.68rem;
}

.fp-live-debug__event {
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-live-debug__detail {
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-live-debug__row--ok .fp-live-debug__event {
  color: hsl(145, 55%, 32%);
}

.fp-live-debug__row--warn .fp-live-debug__event {
  color: hsl(32, 85%, 38%);
}

.fp-live-debug__row--err .fp-live-debug__event {
  color: hsl(0, 70%, 42%);
}

@media (max-width: 640px) {
  .fp-live-debug__row {
    grid-template-columns: 3.75rem 1fr;
    grid-template-areas:
      "time event"
      "mode detail";
  }
  .fp-live-debug__time { grid-area: time; }
  .fp-live-debug__mode { grid-area: mode; }
  .fp-live-debug__event { grid-area: event; }
  .fp-live-debug__detail { grid-area: detail; }
}

.dark .fp-live-debug__row--ok .fp-live-debug__event {
  color: hsl(145, 55%, 55%);
}
.dark .fp-live-debug__row--warn .fp-live-debug__event {
  color: hsl(38, 90%, 58%);
}
.dark .fp-live-debug__row--err .fp-live-debug__event {
  color: hsl(0, 75%, 65%);
}

.bus-faster-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(145 55% 35% / 0.45);
  background: hsl(145 45% 35% / 0.14);
  color: hsl(145 60% 28%);
}

.dark .bus-faster-hint {
  color: hsl(145 55% 72%);
  border-color: hsl(145 45% 45% / 0.5);
  background: hsl(145 40% 30% / 0.22);
}

.bus-faster-hint-btn {
  background: hsl(145 50% 32%);
  color: #fff;
  border: 0;
}
.bus-faster-hint-btn:hover {
  background: hsl(145 50% 28%);
}

.journey-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.journey-badge--shortest {
  background: hsl(190 70% 40% / 0.18);
  color: hsl(190 70% 28%);
}
.journey-badge--earliest,
.journey-badge--latestDeparture {
  background: hsl(220 75% 48% / 0.16);
  color: hsl(220 70% 36%);
}
.journey-badge--fewest {
  background: hsl(280 55% 45% / 0.16);
  color: hsl(280 50% 36%);
}
.journey-badge--direct {
  background: hsl(145 55% 38% / 0.18);
  color: hsl(145 55% 28%);
}
.journey-badge--shortestWalk {
  background: hsl(160 55% 38% / 0.18);
  color: hsl(160 55% 26%);
}
.journey-badge--longestWalk {
  background: hsl(15 70% 45% / 0.16);
  color: hsl(15 65% 32%);
}
.journey-badge--bus {
  background: hsl(25 80% 45% / 0.18);
  color: hsl(25 75% 32%);
}
.journey-badge--fastest {
  background: hsl(145 55% 38% / 0.18);
  color: hsl(145 55% 28%);
}
.journey-badge--fewestChanges {
  background: hsl(280 55% 45% / 0.16);
  color: hsl(280 50% 36%);
}
.journey-badge--cheapest {
  background: hsl(152 55% 38% / 0.18);
  color: hsl(152 60% 26%);
}
.journey-badge--favorite {
  background: hsl(38 92% 48% / 0.18);
  color: hsl(38 85% 28%);
  font-weight: 600;
}
.journey-badge--fastestDrive {
  background: hsl(145 55% 38% / 0.18);
  color: hsl(145 55% 28%);
}
.journey-badge--shortestDistance {
  background: hsl(200 60% 40% / 0.16);
  color: hsl(200 65% 30%);
}
.journey-badge--earliestFlightArrival,
.journey-badge--earliestTrainArrival,
.journey-badge--latestFlightDeparture,
.journey-badge--latestTrainDeparture {
  background: hsl(220 75% 48% / 0.16);
  color: hsl(220 70% 36%);
}
.journey-badge--shortestFlight,
.journey-badge--shortestTrainRide {
  background: hsl(190 70% 40% / 0.18);
  color: hsl(190 70% 28%);
}
.journey-badge--delta {
  background: hsl(0 72% 46% / 0.16);
  color: hsl(0 70% 38%);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.dark .journey-badge--shortest { color: hsl(190 70% 72%); }
.dark .journey-badge--earliest,
.dark .journey-badge--latestDeparture { color: hsl(220 75% 75%); }
.dark .journey-badge--fewest { color: hsl(280 60% 78%); }
.dark .journey-badge--fewestChanges { color: hsl(280 60% 78%); }
.dark .journey-badge--fastest { color: hsl(145 55% 72%); }
.dark .journey-badge--direct { color: hsl(145 55% 72%); }
.dark .journey-badge--shortestWalk { color: hsl(160 60% 72%); }
.dark .journey-badge--longestWalk { color: hsl(15 75% 72%); }
.dark .journey-badge--bus { color: hsl(25 80% 70%); }
.dark .journey-badge--cheapest { color: hsl(152 55% 72%); }
.dark .journey-badge--favorite {
  background: hsl(38 92% 48% / 0.22);
  color: hsl(38 90% 72%);
}
.dark .journey-badge--fastestDrive { color: hsl(145 55% 72%); }
.dark .journey-badge--shortestDistance { color: hsl(200 65% 72%); }
.dark .journey-badge--earliestFlightArrival,
.dark .journey-badge--earliestTrainArrival,
.dark .journey-badge--latestFlightDeparture,
.dark .journey-badge--latestTrainDeparture { color: hsl(220 75% 75%); }
.dark .journey-badge--shortestFlight,
.dark .journey-badge--shortestTrainRide { color: hsl(190 70% 72%); }
.dark .journey-badge--delta { color: hsl(0 80% 72%); }

.overall-results-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
.overall-viz {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1rem 1.1rem 1.15rem;
  background:
    linear-gradient(180deg, hsl(var(--muted) / 0.35), transparent 42%),
    hsl(var(--background));
}
.overall-viz-head {
  margin-bottom: 0.85rem;
}
.overall-viz-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.25rem;
}
.overall-viz-head-row h3 {
  margin: 0;
}
.overall-viz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}
.overall-viz-earlier,
.overall-viz-later {
  gap: 0.25rem;
}
.overall-viz-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: hsl(var(--foreground) / 0.85);
  cursor: pointer;
  user-select: none;
}
.overall-viz-toggle-input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}
.overall-duration-chart {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.overall-dur-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.35rem;
  cursor: pointer;
  color: inherit;
  border-radius: 0.35rem;
}
.overall-dur-row:hover {
  background: hsl(var(--muted) / 0.35);
}
.overall-dur-row--selected .overall-dur-label {
  color: hsl(var(--primary));
  font-weight: 600;
}
.overall-dur-row--time-warn {
  background: #fef3c7 !important;
  border-radius: 0.4rem;
}
.dark .overall-dur-row--time-warn {
  background: #78350f !important;
}
.overall-dur-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  min-width: 0;
  flex: 1 1 10rem;
}
.overall-dur-track {
  height: 1.55rem;
  border-radius: 999px;
  background: hsl(var(--muted) / 0.7);
  overflow: hidden;
  position: relative;
}
.overall-dur-bar-wrap {
  height: 100%;
  min-width: 2.5rem;
  transition: width 0.45s ease;
  border-radius: 999px;
  overflow: hidden;
}
.overall-dur-bar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.55rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.overall-dur-segs {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 999px;
  overflow: hidden;
}
.overall-dur-seg {
  min-width: 2px;
  height: 100%;
}
.overall-dur-seg--drive {
  background: linear-gradient(90deg, hsl(25 70% 40%), hsl(32 75% 48%));
}
.overall-dur-seg--pause {
  background: hsl(35 45% 38%);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    hsl(0 0% 100% / 0.22) 3px,
    hsl(0 0% 100% / 0.22) 6px
  );
}
.overall-dur-segs .overall-dur-bar-text {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.45);
  pointer-events: none;
}
.overall-dur-bar--train { background: linear-gradient(90deg, hsl(145 55% 32%), hsl(145 50% 42%)); }
.overall-dur-bar--drive { background: linear-gradient(90deg, hsl(25 70% 40%), hsl(32 75% 48%)); }
.overall-dur-bar--flight { background: linear-gradient(90deg, hsl(205 70% 40%), hsl(190 65% 45%)); }

.overall-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  padding-top: 1.15rem;
}
.overall-timeline-axis {
  position: absolute;
  top: 0;
  left: 2.25rem; /* mode icon column + gap — match track */
  right: 0;
  height: 1rem;
  pointer-events: none;
  z-index: 1;
}
.overall-timeline-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.overall-timeline-request-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.25rem; /* same offset as axis / track */
  right: 0;
  pointer-events: none;
  z-index: 3;
}
.overall-timeline-early-zone,
.overall-timeline-late-zone {
  position: absolute;
  top: 1.15rem;
  bottom: 0;
  left: 0;
  border-radius: 0.35rem;
  pointer-events: none;
}
.overall-timeline-early-zone {
  background: linear-gradient(
    90deg,
    hsl(25 85% 48% / 0.14),
    hsl(25 85% 48% / 0.05) 70%,
    transparent
  );
  border-right: 0;
}
.overall-timeline-late-zone {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(210 75% 52% / 0.14) 25%,
    hsl(210 75% 52% / 0.36)
  );
}
.dark .overall-timeline-early-zone {
  background: linear-gradient(
    90deg,
    hsl(25 90% 55% / 0.18),
    hsl(25 90% 55% / 0.06) 70%,
    transparent
  );
}
.dark .overall-timeline-late-zone {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(205 85% 60% / 0.16) 25%,
    hsl(205 85% 60% / 0.42)
  );
}
.overall-timeline-request {
  position: absolute;
  top: 0.15rem;
  bottom: 0;
  width: 0;
  transform: translateX(-50%);
  border-left: 2px dashed hsl(25 85% 48% / 0.95);
  box-shadow: 0 0 0 1px hsl(var(--background) / 0.35);
}
.overall-timeline-request--depart {
  border-left-color: hsl(25 85% 48% / 0.95);
}
.overall-timeline-request--arrive {
  border-left-color: hsl(210 75% 52% / 0.95);
}
.overall-timeline-request-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(25 85% 48% / 0.55);
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.18);
  z-index: 4;
}
.overall-timeline-request--depart .overall-timeline-request-label {
  color: hsl(25 75% 28%);
  border-color: hsl(25 85% 48% / 0.55);
  background: hsl(25 90% 96%);
}
.overall-timeline-request--arrive .overall-timeline-request-label {
  color: hsl(210 70% 30%);
  border-color: hsl(210 75% 52% / 0.55);
  background: hsl(210 85% 96%);
}
.dark .overall-timeline-request--depart .overall-timeline-request-label {
  color: hsl(30 95% 78%);
  background: hsl(25 35% 16%);
  border-color: hsl(25 85% 55% / 0.65);
}
.dark .overall-timeline-request--arrive .overall-timeline-request-label {
  color: hsl(205 90% 78%);
  background: hsl(210 35% 16%);
  border-color: hsl(205 75% 55% / 0.65);
}
.overall-tl-row--early .overall-tl-span {
  opacity: 0.72;
  outline: 1px dashed hsl(25 85% 48% / 0.55);
  outline-offset: 1px;
}
.overall-tl-row--late .overall-tl-span {
  opacity: 0.72;
  outline: 1px dashed hsl(210 75% 52% / 0.6);
  outline-offset: 1px;
}
.overall-option-door {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.overall-tl-row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.35rem;
  align-items: start;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  position: relative;
  z-index: 1;
}
.overall-tl-row--selected .overall-tl-mode {
  color: hsl(var(--primary));
}
.overall-tl-mode {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.85rem;
  color: hsl(var(--muted-foreground));
}
.overall-tl-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.overall-tl-track {
  position: relative;
  height: 1.85rem;
  border-radius: 0.4rem;
  background:
    repeating-linear-gradient(
      90deg,
      hsl(var(--border) / 0.55) 0,
      hsl(var(--border) / 0.55) 1px,
      transparent 1px,
      transparent 25%
    ),
    hsl(var(--muted) / 0.35);
  overflow: hidden;
}
.overall-tl-compare {
  font-size: 0.65rem;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0.15rem;
}
.overall-tl-span {
  position: absolute;
  top: 0.22rem;
  bottom: 0.22rem;
  border-radius: 0.35rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 2rem;
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.12);
}
.overall-tl-span--train { background: hsl(145 50% 38% / 0.92); }
.overall-tl-span--drive { background: hsl(28 70% 44% / 0.92); }
.overall-tl-span--flight { background: hsl(200 65% 42% / 0.2); padding: 0; }
.overall-tl-span-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 0.45rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 1px hsl(0 0% 0% / 0.35);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.overall-tl-span--flight .overall-tl-span-label {
  color: hsl(var(--foreground));
  text-shadow: none;
  mix-blend-mode: normal;
  z-index: 1;
}
.overall-tl-segs {
  display: flex;
  width: 100%;
  height: 100%;
}
.overall-tl-seg { min-width: 2px; }
.overall-tl-seg--travel { background: hsl(211 70% 48%); }
.overall-tl-seg--airport { background: hsl(270 45% 48%); }
.overall-tl-seg--flight { background: hsl(190 70% 40%); }
.overall-tl-seg--drive { background: hsl(28 70% 44%); }
.overall-tl-seg--car_access { background: hsl(28 85% 48%); }
.overall-tl-seg--pause { background: hsl(35 55% 55% / 0.85); background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, hsl(0 0% 100% / 0.2) 3px, hsl(0 0% 100% / 0.2) 6px); }
.overall-tl-seg--rest { background: hsl(250 35% 52% / 0.9); background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, hsl(0 0% 100% / 0.15) 3px, hsl(0 0% 100% / 0.15) 6px); }
.overall-tl-seg--border { background: hsl(25 80% 48% / 0.9); background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, hsl(0 0% 100% / 0.18) 2px, hsl(0 0% 100% / 0.18) 4px); }

.overall-flight-bar {
  display: flex;
  height: 1.35rem;
  border-radius: 0.35rem;
  overflow: hidden;
  margin-top: 0.15rem;
}
.overall-flight-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  padding: 0 0.2rem;
  overflow: hidden;
  white-space: nowrap;
}
.overall-flight-bar-seg--travel { background: hsl(211 70% 48%); }
.overall-flight-bar-seg--airport { background: hsl(270 45% 48%); }
.overall-flight-bar-seg--flight { background: hsl(190 70% 40%); }
.overall-flight-bar-seg--train,
.overall-flight-bar-seg--rail,
.overall-flight-bar-seg--bus,
.overall-flight-bar-seg--walk,
.overall-flight-bar-seg--transfer { background: hsl(211 70% 48%); }
.overall-flight-bar-seg--car_access { background: hsl(28 85% 48%); }
.overall-access-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.28rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.overall-access-mode-btn:hover { background: hsl(var(--muted) / 0.5); }
.overall-access-mode-btn--active-pt {
  border-color: hsl(211 70% 48%);
  background: hsl(211 70% 48% / 0.15);
  color: hsl(211 70% 40%);
}
.overall-access-mode-btn--car {
  border-color: hsl(28 70% 55% / 0.55);
  color: hsl(28 75% 38%);
}
.overall-access-mode-btn--active-car {
  border-color: hsl(28 85% 45%);
  background: hsl(28 85% 48% / 0.2);
  color: hsl(28 85% 32%);
}

.overall-seg-create-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.overall-seg-create-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.35rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
  padding: 0;
}

.overall-seg-create-plus:hover {
  background: hsl(var(--muted));
}

.journey-change-wait--inline .overall-seg-create-plus {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.75;
  border-color: color-mix(in srgb, var(--change-accent, hsl(var(--border))) 45%, hsl(var(--border)));
}
.journey-change-wait--inline .overall-seg-create-plus:hover {
  opacity: 1;
}

.overall-defined-rule {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: hsl(var(--muted-foreground));
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
}

.overall-defined-rule:hover {
  opacity: 0.85;
}

.overall-applied-rules-toggle {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  line-height: inherit;
}

.overall-applied-rules-caret {
  display: inline-block;
  width: 0.75rem;
  font-size: 0.65rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
}

.overall-defined-rule-row {
  margin: 0.1rem 0 0;
  line-height: 1.25;
  color: hsl(var(--muted-foreground));
}

/* Right-clickable stop / station / airport labels in itinerary */
.itinerary-station {
  cursor: context-menu;
  border-radius: 0.2rem;
  padding: 0 0.1rem;
  margin: 0 -0.1rem;
}
.itinerary-station:hover,
.itinerary-station:focus-visible {
  background: hsl(var(--muted) / 0.65);
  outline: none;
}

.station-ctx-menu {
  position: fixed;
  z-index: 90;
  min-width: 12.5rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.dark .station-ctx-menu {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.station-ctx-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.25;
  padding: 0.45rem 0.65rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.station-ctx-menu-item:hover,
.station-ctx-menu-item:focus-visible {
  background: hsl(var(--muted));
  outline: none;
}

.journey-food-break {
  border: 1px solid hsl(28 50% 40% / 0.45);
  background: hsl(28 45% 42% / 0.14);
  color: hsl(var(--foreground));
}
.dark .journey-food-break {
  border-color: hsl(28 50% 55% / 0.4);
  background: hsl(28 40% 35% / 0.22);
}

.food-break-modal {
  max-width: 22rem;
  width: calc(100% - 2rem);
  padding: 1.25rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.food-break-modal > h3 {
  margin-bottom: 0;
}
.food-break-modal > p.muted {
  margin-bottom: 0.25rem;
}
.food-break-modal .food-break-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.25rem;
}

.overall-book-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.overall-results {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .overall-results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .overall-results--n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .overall-results--n2 {
    grid-template-columns: repeat(2, minmax(0, 45%));
    justify-content: center;
  }
  .overall-results--n1 {
    grid-template-columns: minmax(0, 60%);
    justify-content: center;
  }
}
.overall-col-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.overall-col-earliest {
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.25;
}
.overall-col-earliest-main {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.25;
}
.overall-col-earliest-co2 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  line-height: 1.2;
}
.overall-option-times {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.2;
}
.overall-option-times > p {
  margin: 0;
  line-height: 1.2;
}
.overall-option-times .overall-econ-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
}
.overall-option-times .overall-econ-co2 {
  display: block;
}
.overall-earliest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  text-align: right;
  flex: 0 1 auto;
}
.overall-earliest-arrive {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.overall-earliest-door,
.overall-earliest-dur {
  font-size: 0.7rem;
  white-space: nowrap;
}
.overall-earliest-price {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.overall-earliest-co2 {
  font-size: 0.7rem;
  white-space: nowrap;
}
.overall-compare-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 1.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid hsl(var(--border));
}

/* Dual-baseline Arrive / Travel strip on option cards */
.overall-compare-strip {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  margin-bottom: 0.15rem;
  width: 100%;
  max-width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  background: hsl(var(--muted) / 0.45);
  border: 1px solid hsl(var(--border) / 0.7);
  font-size: 0.72rem;
  line-height: 1.25;
  box-sizing: border-box;
}
.overall-compare-strip-head,
.overall-compare-strip-row {
  display: grid;
  /* Fixed mins so +3h00m / +8h07m never paint over each other */
  grid-template-columns: 3.6rem minmax(4.75rem, 1fr) minmax(4.75rem, 1fr);
  column-gap: 0.65rem;
  align-items: center;
  width: 100%;
}
.overall-compare-strip-head {
  font-size: 0.62rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: lowercase;
  letter-spacing: 0.02em;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  margin-bottom: 0.05rem;
}
.overall-compare-strip-head span:nth-child(2),
.overall-compare-strip-head span:nth-child(3),
.overall-compare-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.overall-compare-metric {
  font-weight: 650;
  color: hsl(var(--foreground) / 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
}
.overall-compare-val {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overall-compare-val--worse {
  color: hsl(0 72% 42%);
}
.overall-compare-val--better {
  color: hsl(145 55% 32%);
}
.overall-compare-val--neutral {
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}
.dark .overall-compare-val--worse {
  color: hsl(0 80% 72%);
}
.dark .overall-compare-val--better {
  color: hsl(145 55% 62%);
}
.dark .overall-compare-val--neutral {
  color: hsl(var(--muted-foreground));
}

.overall-matrix {
  flex: 1 1 18rem;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.overall-matrix-head {
  margin-bottom: 0.75rem;
}
.overall-matrix-head h4 {
  margin: 0 0 0.2rem;
}
.overall-co2 {
  flex: 0 1 15.5rem;
  min-width: 12.5rem;
  max-width: 18rem;
}
.overall-co2-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.overall-co2-head h4 {
  margin: 0;
}
.overall-co2-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--foreground) / 0.35);
  color: hsl(var(--foreground) / 0.7);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.overall-co2-info:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground) / 0.6);
  background: hsl(var(--muted) / 0.45);
}
.overall-co2-sub {
  margin: 0 0 0.65rem;
}
.overall-co2-chart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.overall-co2-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.4rem 0.5rem;
  width: 100%;
  padding: 0.3rem 0.25rem;
  margin: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.overall-co2-row:hover {
  background: hsl(var(--muted) / 0.35);
}
.overall-co2-row--selected {
  background: hsl(var(--primary) / 0.08);
}
.overall-co2-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 0;
}
.overall-co2-track {
  height: 1.35rem;
  border-radius: 0.35rem;
  background: hsl(var(--muted) / 0.65);
  overflow: hidden;
}
.overall-co2-bar-wrap {
  height: 100%;
  min-width: 2.75rem;
  transition: width 0.45s ease;
}
.overall-co2-bar {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.4rem;
  border-radius: 0.35rem;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.overall-co2-bar--green {
  background: #16a34a;
}
.overall-co2-bar--yellow {
  background: #ca8a04;
  color: #111;
}
.overall-co2-bar--red {
  background: #dc2626;
}
.dark .overall-co2-bar--green {
  background: #22c55e;
  color: #052e16;
}
.dark .overall-co2-bar--yellow {
  background: #eab308;
  color: #1c1917;
}
.dark .overall-co2-bar--red {
  background: #f87171;
  color: #450a0a;
}
.overall-co2-bar-text {
  white-space: nowrap;
}
.overall-co2-mult {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.overall-co2-row--green .overall-co2-mult {
  color: #15803d;
}
.overall-co2-row--yellow .overall-co2-mult {
  color: #a16207;
}
.overall-co2-row--red .overall-co2-mult {
  color: #b91c1c;
}
.dark .overall-co2-row--green .overall-co2-mult {
  color: #4ade80;
}
.dark .overall-co2-row--yellow .overall-co2-mult {
  color: #facc15;
}
.dark .overall-co2-row--red .overall-co2-mult {
  color: #fca5a5;
}
.overall-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.overall-matrix-table {
  border-collapse: separate;
  border-spacing: 0.5rem;
  margin: 0;
}
.overall-matrix-table th,
.overall-matrix-table td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}
.overall-matrix-corner {
  min-width: 5.5rem;
}
.overall-matrix-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 9.25rem;
  max-width: 11rem;
  padding: 0.35rem 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.overall-matrix-mode-btn:hover .overall-matrix-mode-name {
  text-decoration: underline;
}
.overall-matrix-mode-name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
}
.overall-matrix-mode-meta {
  font-size: 0.65rem;
  line-height: 1.25;
}
.overall-matrix-empty {
  width: 148px;
  height: 128px;
}
.overall-matrix-diag {
  width: 148px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 2px solid hsl(var(--border));
  border-radius: 0.25rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
.overall-matrix-diag:hover {
  filter: brightness(1.05);
}
.overall-matrix-diag--priced {
  gap: 0.1rem;
  padding: 0.3rem 0.35rem;
}
.overall-matrix-diag-arrive,
.overall-matrix-diag-price {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.overall-matrix-diag--priced .overall-matrix-diag-arrive,
.overall-matrix-diag--priced .overall-matrix-diag-price {
  font-size: 1rem;
}
.overall-matrix-diag-dur,
.overall-matrix-diag-flight {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.95;
}
.overall-matrix-diag--priced .overall-matrix-diag-dur,
.overall-matrix-diag--priced .overall-matrix-diag-flight {
  font-size: 0.72rem;
}
.overall-matrix-diag-price {
  margin-top: 0.1rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.overall-matrix-cell {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.overall-matrix-cell:hover .overall-matrix-svg {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 1px;
}
.overall-matrix-svg {
  display: block;
  border: 1px solid hsl(var(--border));
  border-radius: 0.15rem;
}
.overall-matrix-svg-val {
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}
.overall-matrix-svg-lbl {
  font-size: 8px;
  font-weight: 700;
  font-family: inherit;
  opacity: 0.92;
}
.overall-matrix-svg-line {
  stroke: hsl(var(--foreground) / 0.45);
  stroke-width: 1.25;
}
.overall-econ-line {
  font-weight: 600;
  color: hsl(var(--foreground) / 0.85);
}
.overall-price-delta {
  margin-left: 0.35rem;
  font-weight: 700;
  color: #dc2626;
  white-space: nowrap;
}
.dark .overall-price-delta {
  color: #f87171;
}
.overall-option {
  overflow: hidden;
  border-color: hsl(var(--border));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.overall-option--selected {
  overflow: visible;
  position: relative;
  z-index: 2;
  border-color: hsl(var(--primary));
  box-shadow: inset 3px 0 0 hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
}
.overall-option-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
}
.overall-option-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Continue journey (Overall + Build legs) */
.overall-journey {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: hsl(var(--muted) / 0.2);
}
.overall-journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.overall-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.overall-journey-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
}
.overall-journey-role {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: hsl(var(--muted-foreground));
  min-width: 3.5rem;
}
.overall-journey-route {
  flex: 1;
  min-width: 0;
}
.overall-journey-mode {
  flex-shrink: 0;
  text-transform: capitalize;
}
.overall-journey-remove {
  flex-shrink: 0;
  padding: 0.15rem;
}
.continue-journey-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--background));
}
.continue-journey-bar-main {
  min-width: 12rem;
  flex: 1;
}
.continue-journey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}
.overall-continue-menu,
.overall-return-menu {
  min-width: 14rem;
  max-width: min(22rem, 90vw);
  max-height: 16rem;
  overflow-y: auto;
}
.leg-insert-menu-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: hsl(var(--border));
}
.legs-return-place-group + .legs-return-place-group {
  border-top: 1px solid hsl(var(--border));
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}
.overall-option--time-warn {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}
.overall-option--time-warn > button,
.overall-option--time-warn > .overall-option-summary {
  background: #fef3c7;
}
.overall-option--time-warn.overall-option--selected {
  background: #fde68a !important;
  box-shadow: inset 3px 0 0 #f59e0b;
}
.overall-option--time-warn.overall-option--selected > button,
.overall-option--time-warn.overall-option--selected > .overall-option-summary {
  background: #fde68a;
}
.overall-option--time-warn .hover\:bg-muted\/50:hover {
  background: #fde68a !important;
}
.airline-logo {
  /* Content stays 1.5rem; +2px pad each side expands the tile background only */
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 2px;
  object-fit: contain;
  border-radius: 0.3rem;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid hsl(var(--border));
  /* Clip any mark fill to the rounded tile (kills white corner bleed) */
  overflow: hidden;
}
/* Local AF mark is full-bleed navy — match pad/underlay so corners stay blue */
.airline-logo[src*="/airlines/AF."] {
  background: #002157;
}
.flight-option-card {
  position: relative;
}
.flight-loyalty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.14rem 0.5rem 0.14rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.22);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
}
.flight-loyalty-badge__mark {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: transparent;
}
/* Inline next to airline / flight number — never over door-to-door or controls */
.flight-loyalty-badge--inline {
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
  max-width: 100%;
}
/* Generic metal tiers */
.flight-loyalty-badge--explorer {
  color: #0b4f7a;
  background: linear-gradient(180deg, #e8f6fc 0%, #cfeaf6 100%);
  border-color: #7eb8d4;
}
.flight-loyalty-badge--bronze {
  color: #7a3e12;
  background: linear-gradient(180deg, #f8e7d4 0%, #e8c49a 100%);
  border-color: #c4844a;
}
.flight-loyalty-badge--silver {
  color: #3f4a57;
  background: linear-gradient(180deg, #f3f5f7 0%, #cfd6de 100%);
  border-color: #9aa5b1;
}
.flight-loyalty-badge--gold {
  color: #7a5408;
  background: linear-gradient(180deg, #fff4d1 0%, #e6c56a 100%);
  border-color: #c9a227;
}
.flight-loyalty-badge--platinum {
  color: #1e293b;
  background: linear-gradient(135deg, #f8fafc 0%, #dbe4f0 45%, #b8c7d9 100%);
  border-color: #8fa0b5;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 2px rgb(15 23 42 / 0.08);
}
.flight-loyalty-badge--diamond,
.flight-loyalty-badge--ultimate {
  color: #f8fafc;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: #64748b;
}
.flight-loyalty-badge--ultimate {
  border-color: #c9a227;
  box-shadow: inset 0 0 0 1px rgb(201 162 39 / 0.35);
}
/* Flying Blue — cool blues / platinum sheen */
.flight-loyalty-badge--flyingblue.flight-loyalty-badge--explorer {
  color: #003d6b;
  background: linear-gradient(180deg, #e6f4fb 0%, #b9dff0 100%);
  border-color: #4fa3c7;
}
.flight-loyalty-badge--flyingblue.flight-loyalty-badge--silver {
  color: #2c3b4e;
  background: linear-gradient(180deg, #eef3f8 0%, #b7c4d4 100%);
  border-color: #7f93a8;
}
.flight-loyalty-badge--flyingblue.flight-loyalty-badge--gold {
  color: #6b4e08;
  background: linear-gradient(180deg, #fff6d8 0%, #dfb84a 100%);
  border-color: #c4a028;
}
.flight-loyalty-badge--flyingblue.flight-loyalty-badge--platinum {
  color: #14233a;
  background: linear-gradient(135deg, #ffffff 0%, #e4eef8 40%, #9eb6d4 100%);
  border-color: #6f8db0;
}
.flight-loyalty-badge--flyingblue.flight-loyalty-badge--ultimate {
  color: #f8fafc;
  background: linear-gradient(135deg, #002157 0%, #0b1a33 100%);
  border-color: #c9a227;
}
/* Miles & More — LH yellow / senator red / HON black-gold */
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--silver,
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--ft {
  color: #05164d;
  background: linear-gradient(180deg, #fff7d6 0%, #f9ba00 100%);
  border-color: #d4a000;
}
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--senator,
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--gold {
  color: #fff;
  background: linear-gradient(180deg, #e30613 0%, #b10510 100%);
  border-color: #8f040d;
}
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--hon,
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--diamond,
.flight-loyalty-badge--milesandmore.flight-loyalty-badge--ultimate {
  color: #f9ba00;
  background: linear-gradient(135deg, #1a1a1a 0%, #05164d 100%);
  border-color: #f9ba00;
}
.flight-change-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.35);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.flight-change-bar:hover {
  background: hsl(var(--muted) / 0.55);
}
.flight-airport-blocks {
  margin-top: 0.35rem;
}
.overall-flight-bar--compact {
  min-height: 1.35rem;
  margin-bottom: 0.35rem;
}
.flight-airport-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.flight-airport-block-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
}
.tp-badge-mark--airline-af {
  background: #002157;
  color: #fff;
}
.tp-badge-mark--airline-lh {
  background: #05164d;
  color: #f9ba00;
}
.journey-badge.journey-badge--too_early,
.journey-badge.journey-badge--too_late,
.journey-badge.journey-badge--tight_change {
  color: #fff !important;
  background: #ea580c !important;
  border: 1px solid #c2410c !important;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}
.dark .overall-option--time-warn,
.dark .overall-option--time-warn > button,
.dark .overall-option--time-warn > .overall-option-summary {
  background: #78350f !important;
  border-color: #f59e0b !important;
}
.dark .journey-badge.journey-badge--too_early,
.dark .journey-badge.journey-badge--too_late {
  color: #fff !important;
  background: #ea580c !important;
  border-color: #fb923c !important;
}
.overall-flight-bar-seg--buffer { background: hsl(45 70% 45%); }
.overall-flight-bar-seg--passport { background: hsl(0 55% 45%); }
.overall-flight-bar-seg--baggage { background: hsl(25 60% 42%); }
.overall-option-detail {
  background: hsl(var(--muted) / 0.25);
}
.overall-option .rotate-180 {
  transform: rotate(180deg);
}
.system-rule-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.system-rule-lines li {
  font-size: 0.75rem;
  line-height: 1.35;
  color: hsl(var(--foreground) / 0.85);
  padding-left: 0.55rem;
  border-left: 2px solid hsl(var(--border));
}
.system-rule-details {
  padding-top: 0.35rem;
  border-top: 1px solid hsl(var(--border));
}
.overall-flight-segs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.overall-flight-segs li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.overall-flight-seg-title {
  font-weight: 500;
}

/* Transport operator / product logos (text badges) */
.tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tp-badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  height: auto;
  padding: 0 0.28rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #555;
  white-space: nowrap;
}
.tp-badge-mark--round {
  border-radius: 999px;
  min-width: 1.4rem;
  min-height: 1.4rem;
}
.tp-badge-mark--square {
  border-radius: 0.15rem;
}
/* TfL-style roundel: hollow red ring + navy bar, thin white inner/outer edges */
.tp-badge-mark--roundel {
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  min-height: 1.35rem;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0.3rem solid #DC241F;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  font-size: 0;
  color: transparent;
  /* White outer stroke + white inner edge on the red ring */
  box-shadow:
    0 0 0 1.5px #fff,
    inset 0 0 0 1.25px #fff;
}
.tp-badge-mark--roundel::after {
  content: '';
  position: absolute;
  /* Rem (not %) so the bar spans past the outer ring — % is of the tiny inner box after the thick border */
  left: 50%;
  top: 50%;
  width: 1.95rem;
  height: 0.34rem;
  transform: translate(-50%, -50%);
  background: #0019A8;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #fff;
  z-index: 1;
}
.tp-badge--underground {
  gap: 0.55rem;
  overflow: visible;
}
.tp-badge--underground .tp-badge-mark {
  background: transparent;
  border-color: #DC241F;
  overflow: visible;
}
.tp-badge--underground .tp-badge-text {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.45rem;
  border-radius: 0.3rem;
  line-height: 1.15;
}
.tp-badge-mark--bus-line {
  border-radius: 0.35rem;
  min-width: 1.6rem;
  min-height: 1.35rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}
.tp-badge-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
}
.tp-badge-text--solo {
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Long-distance / high-speed */
.tp-badge--ice .tp-badge-mark { background: #e30613; }
.tp-badge--ic .tp-badge-mark { background: #e30613; }
.tp-badge--ec .tp-badge-mark { background: #e30613; }
.tp-badge--rj .tp-badge-mark { background: #c8102e; }
.tp-badge--railjet .tp-badge-mark { background: #c8102e; }
.tp-badge--tgv .tp-badge-mark { background: #003366; }
.tp-badge--ouigo .tp-badge-mark { background: #5b2d8e; }
.tp-badge--thalys .tp-badge-mark,
.tp-badge--eurostar .tp-badge-mark { background: #1e1e1e; }
.tp-badge--lyria .tp-badge-mark { background: #e30613; }
.tp-badge--ave .tp-badge-mark { background: #a50034; }
.tp-badge--italo .tp-badge-mark { background: #e30613; }
.tp-badge--frecciarossa .tp-badge-mark { background: #c8102e; }
.tp-badge--nightjet .tp-badge-mark,
.tp-badge--nj .tp-badge-mark { background: #1a1a4c; }
.tp-badge--re .tp-badge-mark { background: #c1002a; }
.tp-badge--rb .tp-badge-mark { background: #c1002a; }
.tp-badge--ire .tp-badge-mark { background: #c1002a; }
.tp-badge--me .tp-badge-mark { background: #00a3e0; }
.tp-badge--flirt .tp-badge-mark { background: #00a3e0; }

/* Suburban / metro / tram / bus */
.tp-badge--sbahn .tp-badge-mark {
  background: #008d4f;
  border-radius: 999px;
}
.tp-badge--rer .tp-badge-mark { background: #6e2c6b; border-radius: 999px; }
.tp-badge--rer-a .tp-badge-mark { background: #e3051c; }
.tp-badge--rer-b .tp-badge-mark { background: #5291ce; }
.tp-badge--rer-c .tp-badge-mark { background: #ffcc30; color: #1a1a1a; }
.tp-badge--rer-d .tp-badge-mark { background: #00814f; }
.tp-badge--rer-e .tp-badge-mark { background: #b90845; }
.tp-badge--transilien .tp-badge-mark { background: #8d5eb7; border-radius: 999px; }
.tp-badge--ter .tp-badge-mark { background: #009aac; }
.tp-badge--ubahn .tp-badge-mark {
  background: #0065b0;
  border-radius: 0.15rem;
}
.tp-badge--metro .tp-badge-mark { background: #0065b0; border-radius: 0.15rem; }
.tp-badge--tram .tp-badge-mark { background: #d81e05; border-radius: 999px; }
.tp-badge--bus .tp-badge-mark { background: #f59c00; color: #1a1a1a; }
.tp-badge--bus .tp-badge-text { color: inherit; opacity: 0.85; font-weight: 600; }
.tp-badge--walk .tp-badge-mark {
  background: #64748b;
  color: #fff;
  padding: 0;
  width: 1.4rem;
  min-width: 1.4rem;
}
.tp-badge--walk .tp-badge-mark svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Munich S-Bahn line colors */
.tp-badge--s1 .tp-badge-mark { background: #16c03c; }
.tp-badge--s2 .tp-badge-mark { background: #76b82a; }
.tp-badge--s3 .tp-badge-mark { background: #7b2077; }
.tp-badge--s4 .tp-badge-mark { background: #ee1c25; }
.tp-badge--s6 .tp-badge-mark { background: #008c95; }
.tp-badge--s7 .tp-badge-mark { background: #933e98; }
.tp-badge--s8 .tp-badge-mark { background: #f0ab00; color: #1a1a1a; }
.tp-badge--s20 .tp-badge-mark { background: #f0ab00; color: #1a1a1a; }

/* Munich U-Bahn line colors */
.tp-badge--u1 .tp-badge-mark { background: #52822f; }
.tp-badge--u2 .tp-badge-mark { background: #c40222; }
.tp-badge--u3 .tp-badge-mark { background: #ec6a27; }
.tp-badge--u4 .tp-badge-mark { background: #00ab85; }
.tp-badge--u5 .tp-badge-mark { background: #bc7a00; }
.tp-badge--u6 .tp-badge-mark { background: #0065b0; }
.tp-badge--u7 .tp-badge-mark { background: #52822f; }
.tp-badge--u8 .tp-badge-mark { background: #c40222; }

/* Berlin U-Bahn (common) */
.tp-badge--u9 .tp-badge-mark { background: #f67732; }

.segment-edit-panel {
  margin-top: 0.35rem;
  padding: 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  display: grid;
  gap: 0.5rem;
}
.segment-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.in-place-alt {
  margin-top: 0.5rem;
  padding: 0.6rem;
  border-radius: 0.375rem;
  border: 1px dashed hsl(var(--primary) / 0.45);
  background: hsl(var(--primary) / 0.06);
  display: grid;
  gap: 0.5rem;
}
.in-place-alt-choice {
  width: 100%;
  text-align: left;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  padding: 0.5rem 0.65rem;
  background: hsl(var(--background));
  cursor: pointer;
}
.in-place-alt-choice:hover {
  background: hsl(var(--muted) / 0.5);
}
.in-place-alt-choice--current {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.25);
}
.segment-pending-replace {
  opacity: 0.45;
  pointer-events: none;
}

.leg-insert-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.leg-insert-menu-item:hover,
.leg-insert-menu-item:focus-visible {
  background: hsl(var(--accent));
  outline: none;
}

.station-suggest {
  position: absolute;
  z-index: 80;
  left: 0;
  top: calc(100% + 0.25rem);
  min-width: 100%;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: 16rem;
  overflow: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  box-shadow: 0 8px 24px hsl(var(--foreground) / 0.08);
}

/* Raise the owning field while suggestions are open / focused so the panel
   stacks above following siblings (date, modes, actions) in the form. */
.field.relative:focus-within,
.field.relative:has(.station-suggest:not([style*="display: none"])) {
  z-index: 50;
}

.station-suggest[style*="display: none"],
.leg-insert-menu[style*="display: none"] {
  pointer-events: none !important;
}
.station-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: hsl(var(--foreground));
  background: transparent;
  border: 0;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  cursor: pointer;
}
.station-suggest-name {
  font-weight: 500;
}
.station-suggest-item--city .station-suggest-name {
  color: hsl(var(--primary));
}
.station-suggest-item--city {
  background: hsl(var(--primary) / 0.06);
}
.station-suggest-item--address {
  background: hsl(25 70% 45% / 0.06);
}
.station-suggest-item--saved {
  background: hsl(160 50% 40% / 0.14);
  border-left: 3px solid hsl(160 50% 36%);
}
.dark .station-suggest-item--saved {
  background: hsl(160 45% 30% / 0.28);
  border-left-color: hsl(160 55% 55%);
}
.station-suggest-item--saved .station-suggest-kind {
  background: hsl(160 50% 38% / 0.2);
  color: hsl(160 45% 28%);
}
.dark .station-suggest-item--saved .station-suggest-kind {
  color: hsl(160 50% 72%);
}
.station-suggest-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.station-suggest-kind {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0.1rem 0.35rem;
  border-radius: 0.2rem;
  background: hsl(var(--muted) / 0.6);
}
.station-suggest-detail {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}
.station-suggest-item:last-child {
  border-bottom: 0;
}
.station-suggest-item:hover,
.station-suggest-item:focus-visible,
.station-suggest-item--active {
  background: hsl(var(--muted) / 0.55);
  outline: none;
}

/* Connection-rule editor: keep hub suggestions in flow so the scrollable modal does not clip them */
[data-connection-hub-suggest].station-suggest {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  z-index: 5;
}

.rule-station-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.45);
  font-size: 0.75rem;
  line-height: 1.2;
  color: hsl(var(--foreground));
}
.rule-station-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-station-chip:hover {
  background: hsl(var(--muted) / 0.75);
}

/* Card */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--card-border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.03);
}

.card-body {
  padding: 1.25rem;
}

.card-header {
  padding: 1.25rem 1.25rem 0;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.card-desc {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0 0;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  white-space: nowrap;
}

.badge-outline {
  background: transparent;
}

.badge-primary {
  background-color: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-color: transparent;
}

.badge-success {
  background-color: hsl(142 70% 40% / 0.12);
  color: hsl(142 70% 32%);
  border-color: transparent;
}

.badge-warning {
  background-color: hsl(45 90% 45% / 0.15);
  color: hsl(40 80% 30%);
  border-color: transparent;
}

.dark .badge-warning {
  color: hsl(45 90% 70%);
}

.badge-danger {
  background-color: hsl(var(--destructive) / 0.12);
  color: hsl(var(--destructive));
  border-color: transparent;
}

/* Tabs */
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius);
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.tab:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--accent));
}

.tab-active {
  color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.1);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.tabs-secondary {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.tabs-secondary .tab {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Sidebar */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground));
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background-color: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

.sidebar-link-active {
  background-color: hsl(var(--sidebar-primary) / 0.12);
  color: hsl(var(--sidebar-primary));
}

.sidebar-link-active:hover {
  background-color: hsl(var(--sidebar-primary) / 0.16);
  color: hsl(var(--sidebar-primary));
}

.fb-nav-badge {
  margin-left: auto;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  flex-shrink: 0;
}

.fb-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.fb-unread-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background-color: hsl(var(--destructive));
  flex-shrink: 0;
}

.fb-row--unread {
  box-shadow: inset 3px 0 0 hsl(var(--destructive));
}

/* Layout helpers */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 15rem;
  flex-shrink: 0;
  background-color: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
}

.app-content {
  flex: 1;
  padding: 1.5rem;
  min-width: 0;
}

/* Admin: use available main width on HD; stay full-bleed on small screens */
.admin-page {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}
@media (min-width: 768px) {
  .admin-page {
    max-width: 56rem; /* ~896px — comfortable tablet */
  }
}
@media (min-width: 1024px) {
  .admin-page {
    max-width: 72rem; /* ~1152px — laptop */
  }
}
@media (min-width: 1280px) {
  .admin-page {
    max-width: 88rem; /* ~1408px — HD with sidebar */
  }
}
@media (min-width: 1536px) {
  .admin-page {
    max-width: 100rem; /* ~1600px — large desktop */
  }
}

.admin-tickets-col-check { width: 2.25rem; }
.admin-tickets-col-num { width: 3.25rem; }
.admin-tickets-col-type { width: 7rem; }
.admin-tickets-col-status { width: 10.5rem; }
.admin-tickets-col-user { width: 11rem; }
.admin-tickets-col-when { width: 8.5rem; }

.admin-tickets-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.35);
}

.admin-tickets-wrap {
  width: 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .admin-tickets-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tickets-wrap table {
    min-width: 36rem;
  }
}

.table-fixed {
  table-layout: fixed;
}

/* Feedback ticket type + status pills */
.fb-type,
.fb-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.fb-type {
  text-transform: capitalize;
}
.fb-type--bug {
  background: hsl(350 80% 50% / 0.14);
  color: hsl(350 70% 38%);
  border-color: hsl(350 80% 50% / 0.35);
}
.dark .fb-type--bug {
  color: hsl(350 90% 78%);
}
.fb-type--recommendation {
  background: hsl(262 70% 50% / 0.14);
  color: hsl(262 55% 38%);
  border-color: hsl(262 70% 50% / 0.35);
}
.dark .fb-type--recommendation {
  color: hsl(262 85% 80%);
}
.fb-status--new {
  background: hsl(199 89% 48% / 0.18);
  color: hsl(199 90% 28%);
  border-color: hsl(199 89% 48% / 0.45);
}
.dark .fb-status--new {
  color: hsl(199 95% 82%);
}
.fb-status--instruct {
  background: hsl(330 72% 48% / 0.16);
  color: hsl(330 75% 32%);
  border-color: hsl(330 72% 48% / 0.42);
}
.dark .fb-status--instruct {
  color: hsl(330 85% 82%);
}
.fb-status--working {
  background: hsl(38 92% 50% / 0.18);
  color: hsl(32 90% 28%);
  border-color: hsl(38 92% 50% / 0.45);
}
.dark .fb-status--working {
  color: hsl(43 95% 78%);
}
.fb-status--done {
  background: hsl(152 60% 40% / 0.18);
  color: hsl(152 65% 26%);
  border-color: hsl(152 60% 40% / 0.45);
}
.dark .fb-status--done {
  color: hsl(152 70% 75%);
}
.fb-status--rejected {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* [hidden] must beat display:flex on .modal-backdrop or the overlay stays forever */
.modal-backdrop[hidden] {
  display: none !important;
  visibility: hidden;
}

/* Never let a hidden/transitioning backdrop swallow clicks */
.modal-backdrop[style*="display: none"],
.modal-backdrop[aria-hidden="true"],
.modal-backdrop[hidden] {
  pointer-events: none !important;
  visibility: hidden;
}

.modal {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-lg {
  max-width: 42rem;
}

.modal-sm {
  max-width: 24rem;
}

/* Address book add/edit + trip “save address” — room for long lines */
.modal-address {
  max-width: 36rem;
  width: min(100%, 36rem);
}

.modal-address .address-form-address {
  min-height: 5.5rem;
  width: 100%;
  resize: vertical;
  line-height: 1.45;
}

.modal-address .address-book-save-preview {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

@media (max-width: 480px) {
  .modal-address {
    max-width: 100%;
    width: 100%;
  }

  .modal-address .address-form-address {
    min-height: 4.5rem;
  }
}

.address-book-add-link {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  line-height: 1.25;
  color: hsl(var(--primary));
  cursor: pointer;
  text-align: left;
}

.address-book-add-link:hover {
  text-decoration: underline;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
}

.modal-body {
  padding: 1.25rem 1.35rem 1.35rem;
}

.modal-body > p.muted:first-child,
.modal-body > p.text-xs.muted:first-child {
  margin-bottom: 0.35rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.1rem 1.35rem 1.35rem;
  border-top: 1px solid hsl(var(--border));
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 0.875rem;
  animation: toast-in 0.2s ease;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.125rem 0 0;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.toast-close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / 0.6);
}

.toast-destructive {
  border-color: hsl(var(--destructive) / 0.4);
}

.toast-destructive .toast-title {
  color: hsl(var(--destructive));
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alert */
.alert {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background: hsl(var(--muted) / 0.4);
}

.alert-destructive {
  border-color: hsl(var(--destructive) / 0.35);
  background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive));
}

.alert-success {
  border-color: hsl(142 70% 40% / 0.35);
  background: hsl(142 70% 40% / 0.08);
}

/* Misc */
.separator {
  height: 1px;
  background: hsl(var(--border));
  margin: 1rem 0;
}

.checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--primary));
  cursor: pointer;
}

.switch {
  appearance: none;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 999px;
  background: hsl(var(--input));
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  vertical-align: middle;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: white;
  transition: transform 0.15s;
}

.switch:checked {
  background: hsl(var(--primary));
}

.switch:checked::after {
  transform: translateX(1.1rem);
}

.muted {
  color: hsl(var(--muted-foreground));
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid hsl(var(--sidebar-border));
  }
}

[x-cloak] {
  display: none !important;
}

/* Trip day calendar */
.trip-day-card {
  overflow: hidden;
}

.trip-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
}

.trip-day-grid {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  --ppm: 1px;
}

.trip-day-hours {
  position: relative;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.2);
}

.trip-hour-row {
  position: relative;
  box-sizing: border-box;
}

.trip-hour-label {
  position: absolute;
  top: -0.55em;
  right: 0.4rem;
  font-size: 0.65rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.trip-day-canvas {
  position: relative;
  min-height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent calc(30 * var(--ppm) - 1px),
      hsl(var(--border) / 0.4) calc(30 * var(--ppm) - 1px),
      hsl(var(--border) / 0.4) calc(30 * var(--ppm))
    );
}

.trip-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid hsl(var(--border));
  pointer-events: none;
  z-index: 0;
}

.trip-hour-line-end {
  /* end boundary */
}

.trip-cal-event {
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  border-radius: 0.4rem;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 1;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.trip-cal-event--light {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/*
 * "Change at X" events: a flat, saturated fill reads as an alarm. Tone it down to a
 * low-opacity tint over the card background with a solid accent left border instead —
 * still visible, still hints at the underlying risk/line color, less flashy.
 */
.trip-cal-event--change {
  background: color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 32%, hsl(var(--card))) !important;
  border: 1px solid color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 55%, transparent);
  border-left: 3px solid var(--event-color, hsl(45 90% 42%));
  color: hsl(var(--foreground)) !important;
}

.trip-cal-event--change:hover {
  background: color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 42%, hsl(var(--card))) !important;
}

.trip-cal-event:hover {
  z-index: 2;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.trip-cal-event-inner {
  height: 100%;
  padding: 5px 0.45rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  overflow: hidden;
}

.trip-cal-event-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.trip-cal-event-title {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.trip-cal-event-time,
.trip-cal-event-dur {
  font-size: 0.65rem;
  opacity: 0.92;
  margin: 0;
  line-height: 1.2;
}

.trip-cal-event--compact .trip-cal-event-inner {
  /* Keep ~5px pad; vertically center the label in short bars. */
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.trip-cal-event-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.trip-cal-event-inline {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  opacity: 0.98;
}

.trip-cal-event-actions {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
  opacity: 0.85;
  position: relative;
  z-index: 3;
}

.trip-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.3rem;
  border: 0;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 3;
}

.trip-cal-btn:hover {
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  .trip-day-grid {
    grid-template-columns: 2.75rem 1fr;
  }

  .trip-cal-event {
    left: 0.3rem;
    right: 0.3rem;
  }

  .trip-cal-event-title {
    font-size: 0.7rem;
  }
}

/* App calendar — week view */
.cal-week-card,
.cal-day-card {
  overflow: visible;
}

.cal-week-grid {
  display: grid;
  grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr));
  grid-template-rows: auto auto;
  --ppm: 1px;
  --week-h: auto;
}

.cal-week-corner {
  border-bottom: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.2);
}

.cal-week-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
  cursor: pointer;
}

.cal-week-dayhead:last-child {
  border-right: none;
}

.cal-week-dayhead:hover {
  background: hsl(var(--muted) / 0.45);
}

.cal-week-dayhead-today {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.cal-week-body {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  grid-column: 1 / -1;
  min-height: var(--week-h);
}

.cal-week-hours {
  position: relative;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.15);
}

.cal-week-hour {
  position: relative;
  box-sizing: border-box;
}

.cal-week-hour span {
  position: absolute;
  top: 0;
  right: 0.3rem;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
  background: hsl(var(--card));
  padding: 0 0.15rem;
  z-index: 1;
}

.cal-week-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 100%;
}

.cal-week-col {
  position: relative;
  height: 100%;
  border-right: 1px solid hsl(var(--border));
  background:
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent calc(30 * var(--ppm) - 1px),
      hsl(var(--border) / 0.35) calc(30 * var(--ppm) - 1px),
      hsl(var(--border) / 0.35) calc(30 * var(--ppm))
    );
}

.cal-week-col:last-child {
  border-right: none;
}

.cal-week-hline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid hsl(var(--border));
  pointer-events: none;
  z-index: 0;
}

.cal-week-event {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  z-index: 1;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  text-align: left;
  padding: 0.25rem 0.35rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cal-week-event:hover {
  filter: brightness(1.08);
  z-index: 2;
}

.cal-week-event-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cal-week-event-time {
  display: block;
  font-size: 0.62rem;
  opacity: 0.9;
  line-height: 1.2;
  margin-top: 0.1rem;
}

.cal-week-event--compact {
  display: flex;
  align-items: center;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.cal-week-event--compact .cal-week-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same de-emphasized treatment as .trip-cal-event--change, for the week grid. */
.cal-week-event--change {
  background: color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 32%, hsl(var(--card))) !important;
  border: 1px solid color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 55%, transparent);
  border-left: 3px solid var(--event-color, hsl(45 90% 42%));
  color: hsl(var(--foreground)) !important;
}

.cal-week-event--change:hover {
  background: color-mix(in srgb, var(--event-color, hsl(45 90% 42%)) 42%, hsl(var(--card))) !important;
}

@media (max-width: 800px) {
  .cal-week-grid {
    display: block;
    overflow-x: auto;
  }

  .cal-week-grid > .cal-week-corner,
  .cal-week-grid > .cal-week-dayhead {
    display: none;
  }

  .cal-week-body {
    min-width: 44rem;
    grid-template-columns: 3rem 1fr;
  }
}

/* Trip route maps (Google Maps JS) */
.trip-map {
  width: 100%;
  margin-top: 0.75rem;
  position: relative;
  /*
   * Isolate ONLY the host from html.dark { color-scheme: dark }.
   * Do NOT push color-scheme onto .gm-style / internal Maps nodes — that has
   * blanked tiles (controls+logo show, gray canvas) on recent Maps builds.
   */
  color-scheme: light;
}
.trip-map-canvas {
  width: 100%;
  height: 14rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  /* Placeholder until tiles paint; Map options also force light/raster. */
  background: #e8eaed;
  color-scheme: light;
}
.trip-map--lg .trip-map-canvas {
  height: 18rem;
}
.trip-map-ready .trip-map-canvas {
  background: #e8eaed;
}
.trip-map-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.trip-map-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.trip-map-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  min-height: 6rem;
}
.trip-map-error .trip-map-msg {
  color: hsl(var(--destructive));
}
.trip-map.trip-map-empty {
  min-height: 6rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px dashed hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
}
.trip-map.trip-map-error {
  min-height: 6rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.35);
}
.trip-map-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  overflow: hidden;
}
.trip-map-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}
.trip-map-card .trip-map {
  margin-top: 0;
  padding: 0 0 0.75rem;
}
.trip-map-card .trip-map-canvas {
  border: 0;
  border-radius: 0;
  height: 20rem;
}
.trip-map-card .trip-map-actions {
  padding: 0 1rem;
}

/* Colour key matching multi-route drive alternatives on the map */
.drive-route-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  vertical-align: middle;
}
.drive-route-swatch--lg {
  width: 0.85rem;
  height: 0.85rem;
}
.drive-route-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.drive-routes-map {
  margin-top: 0.5rem;
}
.drive-routes-map .trip-map-canvas {
  height: 16rem;
}

/* Tiny reset-to-system-default control next to Settings → Defaults labels */
.defaults-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
  padding: 0.05rem;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 0.2rem;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.defaults-reset-btn:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}
.label .defaults-reset-btn {
  vertical-align: -0.05em;
}

/* Feedback (!) bang buttons — report bug / recommendation */
.feedback-bang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.feedback-bang-btn__mark {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.feedback-bang-btn:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground) / 0.35);
  background: hsl(var(--muted) / 0.7);
}
.feedback-bang-btn--sm {
  width: 1.15rem;
  height: 1.15rem;
}
.feedback-bang-btn--sm .feedback-bang-btn__mark {
  font-size: 0.65rem;
}
.feedback-bang-btn--static {
  cursor: default;
  pointer-events: none;
}
.feedback-bang-btn--static:hover {
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
  background: hsl(var(--background));
}

/* Preferred-trip star (Overall option tiles + trip detail)
 * Lucide sets fill="none" on <svg>/<path>; !important beats the presentation attr. */
.favorite-star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  color: hsl(215 14% 46%);
  border-radius: 0.375rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.dark .favorite-star-btn {
  color: hsl(215 16% 58%);
}
.favorite-star-btn svg,
.favorite-star-btn svg path {
  fill: none !important;
  stroke: currentColor !important;
  color: inherit;
}
.favorite-star-btn:hover {
  color: hsl(38 92% 42%);
  background: hsl(var(--muted) / 0.6);
}
.favorite-star-btn--on,
.favorite-star-btn--on:hover {
  color: hsl(38 92% 45%);
}
.favorite-star-btn--on svg,
.favorite-star-btn--on svg path {
  fill: hsl(43 96% 56%) !important;
  color: hsl(38 92% 42%);
  stroke: hsl(38 92% 40%) !important;
}
.dark .favorite-star-btn--on,
.dark .favorite-star-btn--on:hover {
  color: hsl(43 96% 58%);
}
.dark .favorite-star-btn--on svg,
.dark .favorite-star-btn--on svg path {
  fill: hsl(43 96% 56%) !important;
  color: hsl(43 96% 56%);
  stroke: hsl(43 90% 48%) !important;
}

/* Feedback screenshot attachments */
.fb-attach-zone {
  border: 1px dashed hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: hsl(var(--muted) / 0.25);
}
.fb-attach-browse {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fb-attach-browse:hover {
  color: hsl(var(--primary));
}
.fb-attach-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fb-attach-item {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  flex-shrink: 0;
}
.fb-attach-item--link {
  display: block;
}
.fb-attach-item--link:hover {
  border-color: hsl(var(--foreground) / 0.35);
}
.fb-attach-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fb-attach-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.92);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.fb-attach-remove:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}