/*!
 * Quill Editor v2.0.2
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}
/*# sourceMappingURL=quill.snow.css.map */*, ::before, ::after {
  --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: rgb(59 130 246 / 0.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: rgb(59 130 246 / 0.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
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono), monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --font-display: "Anton", sans-serif;
    --font-heading: "Oswald", sans-serif;
    --font-body: "Barlow", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-script: "Pacifico", "Great Vibes", cursive;
    --radius: 0.25rem;

    /* Lake Charles Quik Reference dark roadhouse palette — dark is the only theme */
    --background: 0.244 0.005 95;
    --foreground: 0.948 0.012 90;
    --card: 0.273 0.005 95;
    --card-foreground: 0.948 0.012 90;
    --popover: 0.273 0.005 95;
    --popover-foreground: 0.948 0.012 90;

    --primary: 0.595 0.232 27;
    --primary-foreground: 0.948 0.012 90;
    --primary-hover: 0.437 0.197 27;

    --secondary: 0.285 0.094 254;
    --secondary-foreground: 0.948 0.012 90;
    --muted: 0.273 0.005 95;
    --muted-foreground: 0.644 0.011 95;

    --accent: 0.595 0.232 27;
    --accent-foreground: 0.948 0.012 90;

    --in-training: 0.801 0.171 75;
    --in-training-foreground: 0.18 0.01 75;

    /* Library — additive tokens. Gold stays exclusive to in-training. */
    --library-card: 0.31 0.006 95;
    --library-card-foreground: 0.948 0.012 90;
    --category-tile: 0.273 0.005 95;
    --category-tile-foreground: 0.948 0.012 90;
    --seasonal: 0.62 0.09 145;
    --seasonal-foreground: 0.16 0.02 145;
    --seasonal-border: 0.62 0.09 145;

    --destructive: 0.595 0.232 27;
    --destructive-foreground: 0.948 0.012 90;

    --border: 0.34 0.006 95;
    --input: 0.34 0.006 95;
    --ring: 0.595 0.232 27;

    --nav: 0 0 0;
    --nav-foreground: 0.948 0.012 90;

    --chart-1: 0.595 0.232 27;
    --chart-2: 0.285 0.094 254;
    --chart-3: 0.801 0.171 75;
    --chart-4: 0.437 0.197 27;
    --chart-5: 0.644 0.011 95;

    --sidebar: 0 0 0;
    --sidebar-foreground: 0.948 0.012 90;
    --sidebar-primary: 0.595 0.232 27;
    --sidebar-primary-foreground: 0.948 0.012 90;
    --sidebar-accent: 0.273 0.005 95;
    --sidebar-accent-foreground: 0.948 0.012 90;
    --sidebar-border: 0.34 0.006 95;
    --sidebar-ring: 0.595 0.232 27;

    /* Photo field — either/or single slot (upload OR url). Additive only. */
    --photo-frame: 0.273 0.005 95; /* card surface, dark frame */
    --photo-frame-border: 0.34 0.006 95; /* same as border */
    --photo-frame-foreground: 0.948 0.012 90;
    --photo-empty: 0.31 0.006 95; /* empty-slot fill, library-card */
    --photo-empty-foreground: 0.644 0.011 95;
    --photo-processing: 0.437 0.197 27; /* primary-hover red, processing */
    --photo-error: 0.595 0.232 27; /* destructive red, broken/error */
    --photo-error-foreground: 0.948 0.012 90;

    /* ════════════════════════════════════════════════════════════════════
       Be Legendary — ADDITIVE premium learning-hub tokens.
       The ONLY place gradients and glow are permitted. Gold/red gradient
       banner, ambient glow pulse, elevated activity cards, quiz feedback,
       and flashcard flip surfaces. Does NOT alter any existing token.
       ════════════════════════════════════════════════════════════════════ */
    --legendary-banner-from: 0.82 0.17 75; /* lifted gold (brighter than in-training) */
    --legendary-banner-via: 0.62 0.22 35; /* warm transitional red-orange */
    --legendary-banner-to: 0.595 0.232 27; /* existing primary red */
    --legendary-banner-foreground: 0.16 0.02 75; /* dark text on gold gradient */
    --legendary-glow: 0.88 0.2 78; /* gold glow color — brighter, more saturated */
    --legendary-glow-strength: 0.45; /* glow opacity ceiling */

    --legendary-card: 0.3 0.012 75; /* warm-tinted card, distinct from neutral card */
    --legendary-card-foreground: 0.948 0.012 90;
    --legendary-card-border: 0.42 0.05 75; /* gold-tinted border, low chroma */

    --legendary-correct: 0.72 0.16 145; /* green — distinct from gold/seasonal */
    --legendary-correct-foreground: 0.16 0.02 145;
    --legendary-incorrect: 0.595 0.232 27; /* reuses destructive red */
    --legendary-incorrect-foreground: 0.948 0.012 90;

    --legendary-flip-front: 0.3 0.012 75; /* flashcard front — legendary card */
    --legendary-flip-front-foreground: 0.948 0.012 90;
    --legendary-flip-back: 0.273 0.018 35; /* flashcard back — warm red-tinted */
    --legendary-flip-back-foreground: 0.948 0.012 90;

    /* ═══════════════════════════════════════════════════════════════════
       Be Legendary — CINEMATIC PATRIOTIC HERO (additive, redesign layer).
       Deep navy roadhouse backdrop, chrome/silver-to-red/white/blue metallic
       wordmark, bold light-sweep + mirror-finish flash. Tuned to support a
       flag-and-eye-black hero image: the image carries the red/white/blue
       flag tones and the face, so the CSS backdrop complements (not competes
       with) it. Does NOT alter any existing legendary token, utility, or
       flashcard class.
       ═══════════════════════════════════════════════════════════════════ */
    /* Deep navy roadhouse backdrop — darker than page background so the
       hero reads as a distinct cinematic stage, not another card. The flag
       image covers most of it; this shows through the letterbox edges and
       frames the flag colors. */
    --legendary-hero-backdrop: 0.14 0.055 255; /* deep navy stage, slightly darker */
    /* Spotlight softened and shifted toward white so it does NOT double the
       flag red already in the image. A near-white beam reads as a spotlight
       hitting the flag, letting the image's own reds stay clean. */
    --legendary-hero-spotlight: 0.92 0.03 90; /* near-white spotlight beam */
    --legendary-hero-spotlight-strength: 0.42;
    /* Cool blue rim glint strengthened slightly so the flag's blue reads
       cleanly against the warm face/drink tones. */
    --legendary-hero-bottle-glint: 0.62 0.16 250; /* cool blue rim glint */
    --legendary-hero-bottle-glint-strength: 0.26;
    /* Legibility scrim — tuned for a busy flag image. Heavier on the
       wordmark side (left) so the BOLD wordmark pops, lighter on the face
       side (right) so the face is not washed out. Strength nudged up so the
       wordmark stays readable over the flag's stripes. */
    --legendary-hero-overlay: 0.12 0.008 255; /* navy-tinted legibility scrim */
    --legendary-hero-overlay-strength: 0.7;

    /* Chrome/silver-to-red/white/blue metallic wordmark — patriotic gradient
       tuned to pop over a busy flag background. Brighter white top sheen and
       a cleaner blue accent stop so the wordmark reads as polished chrome
       with red/white/blue stripes, distinct from the flag behind it. */
    --legendary-metallic-highlight: 0.98 0.01 250; /* near-white top sheen, brighter */
    --legendary-metallic-bright: 0.88 0.1 250; /* bright silver-white */
    --legendary-metallic-mid: 0.66 0.2 25; /* rich mid red, slightly cooler */
    --legendary-metallic-deep: 0.46 0.21 25; /* deep red */
    --legendary-metallic-shadow: 0.32 0.13 255; /* chiseled navy underside */
    --legendary-metallic-glow: 0.66 0.2 25; /* outer red glow */
    --legendary-metallic-glow-strength: 0.5;

    /* Light-sweep beam — semi-transparent white, transform-driven. */
    --legendary-sweep-beam: 0.98 0.02 90;
    --legendary-sweep-beam-strength: 0.55;
    --legendary-sweep-duration: 2.8s;

    /* Mirror-finish flash — periodic highlight glint on chrome surface. */
    --legendary-flash-highlight: 0.97 0.04 90;
    --legendary-flash-strength: 0.4;
    --legendary-flash-duration: 3.5s;

    /* ═══════════════════════════════════════════════════════════════════
       Drinks Builder — ADDITIVE game tokens (Be Legendary Learning Hub).
       Tap-based drink-construction game. Reuses legendary-correct (green)
       for correct taps and legendary-incorrect (red) for wrong taps. Adds
       liquid/foam/glow tokens for the SVG glass hero. Gradients/glow are
       permitted here (Be Legendary). Does NOT alter any existing token.
       ═══════════════════════════════════════════════════════════════════ */
    --drinks-correct: 0.72 0.16 145; /* mirrors legendary-correct green */
    --drinks-correct-foreground: 0.16 0.02 145;
    --drinks-incorrect: 0.595 0.232 27; /* mirrors legendary-incorrect red */
    --drinks-incorrect-foreground: 0.948 0.012 90;
    --drinks-foam: 0.96 0.02 95; /* warm cream foam top on completion */
    --drinks-foam-foreground: 0.18 0.01 75;
    --drinks-liquid-default: 0.74 0.15 75; /* default amber/gold liquid fill */
    --drinks-liquid-default-deep: 0.6 0.16 60; /* deeper amber base for depth */
    --drinks-glass-stroke: 0.78 0.012 95; /* glass outline, light neutral */
    --drinks-glass-shine: 0.95 0.01 95; /* glass specular highlight */
    --drinks-streak-flame: 0.62 0.22 35; /* ON FIRE flame (warm red-orange) */
    --drinks-streak-flame-glow: 0.82 0.17 75; /* flame glow halo (gold) */
    --drinks-star: 0.82 0.17 75; /* star rating (gold) */
    --drinks-star-foreground: 0.16 0.02 75;
    --drinks-section-done: 0.801 0.171 75; /* section checkmark lit (in-training gold) */
    --drinks-section-pending: 0.644 0.011 95; /* section checkmark muted */
    --drinks-chip-bg: 0.31 0.012 75; /* legendary-card chip surface */
    --drinks-chip-border: 0.42 0.05 75; /* legendary-card chip border */
    --drinks-chip-selected-bg: 0.595 0.232 27; /* selected chip = primary red */
    --drinks-chip-selected-border: 0.595 0.232 27;
    --drinks-confetti-red: 0.595 0.232 27;
    --drinks-confetti-gold: 0.801 0.171 75;
    --drinks-confetti-navy: 0.285 0.094 254;
    --drinks-confetti-green: 0.72 0.16 145;
    --drinks-confetti-cream: 0.948 0.012 90;

    /* ═══════════════════════════════════════════════════════════════════
       Profile page + admin Users card — ADDITIVE tokens.
       Circular avatar (distinct from rectangular photo-field preview),
       email-verification-pending inline state, photo-upload affordance.
       Reuses existing card/border/primary/in-training tokens; only adds
       what the new surfaces need. Does NOT alter any existing token.
       ═══════════════════════════════════════════════════════════════════ */
    --profile-avatar-bg: 0.31 0.006 95; /* empty-avatar fill (library-card) */
    --profile-avatar-fg: 0.948 0.012 90; /* initials text on empty avatar */
    --profile-avatar-ring: 0.34 0.006 95; /* 1px ring around avatar (border) */
    --profile-avatar-ring-active: 0.595 0.232 27; /* red ring on hover/active */
    /* Email-verification pending — distinct from in-training gold. A muted
       amber that reads as "in progress, action needed" without claiming the
       gold semantic reserved for the In-training state. */
    --profile-email-pending: 0.72 0.11 65;
    --profile-email-pending-fg: 0.16 0.02 65;
    --profile-email-pending-border: 0.72 0.11 65;
    /* Email-verified check — reuses seasonal green family for "confirmed". */
    --profile-email-verified: 0.62 0.09 145;
    --profile-email-verified-fg: 0.16 0.02 145;

    /* ═══════════════════════════════════════════════════════════════════
       Food Recipe — ADDITIVE tokens (Library food-recipe surfaces).
       Sibling to the beverage RecipeCard: same dark roadhouse base, same
       Anton/Oswald/Barlow type, flat fills, no gradients/glow. Adds station
       accent colors (one per kitchen station) so prep tiles get a
       station-colored placeholder when no plating photo exists, plus an
       EXPO finishing-steps callout that uses brand purple/red. Does NOT
       alter any existing token. Station accents are tuned for the dark
       theme (L 0.50–0.78, chroma 0.12–0.22) and stay flat — no glow.
       ═══════════════════════════════════════════════════════════════════ */
    /* Station accents — used for station badges, tile top stripes, and
       prep-tile placeholders. Each has a foreground (cream) and a 'wash'
       variant (low-opacity tint) for the placeholder fill. */
    --food-station-expo: 0.55 0.22 350; /* purple-red — EXPO callout + station */
    --food-station-expo-fg: 0.948 0.012 90;
    --food-station-expo-wash: 0.3 0.08 350;
    --food-station-grill: 0.62 0.19 40; /* warm orange-red — grill */
    --food-station-grill-fg: 0.16 0.02 40;
    --food-station-grill-wash: 0.32 0.07 40;
    --food-station-fry: 0.78 0.16 75; /* gold-amber — fryer */
    --food-station-fry-fg: 0.16 0.02 75;
    --food-station-fry-wash: 0.34 0.07 75;
    --food-station-pizza: 0.58 0.2 50; /* warm red — pizza */
    --food-station-pizza-fg: 0.948 0.012 90;
    --food-station-pizza-wash: 0.31 0.07 50;
    --food-station-saute: 0.5 0.16 250; /* blue — sauté */
    --food-station-saute-fg: 0.948 0.012 90;
    --food-station-saute-wash: 0.28 0.06 250;
    --food-station-hotprep: 0.5 0.18 35; /* deep red-orange — hot prep */
    --food-station-hotprep-fg: 0.948 0.012 90;
    --food-station-hotprep-wash: 0.29 0.06 35;
    --food-station-coldprep: 0.62 0.12 200; /* cool teal — cold prep */
    --food-station-coldprep-fg: 0.12 0.02 200;
    --food-station-coldprep-wash: 0.3 0.05 200;
    --food-station-default: 0.595 0.232 27; /* fallback = brand primary red */
    --food-station-default-fg: 0.948 0.012 90;
    --food-station-default-wash: 0.31 0.06 27;

    /* EXPO finishing-steps callout — purple-red surface. Distinct from
       the brand-red primary and from the in-training gold. Flat fill, no
       glow. Used for the highlighted EXPO finishing steps block on the
       menuBuild food recipe card. */
    --food-expo-callout: 0.32 0.1 350; /* dark purple-red surface */
    --food-expo-callout-fg: 0.948 0.012 90;
    --food-expo-callout-border: 0.55 0.22 350; /* expo accent edge */
    --food-expo-callout-accent: 0.55 0.22 350; /* expo accent for the label */

    /* Allergen callout — reuses destructive red family but muted, so it
       reads as a warning without competing with the EXPO callout. */
    --food-allergen: 0.273 0.018 27; /* dark red-tinted surface */
    --food-allergen-fg: 0.948 0.012 90;
    --food-allergen-border: 0.595 0.232 27; /* destructive red edge */

    /* Plating group — subtle separator inside the Components table for
       the serviceware ('Plating') rows. Muted, low-chroma. */
    --food-plating-divider: 0.4 0.02 27;

    /* Quality-identifier check bullet — reuses seasonal green family
       for the ✓ bullets on the prep layout's Quality Identifiers list. */
    --food-check: 0.62 0.09 145;
    --food-check-fg: 0.16 0.02 145;

    /* Kitchen browser tile — reuses library-card surface; this token is
       for the prep-tile placeholder fill when no photo (station wash). */
    --food-tile-placeholder: 0.31 0.006 95; /* library-card base */
    --food-tile-placeholder-fg: 0.644 0.011 95;

    /* ───────────────────────────────────────────────────────────────────
       Food Recipe Book page — deep bluer purple (#4B1D74 ≈ oklch 0.32 0.18
       312). Distinct from the existing hue-350 purple-red EXPO tokens and
       from the brand-red (hue 27) primary. Used for the document-style
       recipe card title band, column-header band, EXPO callout wash, and
       footer. Paper surface is a light cream (screen-only, not print).
       ─────────────────────────────────────────────────────────────────── */
    --food-recipe-purple: 0.32 0.18 312; /* #4B1D74 — title + column bands */
    --food-recipe-purple-fg: 0.97 0.005 95; /* near-white on the purple band */
    --food-recipe-purple-band: 0.32 0.18 312; /* solid band fill */
    --food-recipe-purple-header: 0.32 0.18 312; /* column-header band fill */
    --food-recipe-purple-wash: 0.94 0.03 312; /* light-purple EXPO callout surface */
    --food-recipe-purple-wash-fg: 0.22 0.04 312; /* deep purple text on the wash */
    --food-recipe-purple-wash-border: 0.55 0.16 312; /* callout edge */
    --food-recipe-purple-rule: 0.78 0.05 312; /* subtle row separators */
    --food-recipe-paper: 0.97 0.012 95; /* cream paper surface */
    --food-recipe-paper-fg: 0.22 0.02 280; /* near-black ink on paper */
    --food-recipe-paper-muted: 0.45 0.02 280; /* muted ink for sub-labels */
    --food-recipe-paper-border: 0.82 0.01 280; /* paper edge / dividers */
    --food-recipe-table-header: 0.9 0.04 312; /* tinted ingredient table header */
    --food-recipe-table-header-fg: 0.25 0.05 312; /* deep purple header text */

    /* ───────────────────────────────────────────────────────────────────
       Per-category accent — ADDITIVE tokens. The food recipe card sets
       --category-accent (a hex string like "#8C5421") inline on its root
       when the category has an accentColor; otherwise these defaults
       apply. Navy (#0A2A5E) is the neutral brand default so cards fall
       back to a navy band when no inline override is present. The tint is
       a light wash of the accent (22% over white) used for the EXPO
       callout body. The food-station-* tokens above are PRESERVED — the
       kitchen browser still uses them as a fallback.
       ───────────────────────────────────────────────────────────────────
       NOTE: the inline override is a raw hex string, so the consuming
       classes use the var directly (e.g. background-color:
       var(--category-accent)) — never wrap in oklch(). The tint defaults
       to color-mix(in srgb, var(--category-accent) 22%, white) so a card
       that only sets --category-accent still gets a matching tint. */
    --category-accent: #0a2a5e; /* navy brand default (hex) */
    --category-accent-tint: color-mix(in srgb, #0a2a5e 22%, white);
  }

  .dark {
    --background: 0.244 0.005 95;
    --foreground: 0.948 0.012 90;
    --card: 0.273 0.005 95;
    --card-foreground: 0.948 0.012 90;
    --popover: 0.273 0.005 95;
    --popover-foreground: 0.948 0.012 90;

    --primary: 0.595 0.232 27;
    --primary-foreground: 0.948 0.012 90;
    --primary-hover: 0.437 0.197 27;

    --secondary: 0.285 0.094 254;
    --secondary-foreground: 0.948 0.012 90;
    --muted: 0.273 0.005 95;
    --muted-foreground: 0.644 0.011 95;

    --accent: 0.595 0.232 27;
    --accent-foreground: 0.948 0.012 90;

    --in-training: 0.801 0.171 75;
    --in-training-foreground: 0.18 0.01 75;

    /* Library — additive tokens. Gold stays exclusive to in-training. */
    --library-card: 0.31 0.006 95;
    --library-card-foreground: 0.948 0.012 90;
    --category-tile: 0.273 0.005 95;
    --category-tile-foreground: 0.948 0.012 90;
    --seasonal: 0.62 0.09 145;
    --seasonal-foreground: 0.16 0.02 145;
    --seasonal-border: 0.62 0.09 145;

    --destructive: 0.595 0.232 27;
    --destructive-foreground: 0.948 0.012 90;

    --border: 0.34 0.006 95;
    --input: 0.34 0.006 95;
    --ring: 0.595 0.232 27;

    --nav: 0 0 0;
    --nav-foreground: 0.948 0.012 90;

    --chart-1: 0.595 0.232 27;
    --chart-2: 0.285 0.094 254;
    --chart-3: 0.801 0.171 75;
    --chart-4: 0.437 0.197 27;
    --chart-5: 0.644 0.011 95;

    --sidebar: 0 0 0;
    --sidebar-foreground: 0.948 0.012 90;
    --sidebar-primary: 0.595 0.232 27;
    --sidebar-primary-foreground: 0.948 0.012 90;
    --sidebar-accent: 0.273 0.005 95;
    --sidebar-accent-foreground: 0.948 0.012 90;
    --sidebar-border: 0.34 0.006 95;
    --sidebar-ring: 0.595 0.232 27;

    /* Photo field — either/or single slot (mirror :root) */
    --photo-frame: 0.273 0.005 95;
    --photo-frame-border: 0.34 0.006 95;
    --photo-frame-foreground: 0.948 0.012 90;
    --photo-empty: 0.31 0.006 95;
    --photo-empty-foreground: 0.644 0.011 95;
    --photo-processing: 0.437 0.197 27;
    --photo-error: 0.595 0.232 27;
    --photo-error-foreground: 0.948 0.012 90;

    /* Be Legendary — mirror :root additive tokens (dark is the only theme) */
    --legendary-banner-from: 0.82 0.17 75;
    --legendary-banner-via: 0.62 0.22 35;
    --legendary-banner-to: 0.595 0.232 27;
    --legendary-banner-foreground: 0.16 0.02 75;
    --legendary-glow: 0.88 0.2 78;
    --legendary-glow-strength: 0.45;

    --legendary-card: 0.3 0.012 75;
    --legendary-card-foreground: 0.948 0.012 90;
    --legendary-card-border: 0.42 0.05 75;

    --legendary-correct: 0.72 0.16 145;
    --legendary-correct-foreground: 0.16 0.02 145;
    --legendary-incorrect: 0.595 0.232 27;
    --legendary-incorrect-foreground: 0.948 0.012 90;

    --legendary-flip-front: 0.3 0.012 75;
    --legendary-flip-front-foreground: 0.948 0.012 90;
    --legendary-flip-back: 0.273 0.018 35;
    --legendary-flip-back-foreground: 0.948 0.012 90;

    /* Be Legendary — CINEMATIC PATRIOTIC HERO (mirror :root, dark only theme).
       Tuned to support a flag-and-eye-black hero image. */
    --legendary-hero-backdrop: 0.14 0.055 255;
    --legendary-hero-spotlight: 0.92 0.03 90;
    --legendary-hero-spotlight-strength: 0.42;
    --legendary-hero-bottle-glint: 0.62 0.16 250;
    --legendary-hero-bottle-glint-strength: 0.26;
    --legendary-hero-overlay: 0.12 0.008 255;
    --legendary-hero-overlay-strength: 0.7;

    --legendary-metallic-highlight: 0.98 0.01 250;
    --legendary-metallic-bright: 0.88 0.1 250;
    --legendary-metallic-mid: 0.66 0.2 25;
    --legendary-metallic-deep: 0.46 0.21 25;
    --legendary-metallic-shadow: 0.32 0.13 255;
    --legendary-metallic-glow: 0.66 0.2 25;
    --legendary-metallic-glow-strength: 0.5;

    --legendary-sweep-beam: 0.98 0.02 90;
    --legendary-sweep-beam-strength: 0.55;
    --legendary-sweep-duration: 2.8s;

    --legendary-flash-highlight: 0.97 0.04 90;
    --legendary-flash-strength: 0.4;
    --legendary-flash-duration: 3.5s;

    /* Drinks Builder — mirror :root additive game tokens (dark only theme) */
    --drinks-correct: 0.72 0.16 145;
    --drinks-correct-foreground: 0.16 0.02 145;
    --drinks-incorrect: 0.595 0.232 27;
    --drinks-incorrect-foreground: 0.948 0.012 90;
    --drinks-foam: 0.96 0.02 95;
    --drinks-foam-foreground: 0.18 0.01 75;
    --drinks-liquid-default: 0.74 0.15 75;
    --drinks-liquid-default-deep: 0.6 0.16 60;
    --drinks-glass-stroke: 0.78 0.012 95;
    --drinks-glass-shine: 0.95 0.01 95;
    --drinks-streak-flame: 0.62 0.22 35;
    --drinks-streak-flame-glow: 0.82 0.17 75;
    --drinks-star: 0.82 0.17 75;
    --drinks-star-foreground: 0.16 0.02 75;
    --drinks-section-done: 0.801 0.171 75;
    --drinks-section-pending: 0.644 0.011 95;
    --drinks-chip-bg: 0.31 0.012 75;
    --drinks-chip-border: 0.42 0.05 75;
    --drinks-chip-selected-bg: 0.595 0.232 27;
    --drinks-chip-selected-border: 0.595 0.232 27;
    --drinks-confetti-red: 0.595 0.232 27;
    --drinks-confetti-gold: 0.801 0.171 75;
    --drinks-confetti-navy: 0.285 0.094 254;
    --drinks-confetti-green: 0.72 0.16 145;
    --drinks-confetti-cream: 0.948 0.012 90;

    /* Profile page + admin Users card — mirror :root additive tokens
       (dark is the only theme). */
    --profile-avatar-bg: 0.31 0.006 95;
    --profile-avatar-fg: 0.948 0.012 90;
    --profile-avatar-ring: 0.34 0.006 95;
    --profile-avatar-ring-active: 0.595 0.232 27;
    --profile-email-pending: 0.72 0.11 65;
    --profile-email-pending-fg: 0.16 0.02 65;
    --profile-email-pending-border: 0.72 0.11 65;
    --profile-email-verified: 0.62 0.09 145;
    --profile-email-verified-fg: 0.16 0.02 145;

    /* Food Recipe — mirror :root additive tokens (dark is the only theme) */
    --food-station-expo: 0.55 0.22 350;
    --food-station-expo-fg: 0.948 0.012 90;
    --food-station-expo-wash: 0.3 0.08 350;
    --food-station-grill: 0.62 0.19 40;
    --food-station-grill-fg: 0.16 0.02 40;
    --food-station-grill-wash: 0.32 0.07 40;
    --food-station-fry: 0.78 0.16 75;
    --food-station-fry-fg: 0.16 0.02 75;
    --food-station-fry-wash: 0.34 0.07 75;
    --food-station-pizza: 0.58 0.2 50;
    --food-station-pizza-fg: 0.948 0.012 90;
    --food-station-pizza-wash: 0.31 0.07 50;
    --food-station-saute: 0.5 0.16 250;
    --food-station-saute-fg: 0.948 0.012 90;
    --food-station-saute-wash: 0.28 0.06 250;
    --food-station-hotprep: 0.5 0.18 35;
    --food-station-hotprep-fg: 0.948 0.012 90;
    --food-station-hotprep-wash: 0.29 0.06 35;
    --food-station-coldprep: 0.62 0.12 200;
    --food-station-coldprep-fg: 0.12 0.02 200;
    --food-station-coldprep-wash: 0.3 0.05 200;
    --food-station-default: 0.595 0.232 27;
    --food-station-default-fg: 0.948 0.012 90;
    --food-station-default-wash: 0.31 0.06 27;

    --food-expo-callout: 0.32 0.1 350;
    --food-expo-callout-fg: 0.948 0.012 90;
    --food-expo-callout-border: 0.55 0.22 350;
    --food-expo-callout-accent: 0.55 0.22 350;

    --food-allergen: 0.273 0.018 27;
    --food-allergen-fg: 0.948 0.012 90;
    --food-allergen-border: 0.595 0.232 27;

    --food-plating-divider: 0.4 0.02 27;

    --food-check: 0.62 0.09 145;
    --food-check-fg: 0.16 0.02 145;

    --food-tile-placeholder: 0.31 0.006 95;
    --food-tile-placeholder-fg: 0.644 0.011 95;

    /* Food Recipe Book page — deep bluer purple (#4B1D74). Mirror of the
       :root additive tokens (dark is the only theme, but the recipe card
       is a light/cream paper surface, so these stay light in both). */
    --food-recipe-purple: 0.32 0.18 312;
    --food-recipe-purple-fg: 0.97 0.005 95;
    --food-recipe-purple-band: 0.32 0.18 312;
    --food-recipe-purple-header: 0.32 0.18 312;
    --food-recipe-purple-wash: 0.94 0.03 312;
    --food-recipe-purple-wash-fg: 0.22 0.04 312;
    --food-recipe-purple-wash-border: 0.55 0.16 312;
    --food-recipe-purple-rule: 0.78 0.05 312;
    --food-recipe-paper: 0.97 0.012 95;
    --food-recipe-paper-fg: 0.22 0.02 280;
    --food-recipe-paper-muted: 0.45 0.02 280;
    --food-recipe-paper-border: 0.82 0.01 280;
    --food-recipe-table-header: 0.9 0.04 312;
    --food-recipe-table-header-fg: 0.25 0.05 312;

    /* Per-category accent — mirror :root defaults (dark is the only theme,
       but the recipe card is a light/cream paper surface, so the navy
       default + light tint read correctly in both scopes). Inline hex
       overrides on the card root take precedence. */
    --category-accent: #0a2a5e;
    --category-accent-tint: color-mix(in srgb, #0a2a5e 22%, white);

    /* ═══════════════════════════════════════════════════════════════════
       Anchor Editor — ADDITIVE tokens (admin Build Card label-position
       editor overlay). Admin-only drag-to-adjust editor that overlays the
       existing Build Card photo+labels. Sits on the SAME light/cream paper
       surface as the Build Card (it overlays the photo), so the editor's
       own accent colors come from the dark roadhouse admin palette
       (primary red, navy secondary, muted greys) — they read as "admin
       tool" chrome distinct from the Bubba's brand hex of the card itself.
       Reuses the existing shadcn Dialog for the modal container; these
       tokens style the editor overlay + chrome inside it. Does NOT alter
       any existing Build Card class or token. Phone-first: editor reflows
       to single-column and supports touch dragging.
       ═══════════════════════════════════════════════════════════════════ */
    /* Handle — the draggable grip on each label. Idle = subtle navy
       outline so it reads as an affordance without competing with the
       Bubba's brand labels underneath. Active = red ring + raised
       shadow. Dimmed = greyscale while another label is being dragged. */
    --anchor-handle-bg: #ffffff; /* light paper surface, matches build-card */
    --anchor-handle-border: 0.34 0.006 95; /* reuse border token family */
    --anchor-handle-border-active: 0.595 0.232 27; /* primary red */
    --anchor-handle-dim: 0.644 0.011 95; /* muted-foreground grey */
    --anchor-handle-shadow-active: 0 4px 14px 0 rgba(0, 0, 0, 0.28);
    /* Percentage readout badge — small pill, navy fill, cream text.
       Navy (not red) so it reads as a measurement, not a warning. */
    --anchor-readout-bg: 0.285 0.094 254; /* secondary navy */
    --anchor-readout-fg: 0.948 0.012 90; /* cream foreground */
    --anchor-readout-bg-active: 0.595 0.232 27; /* primary red when dragging */
    /* Editor chrome — shadcn Dialog container. Header band uses navy so
       it reads as an admin surface, distinct from the Bubba's blue title
       band of the card underneath. */
    --anchor-editor-header: 0.285 0.094 254; /* secondary navy */
    --anchor-editor-header-fg: 0.948 0.012 90; /* cream */
    /* Success / error feedback — reuse destructive red for errors,
       seasonal green for success. */
    --anchor-editor-success: 0.62 0.09 145; /* seasonal green */
    --anchor-editor-success-fg: 0.16 0.02 145;
    --anchor-editor-error: 0.595 0.232 27; /* destructive red */
    --anchor-editor-error-fg: 0.948 0.012 90;
    /* Confirm dialog — unsaved-changes warning. Amber, distinct from
       in-training gold and from destructive red. */
    --anchor-confirm: 0.72 0.11 65; /* profile-email-pending amber */
    --anchor-confirm-fg: 0.16 0.02 65;
    --anchor-confirm-border: 0.72 0.11 65;
  }
  * {
  border-color: oklch(var(--border));
}
  body {
  background-color: oklch(var(--background));
  font-family: var(--font-body), sans-serif;
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
  font-family: var(--font-heading), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.025em;
    font-family: var(--font-heading);
}
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .\!container {
    max-width: 1400px !important;
  }

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.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;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/3 {
  top: 33.333333%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-0 {
  margin: 0px;
}
.m-4 {
  margin: 1rem;
}
.m-auto {
  margin: auto;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.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;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-20 {
  width: 5rem;
  height: 5rem;
}
.size-28 {
  width: 7rem;
  height: 7rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-60 {
  height: 15rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[5\.5rem\] {
  height: 5.5rem;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-44 {
  max-height: 11rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[40vh\] {
  max-height: 40vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[calc\(100vh-2rem\)\] {
  max-height: calc(100vh - 2rem);
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-4 {
  min-height: 1rem;
}
.min-h-48 {
  min-height: 12rem;
}
.min-h-56 {
  min-height: 14rem;
}
.min-h-6 {
  min-height: 1.5rem;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[18rem\] {
  min-height: 18rem;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-dvh {
  min-height: 100dvh;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-32 {
  min-width: 8rem;
}
.min-w-40 {
  min-width: 10rem;
}
.min-w-5 {
  min-width: 1.25rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-32 {
  max-width: 8rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[12rem\] {
  max-width: 12rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[16rem\] {
  max-width: 16rem;
}
.max-w-\[20rem\] {
  max-width: 20rem;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-\[min\(420px\2c 92vw\)\] {
  max-width: min(420px, 92vw);
}
.max-w-\[min\(960px\2c 94vw\)\] {
  max-width: min(960px, 94vw);
}
.max-w-full {
  max-width: 100%;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}
.-translate-x-px {
  --tw-translate-x: -1px;
  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));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  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));
}
.translate-x-px {
  --tw-translate-x: 1px;
  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));
}
.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  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));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  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));
}
.translate-y-\[calc\(-50\%_-_2px\)\] {
  --tw-translate-y: calc(-50% - 2px);
  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));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  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));
}
.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));
}
.rotate-45 {
  --tw-rotate: 45deg;
  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));
}
.rotate-90 {
  --tw-rotate: 90deg;
  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));
}
.transform {
  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 drinks-confetti-burst {

  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(var(--drinks-confetti-x, 0), var(--drinks-confetti-y, -120px)) scale(1);
    opacity: 0;
  }
}
.animate-drinks-confetti-burst {
  animation: drinks-confetti-burst 1.1s ease-out forwards;
}
@keyframes drinks-foam-appear {

  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }

  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-drinks-foam-appear {
  animation: drinks-foam-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes drinks-glass-fill {

  0% {
    transform: scaleY(0);
  }

  100% {
    transform: scaleY(1);
  }
}
.animate-drinks-glass-fill {
  animation: drinks-glass-fill 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes drinks-green-pop {

  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(1.18);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-drinks-green-pop {
  animation: drinks-green-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes drinks-green-throb {

  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 oklch(var(--drinks-correct) / 0.55);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 0.5rem oklch(var(--drinks-correct) / 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 oklch(var(--drinks-correct) / 0.55);
  }
}
.animate-drinks-green-throb {
  animation: drinks-green-throb 1.6s ease-in-out infinite;
}
@keyframes drinks-legendary-banner {

  0% {
    transform: scale(0.6) translateY(20px);
    opacity: 0;
  }

  60% {
    transform: scale(1.08) translateY(-4px);
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.animate-drinks-legendary-banner {
  animation: drinks-legendary-banner 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes drinks-red-shake {

  0%, 100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-8px);
  }

  30% {
    transform: translateX(7px);
  }

  45% {
    transform: translateX(-6px);
  }

  60% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }

  90% {
    transform: translateX(2px);
  }
}
.animate-drinks-red-shake {
  animation: drinks-red-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes drinks-rising-points {

  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  20% {
    transform: translateY(-6px) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translateY(-44px) scale(1);
    opacity: 0;
  }
}
.animate-drinks-rising-points {
  animation: drinks-rising-points 0.9s ease-out forwards;
}
@keyframes drinks-star-pop {

  0% {
    transform: scale(0) rotate(-30deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.25) rotate(8deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.animate-drinks-star-pop {
  animation: drinks-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes drinks-streak-flame {

  0%, 100% {
    transform: scale(1) rotate(-2deg);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.15) rotate(2deg);
    opacity: 1;
  }
}
.animate-drinks-streak-flame {
  animation: drinks-streak-flame 0.6s ease-in-out infinite;
}
@keyframes heartbeat {

  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.25);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.25);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}
.animate-heartbeat {
  animation: heartbeat 1.4s ease-in-out infinite;
}
@keyframes in-training-pulse {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}
.animate-in-training {
  animation: in-training-pulse 2s ease-in-out infinite;
}
@keyframes legendary-pulse {

  0%, 100% {
    box-shadow: 0 0 0 1px oklch(0.66 0.2 25 / 0.25), 0 0 20px oklch(0.66 0.2 25 / 0.30);
  }

  50% {
    box-shadow: 0 0 0 1px oklch(0.66 0.2 25 / 0.45), 0 0 34px oklch(0.66 0.2 25 / 0.55);
  }
}
.animate-legendary-pulse {
  animation: legendary-pulse 2.5s ease-in-out infinite;
}
@keyframes photo-shimmer {

  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}
.animate-photo-shimmer {
  animation: photo-shimmer 1.1s ease-in-out infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes seasonal-shimmer {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}
.animate-seasonal-shimmer {
  animation: seasonal-shimmer 3s ease-in-out infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-progress {
  cursor: progress;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.scroll-my-1 {
  scroll-margin-top: 0.25rem;
  scroll-margin-bottom: 0.25rem;
}
.scroll-py-1 {
  scroll-padding-top: 0.25rem;
  scroll-padding-bottom: 0.25rem;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.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-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-items-start {
  justify-items: start;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[oklch\(0\.801_0\.171_75\)\] {
  border-color: oklch(0.801 0.171 75);
}
.border-border {
  border-color: oklch(var(--border));
}
.border-destructive\/50 {
  border-color: oklch(var(--destructive) / 0.5);
}
.border-foreground {
  border-color: oklch(var(--foreground));
}
.border-input {
  border-color: oklch(var(--input));
}
.border-nav {
  border-color: oklch(var(--nav));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.border-primary\/40 {
  border-color: oklch(var(--primary) / 0.4);
}
.border-primary\/50 {
  border-color: oklch(var(--primary) / 0.5);
}
.border-primary\/60 {
  border-color: oklch(var(--primary) / 0.6);
}
.border-seasonal {
  --tw-border-opacity: 1;
  border-color: oklch(var(--seasonal) / var(--tw-border-opacity, 1));
}
.border-secondary {
  --tw-border-opacity: 1;
  border-color: oklch(var(--secondary) / var(--tw-border-opacity, 1));
}
.border-secondary\/50 {
  border-color: oklch(var(--secondary) / 0.5);
}
.border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: oklch(var(--background));
}
.bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-border {
  background-color: oklch(var(--border));
}
.bg-card {
  background-color: oklch(var(--card));
}
.bg-category-tile {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--category-tile) / var(--tw-bg-opacity, 1));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: oklch(var(--foreground));
}
.bg-in-training {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--in-training) / var(--tw-bg-opacity, 1));
}
.bg-in-training\/15 {
  background-color: oklch(var(--in-training) / 0.15);
}
.bg-library-card {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--library-card) / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/20 {
  background-color: oklch(var(--muted) / 0.2);
}
.bg-muted\/30 {
  background-color: oklch(var(--muted) / 0.3);
}
.bg-muted\/40 {
  background-color: oklch(var(--muted) / 0.4);
}
.bg-muted\/50 {
  background-color: oklch(var(--muted) / 0.5);
}
.bg-muted\/60 {
  background-color: oklch(var(--muted) / 0.6);
}
.bg-muted\/70 {
  background-color: oklch(var(--muted) / 0.7);
}
.bg-nav {
  background-color: oklch(var(--nav));
}
.bg-popover {
  background-color: oklch(var(--popover));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: oklch(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: oklch(var(--primary) / 0.15);
}
.bg-primary\/20 {
  background-color: oklch(var(--primary) / 0.2);
}
.bg-primary\/60 {
  background-color: oklch(var(--primary) / 0.6);
}
.bg-seasonal {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--seasonal) / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-secondary\/20 {
  background-color: oklch(var(--secondary) / 0.2);
}
.bg-sidebar {
  background-color: oklch(var(--sidebar));
}
.bg-sidebar-border {
  background-color: oklch(var(--sidebar-border));
}
.bg-transparent {
  background-color: transparent;
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[oklch\(var\(--legendary-banner-from\)\)\] {
  --tw-gradient-from: oklch(var(--legendary-banner-from)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-background {
  --tw-gradient-from: oklch(var(--background)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[oklch\(var\(--legendary-banner-via\)\)\] {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), oklch(var(--legendary-banner-via)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[oklch\(var\(--legendary-banner-to\)\)\] {
  --tw-gradient-to: oklch(var(--legendary-banner-to)) var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: oklch(var(--primary) / 1);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-center {
  -o-object-position: center;
     object-position: center;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.p-px {
  padding: 1px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.font-body {
  font-family: var(--font-body), sans-serif;
}
.font-display {
  font-family: var(--font-display), sans-serif;
}
.font-heading {
  font-family: var(--font-heading), sans-serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.text-\[0\.55rem\] {
  font-size: 0.55rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.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;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.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-\[0\.95\] {
  line-height: 0.95;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[oklch\(0\.82_0\.09_235\)\] {
  color: oklch(0.82 0.09 235);
}
.text-\[oklch\(var\(--legendary-banner-foreground\)\)\] {
  color: oklch(var(--legendary-banner-foreground));
}
.text-accent-foreground {
  color: oklch(var(--accent-foreground));
}
.text-card-foreground {
  color: oklch(var(--card-foreground));
}
.text-category-tile {
  --tw-text-opacity: 1;
  color: oklch(var(--category-tile) / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  color: oklch(var(--destructive-foreground));
}
.text-foreground {
  color: oklch(var(--foreground));
}
.text-in-training {
  --tw-text-opacity: 1;
  color: oklch(var(--in-training) / var(--tw-text-opacity, 1));
}
.text-in-training-foreground {
  color: oklch(var(--in-training-foreground));
}
.text-in-training\/90 {
  color: oklch(var(--in-training) / 0.9);
}
.text-library-card {
  --tw-text-opacity: 1;
  color: oklch(var(--library-card) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/40 {
  color: oklch(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/60 {
  color: oklch(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: oklch(var(--muted-foreground) / 0.7);
}
.text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.text-primary {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  color: oklch(var(--primary-foreground));
}
.text-seasonal {
  --tw-text-opacity: 1;
  color: oklch(var(--seasonal) / var(--tw-text-opacity, 1));
}
.text-seasonal-foreground {
  color: oklch(var(--seasonal-foreground));
}
.text-secondary {
  --tw-text-opacity: 1;
  color: oklch(var(--secondary) / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: oklch(var(--secondary-foreground));
}
.text-sidebar-foreground {
  color: oklch(var(--sidebar-foreground));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 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);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-roadie {
  --tw-shadow: 0 2px 0 0 rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 2px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --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(3px + 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-0 {
  --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(0px + 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-1 {
  --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(1px + 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-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-foreground {
  --tw-ring-color: oklch(var(--foreground));
}
.ring-in-training\/45 {
  --tw-ring-color: oklch(var(--in-training) / 0.45);
}
.ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.ring-sidebar-ring {
  --tw-ring-color: oklch(var(--sidebar-ring));
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-background {
  --tw-ring-offset-color: oklch(var(--background));
}
.ring-offset-card {
  --tw-ring-offset-color: oklch(var(--card));
}
.blur {
  --tw-blur: blur(8px);
  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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.drop-shadow-\[0_0_8px_oklch\(var\(--legendary-metallic-glow\)\/0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 0 8px oklch(var(--legendary-metallic-glow)/0.6));
  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);
}
.drop-shadow-\[0_1px_1px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
  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);
}
.drop-shadow-\[0_1px_2px_oklch\(0\.12_0\.005_75\/0\.8\)\] {
  --tw-drop-shadow: drop-shadow(0 1px 2px oklch(0.12 0.005 75/0.8));
  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);
}
.drop-shadow-\[0_2px_8px_oklch\(0\.12_0\.005_95\/0\.85\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 8px oklch(0.12 0.005 95/0.85));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}
.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);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c right\2c width\] {
  transition-property: left,right,width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
  transition-property: margin,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c height\2c padding\] {
  transition-property: width,height,padding;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  transition-timing-function: linear;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.font-display {
    font-family: var(--font-display);
  }
.font-heading {
    font-family: var(--font-heading);
  }
/* Pacifico script — exposes the existing --font-script token so
     components can opt into the handwritten look (Bubba poster logo,
     'Food FOR All' script words, 'This means we have:' label). */
.font-script {
    font-family: var(--font-script);
  }
.text-in-training {
    color: oklch(var(--in-training));
  }
.bg-in-training {
    background-color: oklch(var(--in-training));
  }
.bg-nav {
    background-color: oklch(var(--nav));
  }
.border-nav {
    border-color: oklch(var(--nav));
  }
.animate-in-training {
    animation: in-training-pulse 2s ease-in-out infinite;
  }
/* Library — recipe card surface (one step lighter than card) */
.bg-library-card {
    background-color: oklch(var(--library-card));
  }
.text-library-card {
    color: oklch(var(--library-card-foreground));
  }
/* Library — category tile (same as card; navy edge stripe differentiates) */
.bg-category-tile {
    background-color: oklch(var(--category-tile));
  }
.text-category-tile {
    color: oklch(var(--category-tile-foreground));
  }
.border-navy-edge {
    border-left: 3px solid oklch(var(--secondary));
  }
/* Library — Seasonal badge. Flat sage fill, dark text, opacity-only shimmer.
     Distinct from gold in-training; no gradient, no pulse. */
.bg-seasonal {
    background-color: oklch(var(--seasonal));
  }
.text-seasonal {
    color: oklch(var(--seasonal));
  }
.text-seasonal-foreground {
    color: oklch(var(--seasonal-foreground));
  }
.border-seasonal {
    border-color: oklch(var(--seasonal-border));
  }
.animate-seasonal-shimmer {
    animation: seasonal-shimmer 3s ease-in-out infinite;
  }
/* ── Prep-card inline markdown — bold chip + italic note ──────────────
     ADDITIVE utilities for the tiny inline-markdown renderer
     (lib/inlineMarkdown.tsx). Bold renders as a pale-yellow inline chip
     wrapping the phrase; italic renders as a muted-color italic span.
     Both work on the dark theme (the prep card's cream paper surface is
     light, but these classes also appear on dark surfaces for the
     menuBuild/build-card steps, so the colors are tuned for both). */
.prep-bold-chip {
    /* Pale-yellow chip — readable on cream paper AND on the dark
       roadhouse background. Inline so it wraps within a step line. */
    background-color: oklch(0.95 0.1 95);
    color: oklch(0.22 0.04 95);
    font-weight: 700;
    border-radius: 0.1875rem; /* 3px — small rounded, matches --radius feel */
    padding: 0 0.28125rem; /* ~4.5px horizontal, no vertical so line height stays */
    display: inline;
    /* box-decoration-break keeps the chip background continuous across
       line wraps (each wrapped segment gets its own background box). */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Slight vertical alignment nudge so the chip sits on the text
       baseline rather than dipping below it. */
    line-height: inherit;
  }
.prep-italic-note {
    /* Muted color italic — reads as a quiet aside on both light and
       dark surfaces. No background, no padding; just italic + color. */
    color: oklch(0.6 0.02 95);
    font-style: italic;
    line-height: inherit;
  }
/* ── Photo field — either/or single slot ──────────────────────────────
     One slot: upload from device OR paste URL. Choosing one clears the other.
     Photos stay OPTIONAL everywhere. Tokens are additive; existing theme intact. */
/* Dark-themed frame around the thumbnail preview. Sharp 4px radius to match
     the roadhouse hard-edge language; 1px low-chroma border, no glow. */
.photo-field-preview {
    background-color: oklch(var(--photo-frame));
    border: 1px solid oklch(var(--photo-frame-border));
    border-radius: var(--radius);
    color: oklch(var(--photo-frame-foreground));
    overflow: hidden;
    position: relative;
  }
.photo-field-preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Empty slot — dashed outline, muted icon, "No photo" helper. Same surface
     as library-card so it reads as a placeholder, not an error. */
.photo-field-empty {
    background-color: oklch(var(--photo-empty));
    border: 1px dashed oklch(var(--photo-frame-border));
    border-radius: var(--radius);
    color: oklch(var(--photo-empty-foreground));
  }
/* Processing shimmer while resizing (≤1600px / ~80% JPEG). Red sweep on the
     dark frame — uses primary-hover so it stays on-palette, never gold. */
.photo-field-processing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 20%,
      oklch(var(--photo-processing) / 0.35) 50%,
      transparent 80%
    );
    animation: photo-shimmer 1.1s ease-in-out infinite;
  }
/* Broken-image fallback. Red-tinted frame, broken icon, "Couldn't load" hint.
     Does NOT block save — photo is optional. */
.photo-field-broken {
    background-color: oklch(var(--photo-frame));
    border: 1px solid oklch(var(--photo-error) / 0.5);
    border-radius: var(--radius);
    color: oklch(var(--photo-error));
  }
/* Inline error state for non-image files. Red left edge stripe + muted text,
      mirroring the navy edge-stripe pattern already used on category tiles. */
.photo-field-error {
    border-left: 3px solid oklch(var(--photo-error));
    color: oklch(var(--photo-error-foreground));
  }
/* ════════════════════════════════════════════════════════════════════
     Be Legendary — ADDITIVE utilities. The only place gradients + glow
     live. Existing flat roadhouse tokens are untouched.
     ════════════════════════════════════════════════════════════════════ */
/* Banner — gold→red gradient marquee with ambient gold glow.
     Tappable; opens the Be Legendary page for the current position. */
.bg-legendary-banner {
    background-image: linear-gradient(
      105deg,
      oklch(var(--legendary-banner-from)) 0%,
      oklch(var(--legendary-banner-via)) 48%,
      oklch(var(--legendary-banner-to)) 100%
    );
    color: oklch(var(--legendary-banner-foreground));
    box-shadow: 0 0 0 1px oklch(var(--legendary-glow) / 0.25), 0 0 24px
      oklch(var(--legendary-glow) / 0.35);
  }
.text-legendary-banner {
    color: oklch(var(--legendary-banner-foreground));
  }
/* Glow halo layer — absolutely-positioned overlay that pulses. */
.legendary-glow-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 32px
      oklch(var(--legendary-glow) / var(--legendary-glow-strength));
    pointer-events: none;
    animation: legendary-glow 3s ease-in-out infinite;
  }
.animate-legendary-pulse {
    animation: legendary-pulse 2.5s ease-in-out infinite;
  }
/* Activity card — warm-tinted surface, gold-tinted border, one step
     more premium than the neutral library card. */
.bg-legendary-card {
    background-color: oklch(var(--legendary-card));
    border: 1px solid oklch(var(--legendary-card-border));
  }
.text-legendary-card {
    color: oklch(var(--legendary-card-foreground));
  }
.border-legendary-card {
    border-color: oklch(var(--legendary-card-border));
  }
/* Quiz feedback — correct (green, distinct from gold/seasonal) + incorrect (red). */
.bg-legendary-correct {
    background-color: oklch(var(--legendary-correct));
  }
.text-legendary-correct {
    color: oklch(var(--legendary-correct));
  }
.border-legendary-correct {
    border-color: oklch(var(--legendary-correct));
  }
.bg-legendary-incorrect {
    background-color: oklch(var(--legendary-incorrect));
  }
.text-legendary-incorrect {
    color: oklch(var(--legendary-incorrect));
  }
.border-legendary-incorrect {
    border-color: oklch(var(--legendary-incorrect));
  }
/* Flashcard — 3D flip. Container preserves 3D; inner rotates on tap.
     Backface hidden so only one face shows at a time. */
.flashcard-scene {
    perspective: 1000px;
  }
.flashcard-flipper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
.flashcard-flipper.is-flipped {
    transform: rotateY(180deg);
  }
.flashcard-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--legendary-card-border));
    padding: 1.25rem;
    /* Content (especially the back face's HTML lists from BAR categories) can
       exceed the fixed 22rem scene height. Scroll within the card instead of
       spilling past the rounded border. overflow-x hidden prevents horizontal
       scroll from long unbroken strings / wide lists. */
    overflow-y: auto;
    overflow-x: hidden;
  }
.flashcard-front {
    background-color: oklch(var(--legendary-flip-front));
    color: oklch(var(--legendary-flip-front-foreground));
  }
.flashcard-back {
    background-color: oklch(var(--legendary-flip-back));
    color: oklch(var(--legendary-flip-back-foreground));
    transform: rotateY(180deg);
  }
/* ── Reading-wave gold glow sweep (flashcard back face) ───────────────
     ADDITIVE. When the card flips to the back, a gold glow wave flows
     through every character in reading order over ~12s. Each character
     span carries --wave-i (its reading-order index) and the container
     carries --wave-count (total chars) and --wave-progress (0..1, driven
     by the useReadingWave rAF loop). A character glows gold while the
     wave is over it; the glow fades back to normal after the wave
     passes. Pure color + text-shadow transition — NO font-size or
     layout change, so nothing reflows. */
.flashcard-wave {
    /* Driven by the useReadingWave hook via inline style on the container.
       Defaults keep text normal if the wave is not running. */
    --wave-progress: -1; /* -1 = inactive (no glow) */
    --wave-count: 1;
  }
.flashcard-wave-char {
    /* Per-char index, set inline. */
    --wave-i: 0;
    /* Width of the glow window, in characters. A larger window makes the
        glow pass over more characters at once so each one glows longer. */
    --wave-window: 10;
    color: inherit;
    transition: color 0.35s ease-out, text-shadow 0.35s ease-out, transform
      0.25s ease-out;
    transform-origin: center;
    /* Keep whitespace from collapsing when we wrap it in spans. */
    white-space: pre-wrap;
  }
.flashcard-wave-char.is-wave-space {
    /* Spaces don't need the glow but still need to occupy width. */
    white-space: pre;
  }
/* The glow itself: gold color + gold text-shadow while the wave is
     passing over this character. Activated only when --wave-progress >= 0
     (set by the hook) and the character's index falls within the window
     around the current wave position. We use a CSS calc + clamp trick:
     distance = abs(--wave-i - progress*count); glow when distance < window.
     Implemented via opacity of an overlay color using color-mix. */
.flashcard-wave-char {
    /* Compute the wave position for this character.
       pos = --wave-progress * --wave-count  (current char index the wave is at)
       dist = abs(--wave-i - pos)
       intensity = clamp(window - dist, 0, 1)  (1 at center, 0 at edge)
       We blend the inherited color with the gold glow by intensity. */
    --wave-pos: calc(var(--wave-progress) * var(--wave-count));
    --wave-dist: calc(var(--wave-i) - var(--wave-pos));
    /* abs() via max(a, -a) */
    --wave-abs-dist: max(var(--wave-dist), calc(-1 * var(--wave-dist)));
    --wave-intensity: clamp(
      0,
      calc(var(--wave-window) - var(--wave-abs-dist)),
      1
    );
    /* Only apply the gold glow when the wave is active (progress >= 0). */
  }
.flashcard-wave.is-active .flashcard-wave-char {
    /* Blend toward gold at peak intensity; blend toward a dimmed neutral gray
       at low intensity so the active character stands out from muted
       surrounding text. The dimmed base is oklch(0.45 0 0) — a neutral
       mid-gray. At intensity=1 the color is full gold; at intensity=0 it is
       the dim gray; in between it transitions through. */
    color: color-mix(
      in oklch,
      oklch(var(--legendary-glow)) calc(var(--wave-intensity) * 100%),
      oklch(0.45 0 0) calc((1 - var(--wave-intensity)) * 100%)
    );
    /* Stronger three-layer gold shadow: bright tight core + mid halo + wide
       soft halo. */
    text-shadow: 0 0 4px
      oklch(var(--legendary-glow) / calc(var(--wave-intensity) * 0.95)), 0 0
      10px oklch(var(--legendary-glow) / calc(var(--wave-intensity) * 0.7)), 0 0
      22px oklch(var(--legendary-glow) / calc(var(--wave-intensity) * 0.45));
    /* Slight scale bump on the active character for extra emphasis. Transform
       does not affect layout flow, so nothing reflows. */
    transform: scale(calc(1 + var(--wave-intensity) * 0.08));
  }
/* Reduced motion — skip the character sweep entirely. Text just appears
     normally on flip with no glow wave. */
@media (prefers-reduced-motion: reduce) {
    .flashcard-wave.is-active .flashcard-wave-char {
      color: inherit;
      text-shadow: none;
      transform: none;
    }
    .flashcard-wave-char {
      transition: none;
    }
  }
/* ════════════════════════════════════════════════════════════════════
      Be Legendary — CINEMATIC PATRIOTIC HERO utilities (ADDITIVE redesign).
      All classes below are NEW. Existing bg-legendary-banner,
      legendary-glow-layer, animate-legendary-pulse, and flashcard-* classes
      above are PRESERVED UNCHANGED. Compose: hero-backdrop (stage) →
      hero image (generated, frontend adds) → hero-overlay (legibility scrim)
      → hero-wordmark (chrome/red/white/blue text) → hero-sweep (light beam) →
      hero-flash (mirror glint) → tagline/affordances on top.
      ════════════════════════════════════════════════════════════════════ */
/* (1) Deep navy roadhouse backdrop — darker than page background.
      Near-white spotlight radial glow from upper-left (a real spotlight
      hitting the flag, not a red wash that would double the flag's reds) +
      cool blue rim-light streaks strengthened to support the flag's blue.
      Sits behind the flag-and-eye-black hero image; if no image is present
      it reads as a cinematic patriotic stage on its own. position:relative so
      the sweep, flash, and glow pseudo-layers can anchor to it. */
.legendary-hero-backdrop {
    position: relative;
    background-color: oklch(var(--legendary-hero-backdrop));
    /* near-white spotlight radial — upper-left, white beam, soft falloff.
       White (not red) so the flag image's own reds stay clean and unmuddied. */
    background-image: radial-gradient(
        ellipse 70% 90% at 22% 18%,
        oklch(
            var(--legendary-hero-spotlight) /
            var(--legendary-hero-spotlight-strength)
          )
          0%,
        oklch(var(--legendary-hero-spotlight) / 0.1) 38%,
        transparent 68%
      ), /* cool blue rim-light streaks — diagonal glints lower-right,
           strengthened so the flag's blue reads cleanly */
      linear-gradient(
        115deg,
        transparent 0%,
        transparent 56%,
        oklch(
            var(--legendary-hero-bottle-glint) /
            var(--legendary-hero-bottle-glint-strength)
          )
          60%,
        transparent 64%,
        transparent 72%,
        oklch(var(--legendary-hero-bottle-glint) / 0.14) 76%,
        transparent 82%
      ), /* base navy wash so the spotlight never lifts the floor too far */
      linear-gradient(
        180deg,
        oklch(var(--legendary-hero-backdrop) / 0.4) 0%,
        oklch(var(--legendary-hero-backdrop)) 100%
      );
    overflow: hidden;
    isolation: isolate;
  }
/* Legibility scrim over the flag-and-eye-black hero image — keeps the
     BOLD wordmark readable over the busy flag stripes without washing out
     the woman's face on the right. Applied as a separate layer above the
     image, below the wordmark. Gradient is heaviest on the LEFT (wordmark
     zone) and lightens toward the RIGHT (face zone) so the face stays
     visible while the wordmark pops. */
.legendary-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      oklch(
          var(--legendary-hero-overlay) /
          var(--legendary-hero-overlay-strength)
        )
        0%,
      oklch(var(--legendary-hero-overlay) / 0.5) 45%,
      oklch(var(--legendary-hero-overlay) / 0.28) 75%,
      oklch(var(--legendary-hero-overlay) / 0.18) 100%
    );
    pointer-events: none;
  }
/* (2) Chrome/silver-to-red/white/blue metallic wordmark — patriotic
      multi-stop gradient clipped to the text glyphs, chiseled depth via
      filter: drop-shadow (NOT text-shadow), outer red glow. Tuned to pop
      over a busy flag background: brighter near-white top sheen, a cool
      blue accent stop, and a stronger chiseled shadow + red glow so the
      glyphs lift off the flag stripes. Use on the "BE LEGENDARY" Anton
      wordmark. The static gradient remains visible even when sweep/flash
      are paused by prefers-reduced-motion.

      IMPORTANT — why drop-shadow and NOT text-shadow:
      text-shadow renders a SOLID COPY of each glyph in the shadow color,
      offset by the shadow's position. When background-clip:text makes the
      glyph fill transparent (so the gradient shows through), a text-shadow
      like "0 1px 0 <near-white>" paints a near-white duplicate of the
      glyph 1px below the gradient-filled original — so "BE" appears TWICE
      (the gradient BE on top, the shadow BE peeking out below it). Stacked
      shadows at 0 2px / 0 4px / 0 8px compound the doubling.

      filter: drop-shadow() instead shadows the element's ALPHA CHANNEL —
      the already-clipped gradient glyphs — so it shadows the visible
      shape without painting a solid glyph copy. No doubling. The chiseled
      depth is rebuilt as stacked drop-shadow layers (bright top edge,
      deep underside, lateral cast) plus the existing outer red glow. */
.legendary-hero-wordmark {
    position: relative;
    z-index: 3;
    font-family: var(--font-display);
    color: transparent;
    background-image: linear-gradient(
      180deg,
      oklch(var(--legendary-metallic-highlight)) 0%,
      oklch(var(--legendary-metallic-bright)) 18%,
      oklch(var(--legendary-metallic-mid)) 40%,
      oklch(var(--legendary-metallic-deep)) 60%,
      oklch(var(--legendary-metallic-shadow)) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* NO text-shadow — it would paint solid glyph copies behind the
        transparent-fill gradient text and double the wordmark. Chiseled
        3D depth + outer red glow are all done with filter: drop-shadow,
        which shadows the clipped gradient's alpha channel (the visible
        glyph shape) and never produces a duplicate glyph. */
    filter: drop-shadow(
        0 1px 0 oklch(var(--legendary-metallic-highlight) / 0.7)
      )
      drop-shadow(0 2px 1px oklch(var(--legendary-metallic-shadow) / 0.75))
      drop-shadow(0 4px 3px oklch(0.12 0.005 75 / 0.8))
      drop-shadow(0 8px 10px oklch(0.1 0.004 75 / 0.65))
      drop-shadow(
        0 0 16px
          oklch(
            var(--legendary-metallic-glow) /
            var(--legendary-metallic-glow-strength)
          )
      );
    /* the sweep pseudo-element anchors to the wordmark so the beam crosses
        the patriotic glyphs specifically, not just the banner surface */
  }
/* Fallback for browsers without background-clip:text — solid metallic
      highlight fill so the wordmark never disappears into the backdrop.
      Wrapped in @supports not (...) so it ONLY applies when clipping is
      unsupported. When clipping IS supported, the block above runs and
      the fallback never applies — so the fallback color can never layer
      behind the clipped gradient text and double the wordmark. */
@supports not (((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text)) {
    .legendary-hero-wordmark {
      color: oklch(var(--legendary-metallic-highlight));
      background: none;
      -webkit-text-fill-color: initial;
      /* drop-shadow still works on solid-fill text, so keep the depth +
          glow. No text-shadow here either, for the same reason. */
      filter: drop-shadow(
          0 1px 0 oklch(var(--legendary-metallic-highlight) / 0.7)
        )
        drop-shadow(0 2px 1px oklch(var(--legendary-metallic-shadow) / 0.75))
        drop-shadow(0 4px 3px oklch(0.12 0.005 75 / 0.8))
        drop-shadow(0 8px 10px oklch(0.1 0.004 75 / 0.65))
        drop-shadow(
          0 0 16px
            oklch(
              var(--legendary-metallic-glow) /
              var(--legendary-metallic-glow-strength)
            )
        );
    }
  }
/* (3) Light-sweep — diagonal semi-transparent white beam sweeping across
     the banner surface. Pseudo-element based, transform-driven (translateX
     + skewX) so it stays GPU-composited and performant. BOLD and frequent:
     2.8s cycle with a built-in rest hold so it reads as periodic flashes,
     not constant motion. Anchors to .legendary-hero-backdrop. */
.legendary-hero-sweep::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -60%;
    width: 38%;
    height: 140%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      100deg,
      transparent 0%,
      oklch(var(--legendary-sweep-beam) / 0.06) 30%,
      oklch(var(--legendary-sweep-beam) / var(--legendary-sweep-beam-strength))
        50%,
      oklch(var(--legendary-sweep-beam) / 0.06) 70%,
      transparent 100%
    );
    transform: skewX(-18deg);
    mix-blend-mode: screen;
    animation: legendary-sweep var(--legendary-sweep-duration)
      cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
/* (4) Mirror-finish flash — periodic opacity pulse on a highlight overlay.
      A bright glint that sweeps the chrome surface like polished metal catching
      a light. Anchors to .legendary-hero-backdrop as a separate layer above
      the sweep but below the wordmark. */
.legendary-hero-flash::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
      ellipse 55% 80% at 35% 40%,
      oklch(var(--legendary-flash-highlight) / var(--legendary-flash-strength))
        0%,
      oklch(var(--legendary-flash-highlight) / 0.1) 35%,
      transparent 60%
    );
    mix-blend-mode: screen;
    opacity: 0;
    animation: legendary-flash var(--legendary-flash-duration) ease-in-out
      infinite;
  }
/* Reduced motion — sweep + flash pause; static patriotic gradient and
      backdrop remain. The banner still reads as a cinematic patriotic
      marquee, just without motion. */
@media (prefers-reduced-motion: reduce) {
    .legendary-hero-sweep::after,
    .legendary-hero-flash::before {
      animation: none;
    }
    .legendary-hero-sweep::after {
      display: none;
    }
    .legendary-hero-flash::before {
      opacity: 0;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     Drinks Builder — ADDITIVE game utilities (Be Legendary Learning Hub).
     Tap-based drink-construction game. SVG glass hero, four sections
     (Glassware/Specs/Assembly/Garnish), chip taps, streak flame, score
     header, confetti burst. Gradients/glow permitted here. Existing
     flat roadhouse tokens are untouched.
     ════════════════════════════════════════════════════════════════════ */
/* Color utilities — game-specific surfaces */
.bg-drinks-correct {
    background-color: oklch(var(--drinks-correct));
  }
.text-drinks-correct {
    color: oklch(var(--drinks-correct));
  }
.border-drinks-correct {
    border-color: oklch(var(--drinks-correct));
  }
.bg-drinks-incorrect {
    background-color: oklch(var(--drinks-incorrect));
  }
.text-drinks-incorrect {
    color: oklch(var(--drinks-incorrect));
  }
.border-drinks-incorrect {
    border-color: oklch(var(--drinks-incorrect));
  }
.bg-drinks-foam {
    background-color: oklch(var(--drinks-foam));
  }
.text-drinks-foam {
    color: oklch(var(--drinks-foam));
  }
.bg-drinks-liquid {
    background: linear-gradient(
      180deg,
      oklch(var(--drinks-liquid-default)) 0%,
      oklch(var(--drinks-liquid-default-deep)) 100%
    );
  }
.fill-drinks-liquid {
    fill: oklch(var(--drinks-liquid-default));
  }
.fill-drinks-foam {
    fill: oklch(var(--drinks-foam));
  }
.stroke-drinks-glass {
    stroke: oklch(var(--drinks-glass-stroke));
  }
.fill-drinks-glass-shine {
    fill: oklch(var(--drinks-glass-shine));
  }
.text-drinks-streak-flame {
    color: oklch(var(--drinks-streak-flame));
  }
.text-drinks-star {
    color: oklch(var(--drinks-star));
  }
.text-drinks-section-done {
    color: oklch(var(--drinks-section-done));
  }
.text-drinks-section-pending {
    color: oklch(var(--drinks-section-pending));
  }
.bg-drinks-chip {
    background-color: oklch(var(--drinks-chip-bg));
    border: 1px solid oklch(var(--drinks-chip-border));
  }
.bg-drinks-chip-selected {
    background-color: oklch(var(--drinks-chip-selected-bg));
    border: 1px solid oklch(var(--drinks-chip-selected-border));
    color: oklch(var(--primary-foreground));
  }
/* ── Glass hero ─────────────────────────────────────────────────────
     SVG glass container. Liquid fills proportionally to specs completed;
     foam appears on completion. Liquid uses a clip-path/rect that animates
     its height (glass-fill keyframe drives the rise). */
.drinks-glass-fill {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom;
  }
.drinks-glass-foam {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transform-origin: center bottom;
    transition: opacity 0.4s ease, transform 0.4s
      cubic-bezier(0.34, 1.56, 0.64, 1);
  }
.drinks-glass-foam.is-complete {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
/* ── Feedback animations ──────────────────────────────────────────── */
/* green-pop: scale up + fade on correct tap */
.animate-drinks-green-pop {
    animation: drinks-green-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
/* red-shake: translateX oscillation on wrong tap */
.animate-drinks-red-shake {
    animation: drinks-red-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
/* rising-points: float up + fade for +score */
.animate-drinks-rising-points {
    animation: drinks-rising-points 0.9s ease-out forwards;
  }
/* glass-fill: smooth liquid rise (drives the SVG fill rect) */
.animate-drinks-glass-fill {
    animation: drinks-glass-fill 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
/* foam-appear: foam top pops in on completion */
.animate-drinks-foam-appear {
    animation: drinks-foam-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards;
  }
/* confetti-burst: particle burst on finish */
.animate-drinks-confetti-burst {
    animation: drinks-confetti-burst 1.1s ease-out forwards;
  }
/* legendary-banner: LEGENDARY! reveal (gold→red gradient + scale) */
.animate-drinks-legendary-banner {
    animation: drinks-legendary-banner 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)
      forwards;
  }
/* streak-flame: ON FIRE flame flicker (infinite while streak active) */
.animate-drinks-streak-flame {
    animation: drinks-streak-flame 0.6s ease-in-out infinite;
  }
/* star-pop: star rating pop on completion */
.animate-drinks-star-pop {
    animation: drinks-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
/* green-throb: gentle infinite green glow + subtle scale pulse for
     correct-tap emphasis. Box-shadow + transform only (no layout animation). */
.animate-drinks-green-throb {
    animation: drinks-green-throb 1.6s ease-in-out infinite;
  }
/* ── Keyframes (also mirrored in tailwind.config.js) ──────────────── */
@keyframes drinks-green-pop {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    40% {
      transform: scale(1.18);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
@keyframes drinks-red-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    15% {
      transform: translateX(-8px);
    }
    30% {
      transform: translateX(7px);
    }
    45% {
      transform: translateX(-6px);
    }
    60% {
      transform: translateX(5px);
    }
    75% {
      transform: translateX(-3px);
    }
    90% {
      transform: translateX(2px);
    }
  }
@keyframes drinks-rising-points {
    0% {
      transform: translateY(0) scale(0.8);
      opacity: 0;
    }
    20% {
      transform: translateY(-6px) scale(1.1);
      opacity: 1;
    }
    100% {
      transform: translateY(-44px) scale(1);
      opacity: 0;
    }
  }
@keyframes drinks-glass-fill {
    0% {
      transform: scaleY(0);
    }
    100% {
      transform: scaleY(1);
    }
  }
@keyframes drinks-foam-appear {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(0.85);
    }
    60% {
      opacity: 1;
      transform: translateY(-2px) scale(1.05);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
@keyframes drinks-confetti-burst {
    0% {
      transform: translate(0, 0) scale(0);
      opacity: 1;
    }
    100% {
      transform: translate(
          var(--drinks-confetti-x, 0),
          var(--drinks-confetti-y, -120px)
        )
        scale(1);
      opacity: 0;
    }
  }
@keyframes drinks-legendary-banner {
    0% {
      transform: scale(0.6) translateY(20px);
      opacity: 0;
    }
    60% {
      transform: scale(1.08) translateY(-4px);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
@keyframes drinks-streak-flame {
    0%,
    100% {
      transform: scale(1) rotate(-2deg);
      opacity: 0.9;
    }
    50% {
      transform: scale(1.15) rotate(2deg);
      opacity: 1;
    }
  }
@keyframes drinks-star-pop {
    0% {
      transform: scale(0) rotate(-30deg);
      opacity: 0;
    }
    60% {
      transform: scale(1.25) rotate(8deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }
@keyframes drinks-green-throb {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 oklch(var(--drinks-correct) / 0.55);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 0 0.5rem oklch(var(--drinks-correct) / 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 oklch(var(--drinks-correct) / 0.55);
    }
  }
/* Reduced motion — game animations shorten to instant state changes */
@media (prefers-reduced-motion: reduce) {
    .animate-drinks-green-pop,
    .animate-drinks-red-shake,
    .animate-drinks-rising-points,
    .animate-drinks-glass-fill,
    .animate-drinks-foam-appear,
    .animate-drinks-confetti-burst,
    .animate-drinks-legendary-banner,
    .animate-drinks-streak-flame,
    .animate-drinks-star-pop {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
    /* green-throb — falls back to a STATIC green glow (no scale/pulse).
       Box-shadow only, no transform, no animation. */
    .animate-drinks-green-throb {
      animation: none;
      transform: none;
      box-shadow: 0 0 0 0.25rem oklch(var(--drinks-correct) / 0.45);
    }
    .drinks-glass-fill,
    .drinks-glass-foam {
      transition: none;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     Profile page + admin Users card — ADDITIVE utilities.
     Circular avatar (distinct from the rectangular .photo-field-preview),
     email-verification inline states, photo-upload affordance. Reuses
     existing card/border/primary tokens; flat roadhouse rules intact.
     ════════════════════════════════════════════════════════════════════ */
/* Circular avatar — used on Profile header AND admin Users cards.
     1px low-chroma ring (border), full radius, object-cover img. The ring
     shifts to red on hover/active via .is-active so the upload affordance
     reads clearly. Falls back to initials on a library-card fill when no
     photo is set. */
.profile-avatar {
    background-color: oklch(var(--profile-avatar-bg));
    border: 1px solid oklch(var(--profile-avatar-ring));
    border-radius: 9999px;
    color: oklch(var(--profile-avatar-fg));
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.profile-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
.profile-avatar.is-active,
  .profile-avatar:hover {
    border-color: oklch(var(--profile-avatar-ring-active));
  }
/* Initials fallback inside the avatar — Oswald uppercase, centered.
     Used when no photo is set; photo is optional everywhere. */
.profile-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
/* Photo-upload affordance overlay — a dashed ring + camera glyph that
     appears on hover over an empty avatar, signaling "tap to upload".
     Reuses the photo-empty dashed pattern; no gradient, no glow. */
.profile-avatar-upload {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px dashed oklch(var(--profile-avatar-ring-active));
    background-color: oklch(var(--profile-avatar-bg) / 0.7);
    color: oklch(var(--profile-avatar-ring-active));
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.profile-avatar:hover .profile-avatar-upload,
  .profile-avatar:focus-within .profile-avatar-upload {
    opacity: 1;
  }
/* Email-verification pending inline badge — muted amber fill, dark text,
     flat (no pulse, no gradient). Distinct from in-training gold. Shown on
     the Profile page next to a newly-entered email awaiting verification. */
.bg-profile-email-pending {
    background-color: oklch(var(--profile-email-pending));
  }
.text-profile-email-pending {
    color: oklch(var(--profile-email-pending));
  }
.text-profile-email-pending-fg {
    color: oklch(var(--profile-email-pending-fg));
  }
.border-profile-email-pending {
    border-color: oklch(var(--profile-email-pending-border));
  }
/* Email-verified inline check — seasonal-green family, dark text, flat.
     Shown next to a confirmed email on the Profile page and admin cards. */
.bg-profile-email-verified {
    background-color: oklch(var(--profile-email-verified));
  }
.text-profile-email-verified {
    color: oklch(var(--profile-email-verified));
  }
.text-profile-email-verified-fg {
    color: oklch(var(--profile-email-verified-fg));
  }
/* Avatar ring breathing — a slow, subtle red ring pulse on the Profile
     header avatar ONLY while a photo is uploading, so the user sees
     progress. Single-purpose; pauses under reduced motion. */
.animate-profile-avatar-ring {
    animation: profile-avatar-ring 1.4s ease-in-out infinite;
  }
@keyframes profile-avatar-ring {
    0%,
    100% {
      border-color: oklch(var(--profile-avatar-ring));
    }
    50% {
      border-color: oklch(var(--profile-avatar-ring-active));
    }
  }
@media (prefers-reduced-motion: reduce) {
    .animate-profile-avatar-ring {
      animation: none;
    }
    .profile-avatar,
    .profile-avatar-upload {
      transition: none;
    }
  }
/* ════════════════════════════════════════════════════════════════════
     Food Recipe — ADDITIVE utilities (Library food-recipe surfaces).
     Sibling to the beverage RecipeCard: reuses .bg-library-card surface,
     Anton/Oswald/Barlow type, flat roadhouse rules. Station accents are
     flat fills (no glow); EXPO callout is a flat purple-red surface.
     Does NOT alter any existing utility. All classes prefixed food- /
     food-station- / food-expo- / food-allergen- so they never collide.
     ════════════════════════════════════════════════════════════════════ */
/* Station accent color utilities — one per kitchen station. Used on
     station badges, kitchen-browser tile top stripes, and prep-tile
     placeholders. Each station exposes a -bg, -text, -border, and -wash
     (low-opacity fill for placeholders). */
.bg-food-station-expo {
    background-color: oklch(var(--food-station-expo));
  }
.text-food-station-expo {
    color: oklch(var(--food-station-expo));
  }
.border-food-station-expo {
    border-color: oklch(var(--food-station-expo));
  }
.bg-food-station-expo-wash {
    background-color: oklch(var(--food-station-expo-wash));
  }
.bg-food-station-grill {
    background-color: oklch(var(--food-station-grill));
  }
.text-food-station-grill {
    color: oklch(var(--food-station-grill));
  }
.border-food-station-grill {
    border-color: oklch(var(--food-station-grill));
  }
.bg-food-station-grill-wash {
    background-color: oklch(var(--food-station-grill-wash));
  }
.bg-food-station-fry {
    background-color: oklch(var(--food-station-fry));
  }
.text-food-station-fry {
    color: oklch(var(--food-station-fry));
  }
.border-food-station-fry {
    border-color: oklch(var(--food-station-fry));
  }
.bg-food-station-fry-wash {
    background-color: oklch(var(--food-station-fry-wash));
  }
.bg-food-station-pizza {
    background-color: oklch(var(--food-station-pizza));
  }
.text-food-station-pizza {
    color: oklch(var(--food-station-pizza));
  }
.border-food-station-pizza {
    border-color: oklch(var(--food-station-pizza));
  }
.bg-food-station-pizza-wash {
    background-color: oklch(var(--food-station-pizza-wash));
  }
.bg-food-station-saute {
    background-color: oklch(var(--food-station-saute));
  }
.text-food-station-saute {
    color: oklch(var(--food-station-saute));
  }
.border-food-station-saute {
    border-color: oklch(var(--food-station-saute));
  }
.bg-food-station-saute-wash {
    background-color: oklch(var(--food-station-saute-wash));
  }
.bg-food-station-hotprep {
    background-color: oklch(var(--food-station-hotprep));
  }
.text-food-station-hotprep {
    color: oklch(var(--food-station-hotprep));
  }
.border-food-station-hotprep {
    border-color: oklch(var(--food-station-hotprep));
  }
.bg-food-station-hotprep-wash {
    background-color: oklch(var(--food-station-hotprep-wash));
  }
.bg-food-station-coldprep {
    background-color: oklch(var(--food-station-coldprep));
  }
.text-food-station-coldprep {
    color: oklch(var(--food-station-coldprep));
  }
.border-food-station-coldprep {
    border-color: oklch(var(--food-station-coldprep));
  }
.bg-food-station-coldprep-wash {
    background-color: oklch(var(--food-station-coldprep-wash));
  }
.bg-food-station-default {
    background-color: oklch(var(--food-station-default));
  }
.text-food-station-default {
    color: oklch(var(--food-station-default));
  }
.border-food-station-default {
    border-color: oklch(var(--food-station-default));
  }
.bg-food-station-default-wash {
    background-color: oklch(var(--food-station-default-wash));
  }
/* Station badge — small pill. Flat station-accent fill, cream (or dark
     for fry/coldprep) text, Oswald uppercase, sharp 4px radius. Mirrors
     the existing badge pattern but tinted per station. */
.food-station-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.28rem 0.55rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
  }
/* Menu-section badge — secondary (navy) fill, cream text. Distinct from
     the station badge so the two badges read as different axes. */
.food-section-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.26rem 0.5rem;
    border-radius: var(--radius);
    background-color: oklch(var(--secondary));
    color: oklch(var(--secondary-foreground));
    border: 1px solid oklch(var(--secondary));
  }
/* EXPO finishing-steps callout — flat purple-red surface, expo-accent
     left edge + label. Used on the menuBuild card for the highlighted
     EXPO finishing steps block. Flat fill, no glow, no gradient. */
.food-expo-callout {
    position: relative;
    background-color: oklch(var(--food-expo-callout));
    color: oklch(var(--food-expo-callout-fg));
    border: 1px solid oklch(var(--food-expo-callout-border));
    border-left: 3px solid oklch(var(--food-expo-callout-accent));
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
  }
.food-expo-callout-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: oklch(var(--food-expo-callout-accent));
  }
/* Allergen callout — muted red-tinted surface, destructive-red left
     edge. Sits at the bottom of the menuBuild card. Flat, no glow. */
.food-allergen-callout {
    position: relative;
    background-color: oklch(var(--food-allergen));
    color: oklch(var(--food-allergen-fg));
    border: 1px solid oklch(var(--food-allergen-border) / 0.5);
    border-left: 3px solid oklch(var(--food-allergen-border));
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
  }
.food-allergen-callout-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: oklch(var(--destructive));
  }
/* Plating group divider — subtle separator inside the Components table
     between the serviceware ('Plating') rows and the component rows.
     Muted, low-chroma, 1px. */
.food-plating-rule {
    border-top: 1px dashed oklch(var(--food-plating-divider));
  }
.food-plating-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 600;
    color: oklch(var(--muted-foreground));
  }
/* Components → Amount table — two columns. Component left, amount
     right-aligned. Mirrors the beverage recipe specs-row pattern but on
     the library-card surface. Numbered build steps use Oswald numerals. */
.food-components-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.28rem 0;
  }
.food-components-row .component {
    font-family: var(--font-body);
    color: oklch(var(--foreground));
  }
.food-components-row .amount {
    font-family: var(--font-body);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    color: oklch(var(--foreground));
  }
/* Numbered build-steps list — Oswald numerals, Barlow body. */
.food-build-steps {
    list-style: decimal;
    padding-left: 1.4rem;
  }
.food-build-steps > li {
    font-family: var(--font-body);
    color: oklch(var(--foreground));
    padding: 0.18rem 0;
  }
.food-build-steps > li::marker {
    font-family: var(--font-heading);
    font-weight: 700;
    color: oklch(var(--primary));
  }
/* Prep meta badges — compact row of badges (Yield, Shelf life, Line
     utensil, Hold temp, Store temp). Flat muted outline, Oswald label +
     Barlow value. Distinct from the station badge (no station color). */
.food-meta-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
  }
.food-meta-badge .label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: oklch(var(--muted-foreground));
  }
.food-meta-badge .value {
    font-family: var(--font-body);
    font-weight: 600;
    color: oklch(var(--foreground));
  }
.food-meta-badge .\!value {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: oklch(var(--foreground)) !important;
  }
/* Prep ingredient table — grouped by 'Step 1', 'Step 2'… Group label
     is an Oswald uppercase divider; rows reuse .food-components-row. */
.food-prep-group-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.82rem;
    color: oklch(var(--foreground));
    padding-bottom: 0.3rem;
    border-bottom: 2px solid oklch(var(--border));
    margin-top: 0.6rem;
  }
.food-prep-group-label:first-child {
    margin-top: 0;
  }
/* Quality identifiers checklist — ✓ bullets (seasonal green). */
.food-quality-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
.food-quality-list > li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-family: var(--font-body);
    color: oklch(var(--foreground));
    padding: 0.18rem 0;
  }
.food-quality-list > li::before {
    content: "✓";
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: oklch(var(--food-check));
    line-height: 1.3;
  }
/* Equipment line — single Barlow line, muted label + value. */
.food-equipment-line {
    font-family: var(--font-body);
    color: oklch(var(--foreground));
  }
.food-equipment-line .label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: oklch(var(--muted-foreground));
  }
/* Kitchen browser tile — reuses library-card surface. Top stripe is
     the station accent color (6px). Photo thumbnail OR station-wash
     placeholder when no photo. Title in Oswald, station in station
     color, menu-section/PREP tag in secondary (navy) or muted. */
.food-tile {
    position: relative;
    background-color: oklch(var(--library-card));
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.food-tile:hover {
    border-color: oklch(var(--primary) / 0.5);
    box-shadow: 0 0 0 1px oklch(var(--primary) / 0.2);
  }
.food-tile-stripe {
    height: 6px;
    width: 100%;
  }
.food-tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: oklch(var(--food-tile-placeholder));
  }
.food-tile-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
/* Prep-tile placeholder — station-wash fill, station-accent station
     name in Oswald, large Anton initial of the recipe. No photo. */
.food-tile-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0.3rem;
    padding: 0.5rem;
  }
.food-tile-placeholder-initial {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.9;
    color: oklch(var(--foreground));
    opacity: 0.85;
  }
.food-tile-placeholder-station {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
  }
.food-tile-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: oklch(var(--foreground));
  }
.food-tile-meta {
    font-family: var(--font-body);
    color: oklch(var(--muted-foreground));
  }
/* Kitchen browser station filter chip — flat outline, Oswald uppercase.
     Selected state = station-accent fill (or primary red for 'All'). */
.food-station-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
    color: oklch(var(--foreground));
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color
      0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.food-station-chip:hover {
    border-color: oklch(var(--primary) / 0.5);
  }
/* ═══════════════════════════════════════════════════════════════════
     Food Recipe Book page — document-style card replicating the official
     Lake Charles Quik Reference recipe book. Light/cream paper surface (screen-only, not
     print), deep-purple (#4B1D74) title + column-header bands, Anton title,
     Oswald labels, Barlow body. Distinct from the dark library-card food
     tiles. All colors come from the --food-recipe-* tokens above.
     ═══════════════════════════════════════════════════════════════════ */
/* Paper card — the document surface. Cream fill, square corners flush
     to the bands, thin paper edge. No dark library-card background. */
.food-recipe-card {
    background-color: oklch(var(--food-recipe-paper));
    color: oklch(var(--food-recipe-paper-fg));
    border: 1px solid oklch(var(--food-recipe-paper-border));
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 2px oklch(0.2 0.01 280 / 0.18), 0 4px 12px
      oklch(0.2 0.01 280 / 0.1);
  }
/* Title band — solid accent across the very top, full width, square to
     the card edges. Anton uppercase white title, centered. The accent is
     the per-category --category-accent (navy default, hex inline override
     on the card root); white text reads on every brand swatch. */
.food-recipe-title-band {
    background-color: var(--category-accent);
    color: #ffffff;
    padding: 0.85rem 1rem;
    text-align: center;
  }
.food-recipe-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.05;
    color: #ffffff;
  }
/* Multi-batch prep title band — mirrors the build-card title band flex
     layout so the title sits left and the reused .build-card-size-picker
     sits right. Additive: only applies when the band carries the
     is-multibatch modifier (multi-batch prep with 2+ distinct sizes).
     Single-batch prep keeps the centered title band above unchanged. */
.food-recipe-title-band.is-multibatch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
  }
.food-recipe-title-band.is-multibatch .food-recipe-title {
    text-align: left;
  }
/* Column-header band — accent strip under the photo (menuBuild) or
     under the title band (prep ingredient table). Oswald uppercase white
     labels. The three-label menuBuild variant uses a 3-track grid; the
     two-label prep variant uses a 2-track grid. */
.food-recipe-column-band {
    display: grid;
    background-color: var(--category-accent);
    color: #ffffff;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.78rem;
  }
.food-recipe-column-band.is-3 {
    grid-template-columns: 1fr auto 1fr;
    padding: 0.45rem 1rem;
  }
.food-recipe-column-band.is-2 {
    grid-template-columns: 1fr auto;
    padding: 0.45rem 1rem;
  }
.food-recipe-column-band > .label-center {
    text-align: center;
  }
.food-recipe-column-band > .label-right {
    text-align: right;
  }
/* Photo block — full width, edge to edge, no side padding. Natural
     aspect (object-contain) on its own neutral background so a portrait
     photo never crops and a landscape photo never stretches. */
.food-recipe-photo {
    width: 100%;
    background-color: oklch(0.93 0.01 280);
    line-height: 0;
  }
.food-recipe-photo img {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    max-height: 26rem;
  }
/* Two-column body — Assembly|Procedure (menuBuild) or
     Ingredients|Procedure (prep). Stacks on mobile. */
.food-recipe-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
@media (min-width: 720px) {
    .food-recipe-body.is-split {
      grid-template-columns: 55% 45%;
    }
    .food-recipe-body.is-split > * + * {
      border-left: 1px solid oklch(var(--food-recipe-paper-border));
    }
  }
.food-recipe-column {
    padding: 0.9rem 1rem 1rem;
    min-width: 0;
  }
/* Assembly / Ingredient row — square bullet + item on the left, amount
     right-aligned in its own column so amounts line up under AMOUNT.
     Subtle row separators. */
.food-recipe-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.32rem 0;
    border-bottom: 1px solid oklch(var(--food-recipe-purple-rule) / 0.6);
  }
.food-recipe-row:last-child {
    border-bottom: none;
  }
.food-recipe-row .item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-body);
    color: oklch(var(--food-recipe-paper-fg));
  }
.food-recipe-row .\!item {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    font-family: var(--font-body) !important;
    color: oklch(var(--food-recipe-paper-fg)) !important;
  }
.food-recipe-row .item::before {
    content: "\25A0";
    flex-shrink: 0;
    font-size: 0.6rem;
    line-height: 1.4;
    color: oklch(var(--food-recipe-purple));
  }
.food-recipe-row .\!item::before {
    content: "\25A0" !important;
    flex-shrink: 0 !important;
    font-size: 0.6rem !important;
    line-height: 1.4 !important;
    color: oklch(var(--food-recipe-purple)) !important;
  }
.food-recipe-row .item-note {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: oklch(var(--food-recipe-paper-muted));
    margin-top: 0.1rem;
  }
.food-recipe-row .amount {
    font-family: var(--font-body);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    color: oklch(var(--food-recipe-paper-fg));
  }
/* Plating sub-label — small Oswald uppercase divider above the
     serviceware rows in the Assembly column. */
.food-recipe-plating-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    font-weight: 600;
    color: oklch(var(--food-recipe-paper-muted));
    padding-bottom: 0.25rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px dashed oklch(var(--food-recipe-purple-rule));
  }
/* Hand-wash / glove note — small muted line at the top of the
     Procedure column with a hand-wash icon. */
.food-recipe-handwash {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    line-height: 1.45;
    color: oklch(var(--food-recipe-paper-muted));
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid oklch(var(--food-recipe-paper-border));
  }
.food-recipe-handwash svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: oklch(var(--food-recipe-purple));
  }
/* Procedure steps — bullet list, Barlow body. */
.food-recipe-steps {
    list-style: disc;
    padding-left: 1.15rem;
    margin: 0;
  }
.food-recipe-steps > li {
    font-family: var(--font-body);
    color: oklch(var(--food-recipe-paper-fg));
    padding: 0.16rem 0;
    line-height: 1.45;
  }
.food-recipe-steps > li::marker {
    color: oklch(var(--food-recipe-purple));
  }
/* EXPO callout — light-tint highlighted box at the bottom of the
     Procedure column, with a vertical rotated 'EXPO' label down its left
     edge. writing-mode keeps the label readable top-to-bottom. The body
     uses --category-accent-tint (a 22%-over-white wash of the per-category
     accent); the label uses the accent as its background with white text. */
.food-recipe-expo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    margin-top: 0.7rem;
    background-color: var(--category-accent-tint);
    border: 1px solid var(--category-accent);
    border-radius: var(--radius);
    overflow: hidden;
  }
.food-recipe-expo-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    font-size: 0.78rem;
    color: #ffffff;
    background-color: var(--category-accent);
    padding: 0.6rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.food-recipe-expo-body {
    padding: 0.55rem 0.7rem 0.6rem;
    min-width: 0;
  }
.food-recipe-expo-body .food-recipe-steps > li {
    color: oklch(var(--food-recipe-paper-fg));
  }
/* Allergen callout (menuBuild) — muted line at the bottom of the
     Assembly column. */
.food-recipe-allergen {
    margin-top: 0.7rem;
    padding: 0.5rem 0.65rem;
    background-color: oklch(0.95 0.02 50);
    border-left: 3px solid oklch(var(--food-recipe-purple));
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: oklch(var(--food-recipe-paper-fg));
  }
.food-recipe-allergen .label {
    display: block;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.68rem;
    color: oklch(var(--food-recipe-purple));
    margin-bottom: 0.15rem;
  }
/* Prep intro line — muted Barlow line under the title band. */
.food-recipe-intro {
    font-family: var(--font-body);
    font-style: italic;
    color: oklch(var(--food-recipe-paper-muted));
    padding: 0.6rem 1rem 0;
  }
.food-recipe-equipment {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: oklch(var(--food-recipe-paper-muted));
    padding: 0.3rem 1rem 0;
  }
.food-recipe-equipment .label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: oklch(var(--food-recipe-purple));
  }
/* Prep meta stack — right-aligned Yield / Shelf life / Holding block
     sitting under the title band (top-right of the page). */
.food-recipe-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    padding: 0.55rem 1rem 0.4rem;
    font-family: var(--font-body);
    color: oklch(var(--food-recipe-paper-fg));
  }
.food-recipe-meta .row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.82rem;
  }
.food-recipe-meta .row .label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 0.7rem;
    color: oklch(var(--food-recipe-paper-muted));
  }
.food-recipe-meta .row .value {
    font-weight: 600;
  }
.food-recipe-meta .row .\!value {
    font-weight: 600 !important;
  }
.food-recipe-meta .row.is-yield .value {
    font-weight: 700;
  }
.food-recipe-meta .row.is-yield .\!value {
    font-weight: 700 !important;
  }
/* Prep ingredient table — two columns Ingredient | Amount with a
     tinted purple header row. Rows grouped by Step subheadings. */
.food-recipe-ingredient-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    background-color: oklch(var(--food-recipe-table-header));
    color: oklch(var(--food-recipe-table-header-fg));
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.74rem;
  }
.food-recipe-ingredient-header .amount {
    text-align: right;
  }
.food-recipe-step-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.78rem;
    color: oklch(var(--food-recipe-purple));
    padding: 0.55rem 1rem 0.15rem;
    border-bottom: 1px solid oklch(var(--food-recipe-purple-rule));
    margin-bottom: 0.1rem;
  }
.food-recipe-ingredient-rows {
    padding: 0.2rem 1rem 0.6rem;
  }
/* Prep procedure heading — 'WASH YOUR HANDS…' style label. */
.food-recipe-procedure-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.82rem;
    color: oklch(var(--food-recipe-purple));
    margin-bottom: 0.35rem;
  }
/* Quality identifiers checklist — ✓ bullets in deep purple. */
.food-recipe-quality {
    list-style: none;
    padding: 0;
    margin: 0;
  }
.food-recipe-quality > li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-family: var(--font-body);
    color: oklch(var(--food-recipe-paper-fg));
    padding: 0.16rem 0;
    line-height: 1.45;
  }
.food-recipe-quality > li::before {
    content: "\2713";
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: oklch(var(--food-recipe-purple));
    line-height: 1.3;
  }
/* ── Prep stepGroups section header — brand-red, uppercase, small
     left border rule. Renders above each stepGroup's numbered <ol> when
     foodRecipe.stepGroups is non-empty. Distinct from the purple
     .food-recipe-step-label (used for ingredient-table groupings) so
     the procedure sections read as their own structural divisions. ── */
.food-recipe-step-group-header {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.82rem;
    color: oklch(var(--primary));
    padding-left: 0.5rem;
    border-left: 3px solid oklch(var(--primary));
    margin: 0.7rem 0 0.35rem;
    line-height: 1.3;
  }
.food-recipe-step-group-header:first-child {
    margin-top: 0;
  }
/* ── Bubba's Why's Q&A panel — lightly tinted purple panel sitting
     near the bottom of the prep card (after quality identifiers, before
     the footer). Each entry is a bold purple question followed by its
     answer beneath. Omitted entirely when whys is empty. ── */
.food-recipe-whys {
    margin: 0.8rem 1rem 0;
    padding: 0.7rem 0.85rem 0.8rem;
    background-color: oklch(var(--food-recipe-purple-wash));
    border: 1px solid oklch(var(--food-recipe-purple-wash-border));
    border-radius: var(--radius);
  }
.food-recipe-whys-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.82rem;
    color: oklch(var(--food-recipe-purple));
    margin-bottom: 0.5rem;
  }
.food-recipe-whys-entry {
    padding: 0.3rem 0;
  }
.food-recipe-whys-entry + .food-recipe-whys-entry {
    border-top: 1px solid oklch(var(--food-recipe-purple-rule) / 0.7);
    margin-top: 0.3rem;
    padding-top: 0.5rem;
  }
.food-recipe-whys-question {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.86rem;
    color: oklch(var(--food-recipe-purple));
    line-height: 1.45;
    margin-bottom: 0.2rem;
  }
.food-recipe-whys-answer {
    display: block;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: oklch(var(--food-recipe-paper-fg));
    line-height: 1.5;
  }
/* Prep footer badges — Line utensil / Storage / Hold temp small
     labeled badges. */
.food-recipe-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem 1rem 0;
  }
.food-recipe-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.74rem;
    padding: 0.22rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--food-recipe-purple) / 0.4);
    background-color: oklch(var(--food-recipe-purple-wash));
    color: oklch(var(--food-recipe-paper-fg));
  }
.food-recipe-badge .label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 0.68rem;
    color: oklch(var(--food-recipe-purple));
  }
.food-recipe-badge .value {
    font-family: var(--font-body);
    font-weight: 600;
  }
.food-recipe-badge .\!value {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
  }
/* Footer strip — confidential notice bottom-left, station name
     bottom-right. Sits flush to the card's bottom edge. */
.food-recipe-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid oklch(var(--food-recipe-paper-border));
    background-color: oklch(var(--food-recipe-paper));
  }
.food-recipe-footer-confidential {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.62rem;
    font-weight: 600;
    color: oklch(var(--food-recipe-paper-muted));
  }
.food-recipe-footer-station {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    color: oklch(var(--food-recipe-purple));
  }
/* ═══════════════════════════════════════════════════════════════════
     Food Recipe Book page — PHONE layout (<1024px, tuned for ~375px).
     A distinct single-column stack that activates below 1024px. The
     existing >=1024px desktop layout (purple title band, full-width
     plating photo, ASSEMBLY|AMOUNT|PROCEDURE three-column header band,
     two-column body grid, EXPO callout with rotated vertical label,
     confidential/station footer) is preserved EXACTLY — the desktop
     markup lives inside .food-recipe-desktop and is hidden below 1024px;
     the phone markup lives inside .food-recipe-phone and is hidden at
     >=1024px. The existing 720px media query and all >=1024px desktop
     rules are untouched.
     ═══════════════════════════════════════════════════════════════════ */
/* Visibility toggle — desktop shows by default, phone is hidden; the
     @media (max-width: 1023px) block below flips them. */
.food-recipe-phone {
    display: none;
  }
@media (max-width: 1023px) {
    .food-recipe-desktop {
      display: none;
    }
    .food-recipe-phone {
      display: flex;
      flex-direction: column;
    }

    /* Phone title band — bump Anton title for arm's-length reading. The
       .food-recipe-title-band / .food-recipe-title rules above already
       render the purple band + Anton uppercase; here we just enlarge the
       title within the phone container. */
    .food-recipe-phone .food-recipe-title-band {
      padding: 0.95rem 1rem;
    }
    .food-recipe-phone .food-recipe-title {
      font-size: clamp(1.6rem, 6vw, 2.1rem);
      line-height: 1.08;
    }

    /* Multi-batch prep on phone — hide the inline desktop picker that
       sits on the right of the title band; the full-width
       .build-card-phone-size-picker sibling (already styled full-width
       by the existing build-card phone CSS) renders instead. Additive:
       only hides the inline picker on phone for multi-batch prep. */
    .food-recipe-phone
      .food-recipe-title-band.is-multibatch
      .build-card-size-picker {
      display: none;
    }

    /* Phone photo — full width, edge to edge. Cap height a touch lower
       for phone so it does not dominate the small screen. The tap target
       (the <button>) already opens the photo in a new tab via the
       existing window.open behavior. */
    .food-recipe-phone .food-recipe-photo img {
      max-height: 22rem;
    }

    /* ── Shared phone section label — small Oswald uppercase divider
       used by Plating / Build / Ingredients headings. ── */
    .food-recipe-phone-section-label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.78rem;
      font-weight: 700;
      color: oklch(var(--food-recipe-purple));
      padding: 0.65rem 1rem 0.3rem;
      margin-bottom: 0.2rem;
      border-bottom: 1px solid oklch(var(--food-recipe-purple-rule));
    }

    /* ── Phone amount row — item name left, amount as a bold chip/pill
       on the right. The pill wraps to its own line if long (flex-wrap),
       so amounts stay scannable and never truncate. Tap target >=44px. ── */
    .food-recipe-phone-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 0.65rem;
      min-height: 2.75rem; /* >=44px tap target */
      padding: 0.45rem 1rem;
      border-bottom: 1px solid oklch(var(--food-recipe-purple-rule) / 0.6);
    }
    .food-recipe-phone-row:last-child {
      border-bottom: none;
    }
    .food-recipe-phone-row .item {
      flex: 1 1 60%;
      min-width: 0;
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.4;
      color: oklch(var(--food-recipe-paper-fg));
    }
    .food-recipe-phone-row .item-note {
      display: block;
      font-family: var(--font-body);
      font-size: 0.82rem;
      color: oklch(var(--food-recipe-paper-muted));
      margin-top: 0.1rem;
    }
    .food-recipe-phone-row .amount-pill {
      flex: 0 1 auto;
      max-width: 100%;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.92rem;
      line-height: 1.2;
      color: oklch(var(--food-recipe-purple-fg));
      background-color: oklch(var(--food-recipe-purple));
      padding: 0.32rem 0.7rem;
      border-radius: 999px;
      white-space: normal; /* allow long amounts to wrap, never truncate */
      word-break: break-word;
    }

    /* ── menuBuild phone build section — Plating serviceware group on
       top, then the components stacked list. ── */
    .food-recipe-phone-build {
      padding-bottom: 0.4rem;
    }
    .food-recipe-phone-plating,
    .food-recipe-phone-components {
      padding-top: 0.2rem;
    }

    /* Allergen callout (menuBuild phone) — compact muted line. */
    .food-recipe-phone-allergen {
      margin: 0.6rem 1rem 0.4rem;
      padding: 0.55rem 0.7rem;
      background-color: oklch(0.95 0.02 50);
      border-left: 3px solid oklch(var(--food-recipe-purple));
      border-radius: 0 var(--radius) var(--radius) 0;
      font-family: var(--font-body);
      font-size: 0.92rem;
      line-height: 1.45;
      color: oklch(var(--food-recipe-paper-fg));
    }
    .food-recipe-phone-allergen .label {
      display: block;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      font-size: 0.72rem;
      color: oklch(var(--food-recipe-purple));
      margin-bottom: 0.15rem;
    }

    /* ── Phone procedure — numbered vertical list with comfortable
       line-height. ── */
    .food-recipe-phone-procedure {
      padding: 0.5rem 1rem 0.7rem;
    }
    .food-recipe-phone-procedure-heading {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      font-size: 0.95rem;
      color: oklch(var(--food-recipe-purple));
      margin-bottom: 0.45rem;
    }
    .food-recipe-phone-steps {
      list-style: decimal;
      padding-left: 1.4rem;
      margin: 0;
    }
    .food-recipe-phone-steps > li {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      color: oklch(var(--food-recipe-paper-fg));
      padding: 0.3rem 0;
    }
    .food-recipe-phone-steps > li::marker {
      color: oklch(var(--food-recipe-purple));
      font-weight: 700;
    }

    /* Hand-wash note on phone — one compact muted line (reuses the
       existing .food-recipe-handwash block; here we just bump the font
       and tighten the spacing for the phone stack). */
    .food-recipe-phone .food-recipe-handwash {
      font-size: 0.86rem;
      line-height: 1.5;
      padding-bottom: 0.6rem;
      margin-bottom: 0.6rem;
    }

    /* ── Phone EXPO callout — keeps its highlight; the rotated vertical
        'EXPO' label becomes a small accent tag at the top of the box
        (not the vertical-rl rotated label). Body uses the per-category
        accent tint; tag uses the accent as its background. ── */
    .food-recipe-phone-expo {
      margin-top: 0.8rem;
      background-color: var(--category-accent-tint);
      border: 1px solid var(--category-accent);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .food-recipe-phone-expo-tag {
      display: inline-block;
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-weight: 700;
      font-size: 0.78rem;
      color: #ffffff;
      background-color: var(--category-accent);
      padding: 0.35rem 0.8rem;
      margin: 0;
    }
    .food-recipe-phone-expo .food-recipe-phone-steps {
      padding: 0.55rem 1rem 0.7rem 1.4rem;
    }
    .food-recipe-phone-expo .food-recipe-phone-steps > li {
      color: oklch(var(--food-recipe-paper-fg));
    }

    /* ── prep phone intro / equipment — bumped for phone reading. ── */
    .food-recipe-phone-intro {
      font-family: var(--font-body);
      font-style: italic;
      font-size: 0.95rem;
      line-height: 1.5;
      color: oklch(var(--food-recipe-paper-muted));
      padding: 0.7rem 1rem 0;
    }
    .food-recipe-phone-equipment {
      font-family: var(--font-body);
      font-size: 0.92rem;
      line-height: 1.5;
      color: oklch(var(--food-recipe-paper-muted));
      padding: 0.35rem 1rem 0;
    }
    .food-recipe-phone-equipment .label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      color: oklch(var(--food-recipe-purple));
    }

    /* ── prep phone meta — Yield / Shelf life / Holding as stacked
       badges (full-width rows, label left + value right). ── */
    .food-recipe-phone-meta {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 0.65rem 1rem 0.3rem;
    }
    .food-recipe-phone-meta-badge {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.6rem;
      min-height: 2.75rem; /* >=44px tap target */
      padding: 0.45rem 0.7rem;
      border-radius: var(--radius);
      border: 1px solid oklch(var(--food-recipe-purple) / 0.4);
      background-color: oklch(var(--food-recipe-purple-wash));
      font-family: var(--font-body);
      color: oklch(var(--food-recipe-paper-fg));
    }
    .food-recipe-phone-meta-badge .label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      font-size: 0.78rem;
      color: oklch(var(--food-recipe-purple));
    }
    .food-recipe-phone-meta-badge .value {
      font-weight: 600;
      font-size: 0.95rem;
      text-align: right;
      word-break: break-word;
    }
    .food-recipe-phone-meta-badge.is-yield .value {
      font-weight: 700;
    }

    /* ── prep phone ingredients — step-grouped stacked list. ── */
    .food-recipe-phone-ingredients {
      padding-bottom: 0.4rem;
    }
    .food-recipe-phone-ingredient-group {
      padding-top: 0.2rem;
    }
    .food-recipe-phone-step-label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      font-size: 0.88rem;
      color: oklch(var(--food-recipe-purple));
      padding: 0.6rem 1rem 0.2rem;
      border-bottom: 1px solid oklch(var(--food-recipe-purple-rule));
      margin-bottom: 0.1rem;
    }

    /* ── prep phone quality-ID checklist — ✓ bullets in deep purple,
       bumped for phone reading. ── */
    .food-recipe-phone-quality {
      padding: 0.5rem 1rem 0.7rem;
    }
    .food-recipe-phone-quality-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .food-recipe-phone-quality-list > li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.55;
      color: oklch(var(--food-recipe-paper-fg));
      padding: 0.3rem 0;
    }
    .food-recipe-phone-quality-list > li::before {
      content: "\2713";
      flex-shrink: 0;
      font-family: var(--font-heading);
      font-weight: 700;
      color: oklch(var(--food-recipe-purple));
      line-height: 1.3;
    }

    /* ── prep phone badges — Line utensil / Storage / Hold temp pills,
       bumped for phone reading. ── */
    .food-recipe-phone-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.6rem 1rem 0.7rem;
    }
    .food-recipe-phone-badge {
      display: inline-flex;
      align-items: baseline;
      gap: 0.35rem;
      font-size: 0.88rem;
      padding: 0.35rem 0.6rem;
      border-radius: var(--radius);
      border: 1px solid oklch(var(--food-recipe-purple) / 0.4);
      background-color: oklch(var(--food-recipe-purple-wash));
      color: oklch(var(--food-recipe-paper-fg));
    }
    .food-recipe-phone-badge .label {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      font-size: 0.74rem;
      color: oklch(var(--food-recipe-purple));
    }
    .food-recipe-phone-badge .value {
      font-family: var(--font-body);
      font-weight: 600;
    }

    /* ── prep phone stepGroups section header — brand-red, uppercase,
        small left rule. Phone-tuned sizing (~0.95rem) for arm's-length
        reading. Renders above each stepGroup's numbered <ol> when
        foodRecipe.stepGroups is non-empty. ── */
    .food-recipe-phone-step-group-header {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      font-size: 0.95rem;
      color: oklch(var(--primary));
      padding-left: 0.6rem;
      border-left: 3px solid oklch(var(--primary));
      margin: 0.85rem 0 0.45rem;
      line-height: 1.35;
    }
    .food-recipe-phone-step-group-header:first-child {
      margin-top: 0;
    }

    /* ── prep phone Bubba's Why's Q&A panel — lightly tinted purple
        panel sitting after the phone quality identifiers, before the
        phone footer. Each entry is a bold purple question followed by
        its answer beneath. Phone-tuned sizing (~0.95rem) with
        comfortable line-heights and full-width padding. Omitted when
        whys is empty. ── */
    .food-recipe-phone-whys {
      margin: 0.6rem 1rem 0.2rem;
      padding: 0.85rem 1rem 0.95rem;
      background-color: oklch(var(--food-recipe-purple-wash));
      border: 1px solid oklch(var(--food-recipe-purple-wash-border));
      border-radius: var(--radius);
    }
    .food-recipe-phone-whys-heading {
      font-family: var(--font-heading);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
      font-size: 0.95rem;
      color: oklch(var(--food-recipe-purple));
      margin-bottom: 0.6rem;
    }
    .food-recipe-phone-whys-entry {
      padding: 0.4rem 0;
    }
    .food-recipe-phone-whys-entry + .food-recipe-phone-whys-entry {
      border-top: 1px solid oklch(var(--food-recipe-purple-rule) / 0.7);
      margin-top: 0.4rem;
      padding-top: 0.6rem;
    }
    .food-recipe-phone-whys-question {
      display: block;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.95rem;
      color: oklch(var(--food-recipe-purple));
      line-height: 1.5;
      margin-bottom: 0.25rem;
    }
    .food-recipe-phone-whys-answer {
      display: block;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: oklch(var(--food-recipe-paper-fg));
      line-height: 1.6;
    }

    /* Phone footer — bump the confidential/station text slightly for
       arm's-length reading. */
    .food-recipe-phone .food-recipe-footer {
      padding: 0.6rem 1rem;
    }
    .food-recipe-phone .food-recipe-footer-confidential {
      font-size: 0.66rem;
    }
    .food-recipe-phone .food-recipe-footer-station {
      font-size: 0.85rem;
    }

    /* Phone title band — bump Anton title for arm's-length reading. The
       .food-recipe-title-band / .food-recipe-title rules above already
       render the purple band + Anton uppercase; here we just enlarge the
       title within the phone container. */

    /* Multi-batch prep on phone — hide the inline desktop picker that
       sits on the right of the title band; the full-width
       .build-card-phone-size-picker sibling (already styled full-width
       by the existing build-card phone CSS) renders instead. Additive:
       only hides the inline picker on phone for multi-batch prep. */

    /* Phone photo — full width, edge to edge. Cap height a touch lower
       for phone so it does not dominate the small screen. The tap target
       (the <button>) already opens the photo in a new tab via the
       existing window.open behavior. */

    /* ── Shared phone section label — small Oswald uppercase divider
       used by Plating / Build / Ingredients headings. ── */

    /* ── Phone amount row — item name left, amount as a bold chip/pill
       on the right. The pill wraps to its own line if long (flex-wrap),
       so amounts stay scannable and never truncate. Tap target >=44px. ── */
    .food-recipe-phone-row .\!item {
      flex: 1 1 60% !important;
      min-width: 0 !important;
      font-family: var(--font-body) !important;
      font-size: 1rem !important;
      line-height: 1.4 !important;
      color: oklch(var(--food-recipe-paper-fg)) !important;
    }

    /* ── menuBuild phone build section — Plating serviceware group on
       top, then the components stacked list. ── */

    /* Allergen callout (menuBuild phone) — compact muted line. */

    /* ── Phone procedure — numbered vertical list with comfortable
       line-height. ── */

    /* Hand-wash note on phone — one compact muted line (reuses the
       existing .food-recipe-handwash block; here we just bump the font
       and tighten the spacing for the phone stack). */

    /* ── Phone EXPO callout — keeps its highlight; the rotated vertical
        'EXPO' label becomes a small accent tag at the top of the box
        (not the vertical-rl rotated label). Body uses the per-category
        accent tint; tag uses the accent as its background. ── */

    /* ── prep phone intro / equipment — bumped for phone reading. ── */

    /* ── prep phone meta — Yield / Shelf life / Holding as stacked
       badges (full-width rows, label left + value right). ── */

    /* ── prep phone ingredients — step-grouped stacked list. ── */

    /* ── prep phone quality-ID checklist — ✓ bullets in deep purple,
       bumped for phone reading. ── */

    /* ── prep phone badges — Line utensil / Storage / Hold temp pills,
       bumped for phone reading. ── */

    /* ── prep phone stepGroups section header — brand-red, uppercase,
        small left rule. Phone-tuned sizing (~0.95rem) for arm's-length
        reading. Renders above each stepGroup's numbered <ol> when
        foodRecipe.stepGroups is non-empty. ── */

    /* ── prep phone Bubba's Why's Q&A panel — lightly tinted purple
        panel sitting after the phone quality identifiers, before the
        phone footer. Each entry is a bold purple question followed by
        its answer beneath. Phone-tuned sizing (~0.95rem) with
        comfortable line-heights and full-width padding. Omitted when
        whys is empty. ── */

    /* Phone footer — bump the confidential/station text slightly for
       arm's-length reading. */

    /* Phone title band — bump Anton title for arm's-length reading. The
       .food-recipe-title-band / .food-recipe-title rules above already
       render the purple band + Anton uppercase; here we just enlarge the
       title within the phone container. */

    /* Multi-batch prep on phone — hide the inline desktop picker that
       sits on the right of the title band; the full-width
       .build-card-phone-size-picker sibling (already styled full-width
       by the existing build-card phone CSS) renders instead. Additive:
       only hides the inline picker on phone for multi-batch prep. */

    /* Phone photo — full width, edge to edge. Cap height a touch lower
       for phone so it does not dominate the small screen. The tap target
       (the <button>) already opens the photo in a new tab via the
       existing window.open behavior. */

    /* ── Shared phone section label — small Oswald uppercase divider
       used by Plating / Build / Ingredients headings. ── */

    /* ── Phone amount row — item name left, amount as a bold chip/pill
       on the right. The pill wraps to its own line if long (flex-wrap),
       so amounts stay scannable and never truncate. Tap target >=44px. ── */

    /* ── menuBuild phone build section — Plating serviceware group on
       top, then the components stacked list. ── */

    /* Allergen callout (menuBuild phone) — compact muted line. */

    /* ── Phone procedure — numbered vertical list with comfortable
       line-height. ── */

    /* Hand-wash note on phone — one compact muted line (reuses the
       existing .food-recipe-handwash block; here we just bump the font
       and tighten the spacing for the phone stack). */

    /* ── Phone EXPO callout — keeps its highlight; the rotated vertical
        'EXPO' label becomes a small accent tag at the top of the box
        (not the vertical-rl rotated label). Body uses the per-category
        accent tint; tag uses the accent as its background. ── */

    /* ── prep phone intro / equipment — bumped for phone reading. ── */

    /* ── prep phone meta — Yield / Shelf life / Holding as stacked
       badges (full-width rows, label left + value right). ── */
    .food-recipe-phone-meta-badge .\!value {
      font-weight: 600 !important;
      font-size: 0.95rem !important;
      text-align: right !important;
      word-break: break-word !important;
    }
    .food-recipe-phone-meta-badge.is-yield .\!value {
      font-weight: 700 !important;
    }

    /* ── prep phone ingredients — step-grouped stacked list. ── */

    /* ── prep phone quality-ID checklist — ✓ bullets in deep purple,
       bumped for phone reading. ── */

    /* ── prep phone badges — Line utensil / Storage / Hold temp pills,
       bumped for phone reading. ── */
    .food-recipe-phone-badge .\!value {
      font-family: var(--font-body) !important;
      font-weight: 600 !important;
    }

    /* ── prep phone stepGroups section header — brand-red, uppercase,
        small left rule. Phone-tuned sizing (~0.95rem) for arm's-length
        reading. Renders above each stepGroup's numbered <ol> when
        foodRecipe.stepGroups is non-empty. ── */

    /* ── prep phone Bubba's Why's Q&A panel — lightly tinted purple
        panel sitting after the phone quality identifiers, before the
        phone footer. Each entry is a bold purple question followed by
        its answer beneath. Phone-tuned sizing (~0.95rem) with
        comfortable line-heights and full-width padding. Omitted when
        whys is empty. ── */

    /* Phone footer — bump the confidential/station text slightly for
       arm's-length reading. */

    /* Phone title band — bump Anton title for arm's-length reading. The
       .food-recipe-title-band / .food-recipe-title rules above already
       render the purple band + Anton uppercase; here we just enlarge the
       title within the phone container. */

    /* Multi-batch prep on phone — hide the inline desktop picker that
       sits on the right of the title band; the full-width
       .build-card-phone-size-picker sibling (already styled full-width
       by the existing build-card phone CSS) renders instead. Additive:
       only hides the inline picker on phone for multi-batch prep. */

    /* Phone photo — full width, edge to edge. Cap height a touch lower
       for phone so it does not dominate the small screen. The tap target
       (the <button>) already opens the photo in a new tab via the
       existing window.open behavior. */

    /* ── Shared phone section label — small Oswald uppercase divider
       used by Plating / Build / Ingredients headings. ── */

    /* ── Phone amount row — item name left, amount as a bold chip/pill
       on the right. The pill wraps to its own line if long (flex-wrap),
       so amounts stay scannable and never truncate. Tap target >=44px. ── */

    /* ── menuBuild phone build section — Plating serviceware group on
       top, then the components stacked list. ── */

    /* Allergen callout (menuBuild phone) — compact muted line. */

    /* ── Phone procedure — numbered vertical list with comfortable
       line-height. ── */

    /* Hand-wash note on phone — one compact muted line (reuses the
       existing .food-recipe-handwash block; here we just bump the font
       and tighten the spacing for the phone stack). */

    /* ── Phone EXPO callout — keeps its highlight; the rotated vertical
        'EXPO' label becomes a small accent tag at the top of the box
        (not the vertical-rl rotated label). Body uses the per-category
        accent tint; tag uses the accent as its background. ── */

    /* ── prep phone intro / equipment — bumped for phone reading. ── */

    /* ── prep phone meta — Yield / Shelf life / Holding as stacked
       badges (full-width rows, label left + value right). ── */
    .food-recipe-phone-meta-badge .\!value {
      font-weight: 600 !important;
      font-size: 0.95rem !important;
      text-align: right !important;
      word-break: break-word !important;
    }
    .food-recipe-phone-meta-badge.is-yield .\!value {
      font-weight: 700 !important;
    }

    /* ── prep phone ingredients — step-grouped stacked list. ── */

    /* ── prep phone quality-ID checklist — ✓ bullets in deep purple,
       bumped for phone reading. ── */

    /* ── prep phone badges — Line utensil / Storage / Hold temp pills,
       bumped for phone reading. ── */
    .food-recipe-phone-badge .\!value {
      font-family: var(--font-body) !important;
      font-weight: 600 !important;
    }

    /* ── prep phone stepGroups section header — brand-red, uppercase,
        small left rule. Phone-tuned sizing (~0.95rem) for arm's-length
        reading. Renders above each stepGroup's numbered <ol> when
        foodRecipe.stepGroups is non-empty. ── */

    /* ── prep phone Bubba's Why's Q&A panel — lightly tinted purple
        panel sitting after the phone quality identifiers, before the
        phone footer. Each entry is a bold purple question followed by
        its answer beneath. Phone-tuned sizing (~0.95rem) with
        comfortable line-heights and full-width padding. Omitted when
        whys is empty. ── */

    /* Phone footer — bump the confidential/station text slightly for
       arm's-length reading. */

    /* Phone title band — bump Anton title for arm's-length reading. The
       .food-recipe-title-band / .food-recipe-title rules above already
       render the purple band + Anton uppercase; here we just enlarge the
       title within the phone container. */

    /* Multi-batch prep on phone — hide the inline desktop picker that
       sits on the right of the title band; the full-width
       .build-card-phone-size-picker sibling (already styled full-width
       by the existing build-card phone CSS) renders instead. Additive:
       only hides the inline picker on phone for multi-batch prep. */

    /* Phone photo — full width, edge to edge. Cap height a touch lower
       for phone so it does not dominate the small screen. The tap target
       (the <button>) already opens the photo in a new tab via the
       existing window.open behavior. */

    /* ── Shared phone section label — small Oswald uppercase divider
       used by Plating / Build / Ingredients headings. ── */

    /* ── Phone amount row — item name left, amount as a bold chip/pill
       on the right. The pill wraps to its own line if long (flex-wrap),
       so amounts stay scannable and never truncate. Tap target >=44px. ── */

    /* ── menuBuild phone build section — Plating serviceware group on
       top, then the components stacked list. ── */

    /* Allergen callout (menuBuild phone) — compact muted line. */

    /* ── Phone procedure — numbered vertical list with comfortable
       line-height. ── */

    /* Hand-wash note on phone — one compact muted line (reuses the
       existing .food-recipe-handwash block; here we just bump the font
       and tighten the spacing for the phone stack). */

    /* ── Phone EXPO callout — keeps its highlight; the rotated vertical
        'EXPO' label becomes a small accent tag at the top of the box
        (not the vertical-rl rotated label). Body uses the per-category
        accent tint; tag uses the accent as its background. ── */

    /* ── prep phone intro / equipment — bumped for phone reading. ── */

    /* ── prep phone meta — Yield / Shelf life / Holding as stacked
       badges (full-width rows, label left + value right). ── */
    .food-recipe-phone-meta-badge .\!value {
      font-weight: 600 !important;
      font-size: 0.95rem !important;
      text-align: right !important;
      word-break: break-word !important;
    }
    .food-recipe-phone-meta-badge.is-yield .\!value {
      font-weight: 700 !important;
    }

    /* ── prep phone ingredients — step-grouped stacked list. ── */

    /* ── prep phone quality-ID checklist — ✓ bullets in deep purple,
       bumped for phone reading. ── */

    /* ── prep phone badges — Line utensil / Storage / Hold temp pills,
       bumped for phone reading. ── */
    .food-recipe-phone-badge .\!value {
      font-family: var(--font-body) !important;
      font-weight: 600 !important;
    }

    /* ── prep phone stepGroups section header — brand-red, uppercase,
        small left rule. Phone-tuned sizing (~0.95rem) for arm's-length
        reading. Renders above each stepGroup's numbered <ol> when
        foodRecipe.stepGroups is non-empty. ── */

    /* ── prep phone Bubba's Why's Q&A panel — lightly tinted purple
        panel sitting after the phone quality identifiers, before the
        phone footer. Each entry is a bold purple question followed by
        its answer beneath. Phone-tuned sizing (~0.95rem) with
        comfortable line-heights and full-width padding. Omitted when
        whys is empty. ── */

    /* Phone footer — bump the confidential/station text slightly for
       arm's-length reading. */
  }
/* ═══════════════════════════════════════════════════════════════════
     Build Card — ADDITIVE leader-line layout (menuBuild only, when
     item.photo is set AND every component has a non-null anchorY).
     Presentation-only replica of the official Bubba's 33 build card:
     deep Bubba's blue (#1F3A8A, or the per-category accent when one
     exists) square title band, two-column stage (photo left ~46%,
     anchorY-positioned leader-line labels right ~54%), confidential
     footer, and build steps below. Phone reflows to a single column.
     Reuses the existing food-recipe paper surface, brand fonts, and
     spacing. Does NOT alter any existing food-recipe class.
     ═══════════════════════════════════════════════════════════════════ */
/* Visibility toggle — desktop shows by default, phone is hidden; the
     @media (max-width: 720px) block below flips them. The build card
     uses a 720px breakpoint (per the user spec), tighter than the
     1023px food-recipe breakpoint because the leader-line stage needs
     ~720px of width to read cleanly. */
.build-card-phone {
    display: none;
  }
/* Kicker — small red line above the title band when buildHeader is
     present. Fixed Bubba's red (#c0201f), Oswald uppercase, weight 800,
     ~20px. The Build Card family uses fixed hex values (not the
     per-category accent tokens) so the card always reads as Bubba's
     brand regardless of the item's category. */
.build-card-kicker {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 1.25rem;
    color: #c0201f;
    padding: 0.6rem 1rem 0.4rem;
  }
/* Title band — deep Bubba's blue with a subtle horizontal gradient
     (matches the Bubba's mock). Fixed hex (#1F3A8A -> #2A4AA6), not the
     per-category --category-accent, so the band is always Bubba's blue
     regardless of the item's category. Flex row so the title sits left
     and the size picker (or static size label) sits right; the phone
     @media block flips this to a column so the title stacks above the
     full-width picker. */
.build-card-title-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(90deg, #1f3a8a, #2a4aa6);
    color: #ffffff;
    padding: 0.9rem 1rem;
    text-align: left;
  }
.build-card-title {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 2rem;
    line-height: 1.05;
    color: #ffffff;
    margin: 0;
  }
/* Size picker — pill-shaped segmented control that sits on the right
     side of the title band (desktop). Translucent white fill over the
     Bubba's-blue band, rounded pill, tight gap. One .build-card-size-btn
     per distinct size. Fixed hex (not --category-accent) so the picker
     always reads as Bubba's brand. */
.build-card-size-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.18);
  }
/* Size button — translucent (inactive) segment inside the picker.
     Light blue-white text, heavy weight, rounded corners, smooth
     transition to the active state. Fixed hex per the Build Card family
     convention. cursor: pointer; the button element handles clicks. */
.build-card-size-btn {
    border: none;
    background: transparent;
    color: #dfe6ff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    padding: 7px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.build-card-size-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
  }
/* Active size button — solid white fill, brand-blue text. This is the
     "selected size" state; clicking another button moves .on to it. */
.build-card-size-btn.on {
    background-color: #ffffff;
    color: #16307a;
  }
/* Static size label — shown when there is exactly one distinct size
     (no functional selector). Styled like an inactive size button so it
     reads as part of the picker family without being clickable. Sits on
     the right side of the title band. */
.build-card-size-static {
    display: inline-block;
    border: none;
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 17px;
    line-height: 1;
    padding: 7px 20px;
    border-radius: 8px;
    white-space: nowrap;
  }
/* Caption — "Showing <size> amounts" under the title band. Muted
     light text on the cream paper surface, small size. Updates with the
     selection. Rendered only for the multi-size case. The phone variant
     (.is-phone) is styled inside the @media block below. */
.build-card-size-caption {
    margin: 4px 1rem 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.3;
    color: oklch(var(--food-recipe-paper-fg) / 0.7);
  }
/* Two-column stage — photo left ~48%, labels right ~52%. The labels
     layer stretches to the photo's height so anchorY percentages
     align. align-items: stretch makes both columns the same height;
     the photo column's natural height drives the row height. */
.build-card-stage {
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
  }
.build-card-photo-col {
    flex: 0 0 48%;
    background-color: #ffffff;
    display: flex;
    align-items: flex-start; /* top-aligned photo */
    min-width: 0;
  }
.build-card-photo-button {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: #ffffff;
    cursor: pointer;
    line-height: 0;
  }
.build-card-photo-button:focus-visible {
    outline: 2px solid oklch(var(--primary));
    outline-offset: 2px;
  }
.build-card-photo {
    width: 100%;
    height: auto;
    display: block;
    background: #ffffff;
  }
/* Labels layer — positioned overlay the same height as the photo.
     Each label is absolutely positioned at top: anchorY*100% with
     translateY(-50%) so it is vertically centered on that point. */
.build-card-labels {
    flex: 0 0 52%;
    position: relative;
    background-color: #ffffff;
    min-width: 0;
  }
.build-card-label {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
  }
/* Step connector — thin ~26px horizontal line fading from transparent
     (photo side) toward a soft blue-grey where the badge begins. Fixed
     hex, flex-shrink 0 so it keeps its width. */
.build-card-step-connector {
    flex: 0 0 26px;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9d2e8);
    flex-shrink: 0;
  }
/* Step badge — round glossy blue circle (~52px) with a white border
     and soft shadow. White text: small "STEP" over a large number.
     Fixed hex radial gradient for the glossy Bubba's-blue look. */
.build-card-step-badge {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    line-height: 1;
    background: radial-gradient(circle at 35% 30%, #2f56c9, #16307a);
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(20, 40, 110, 0.4), inset 0 1px 2px
      rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.build-card-step-badge-label {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    opacity: 0.92;
    margin-bottom: 1px;
  }
.build-card-step-badge-number {
    font-size: 21px;
    font-weight: 900;
  }
.build-card-label-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.35;
    color: oklch(var(--food-recipe-paper-fg));
    min-width: 0;
    /* Multi-size renders .build-card-label-item + .build-card-amount-chip
       as flex children; single-amount renders a single <strong> so the
       flex row is harmless there. align-items: baseline keeps the item
       name and the amount chip on the same text line. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
  }
.build-card-label-text strong {
    font-weight: 700;
  }
/* Item name — bold ingredient label inside .build-card-label-text
     (multi-size case). Inline so it flows with the amount chip; bold so
     the ingredient reads as the primary text. */
.build-card-label-item {
    font-weight: 700;
    display: inline;
  }
/* Amount chip — pale blue pill with bold brand-blue text. Fixed hex
     (#eef2fc bg, #1F3A8A fg) per the Build Card family convention so it
     always reads as Bubba's brand. nowrap + min-width so short amounts
     ("2 pinches") keep a tidy pill shape and long amounts never
     truncate. text-align center so multi-word amounts sit centered. */
.build-card-amount-chip {
    display: inline-block;
    background-color: #eef2fc;
    color: #1f3a8a;
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 5px 14px;
    border-radius: 9px;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
  }
/* Note — fixed Bubba's red (#c0201f), ~12px, weight 800, appended
     after the item+amount. */
.build-card-label-note {
    color: #c0201f;
    font-size: 0.75rem;
    font-weight: 800;
  }
/* Footer strip — confidential bottom-left, station bottom-right.
     Reuses the food-recipe paper surface so it reads as part of the
     card. */
.build-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid oklch(var(--food-recipe-paper-border));
    background-color: oklch(var(--food-recipe-paper));
  }
.build-card-footer-confidential {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.56rem;
    font-weight: 600;
    color: #888;
  }
.build-card-footer-station {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.56rem;
    font-weight: 700;
    color: #888;
  }
/* Build steps — the existing food.steps list rendered below the
     card. Reuses the food-recipe-steps styling for the list itself;
     the heading is a small Oswald uppercase label. */
.build-card-steps {
    padding: 0.7rem 1rem 0.9rem;
    border-top: 1px solid oklch(var(--food-recipe-paper-border));
  }
.build-card-steps-heading {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.85rem;
    color: oklch(var(--food-recipe-purple));
    margin: 0 0 0.4rem;
  }
.build-card-steps-list {
    list-style: decimal;
    padding-left: 1.4rem;
    margin: 0;
  }
.build-card-steps-list > li {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: oklch(var(--food-recipe-paper-fg));
    padding: 0.18rem 0;
  }
.build-card-steps-list > li::marker {
    color: oklch(var(--food-recipe-purple));
    font-weight: 700;
  }
/* ── Phone layout (< ~720px) — single-column reflow. No leader
     lines, no absolute positioning. Comfortable type, >=44px tap
     targets, no horizontal scroll, amounts never truncate. ── */
@media (max-width: 720px) {
    .build-card-desktop {
      display: none;
    }
    .build-card-phone {
      display: flex;
      flex-direction: column;
    }

    /* Title band — slightly smaller title for phone reading. Stacks
       vertically (flex-direction: column) so the title sits on top and
       the full-width size picker (rendered as a sibling block below
       the band) spans the full card width. The desktop row layout
       (display: flex; align-items: center; justify-content:
       space-between) is overridden here so the title and any inline
       static-size label stack rather than sit side by side. */
    .build-card-phone .build-card-title-band {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.5rem;
      padding: 0.85rem 1rem;
    }
    .build-card-phone .build-card-title {
      font-size: clamp(1.5rem, 6vw, 1.9rem);
      line-height: 1.08;
    }

    /* Phone size picker — full-width segmented control pinned UNDER the
       title band (rendered as a sibling block in the JSX, not inside
       the band). Each .build-card-size-btn stretches to share the row
       evenly. margin-top: 8px separates it from the band. Reuses the
       base .build-card-size-picker pill styling (translucent white fill,
       rounded) and the base .build-card-size-btn / .on states; this rule
       only widens it to full width. */
    .build-card-phone-size-picker {
      display: flex;
      width: 100%;
      margin-top: 8px;
      padding: 4px;
      gap: 4px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.18);
    }
    /* Each size button stretches to fill the picker so the segmented
       control looks balanced on phone. Keeps the base inactive/active
       colors; only flex-grow changes. */
    .build-card-phone-size-picker .build-card-size-btn {
      flex: 1 1 0;
      text-align: center;
    }
    /* Phone caption — full-width, centered, under the size picker.
       Overrides the desktop left-aligned caption (which uses a side
       margin) so the phone caption reads as a centered helper line. */
    .build-card-size-caption.is-phone {
      width: 100%;
      margin: 6px 0 0;
      padding: 0 1rem;
      text-align: center;
    }

    /* Photo — full width, edge to edge. The button opens the in-app
       lightbox. The photo stage is position: relative so the step-circle
       overlay can be absolutely positioned on top of the photo at each
       component's anchorY. The photo button stays at z-index 0 (default)
       and the circle overlay sits at z-index 1 so circles are tappable;
       the photo button still receives taps anywhere a circle is not. */
    .build-card-phone .build-card-photo-button {
      width: 100%;
    }
    .build-card-phone .build-card-photo {
      width: 100%;
      height: auto;
    }
    .build-card-phone-photo-stage {
      position: relative;
      width: 100%;
    }
    /* Circle overlay — absolute, inset 0 so it covers the full photo
       area. Pointer events pass through the overlay itself (the circles
       re-enable pointer events) so taps on empty photo area still reach
       the photo button underneath and open the lightbox. */
    .build-card-phone-circles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    /* Each step circle — absolutely positioned on the LEFT edge of the
       photo at top: anchorY*100% with translateY(-50%) so the circle is
       vertically centered on the anchor point (mirroring desktop labels).
       left: 0.5rem keeps the circle just inside the photo's left edge so
       there is no horizontal scroll. The button re-enables pointer events
       so it is tappable; stopPropagation in the JSX prevents the
       underlying photo button's lightbox from also firing. Reuses the
       existing .build-card-step-badge visual (glossy blue circle, STEP
       label + number) via the inner span. */
    .build-card-phone-circle {
      position: absolute;
      left: 0.5rem;
      transform: translateY(-50%);
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      pointer-events: auto;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .build-card-phone-circle:focus-visible {
      outline: 2px solid oklch(var(--primary));
      outline-offset: 2px;
      border-radius: 50%;
    }
    /* Step badge on phone circles — smaller than desktop (40px) so the
       circle sits comfortably on the photo without overflowing. Reuses
       the fixed-hex glossy blue radial-gradient from the base
       .build-card-step-badge rule. */
    .build-card-phone-circle .build-card-step-badge {
      width: 40px;
      height: 40px;
    }
    .build-card-phone-circle .build-card-step-badge-label {
      font-size: 7px;
    }
    .build-card-phone-circle .build-card-step-badge-number {
      font-size: 16px;
    }

    /* Step-label popout (Dialog body) — the label content shown when a
       step circle is tapped. Layout: step badge on the left, text block
       on the right (item name, amount pill, optional red note). Reuses
       the .build-card-phone-amount purple pill for the amount. The note
       uses fixed Bubba's red (#c0201f) to match the existing
       .build-card-label-note / Bubba's red. */
    /* The popout container overrides shadcn DialogContent's dark bg-card
       with the Build Card's cream paper surface so the near-black item
       text reads with high contrast. Scoped to this popout only — the
       global DialogContent styling is untouched. The close button's
       bg-black/10 chip stays legible on the light surface. */
    .build-card-phone-popout {
      background-color: oklch(var(--food-recipe-paper));
      color: oklch(var(--food-recipe-paper-fg));
    }
    /* Close button — the global DialogClose chip uses bg-black/10 with
       text-foreground (near-white), which was tuned for the dark bg-card
       surface. On the light paper popout it would be near-invisible, so
       scope a dark-ink-on-translucent-dark chip here. Layout, position,
       and hit target are unchanged. */
    .build-card-phone-popout .build-card-phone-popout-close,
    .build-card-phone-popout
      [data-ocid="library.item.food_recipe.phone.build.popout.close_button"] {
      background-color: oklch(0.273 0.005 95 / 0.12);
      color: oklch(var(--food-recipe-paper-fg));
    }
    .build-card-phone-popout
      [data-ocid="library.item.food_recipe.phone.build.popout.close_button"]:hover {
      background-color: oklch(0.273 0.005 95 / 0.22);
    }
    .build-card-phone-popout-body {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      padding: 1.1rem 1.1rem 1.2rem;
    }
    .build-card-phone-popout-step {
      flex: 0 0 auto;
    }
    .build-card-phone-popout-step .build-card-step-badge {
      width: 52px;
      height: 52px;
    }
    .build-card-phone-popout-text {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.4rem 0.6rem;
    }
    .build-card-phone-popout-item {
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: 1.35;
      font-weight: 700;
      color: oklch(var(--food-recipe-paper-fg));
      margin: 0;
      flex: 1 1 100%;
    }
    .build-card-phone-popout-note {
      font-family: var(--font-body);
      font-size: 0.9rem;
      line-height: 1.4;
      font-weight: 700;
      color: #c0201f;
      margin: 0.1rem 0 0;
      flex: 1 1 100%;
    }
    /* Amount chip — bold purple pill, reused from the original phone
       ingredient list. Never truncates (white-space: nowrap); the popout
       is max-w-[90vw] so it never causes horizontal scroll. */
    .build-card-phone-amount {
      flex: 0 0 auto;
      max-width: 100%;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.92rem;
      line-height: 1.2;
      color: oklch(var(--food-recipe-purple-fg));
      background-color: oklch(var(--food-recipe-purple));
      padding: 0.32rem 0.7rem;
      border-radius: 999px;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
    }

    /* Build steps on phone — bumped for arm's-length reading. */
    .build-card-steps.is-phone {
      padding: 0.7rem 1rem 0.9rem;
    }
    .build-card-steps.is-phone .build-card-steps-heading {
      font-size: 0.95rem;
    }
    .build-card-steps.is-phone .build-card-steps-list > li {
      font-size: 1rem;
      line-height: 1.6;
      padding: 0.3rem 0;
    }
  }
/* Menu/Prep toggle — segmented control. Two flat segments; active
     segment = primary red fill, inactive = transparent. Oswald labels. */
.food-layout-toggle {
    display: inline-flex;
    border: 1px solid oklch(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
  }
.food-layout-toggle-segment {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.5rem 0.9rem;
    background-color: transparent;
    color: oklch(var(--muted-foreground));
    border: none;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s
      cubic-bezier(0.4, 0, 0.2, 1);
  }
.food-layout-toggle-segment.is-active {
    background-color: oklch(var(--primary));
    color: oklch(var(--primary-foreground));
  }
/* Admin Recipe Photos bulk-attach dialog — file drop zone. Dashed
     border, muted icon, "Drop files here" helper. Reuses the
     photo-field-empty pattern but larger. */
.food-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 2rem 1.5rem;
    border: 2px dashed oklch(var(--border));
    border-radius: var(--radius);
    background-color: oklch(var(--card));
    color: oklch(var(--muted-foreground));
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color
      0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
.food-dropzone.is-dragover {
    border-color: oklch(var(--primary));
    background-color: oklch(var(--primary) / 0.08);
    color: oklch(var(--foreground));
  }
.food-dropzone-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: oklch(var(--foreground));
  }
/* Matched/attached summary — compact stat row. */
.food-attach-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
.food-attach-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
  }
.food-attach-stat .num {
    font-family: var(--font-heading);
    font-weight: 700;
    color: oklch(var(--primary));
  }
.food-attach-stat .label {
    font-family: var(--font-body);
    color: oklch(var(--muted-foreground));
  }
/* Unmatched files list — retryable/downloadable. Each row: filename +
     retry + download. Red left edge for "needs attention". */
.food-unmatched-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid oklch(var(--border));
    border-left: 3px solid oklch(var(--destructive));
    border-radius: var(--radius);
    background-color: oklch(var(--card));
  }
.food-unmatched-row .filename {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: oklch(var(--foreground));
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* ═══════════════════════════════════════════════════════════════════
     Anchor Editor — ADDITIVE utilities (admin Build Card label-position
     editor overlay). Admin-only drag-to-adjust editor that overlays the
     existing Build Card photo+labels so an admin can fine-tune each
     label's vertical position (anchorY) and save it back to the recipe.
     Reuses the existing shadcn Dialog for the modal container; these
     utilities style the editor overlay + chrome inside it. All classes
     prefixed `anchor-` so they never collide with the existing
     `build-card-*` family. References var(--anchor-*) tokens directly.
     Does NOT alter any existing Build Card class or token. Phone-first:
     editor reflows to single-column and supports touch dragging.
     ═══════════════════════════════════════════════════════════════════ */
/* Editor header band — navy fill, cream Oswald uppercase title. Navy
     (not the Bubba's blue #1F3A8A of the card title band) so the editor
     chrome reads as an admin surface distinct from the brand card
     underneath. Sits at the top of the Dialog content. */
.anchor-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background-color: oklch(var(--anchor-editor-header));
    color: oklch(var(--anchor-editor-header-fg));
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
.anchor-editor-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.95rem;
    color: oklch(var(--anchor-editor-header-fg));
    margin: 0;
  }
.anchor-editor-subtitle {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: oklch(var(--anchor-editor-header-fg) / 0.8);
  }
/* Editor stage — wraps the Build Card photo+labels overlay. Same
     two-column stage geometry as .build-card-stage (photo left ~46%,
     labels right ~54%) so the editor preview matches the published
     card exactly. position: relative so the handle layer can anchor. */
.anchor-editor-stage {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    overflow: hidden;
  }
.anchor-editor-photo-col {
    flex: 0 0 46%;
    background-color: #ffffff;
    display: flex;
    align-items: flex-start;
    min-width: 0;
  }
.anchor-editor-photo {
    width: 100%;
    height: auto;
    display: block;
    background: #ffffff;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* the handle layer captures all pointer events */
  }
/* Labels layer — mirrors .build-card-labels geometry so handles sit
     exactly where the published labels render. */
.anchor-editor-labels {
    flex: 0 0 54%;
    position: relative;
    background-color: #ffffff;
    min-width: 0;
  }
/* Handle — the draggable grip on each label. Idle = subtle navy
     outline so it reads as an affordance without competing with the
     Bubba's brand labels underneath. The handle sits at the same
     vertical position (top: anchorY*100%, translateY(-50%)) as the
     published label, spanning the full label column width so the
     admin can grab anywhere along the row. */
.anchor-handle {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background-color: var(--anchor-handle-bg);
    border: 1px solid oklch(var(--anchor-handle-border));
    border-radius: var(--radius);
    cursor: grab;
    touch-action: none; /* allow pointer drag without scrolling */
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow
      0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
.anchor-handle:hover {
    border-color: oklch(var(--anchor-handle-border-active) / 0.6);
  }
/* Grip icon — three small dots, muted, flex-shrink 0. */
.anchor-handle-grip {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: oklch(var(--anchor-handle-dim));
  }
.anchor-handle-grip::before,
  .anchor-handle-grip::after,
  .anchor-handle-grip > span {
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
  }
/* Label text preview — Barlow, same size as the published label so
     the admin sees the real text while dragging. */
.anchor-handle-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.35;
    color: oklch(var(--food-recipe-paper-fg));
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* Active (dragging) state — red ring + raised shadow. The pulse
     animation (anchor-handle-pulse) gently breathes the ring while
     the handle is actively being dragged so the admin sees the grab. */
.anchor-handle.is-active {
    cursor: grabbing;
    border-color: oklch(var(--anchor-handle-border-active));
    box-shadow: var(--anchor-handle-shadow-active);
    animation: anchor-handle-pulse 1.2s ease-in-out infinite;
    z-index: 2;
  }
/* Dimmed state — greyscale while another handle is being dragged so
     the inactive labels recede and the active one pops. */
.anchor-handle.is-dimmed {
    opacity: 0.45;
    filter: grayscale(0.6);
    cursor: default;
  }
/* Percentage readout badge — small pill, navy fill, cream text.
     Navy (not red) so it reads as a measurement, not a warning. Turns
     red while its handle is being dragged. Sits at the right edge of
     the handle. */
.anchor-readout {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    background-color: oklch(var(--anchor-readout-bg));
    color: oklch(var(--anchor-readout-fg));
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
.anchor-handle.is-active .anchor-readout {
    background-color: oklch(var(--anchor-readout-bg-active));
  }
/* Editor footer — action row beneath the stage. Save (primary red),
     Cancel (ghost border), Reset (secondary navy). Reuses existing
     button patterns; this just sets the row layout. */
.anchor-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid oklch(var(--border));
    background-color: oklch(var(--card));
  }
/* Success / error feedback — inline banner above the actions row.
     Flat fill, Oswald uppercase label, Barlow body. Auto-dismisses
     (handled in JS); these utilities style the visible states. */
.anchor-editor-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.4;
  }
.anchor-editor-feedback.is-success {
    background-color: oklch(var(--anchor-editor-success) / 0.15);
    color: oklch(var(--anchor-editor-success-fg));
    border: 1px solid oklch(var(--anchor-editor-success) / 0.5);
  }
.anchor-editor-feedback.is-error {
    background-color: oklch(var(--anchor-editor-error) / 0.15);
    color: oklch(var(--anchor-editor-error-fg));
    border: 1px solid oklch(var(--anchor-editor-error) / 0.5);
  }
.anchor-editor-feedback-label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
/* Unsaved-changes confirm dialog — amber surface, distinct from
     in-training gold and from destructive red. Shown when the admin
     tries to close the editor with pending changes. Reuses the shadcn
     AlertDialog; this styles the warning content inside it. */
.anchor-confirm {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background-color: oklch(var(--anchor-confirm) / 0.15);
    color: oklch(var(--anchor-confirm-fg));
    border: 1px solid oklch(var(--anchor-confirm-border) / 0.5);
  }
.anchor-confirm-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.9rem;
    color: oklch(var(--anchor-confirm-fg));
    margin: 0 0 0.3rem;
  }
.anchor-confirm-body {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.45;
    color: oklch(var(--anchor-confirm-fg));
  }
/* Keyframe — gentle ring breath while a handle is actively dragged.
     Mirrored in tailwind.config.js as `anchor-handle-pulse`. */
@keyframes anchor-handle-pulse {
    0%,
    100% {
      box-shadow: var(--anchor-handle-shadow-active);
    }
    50% {
      box-shadow: var(--anchor-handle-shadow-active), 0 0 0 3px
        oklch(var(--anchor-handle-border-active) / 0.25);
    }
  }
/* Reduced motion — the active-handle pulse becomes a static red
     ring + shadow (no breathing). The drag still works; only the
     decorative pulse pauses. */
@media (prefers-reduced-motion: reduce) {
    .anchor-handle.is-active {
      animation: none;
    }
    .anchor-handle {
      transition: none;
    }
  }
/* ── Phone layout (<720px) — single-column reflow. The editor is a
     MODAL DIALOG (not the public Build Card page), so the horizontal-
     scroll concerns that motivated the static-stacked phone layout for
     the public card do NOT apply here. The photo stacks on top full-
     width; the labels container stays a positioned (relative) layer so
     the absolute handles anchor to it, and the handles MUST stay
     absolutely positioned so inline `style={{ top }}` from the drag
     logic moves the handle in real time on touch drag. The drag math
     measures the labels container's rect (getBoundingClientRect) at
     drag start, so anchorY 0..1 always maps to the container's
     top..bottom. ── */
@media (max-width: 720px) {
    .anchor-editor-stage {
      flex-direction: column;
    }
    .anchor-editor-photo-col {
      flex: 0 0 auto;
      width: 100%;
    }
    .anchor-editor-photo {
      width: 100%;
    }
    /* Labels layer stays a positioned (relative) container on phone so
       the absolute handles anchor to it. Full width below the photo,
       with a usable touch-drag min-height. The drag math measures this
       container's rect at drag start, so anchorY 0..1 maps to its
       top..bottom. */
    .anchor-editor-labels {
      flex: 1 1 auto;
      position: relative;
      width: 100%;
      min-height: 320px;
      background-color: #ffffff;
    }
    /* Handles STAY absolutely positioned on phone so inline
       style={{ top: `${y*100}%` }} moves the handle in real time as
       the admin drags. We do NOT set position: static here — that
       would make `top` a no-op and break the drag visualization (the
       readout would update but the handle would not move).
       position: absolute and transform: translateY(-50%) are inherited
       from the base rule so the handle centers on its anchorY line. */
    .anchor-handle {
      left: 0;
      right: 0;
      min-height: 2.75rem; /* >=44px tap target */
      padding: 0.5rem 0.75rem;
    }
    .anchor-handle-text {
      white-space: normal; /* allow wrap on narrow phone */
      overflow: visible;
      text-overflow: clip;
    }
  }
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: var(--spacing(8));
}

/* Anton — logo / wordmark / big hero */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Anton-Regular.woff2") format("woff2");
}

/* Oswald — headings (600 / 700) */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Oswald-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Oswald-Bold.woff2") format("woff2");
}

/* Zilla Slab — recipe print card title / variant dividers (700) */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/zillaslab/v6/dFa6ZfeM_74wlPZtksIFajQ6_V6LVw.woff2")
    format("woff2");
}

/* Roboto Slab — recipe print card fallback for title / variant dividers (800) */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/robotoslab/v25/BngbUXZYTXPIvIBgJVSbYG6xLsE.woff2")
    format("woff2");
}

/* Barlow — body (regular / medium / semibold) */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Barlow-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Barlow-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Barlow-SemiBold.woff2") format("woff2");
}

/* ── Lake Charles Quik Reference Quill — dark rich-text editor for detail field values ──
   Scoped under .bubbas-quill so it only affects the DetailFieldEditor's
   value editor. Dark editor surface, rounded corners, red accent on the
   toolbar and active states. Toolbar exposes bold/italic/underline,
   bullet/numbered list, and line break only (enforced in JS modules).

   IMPORTANT: these rules are intentionally UNLAYERED (outside @layer utilities).
   quill.snow.css is imported unlayered, and unlayered CSS always beats
   @layer-wrapped CSS regardless of source order or specificity. Keeping these
   rules unlayered (and last in the file) ensures the auto-grow override on
   .ql-container (height:auto + overflow:visible) wins over quill.snow.css's
   .ql-container.ql-snow{height:100%;overflow-y:auto} so the editor box expands
   to fit all content (e.g. multi-bullet SPECS fields) instead of staying
   fixed and scrolling internally. */
.bubbas-quill .ql-toolbar {
  border: 1px solid oklch(var(--border));
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: oklch(var(--card));
}
.bubbas-quill .ql-container {
  border: 1px solid oklch(var(--border));
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: oklch(var(--background));
  color: oklch(var(--foreground));
  font-family: var(--font-body);
  font-size: 0.875rem;
  /* Auto-grow backstop. The runtime ResizeObserver in DetailFieldEditor.tsx
     imperatively sets this element's height to editor.scrollHeight on every
     content change — that is the primary grow mechanism. These CSS rules are
     the fallback / cascade backstop:

       - height:auto !important overrides quill.snow.css's height:100% so the
         box is not pinned to a fixed height before the JS runs.
       - min-height:12rem (192px) is a generous floor so even if the JS
         auto-grow hits an edge case, the box is tall enough that multi-bullet
         fields are visible and editable, not clipped in a tiny 5rem box.
       - overflow-y:auto (not visible) is the last-resort fallback: if the box
         ever fails to grow, content scrolls WITHIN a tall box rather than
         being clipped. The JS auto-grow makes scrolling rarely needed.

     !important is required because Quill's JS sets an INLINE
     style='height: <px>' on .ql-editor at runtime, and inline styles beat
     external CSS unless the external rule uses !important. */
  height: auto !important;
  min-height: 12rem;
  overflow-y: auto !important;
}
.bubbas-quill .ql-editor {
  height: auto !important;
  min-height: 12rem;
  overflow-y: visible !important;
  padding: 0.5rem 0.75rem;
}
.bubbas-quill .ql-editor.ql-blank::before {
  color: oklch(var(--muted-foreground));
  font-style: normal;
  left: 0.75rem;
}
/* Toolbar buttons — muted by default, red when active/hovered. */
.bubbas-quill .ql-toolbar .ql-stroke {
  stroke: oklch(var(--muted-foreground));
}
.bubbas-quill .ql-toolbar .ql-fill {
  fill: oklch(var(--muted-foreground));
}
.bubbas-quill .ql-toolbar button:hover .ql-stroke,
.bubbas-quill .ql-toolbar .ql-active .ql-stroke {
  stroke: oklch(var(--primary));
}
.bubbas-quill .ql-toolbar button:hover .ql-fill,
.bubbas-quill .ql-toolbar .ql-active .ql-fill {
  fill: oklch(var(--primary));
}
.bubbas-quill .ql-toolbar button {
  border-radius: var(--radius);
}
/* List bullets/numbers in red to match the accent. */
.bubbas-quill .ql-editor ul > li::before,
.bubbas-quill .ql-editor ol > li::before {
  color: oklch(var(--primary));
}
/* Focus ring on the editor container. */
.bubbas-quill .ql-container.ql-focus,
.bubbas-quill .ql-container:focus {
  border-color: oklch(var(--primary));
  box-shadow: 0 0 0 1px oklch(var(--primary) / 0.4);
}

/* ── Recipe card list-style override ───────────────────────────────────
    The @tailwindcss/typography plugin's default .prose class applies
    list-style-type: decimal to <ul> elements, so bullet lists entered in the
    rich text editor render as numbers (1, 2, 3) instead of disc bullets on the
    recipe card. Quill correctly emits <ul> for bullet lists and <ol> for
    numbered lists; the bug is purely the typography plugin's layered default
    winning over the absence of an override.

    These rules are intentionally UNLAYERED (outside @layer utilities) and placed
    LAST in the file. Per the project's cascade learnings, unlayered CSS always
    beats @layer-wrapped CSS regardless of source order or specificity — so
    these win over the typography plugin's @layer-wrapped .prose ul/ol rules.

    Scoped to the recipe card surface (.bg-library-card dd) so the fix does not
    bleed into other prose surfaces elsewhere in the app. Keys off the <ul> vs
    <ol> tag Quill emitted, preserving the user's actual list-type choice:
      - <ul>  → disc bullets (unordered)
      - <ol>  → decimal numbers (ordered) */
.bg-library-card dd ul {
  list-style-type: disc;
}
.bg-library-card dd ol {
  list-style-type: decimal;
}

/* =====================================================================
   Recipe Print Card — additive LIGHT island (dark theme untouched)
   Tokens scoped under :root + .dark (mirrored) so the light island is
   available everywhere; utilities are intentionally unlayered so they
   win over @layer-wrapped base rules.
   ===================================================================== */
:root {
  --rpc-card: #ffffff;
  --rpc-ink: #1a1a1a;
  --rpc-blue: #1477be;
  --rpc-rule: #000000;
  --rpc-photo-frame: #1477be;
  --rpc-bullet: #1a1a1a;
  --rpc-font-slab: "Zilla Slab", "Roboto Slab", serif;
}
.dark {
  --rpc-card: #ffffff;
  --rpc-ink: #1a1a1a;
  --rpc-blue: #1477be;
  --rpc-rule: #000000;
  --rpc-photo-frame: #1477be;
  --rpc-bullet: #1a1a1a;
  --rpc-font-slab: "Zilla Slab", "Roboto Slab", serif;
}

.recipe-print-card {
  background: #ffffff;
  color: #1a1a1a;
  font-family: "Barlow", sans-serif;
}
.recipe-print-card-title {
  font-family: "Zilla Slab", "Roboto Slab", serif;
  font-weight: 700;
  text-align: center;
  font-variant: small-caps;
  border-bottom: 2px solid #000000;
  padding-bottom: 0.25rem;
}
.recipe-print-card-subtitle {
  font-weight: 700;
  text-align: center;
}
.recipe-print-card-variant-divider {
  font-family: "Zilla Slab", "Roboto Slab", serif;
  font-weight: 700;
  font-variant: small-caps;
  border-bottom: 2px solid #000000;
  text-align: left;
  padding-bottom: 0.25rem;
  margin-top: 1.5rem;
}
.recipe-print-card-heading {
  color: #1477be;
  font-weight: 700;
  font-size: 26px;
  text-transform: capitalize;
}
.recipe-print-card-square-bullet {
  list-style-type: square;
}
.recipe-print-card-square-bullet li::marker {
  color: #1a1a1a;
  font-size: 10px;
}
.recipe-print-card-specs-row {
  display: flex;
  align-items: baseline;
}
.recipe-print-card-specs-row .amount {
  font-weight: 600;
}
.recipe-print-card-specs-row .ingredient {
  margin-left: auto;
  text-align: right;
}
.recipe-print-card-photo {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border: 3px solid #1477be;
}
.recipe-print-card-footer-legal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.recipe-print-card-footer-legal .left {
  color: #1477be;
  text-align: left;
}
.recipe-print-card-footer-legal .center {
  text-align: center;
}
.recipe-print-card-footer-legal .right {
  color: #1477be;
  text-align: right;
}

/* =====================================================================
   Patriotic Orientation Layout (additive — Legendary Starts Here)
   ADDITIVE only — no existing token altered. Rendered when a position's
   layoutStyle === 'orientation'. Sits on the dark roadhouse base
   (#121218 page, #191922 card) and adds tasteful patriotic accents
   (red/cream/blue, stars & stripes) — NOT a full flag wallpaper.
   All tokens + utilities prefixed `orientation-` / `patriotic-` so they
   never collide with existing classes (incl. legendary-hero-*).
   Gradients/glow are permitted ONLY inside Orientation surfaces (hero,
   mission headline, goal cards, CTA), matching the Be Legendary rule.
   ===================================================================== */
:root {
  /* Patriotic palette — additive. Patriotic blue is brighter than the
     brand navy (#0A2A5E / --secondary) for pop; red reuses brand primary;
     gold reuses in-training gold; cream reuses foreground. */
  --patriotic-red: 0.595 0.232 27; /* #E4002B — same as primary */
  --patriotic-blue: 0.42 0.16 264; /* #123A8A — brighter than brand navy */
  --patriotic-cream: 0.948 0.012 90; /* #F5F1E8 — same as foreground */
  --patriotic-gold: 0.801 0.171 75; /* #F2A900 — same as in-training */

  /* Hero — dark red→navy gradient stage. Distinct from the cinematic
     legendary-hero-backdrop; this is a flat presentation panel, not a
     photographic stage. Tuned so the diagonal flag-light stripes and
     star field read as subtle texture, not a flag wallpaper. */
  --orientation-hero-from: 0.46 0.21 25; /* deep red (primary-hover family) */
  --orientation-hero-to: 0.32 0.11 264; /* deep patriotic blue */
  --orientation-hero-stripe: 0.948 0.012 90; /* cream flag-light stripe */
  --orientation-hero-stripe-strength: 0.06; /* very faint diagonal stripes */
  --orientation-hero-star: 0.948 0.012 90; /* cream star field */
  --orientation-hero-star-strength: 0.08; /* subtle star scatter */

  /* Mission headline — giant gold Anton with soft glow. Reuses patriotic
     gold; glow is the only place a shadow halo is permitted here. */
  --orientation-mission-glow: 0.801 0.171 75; /* gold glow */
  --orientation-mission-glow-strength: 0.45;

  /* Goal cards — glowing navy surface with gold ★ corner. */
  --orientation-goal-card: 0.3 0.06 264; /* patriotic-blue-tinted card */
  --orientation-goal-card-border: 0.42 0.16 264; /* brighter blue edge */
  --orientation-goal-glow: 0.42 0.16 264; /* blue glow halo */
  --orientation-goal-glow-strength: 0.35;

  /* CTA — red ENTER button reuses primary; gold label reuses patriotic gold. */
  --orientation-cta-stripe-strength: 1; /* tri-stripe top edge, full opacity */
}
.dark {
  --patriotic-red: 0.595 0.232 27;
  --patriotic-blue: 0.42 0.16 264;
  --patriotic-cream: 0.948 0.012 90;
  --patriotic-gold: 0.801 0.171 75;

  --orientation-hero-from: 0.46 0.21 25;
  --orientation-hero-to: 0.32 0.11 264;
  --orientation-hero-stripe: 0.948 0.012 90;
  --orientation-hero-stripe-strength: 0.06;
  --orientation-hero-star: 0.948 0.012 90;
  --orientation-hero-star-strength: 0.08;

  --orientation-mission-glow: 0.801 0.171 75;
  --orientation-mission-glow-strength: 0.45;

  --orientation-goal-card: 0.3 0.06 264;
  --orientation-goal-card-border: 0.42 0.16 264;
  --orientation-goal-glow: 0.42 0.16 264;
  --orientation-goal-glow-strength: 0.35;

  --orientation-cta-stripe-strength: 1;
}

/* Color utilities — patriotic palette (additive, prefixed) */
.text-patriotic-red {
  color: oklch(var(--patriotic-red));
}
.bg-patriotic-red {
  background-color: oklch(var(--patriotic-red));
}
.border-patriotic-red {
  border-color: oklch(var(--patriotic-red));
}
.text-patriotic-blue {
  color: oklch(var(--patriotic-blue));
}
.bg-patriotic-blue {
  background-color: oklch(var(--patriotic-blue));
}
.border-patriotic-blue {
  border-color: oklch(var(--patriotic-blue));
}
.text-patriotic-cream {
  color: oklch(var(--patriotic-cream));
}
.bg-patriotic-cream {
  background-color: oklch(var(--patriotic-cream));
}
.border-patriotic-cream {
  border-color: oklch(var(--patriotic-cream));
}
.text-patriotic-gold {
  color: oklch(var(--patriotic-gold));
}
.bg-patriotic-gold {
  background-color: oklch(var(--patriotic-gold));
}
.border-patriotic-gold {
  border-color: oklch(var(--patriotic-gold));
}

/* ── (1) Bunting strip ──────────────────────────────────────────────
   Row of red/cream/blue half-round scallops rendered under the nav /
   above the hero. Pure CSS — repeating-radial-gradient scallops on a
   thin band; no images. The three colors rotate per scallop via the
   gradient stops. Mobile-first: scallop size scales down on small
   screens via the 16px base; the band is 14px tall. */
.orientation-bunting {
  height: 14px;
  background-color: oklch(var(--patriotic-red));
  background-image: repeating-linear-gradient(
    90deg,
    oklch(var(--patriotic-red)) 0,
    oklch(var(--patriotic-red)) 16px,
    oklch(var(--patriotic-cream)) 16px,
    oklch(var(--patriotic-cream)) 32px,
    oklch(var(--patriotic-blue)) 32px,
    oklch(var(--patriotic-blue)) 48px
  );
  /* scallop the bottom edge with cream half-rounds that punch up into
     the band, then mask so only the bottom half shows */
  -webkit-mask-image: radial-gradient(
    circle 8px at 8px 14px,
    transparent 0,
    transparent 7px,
    black 8px
  );
  mask-image: radial-gradient(
    circle 8px at 8px 14px,
    transparent 0,
    transparent 7px,
    black 8px
  );
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 16px 14px;
  mask-size: 16px 14px;
}

/* ── (2) Hero panel ──────────────────────────────────────────────────
   Rounded panel, dark red→navy gradient, faint diagonal flag-light
   stripes + subtle star field. Composed from two pseudo-layers over the
   gradient base. Mobile-first: full-width on phone, max-width on larger
   screens; content stacks single-column. */
.orientation-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background-color: oklch(var(--orientation-hero-to));
  background-image: linear-gradient(
    135deg,
    oklch(var(--orientation-hero-from)) 0%,
    oklch(var(--orientation-hero-to)) 100%
  );
}
/* faint diagonal flag-light stripes — cream, very low opacity, repeating */
.orientation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    oklch(
        var(--orientation-hero-stripe) /
        var(--orientation-hero-stripe-strength)
      )
      0,
    oklch(
        var(--orientation-hero-stripe) /
        var(--orientation-hero-stripe-strength)
      )
      2px,
    transparent 2px,
    transparent 22px
  );
}
/* subtle star field — tiny cream dots scattered via radial-gradient repeat */
.orientation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(
      circle 1px at 12% 18%,
      oklch(
          var(--orientation-hero-star) /
          var(--orientation-hero-star-strength)
        )
        0,
      transparent 1.5px
    ),
    radial-gradient(
      circle 1px at 78% 12%,
      oklch(
          var(--orientation-hero-star) /
          var(--orientation-hero-star-strength)
        )
        0,
      transparent 1.5px
    ),
    radial-gradient(
      circle 1px at 42% 32%,
      oklch(
          var(--orientation-hero-star) /
          var(--orientation-hero-star-strength)
        )
        0,
      transparent 1.5px
    ),
    radial-gradient(
      circle 1px at 88% 38%,
      oklch(
          var(--orientation-hero-star) /
          var(--orientation-hero-star-strength)
        )
        0,
      transparent 1.5px
    ),
    radial-gradient(
      circle 1px at 22% 62%,
      oklch(
          var(--orientation-hero-star) /
          var(--orientation-hero-star-strength)
        )
        0,
      transparent 1.5px
    );
  background-repeat: no-repeat;
}
.orientation-hero > * {
  position: relative;
  z-index: 1;
}

/* Hero kicker — Oswald uppercase, gold stars flanking, tracked wide */
.orientation-hero-kicker {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: oklch(var(--patriotic-cream));
}
/* Hero title — huge Anton display, cream */
.orientation-hero-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.95;
  color: oklch(var(--patriotic-cream));
}
/* Hero flag-bar underline — three solid segments red/cream/blue */
.orientation-flag-bar {
  display: flex;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.orientation-flag-bar > span:nth-child(1) {
  flex: 1;
  background-color: oklch(var(--patriotic-red));
}
.orientation-flag-bar > span:nth-child(2) {
  flex: 1;
  background-color: oklch(var(--patriotic-cream));
}
.orientation-flag-bar > span:nth-child(3) {
  flex: 1;
  background-color: oklch(var(--patriotic-blue));
}

/* ── (3) Mission band ───────────────────────────────────────────────
   Red/cream/blue tri-stripe top edge; centered Oswald "★ Our Mission ★"
   label; giant gold Anton headline with soft glow; ★★★★★ row; subtitle. */
.orientation-mission {
  position: relative;
  text-align: center;
  padding-top: 2rem;
}
.orientation-tri-stripe-top {
  display: flex;
  height: 6px;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 3px;
  overflow: hidden;
}
.orientation-tri-stripe-top > span:nth-child(1) {
  flex: 1;
  background-color: oklch(var(--patriotic-red));
}
.orientation-tri-stripe-top > span:nth-child(2) {
  flex: 1;
  background-color: oklch(var(--patriotic-cream));
}
.orientation-tri-stripe-top > span:nth-child(3) {
  flex: 1;
  background-color: oklch(var(--patriotic-blue));
}
.orientation-mission-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(var(--patriotic-cream));
}
.orientation-mission-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.98;
  color: oklch(var(--patriotic-gold));
  text-shadow: 0 0 14px
    oklch(
      var(--orientation-mission-glow) /
      var(--orientation-mission-glow-strength)
    ), 0 0 28px
    oklch(
      var(--orientation-mission-glow) /
      calc(var(--orientation-mission-glow-strength) * 0.6)
    );
}
.orientation-star-row {
  display: inline-flex;
  gap: 0.25rem;
  color: oklch(var(--patriotic-gold));
  letter-spacing: 0.1em;
}

/* ── (4) Section divider ────────────────────────────────────────────
   Number + Oswald uppercase heading + gold ★ + repeating red/cream/blue
   stripe rule. Mobile-first: number sits above heading on phone,
   inline on larger screens. */
.orientation-divider {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.orientation-divider-rule {
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    oklch(var(--patriotic-red)) 0,
    oklch(var(--patriotic-red)) 12px,
    oklch(var(--patriotic-cream)) 12px,
    oklch(var(--patriotic-cream)) 24px,
    oklch(var(--patriotic-blue)) 24px,
    oklch(var(--patriotic-blue)) 36px
  );
}
.orientation-divider-number {
  font-family: var(--font-display);
  color: oklch(var(--patriotic-gold));
  line-height: 1;
}
.orientation-divider-heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(var(--patriotic-cream));
}

/* ── (5) Core Value cards ───────────────────────────────────────────
   Card with tricolor left edge (red/cream/blue stacked), gold ★, value
   name, meaning. Then a red "…All With Purpose" capstone bar. */
.orientation-value-card {
  position: relative;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  padding-left: 1rem;
  overflow: hidden;
}
.orientation-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    oklch(var(--patriotic-red)) 0 33.33%,
    oklch(var(--patriotic-cream)) 33.33% 66.66%,
    oklch(var(--patriotic-blue)) 66.66% 100%
  );
}
.orientation-value-star {
  color: oklch(var(--patriotic-gold));
}
.orientation-value-name {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: oklch(var(--patriotic-cream));
}
.orientation-capstone {
  background-color: oklch(var(--patriotic-red));
  color: oklch(var(--patriotic-cream));
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius);
}

/* ── (6) Our Story ──────────────────────────────────────────────────
   Copy + emoji chips + a red "FOOD FOR ALL" poster with a star row and
   cream border. */
.orientation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: oklch(var(--patriotic-cream));
}
.orientation-poster {
  background-color: oklch(var(--patriotic-red));
  border: 2px solid oklch(var(--patriotic-cream));
  border-radius: var(--radius);
  color: oklch(var(--patriotic-cream));
  text-align: center;
}
.orientation-poster-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ── (6b) Our Story — uploaded poster photo (photo-dominant view) ───
   Plain responsive image for the Our Story section when the Library item
   has an uploaded photo. Centered, max-width 560px on desktop / full
   width on mobile, height auto, object-fit: contain (never cropped),
   rounded corners, subtle shadow. NO extra border or background — the
   poster already has its own frame. */
.orientation-our-story-photo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 560px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.35);
}

/* ── (7) Operational Goals ──────────────────────────────────────────
   Glowing navy cards, gold ★ corner, goal name + tag. */
.orientation-goal-card {
  position: relative;
  background-color: oklch(var(--orientation-goal-card));
  border: 1px solid oklch(var(--orientation-goal-card-border));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px oklch(var(--orientation-goal-glow) / 0.15), 0 0 18px
    oklch(var(--orientation-goal-glow) / var(--orientation-goal-glow-strength));
}
.orientation-goal-star {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: oklch(var(--patriotic-gold));
}
.orientation-goal-name {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(var(--patriotic-cream));
}
.orientation-goal-tag {
  display: inline-block;
  background-color: oklch(var(--patriotic-blue));
  color: oklch(var(--patriotic-cream));
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
}

/* ── (8) Priorities ─────────────────────────────────────────────────
   Two big "10" teaser cards — one red-topped, one blue-topped. */
.orientation-priority-card {
  position: relative;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.orientation-priority-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
}
.orientation-priority-card.is-red::before {
  background-color: oklch(var(--patriotic-red));
}
.orientation-priority-card.is-blue::before {
  background-color: oklch(var(--patriotic-blue));
}
.orientation-priority-card.is-gold::before {
  background-color: oklch(var(--patriotic-gold));
}
.orientation-priority-number {
  font-family: var(--font-display);
  line-height: 0.9;
  color: oklch(var(--patriotic-cream));
}

/* ── (9) BE LEGENDARY CTA ───────────────────────────────────────────
   Tri-stripe top + gold "★ Be Legendary" label + red ENTER button. */
.orientation-cta {
  position: relative;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}
.orientation-cta-label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(var(--patriotic-gold));
}
.orientation-cta-enter {
  display: inline-block;
  background-color: oklch(var(--patriotic-red));
  color: oklch(var(--patriotic-cream));
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius);
  padding: 0.6rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.orientation-cta-enter:hover {
  background-color: oklch(var(--primary-hover));
}

/* ── (10) Rules of the Road ─────────────────────────────────────────
   2-column grid (1-col on mobile) of small star-bulleted tiles. */
.orientation-rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .orientation-rules-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.orientation-rule-tile {
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem;
}
.orientation-rule-tile::before {
  content: "★ ";
  color: oklch(var(--patriotic-gold));
  font-family: var(--font-body);
}

/* Reduced motion — Orientation has no animations by design (doNotBuild:
   star-twinkle / waving-flag). Hover transition on ENTER is the only
   motion and is short enough to leave intact. */

/* The Lake Charles Quik Reference 'Food For All' code-drawn poster CSS block was removed
   when OurStorySection switched to rendering the uploaded poster photo
   directly (photo-dominant view) with a display-only text/chips fallback.
   See .orientation-our-story-photo above. */

/* =====================================================================
   Patriotic Category Detail Page (additive — Service / Food / Community
   Priorities detail screens)
   ADDITIVE only — no existing token altered. Mirrors the Orientation
   page's patriotic roadhouse treatment so the category detail screen
   that the Orientation priority cards link INTO matches the onboarding
   aesthetic. Sits on the dark roadhouse base and reuses the existing
   orientation-* / patriotic-* tokens; new utilities are prefixed
   `orientation-detail-*` so they never collide with existing classes.
   Gradients/glow are NOT introduced here — the detail screen uses the
   same flat patriotic accents (tri-stripe, flag-bar, gold star, tone
   top stripe) as the Orientation priority cards.
   ===================================================================== */

/* Page wrapper — dark roadhouse background, centered, generous vertical
   rhythm. max-w-3xl keeps the numbered card list readable on wide
   screens; the patriotic header spans the same width. */
.orientation-detail-page {
  background-color: oklch(var(--background));
}

/* Back-to-position button — mirrors .orientation-cta-enter (red fill,
   cream Oswald uppercase, tracked, hard radius) but sized as a small
   ghost-style affordance with an arrow. Reuses patriotic-red so it
   reads as the same "ENTER" affordance family from Orientation. */
.orientation-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: oklch(var(--patriotic-red));
  color: oklch(var(--patriotic-cream));
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.orientation-detail-back:hover {
  background-color: oklch(var(--primary-hover));
}

/* Patriotic header — tri-stripe top edge, Anton category-name headline,
   flag-bar underline. Sits on the dark roadhouse card surface so the
   tri-stripe and flag-bar read as crisp patriotic accents, not a full
   flag panel. */
.orientation-detail-header {
  position: relative;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}

/* Tri-stripe top edge — reuses the Orientation tri-stripe pattern
   (red/cream/blue, 6px). Kept as a dedicated class so the detail
   header can apply it independently of .orientation-tri-stripe-top's
   bottom margin. */
.orientation-detail-tri-stripe {
  display: flex;
  height: 6px;
  width: 100%;
}
.orientation-detail-tri-stripe > span:nth-child(1) {
  flex: 1;
  background-color: oklch(var(--patriotic-red));
}
.orientation-detail-tri-stripe > span:nth-child(2) {
  flex: 1;
  background-color: oklch(var(--patriotic-cream));
}
.orientation-detail-tri-stripe > span:nth-child(3) {
  flex: 1;
  background-color: oklch(var(--patriotic-blue));
}

/* Anton category-name headline — cream, uppercase, tight line-height.
   Mirrors .orientation-hero-title sizing on a smaller scale. */
.orientation-detail-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.95;
  color: oklch(var(--patriotic-cream));
}

/* Pacifico script flourish — a small handwritten accent under the
   headline. Used sparingly (one word) per the design contract. */
.orientation-detail-flourish {
  font-family: var(--font-script);
  color: oklch(var(--patriotic-gold));
  line-height: 1.1;
}

/* Flag-bar underline — three solid segments red/cream/blue. Reuses the
   Orientation flag-bar pattern; dedicated class so the detail header
   can size it independently. */
.orientation-detail-flag-bar {
  display: flex;
  height: 4px;
  width: 100%;
  max-width: 16rem;
  border-radius: 2px;
  overflow: hidden;
}
.orientation-detail-flag-bar > span:nth-child(1) {
  flex: 1;
  background-color: oklch(var(--patriotic-red));
}
.orientation-detail-flag-bar > span:nth-child(2) {
  flex: 1;
  background-color: oklch(var(--patriotic-cream));
}
.orientation-detail-flag-bar > span:nth-child(3) {
  flex: 1;
  background-color: oklch(var(--patriotic-blue));
}

/* Cover photo frame — dark roadhouse frame around the optional category
   cover photo. Sits above the tri-stripe header so the photo reads as
   a banner, not a card. */
.orientation-detail-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid oklch(var(--border));
  background-color: oklch(var(--card));
}
.orientation-detail-cover img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Numbered priority item card — mirrors .orientation-priority-card
   (tone top stripe, Anton numeral, cream title) but laid out as a
   horizontal row: big Anton index numeral on the left, thumbnail +
   Oswald title + tag preview on the right, gold star accent, optional
   seasonal badge. Tone is set via .is-red / .is-blue / .is-gold on
   the card (same modifiers as .orientation-priority-card). */
.orientation-detail-item-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s
    cubic-bezier(0.4, 0, 0.2, 1);
}
.orientation-detail-item-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 1;
}
.orientation-detail-item-card.is-red::before {
  background-color: oklch(var(--patriotic-red));
}
.orientation-detail-item-card.is-blue::before {
  background-color: oklch(var(--patriotic-blue));
}
.orientation-detail-item-card.is-gold::before {
  background-color: oklch(var(--patriotic-gold));
}
.orientation-detail-item-card:hover {
  border-color: oklch(var(--patriotic-blue) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--patriotic-blue) / 0.25);
}
.orientation-detail-item-card.is-red:hover {
  border-color: oklch(var(--patriotic-red) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--patriotic-red) / 0.25);
}
.orientation-detail-item-card.is-gold:hover {
  border-color: oklch(var(--patriotic-gold) / 0.6);
  box-shadow: 0 0 0 1px oklch(var(--patriotic-gold) / 0.25);
}

/* Numeral column — big Anton index numeral in the category's tone
   color, cream fallback. Sits on a dark navy backdrop so the numeral
   pops. Vertically centered, fixed width so single and double digits
   align. */
.orientation-detail-item-number-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.5rem;
  background-color: oklch(var(--nav));
  padding-top: 6px; /* clear the tone top stripe */
}
@media (min-width: 640px) {
  .orientation-detail-item-number-col {
    width: 5.5rem;
  }
}
.orientation-detail-item-number {
  font-family: var(--font-display);
  line-height: 0.9;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-item-card.is-red .orientation-detail-item-number {
  color: oklch(var(--patriotic-red));
}
.orientation-detail-item-card.is-blue .orientation-detail-item-number {
  color: oklch(var(--patriotic-blue));
}
.orientation-detail-item-card.is-gold .orientation-detail-item-number {
  color: oklch(var(--patriotic-gold));
}

/* Body column — thumbnail + title + tag preview + seasonal badge.
   Padding-top clears the tone top stripe. min-w-0 lets the title
   truncate on narrow screens. */
.orientation-detail-item-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.875rem 1rem;
  padding-top: calc(0.875rem + 6px);
}

/* Thumbnail — 48px square, navy backdrop, object-cover. Falls back to
   an Anton initial in the tone color when no photo is set. */
.orientation-detail-item-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: oklch(var(--nav));
}
.orientation-detail-item-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.orientation-detail-item-thumb-initial {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-item-card.is-red .orientation-detail-item-thumb-initial {
  color: oklch(var(--patriotic-red));
}
.orientation-detail-item-card.is-blue .orientation-detail-item-thumb-initial {
  color: oklch(var(--patriotic-blue));
}
.orientation-detail-item-card.is-gold .orientation-detail-item-thumb-initial {
  color: oklch(var(--patriotic-gold));
}

/* Title + tag preview stack — Oswald uppercase title, Barlow tag
   preview. min-w-0 lets both truncate. */
.orientation-detail-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.orientation-detail-item-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-item-meta {
  font-family: var(--font-body);
  color: oklch(var(--muted-foreground));
}

/* Gold star accent — small ★ in the tone column header, mirroring the
   Orientation goal-card star. Sits above the numeral. */
.orientation-detail-item-star {
  color: oklch(var(--patriotic-gold));
  line-height: 1;
}

/* Empty + not-found states — patriotic-styled panels that match the
   header treatment without the full card chrome. */
.orientation-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  background-color: oklch(var(--card));
  border: 1px dashed oklch(var(--border));
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
}
.orientation-detail-empty-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-empty-body {
  font-family: var(--font-body);
  color: oklch(var(--muted-foreground));
  max-width: 20rem;
}

.orientation-detail-not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.orientation-detail-not-found-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-not-found-body {
  font-family: var(--font-body);
  color: oklch(var(--muted-foreground));
}

/* Skeletons — match the patriotic header + numbered card shapes so the
   loading state reads as the same surface filling in. */
.orientation-detail-header-skeleton {
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.orientation-detail-item-skeleton {
  display: flex;
  background-color: oklch(var(--card));
  border: 1px solid oklch(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.orientation-detail-item-skeleton-num {
  flex-shrink: 0;
  width: 4.5rem;
  background-color: oklch(var(--nav));
}
@media (min-width: 640px) {
  .orientation-detail-item-skeleton-num {
    width: 5.5rem;
  }
}

/* Fix: bare <li> (display:list-item) inside a display:flex <ul> can
   collapse subsequent rows in some browsers, leaving only item #1
   visible. These additive rules normalize the list + row to block
   layout so every numbered patriotic card renders. */
.orientation-detail-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orientation-detail-item-row {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Recipe content sections (inside .orientation-detail-item-card) ──
   These small helpers style the recipe / item-detail content rendered
   inside a patriotic tone-stripe card. They replace the old
   .recipe-print-card-* classes (which were tied to the white print-faithful
   look) so the recipe sections read on the dark roadhouse card surface.
   Kept adjacent to the .orientation-detail-* block per the restyle brief. */

/* Section heading — Oswald uppercase, tracked, in the card's tone color.
   Inherits the tone from the enclosing .is-red / .is-blue / .is-gold card
   so Glassware / Specs / Assembly / Garnish / Notes / Equipment / etc. all
   read in the same tone as the top stripe. */
.recipe-section-heading {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: oklch(var(--patriotic-cream));
}
.orientation-detail-item-card.is-red .recipe-section-heading {
  color: oklch(var(--patriotic-red));
}
.orientation-detail-item-card.is-blue .recipe-section-heading {
  color: oklch(var(--patriotic-blue));
}
.orientation-detail-item-card.is-gold .recipe-section-heading {
  color: oklch(var(--patriotic-gold));
}

/* Square-bullet list — Barlow body, cream text, tone square bullets. */
.recipe-square-bullet {
  list-style: square;
  color: oklch(var(--patriotic-cream));
}
.recipe-square-bullet > li {
  font-family: var(--font-body);
  color: oklch(var(--foreground));
}
.recipe-square-bullet > li::marker {
  color: oklch(var(--patriotic-gold));
}
.orientation-detail-item-card.is-red .recipe-square-bullet > li::marker {
  color: oklch(var(--patriotic-red));
}
.orientation-detail-item-card.is-blue .recipe-square-bullet > li::marker {
  color: oklch(var(--patriotic-blue));
}
.orientation-detail-item-card.is-gold .recipe-square-bullet > li::marker {
  color: oklch(var(--patriotic-gold));
}

/* Specs row — amount on the left (nowrap), ingredient right-aligned. */
.recipe-specs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.recipe-specs-row .amount {
  font-weight: 600;
  color: oklch(var(--patriotic-cream));
}
.recipe-specs-row .ingredient {
  text-align: right;
  color: oklch(var(--foreground));
}

/* Variant divider — Oswald uppercase label with a tone underline rule. */
.recipe-variant-divider {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: oklch(var(--patriotic-cream));
  padding-bottom: 0.4rem;
  border-bottom: 2px solid oklch(var(--border));
}
.orientation-detail-item-card.is-red .recipe-variant-divider {
  border-bottom-color: oklch(var(--patriotic-red) / 0.5);
}
.orientation-detail-item-card.is-blue .recipe-variant-divider {
  border-bottom-color: oklch(var(--patriotic-blue) / 0.5);
}
.orientation-detail-item-card.is-gold .recipe-variant-divider {
  border-bottom-color: oklch(var(--patriotic-gold) / 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
   Beverage Recipe Book page — drink-recipe-doc-* family.
   A clean printed-page look for beverage recipes (cocktails / mocktails),
   matching the Bubba's 33 recipe-book reference: a white paper sheet with
   a centered bold black all-caps underlined title, a centered non-alcoholic
   subtitle, a two-column body (text ~40% left, photo ~60% right with a
   thick accent border), accent-colored uppercase section headers, square
   ■-bullet lists, a two-column Specs alignment (amount left, ingredient
   right), an audio buttons row styled to fit the document, and a footer
   strip with the Bubba's 33 wordmark centered, tagline, copyright, and the
   category name bottom-left in accent color.

   The card is a single shared markup block (no separate desktop/phone
   variants): .drink-recipe-doc-grid is two columns at >=1024px and stacks
   to a single column at <1024px (title -> photo -> sections -> audio ->
   footer). No horizontal scroll on phone.

   Tokens: uses the existing --category-accent (raw hex, navy #0a2a5e
   default) and --category-accent-tint per-category accent tokens already
   declared in :root and .dark. The accent is a raw hex string, so
   consuming classes use the var directly (e.g.
   border-color: var(--category-accent)) — never wrap in oklch(). The
   paper surface is a clean white (#fff / very light paper tone) with dark
   ink, deliberately distinct from the app's dark theme so the card reads
   as a printed recipe page on a white sheet. DISJOINT from
   orientation-detail-*, recipe-*, and food-recipe-* classes — those keep
   using their own families unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* Card root — white paper surface, dark ink, printed-page feel.
   max-width container with padding and a soft box-shadow so it reads as
   a sheet of paper lifted off the page. */
.drink-recipe-doc {
  background-color: #ffffff;
  color: #111111;
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.75rem 1.75rem 1.25rem;
  box-shadow: 0 1px 2px oklch(0.2 0.01 280 / 0.16), 0 8px 24px
    oklch(0.2 0.01 280 / 0.12);
  overflow: hidden;
  font-family: var(--font-body);
}

/* Visibility toggle — desktop shows by default, phone is hidden; the
   @media (max-width: 1023px) block below flips them. Mirrors the
   food-recipe-desktop / food-recipe-phone pattern so only one layout
   renders per viewport (the markup emits both as siblings and CSS
   selects which is visible). .drink-recipe-doc-phone is an alias on the
   phone wrapper so the document-look classes apply inside it. */
.drink-recipe-phone,
.drink-recipe-doc-phone {
  display: none;
}
@media (max-width: 1023px) {
  .drink-recipe-desktop {
    display: none;
  }
  .drink-recipe-phone,
  .drink-recipe-doc-phone {
    display: block;
  }
}

/* Title — centered, bold, blue, all-caps, underlined with a thin accent
   rule beneath. The underline is a bottom border so it sits a hair below
   the text baseline like the reference page. Color and underline use
   var(--category-accent) so the title respects the per-category accent
   system (navy #0a2a5e default) and matches the section headers. */
.drink-recipe-doc-title {
  margin: 0 0 0.35rem;
  padding: 0 0 0.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--category-accent);
  border-bottom: 1.5px solid var(--category-accent);
}

/* Subtitle — centered, smaller, muted ink for the non-alcoholic note. */
.drink-recipe-doc-subtitle {
  margin: 0 0 1.1rem;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #555555;
}

/* Two-column body — text left ~40%, photo right ~60% at >=1024px.
   Single-column stack at <1024px (title -> photo -> sections -> audio ->
   footer). When there is no photo, the markup omits the photo column and
   the text column expands to full width automatically (grid falls back
   to a single 1fr track). The is-split modifier activates the two-column
   track at >=1024px when a photo is present; is-single is the explicit
   no-photo modifier that pins a single full-width text track at every
   viewport so the layout never silently falls through. */
.drink-recipe-doc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.drink-recipe-doc-grid.is-single {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .drink-recipe-doc-grid.is-split {
    grid-template-columns: 40% 60%;
    gap: 1.75rem;
  }
}

/* Left text column. */
.drink-recipe-doc-text {
  min-width: 0;
}

/* Right photo column — thick accent border (var(--category-accent)),
   object-contain at natural aspect, fills the column height so the
   border frames the whole right side. */
.drink-recipe-doc-photo {
  border: 8px solid var(--category-accent);
  background-color: #ffffff;
  padding: 0;
  line-height: 0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drink-recipe-doc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Section block — vertical rhythm between Glassware / Specs / Assembly /
   Garnish. */
.drink-recipe-doc-section {
  margin: 0 0 1.1rem;
}
.drink-recipe-doc-section:last-child {
  margin-bottom: 0;
}

/* Section header — accent color via var(--category-accent), bold,
   uppercase, tracked. Falls back to the navy default when no accent is
   set (the variable itself carries the default). */
.drink-recipe-doc-section-header {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--category-accent);
}

/* List — square ■ bullets via list-style:none and a ::before square
   character. Used for Glassware, Assembly, and Garnish lists. */
.drink-recipe-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drink-recipe-doc-list > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.18rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-doc-list > li::before {
  content: "\25A0";
  flex-shrink: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  color: #111111;
}

/* Specs — single vertical column. Each row lists the measurement FIRST
   (larger and bold) then the ingredient name on the same line (inline
   flow), matching the Bubba's 33 recipe-book reference. The markup emits
   the amount span before the ingredient span, so removing the two-column
   grid lets them flow inline on one line. Shared by desktop
   (DrinkDocStandard) and phone (DrinkDocStandardPhone) — both use the
   same .drink-recipe-doc-specs classes. */
.drink-recipe-doc-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}
.drink-recipe-doc-spec-row {
  display: block;
}
.drink-recipe-doc-spec-amount {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  white-space: nowrap;
  color: #111111;
}
.drink-recipe-doc-spec-amount + .drink-recipe-doc-spec-ingredient {
  margin-left: 0.5rem;
}
.drink-recipe-doc-spec-ingredient {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}

/* Audio buttons row — subtle bordered pills that fit the document look.
   The buttons themselves are rendered by the markup engineer; this
   styles the row container and the pill buttons inside it. */
.drink-recipe-doc-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
.drink-recipe-doc-audio button,
.drink-recipe-doc-audio .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--category-accent);
  background-color: #ffffff;
  border: 1px solid var(--category-accent);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.drink-recipe-doc-audio button:hover,
.drink-recipe-doc-audio .pill:hover {
  background-color: var(--category-accent);
  color: #ffffff;
}

/* Footer strip — top border, padding, flex layout. The Bubba's 33
   wordmark is centered, the tagline sits under it, the copyright line
   under that, and the category name is bottom-left in accent color. */
.drink-recipe-doc-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 1rem;
  padding: 0.9rem 0 0.25rem;
  border-top: 1.5px solid #000000;
  text-align: center;
}
.drink-recipe-doc-footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000000;
}
.drink-recipe-doc-footer-tagline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #444444;
}
.drink-recipe-doc-footer-copy {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: #777777;
}
.drink-recipe-doc-footer-category {
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--category-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Beverage Recipe Book page — PHONE layout (<1024px).
   The same .drink-recipe-doc-* classes apply; .drink-recipe-doc-grid
   becomes single-column (stacked) at <1024px via the media query above.
   This block tunes spacing and the footer category placement for the
   stacked view so nothing overflows and there is no horizontal scroll.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .drink-recipe-doc {
    max-width: 100%;
    padding: 1.25rem 1rem 1rem;
  }
  .drink-recipe-doc-title {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }
  .drink-recipe-doc-grid {
    gap: 1.25rem;
  }
  /* Stacked order: title -> photo -> sections -> audio -> footer.
     The photo column comes first in the stacked flow so it reads like
     the reference page on a phone. */
  .drink-recipe-doc-grid.is-split {
    grid-template-columns: 1fr;
  }
  .drink-recipe-doc-grid.is-split .drink-recipe-doc-photo {
    order: -1;
  }
  /* On phone the footer category sits above the brand line (left-aligned)
     rather than absolutely positioned, to avoid overlap with the
     centered wordmark on a narrow sheet. */
  .drink-recipe-doc-footer {
    align-items: stretch;
  }
  .drink-recipe-doc-footer-category {
    position: static;
    text-align: left;
    margin-bottom: 0.4rem;
  }
  .drink-recipe-doc-footer-brand,
  .drink-recipe-doc-footer-tagline,
  .drink-recipe-doc-footer-copy {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Bulk-mix / variant / quality identifier — RESTORED legacy drink-recipe-*
   classes. These code paths (bulk-mix desktop + phone, variants, quality
   identifier) are EXCLUDED from the new Bubba's 33 document-look restyle
   (doNotBuild: variants section restyle). They are styled here on the same
   white paper surface as the .drink-recipe-doc-* family so they render
   legibly and correctly laid out, but they do NOT adopt the new document
   look. Dark ink (#111111), accent color via var(--category-accent) for
   headings/labels, square-bullet lists, two-column specs rows with
   amount/ingredient alignment, and a phone stack with section labels and
   amount pills. Layout patterns reference the .food-recipe-* paper-surface
   classes above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop / bulk classes ──────────────────────────────────────────── */

/* Column-header band — accent strip across the top of the bulk-mix body
   (EQUIPMENT | METHOD | BATCH). Mirrors .food-recipe-column-band: solid
   accent fill, white Oswald uppercase labels, 3-track grid. */
.drink-recipe-column-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background-color: var(--category-accent);
  color: #ffffff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.45rem 1rem;
}
.drink-recipe-column-band > .label-center {
  text-align: center;
}
.drink-recipe-column-band > .label-right {
  text-align: right;
}

/* Two-column body — Equipment + Bulk Mix + Shelf Life on the left,
   Method (Assembly) on the right. Stacks on narrow viewports. Mirrors
   .food-recipe-body / .food-recipe-body.is-split. */
.drink-recipe-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 720px) {
  .drink-recipe-body.is-split {
    grid-template-columns: 55% 45%;
  }
  .drink-recipe-body.is-split > * + * {
    border-left: 1px solid #e6e6e6;
  }
}
.drink-recipe-column {
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}

/* Section heading — accent-colored Oswald uppercase label for Equipment,
   Assembly, Specs, Notes, etc. Mirrors .drink-recipe-doc-section-header
   but used by the bulk-mix / variant / quality paths. */
.drink-recipe-section-heading {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--category-accent);
}

/* Specs row — ■-bullet ingredient on the left, amount right-aligned in
   its own column. Subtle row separators. Mirrors .food-recipe-row. */
.drink-recipe-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid #e6e6e6;
}
.drink-recipe-row:last-child {
  border-bottom: none;
}
.drink-recipe-row .item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-row .item::before {
  content: "\25A0";
  flex-shrink: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  color: #111111;
}
.drink-recipe-row .amount {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
  white-space: nowrap;
  color: #111111;
}

/* Procedure steps — numbered ordered list, Barlow body, accent markers.
   Mirrors .food-recipe-steps. */
.drink-recipe-steps {
  list-style: decimal;
  padding-left: 1.15rem;
  margin: 0;
}
.drink-recipe-steps > li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
  padding: 0.16rem 0;
}
.drink-recipe-steps > li::marker {
  color: var(--category-accent);
}

/* Equipment list — square-bullet unordered list. Mirrors
   .drink-recipe-doc-list. */
.drink-recipe-equipment {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drink-recipe-equipment > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.18rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-equipment > li::before {
  content: "\25A0";
  flex-shrink: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  color: #111111;
}

/* Meta stack — Bulk Mix / Shelf Life block under the title band.
   Right-aligned label/value rows. Mirrors .food-recipe-meta. */
.drink-recipe-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  margin-top: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid #e6e6e6;
  font-family: var(--font-body);
  color: #111111;
}
.drink-recipe-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.drink-recipe-meta-row .label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--category-accent);
}
.drink-recipe-meta-row .value {
  font-weight: 600;
  color: #111111;
}

/* Variant block — full-width section below the two-column body. Accent
   label with an accent underline rule, then Specs + Assembly in a
   two-column split when both are present. Used by both the standard
   drink variants and the bulk-mix Specs block. */
.drink-recipe-variant {
  margin: 1.1rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid #e6e6e6;
}
.drink-recipe-variant-label {
  margin: 0 0 0.6rem;
  padding-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--category-accent);
  border-bottom: 1.5px solid var(--category-accent);
}

/* Variant body — two-column split (Specs left, Assembly right) when both
   are present, single column otherwise. Mirrors .drink-recipe-body. */
.drink-variant-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 720px) {
  .drink-variant-body.is-split {
    grid-template-columns: 55% 45%;
  }
  .drink-variant-body.is-split > * + * {
    border-left: 1px solid #e6e6e6;
  }
}
.drink-variant-column {
  padding: 0.6rem 0.9rem 0.8rem;
  min-width: 0;
}
.drink-variant-column:first-child {
  padding-left: 0;
}
.drink-variant-column:last-child {
  padding-right: 0;
}

/* Quality identifier checklist — square-bullet list of ✓-style quality
   markers. Mirrors .drink-recipe-doc-list with a check-tinted bullet. */
.drink-recipe-quality {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drink-recipe-quality > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.18rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-quality > li::before {
  content: "\2713";
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--category-accent);
}

/* ── Phone classes ───────────────────────────────────────────────────── */

/* Phone section label — accent-colored Oswald uppercase label that opens
   each stacked section on phone. Mirrors .drink-recipe-doc-section-header
   but for the phone stack. */
.drink-recipe-phone-section-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--category-accent);
}

/* Phone specs row — item name on the left with its amount as a bold
   accent pill on the right. Pill wraps to its own line if long. Tap
   target >=44px. Mirrors the food-recipe phone row pattern. */
.drink-recipe-phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #e6e6e6;
}
.drink-recipe-phone-row:last-child {
  border-bottom: none;
}
.drink-recipe-phone-row .item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: #111111;
}
.drink-recipe-phone-row .amount-pill {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffffff;
  background-color: var(--category-accent);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Phone variant block — full-width, accent label, then Specs (item +
   amount pill rows) and Assembly (numbered steps) stacked. */
.drink-recipe-phone-variant {
  margin: 1rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid #e6e6e6;
}
.drink-recipe-phone-variant-label {
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--category-accent);
  border-bottom: 1.5px solid var(--category-accent);
}

/* Phone procedure container — wraps the numbered Assembly steps on phone. */
.drink-recipe-phone-procedure {
  margin: 0.2rem 0 0;
}

/* Phone steps — numbered ordered list for Assembly on phone. Mirrors
   .drink-recipe-steps. */
.drink-recipe-phone-steps {
  list-style: decimal;
  padding-left: 1.15rem;
  margin: 0;
}
.drink-recipe-phone-steps > li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
  padding: 0.16rem 0;
}
.drink-recipe-phone-steps > li::marker {
  color: var(--category-accent);
}

/* Phone quality identifier checklist — square-bullet list on phone.
   Mirrors .drink-recipe-quality. */
.drink-recipe-phone-quality {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drink-recipe-phone-quality > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.18rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-phone-quality > li::before {
  content: "\2713";
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--category-accent);
}

/* Phone equipment list — square-bullet unordered list on phone. Mirrors
   .drink-recipe-equipment. */
.drink-recipe-phone-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drink-recipe-phone-list > li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.18rem 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111111;
}
.drink-recipe-phone-list > li::before {
  content: "\25A0";
  flex-shrink: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  color: #111111;
}

/* Phone meta stack — Bulk Mix / Shelf Life as stacked badges on phone. */
.drink-recipe-phone-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}
.drink-recipe-phone-meta-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background-color: #f5f5f5;
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #111111;
}
.drink-recipe-phone-meta-badge .label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--category-accent);
}
.drink-recipe-phone-meta-badge .value {
  font-weight: 600;
  color: #111111;
}
.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground *::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground *::selection {
  color: oklch(var(--primary-foreground));
}
.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.selection\:text-primary-foreground::-moz-selection {
  color: oklch(var(--primary-foreground));
}
.selection\:text-primary-foreground::selection {
  color: oklch(var(--primary-foreground));
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: oklch(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground\/60::-moz-placeholder {
  color: oklch(var(--muted-foreground) / 0.6);
}
.placeholder\:text-muted-foreground\/60::placeholder {
  color: oklch(var(--muted-foreground) / 0.6);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2::after {
  content: var(--tw-content);
  inset: -0.5rem;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-\[2px\]::after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  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));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.focus-within\:border-primary\/60:focus-within {
  border-color: oklch(var(--primary) / 0.6);
}
.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.hover\:border-primary\/40:hover {
  border-color: oklch(var(--primary) / 0.4);
}
.hover\:border-primary\/50:hover {
  border-color: oklch(var(--primary) / 0.5);
}
.hover\:border-primary\/60:hover {
  border-color: oklch(var(--primary) / 0.6);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-background:hover {
  background-color: oklch(var(--background));
}
.hover\:bg-black\/20:hover {
  background-color: rgb(0 0 0 / 0.2);
}
.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted\/30:hover {
  background-color: oklch(var(--muted) / 0.3);
}
.hover\:bg-muted\/40:hover {
  background-color: oklch(var(--muted) / 0.4);
}
.hover\:bg-muted\/50:hover {
  background-color: oklch(var(--muted) / 0.5);
}
.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary-hover) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/10:hover {
  background-color: oklch(var(--primary) / 0.1);
}
.hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
  background-color: oklch(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-accent:hover {
  background-color: oklch(var(--sidebar-accent));
}
.hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}
.hover\:text-destructive:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: oklch(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary) / var(--tw-text-opacity, 1));
}
.hover\:text-primary-foreground:hover {
  color: oklch(var(--primary-foreground));
}
.hover\:text-primary-hover:hover {
  --tw-text-opacity: 1;
  color: oklch(var(--primary-hover) / var(--tw-text-opacity, 1));
}
.hover\:text-sidebar-accent-foreground:hover {
  color: oklch(var(--sidebar-accent-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
  --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-4: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(4px + 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\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:after\:bg-sidebar-border:hover::after {
  content: var(--tw-content);
  background-color: oklch(var(--sidebar-border));
}
.focus\:z-10:focus {
  z-index: 10;
}
.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: oklch(var(--accent-foreground));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --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);
}
.focus\:ring-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus\:ring-offset-background:focus {
  --tw-ring-offset-color: oklch(var(--background));
}
.focus-visible\:z-10:focus-visible {
  z-index: 10;
}
.focus-visible\:border-primary:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.focus-visible\:border-ring:focus-visible {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.focus-visible\:text-primary-hover:focus-visible {
  --tw-text-opacity: 1;
  color: oklch(var(--primary-hover) / var(--tw-text-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-1:focus-visible {
  outline-width: 1px;
}
.focus-visible\:outline-ring:focus-visible {
  outline-color: oklch(var(--ring) / 1);
}
.focus-visible\:ring-1:focus-visible {
  --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(1px + 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);
}
.focus-visible\:ring-2:focus-visible {
  --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);
}
.focus-visible\:ring-4:focus-visible {
  --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(4px + 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);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --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(3px + 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);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-destructive\/20:focus-visible {
  --tw-ring-color: oklch(var(--destructive) / 0.2);
}
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--primary) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-ring\/50:focus-visible {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.focus-visible\:ring-white:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: oklch(var(--background));
}
.focus-visible\:ring-offset-card:focus-visible {
  --tw-ring-offset-color: oklch(var(--card));
}
.focus-visible\:ring-offset-nav:focus-visible {
  --tw-ring-offset-color: oklch(var(--nav));
}
.active\:translate-y-px:active {
  --tw-translate-y: 1px;
  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));
}
.active\:bg-sidebar-accent:active {
  background-color: oklch(var(--sidebar-accent));
}
.active\:text-sidebar-accent-foreground:active {
  color: oklch(var(--sidebar-accent-foreground));
}
.active\:brightness-95:active {
  --tw-brightness: brightness(.95);
  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);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  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));
}
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-90 {
  opacity: 0.9;
}
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has(>svg) {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
  top: 0px;
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
  left: 0px;
  right: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"] {
  bottom: 0px;
}
.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"] {
  left: 0px;
}
.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"] {
  right: 0px;
}
.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"] {
  top: 0px;
}
.data-\[active\=true\]\:z-10[data-active="true"] {
  z-index: 10;
}
.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"] {
  margin-top: 6rem;
}
.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"] {
  margin-bottom: 6rem;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: 2.25rem;
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: 2rem;
}
.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"] {
  max-height: 80vh;
}
.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"] {
  max-height: 80vh;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"] {
  width: 75%;
}
.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"] {
  width: 75%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  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));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  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));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  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));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  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));
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  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));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  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 accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"] {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.data-\[variant\=outline\]\:border-l-0[data-variant="outline"] {
  border-left-width: 0px;
}
.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"] {
  border-top-width: 1px;
}
.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"] {
  border-right-width: 1px;
}
.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"] {
  border-left-width: 1px;
}
.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"] {
  border-bottom-width: 1px;
}
.data-\[active\=true\]\:border-ring[data-active="true"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-primary[data-state="checked"] {
  --tw-border-opacity: 1;
  border-color: oklch(var(--primary) / var(--tw-border-opacity, 1));
}
.data-\[active\=true\]\:bg-accent\/50[data-active="true"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[range-end\=true\]\:bg-primary[data-range-end="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[range-start\=true\]\:bg-primary[data-range-start="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: oklch(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: oklch(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--muted) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: oklch(var(--input));
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: 2rem;
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  font-weight: 500;
}
.data-\[active\=true\]\:text-accent-foreground[data-active="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[error\=true\]\:text-destructive[data-error="true"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"] {
  color: oklch(var(--primary-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: oklch(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: oklch(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[variant\=outline\]\:shadow-xs[data-variant="outline"] {
  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
  --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(3px + 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);
}
.data-\[active\=true\]\:ring-ring\/50[data-active="true"] {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > * {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > * {
  display: flex;
}
.\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > * {
  align-items: center;
}
.\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > * {
  gap: 0.5rem;
}
.\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > * {
  color: oklch(var(--destructive) / 0.9);
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  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));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  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));
}
.data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"] {
  border-left-width: 1px;
}
.data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"] {
  background-color: oklch(var(--sidebar-accent));
}
.data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"] {
  color: oklch(var(--sidebar-accent-foreground));
}
.data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[variant\=destructive\]\:focus\:bg-destructive\/10:focus[data-variant="destructive"] {
  background-color: oklch(var(--destructive) / 0.1);
}
.data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"] {
  --tw-text-opacity: 1;
  color: oklch(var(--destructive) / var(--tw-text-opacity, 1));
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  left: calc(var(--sidebar-width) * -1);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
  right: calc(var(--sidebar-width) * -1);
}
.group[data-side="left"] .group-data-\[side\=left\]\:-right-4 {
  right: -1rem;
}
.group[data-side="right"] .group-data-\[side\=right\]\:left-0 {
  left: 0px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full {
  top: 100%;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8 {
  margin-top: -2rem;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5 {
  margin-top: 0.375rem;
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block {
  display: block;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden {
  display: none;
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\] {
  width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px);
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
  width: 0px;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 {
  --tw-translate-x: 0px;
  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));
}
.group[data-side="right"] .group-data-\[side\=right\]\: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));
}
.group[data-state="open"] .group-data-\[state\=open\]\: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));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
  overflow: hidden;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden {
  overflow: hidden;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg {
  border-radius: var(--radius);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border {
  border-width: 1px;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border {
  border-width: 1px;
}
.group[data-side="left"] .group-data-\[side\=left\]\:border-r {
  border-right-width: 1px;
}
.group[data-side="right"] .group-data-\[side\=right\]\:border-l {
  border-left-width: 1px;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  --tw-border-opacity: 1;
  border-color: oklch(var(--ring) / var(--tw-border-opacity, 1));
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border {
  border-color: oklch(var(--sidebar-border));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover {
  background-color: oklch(var(--popover));
}
.group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center {
  text-align: center;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground {
  color: oklch(var(--popover-foreground));
}
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 {
  opacity: 0;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --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(3px + 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);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: oklch(var(--ring) / 0.5);
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-200 {
  transition-duration: 200ms;
  animation-duration: 200ms;
}
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after {
  content: var(--tw-content);
  left: 100%;
}
.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover {
  background-color: oklch(var(--sidebar));
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
  top: 0.375rem;
}
.peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5 {
  top: 0.625rem;
}
.peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1 {
  top: 0.25rem;
}
.peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
  color: oklch(var(--sidebar-accent-foreground));
}
.dark\:border-input:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:bg-destructive\/60:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.6);
}
.dark\:text-muted-foreground:is(.dark *) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-accent\/50:hover:is(.dark *) {
  background-color: oklch(var(--accent) / 0.5);
}
.dark\:hover\:text-accent-foreground:hover:is(.dark *) {
  color: oklch(var(--accent-foreground));
}
.dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) {
  --tw-ring-color: oklch(var(--destructive) / 0.4);
}
.dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *) {
  border-color: oklch(var(--input));
}
.dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--primary) / var(--tw-bg-opacity, 1));
}
.dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *) {
  background-color: oklch(var(--primary-foreground));
}
.dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *) {
  background-color: oklch(var(--foreground));
}
.dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *) {
  color: oklch(var(--foreground));
}
.dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20:focus[data-variant="destructive"]:is(.dark *) {
  background-color: oklch(var(--destructive) / 0.2);
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-80 {
    height: 20rem;
  }

  .sm\:max-h-80 {
    max-height: 20rem;
  }

  .sm\:min-h-\[22rem\] {
    min-height: 22rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-lg {
    max-width: 32rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:max-w-xl {
    max-width: 36rem;
  }

  .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\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-7 {
    padding-bottom: 1.75rem;
  }

  .sm\:pl-2\.5 {
    padding-left: 0.625rem;
  }

  .sm\:pr-2\.5 {
    padding-right: 0.625rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-8xl {
    font-size: 6rem;
    line-height: 1;
  }

  .sm\:text-\[0\.65rem\] {
    font-size: 0.65rem;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:leading-snug {
    line-height: 1.375;
  }

  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"] {
    max-width: 24rem;
  }

  .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
    max-width: 24rem;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:after\:hidden::after {
    content: var(--tw-content);
    display: none;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2 {
    margin: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0 {
    margin-left: 0px;
  }

  .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2 {
    margin-left: 0.5rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl {
    border-radius: 0.75rem;
  }

  .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}
@media (min-width: 1024px) {

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}
.\[\&\>button\]\:hidden>button {
  display: none;
}
.\[\&\>span\:last-child\]\:truncate>span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:translate-y-0\.5>svg {
  --tw-translate-y: 0.125rem;
  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));
}
.\[\&\>svg\]\:text-current>svg {
  color: currentColor;
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&\>svg\]\:text-sidebar-accent-foreground>svg {
  color: oklch(var(--sidebar-accent-foreground));
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  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));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --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));
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: oklch(var(--muted-foreground) / 1);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: oklch(var(--muted) / 1);
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: oklch(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
}
.\[\&_ol\]\:pl-4 ol {
  padding-left: 1rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
  --tw-text-opacity: 1;
  color: oklch(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}
.\[\&_ul\]\:pl-4 ul {
  padding-left: 1rem;
}
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: -0.5rem;
}
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: -0.5rem;
}
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-state=open]>.\[\[data-state\=open\]\>\&\]\: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));
}
a.\[a\&\]\:hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: oklch(var(--accent) / var(--tw-bg-opacity, 1));
}
a.\[a\&\]\:hover\:bg-destructive\/90:hover {
  background-color: oklch(var(--destructive) / 0.9);
}
a.\[a\&\]\:hover\:bg-primary\/90:hover {
  background-color: oklch(var(--primary) / 0.9);
}
a.\[a\&\]\:hover\:bg-secondary\/90:hover {
  background-color: oklch(var(--secondary) / 0.9);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: oklch(var(--accent-foreground));
}